:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --accent: #4f46e5;
  --accent-600: #4338ca;
  --accent-50: #eef2ff;
  --ok: #059669;
  --ok-50: #ecfdf5;
  --warn: #b45309;
  --warn-50: #fffbeb;
  --err: #dc2626;
  --err-50: #fef2f2;
  --info-50: #eff6ff;
  --radius: 8px;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--font); color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.row { display: flex; align-items: center; }
.gap-sm { gap: 6px; }
.wrap { flex-wrap: wrap; }

/* Botões e campos */
.btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
  border-radius: var(--radius); padding: 7px 14px; font: 500 14px/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-600); border-color: var(--accent-600); }
.btn-danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: #eef0f3; border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { display: flex; width: 100%; justify-content: flex-start; margin-bottom: 8px; padding: 10px 14px; }
.btn-google { display: flex; width: 100%; padding: 11px; font-size: 15px; border-color: var(--line-2); background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); gap: 10px; align-items: center; justify-content: center; font-weight: 500; }
.btn-google:hover { background: #f9fafb; }
.icon-btn { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { background: #eef0f3; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; font-size: 13px; }
input, select, textarea { width: 100%; font: 14px/1.4 var(--font); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-50); border-color: var(--accent); }
.select-sm { width: auto; padding: 4px 8px; font-size: 13px; }

.alert { padding: 10px 12px; border-radius: var(--radius); margin: 0 0 12px; }
.alert-error { background: var(--err-50); color: var(--err); }
.alert-warn { background: var(--warn-50); color: var(--warn); }
.pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #f3f4f6; color: var(--ink-2); margin: 2px 4px 2px 0; }
.pill-ok { background: var(--ok-50); color: var(--ok); }
.pill-warn { background: var(--warn-50); color: var(--warn); }
.pill-info { background: var(--accent-50); color: var(--accent-600); }
.badge { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: #f3f4f6; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Estrutura */
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 16px; }
.brand-sub { color: var(--muted); font-weight: 500; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: #fff; border-radius: 7px; font-weight: 700; font-size: 14px; }
.brand-mark.big { width: 44px; height: 44px; font-size: 22px; border-radius: 11px; }
.env-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; background: var(--warn-50); color: var(--warn); padding: 2px 6px; border-radius: 4px; }
.page { max-width: 1120px; margin: 0 auto; padding: 28px 24px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; background: #fafafa; }
.table tr.inactive td { color: var(--muted); }
.table .actions { text-align: right; white-space: nowrap; }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px rgba(17, 24, 39, 0.06); }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-brand p { margin: 2px 0 0; color: var(--muted); }
.dev-login .btn-block { gap: 8px; }

/* Modal e avisos */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.4); display: grid; place-items: center; z-index: 50; padding: 24px; }
.modal { background: var(--panel); border-radius: 14px; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); }
.modal-wide { max-width: 960px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; overflow: auto; }
.modal-foot, .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-actions { margin-top: 8px; }
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); max-width: 560px; cursor: pointer; }
.tooltip { position: fixed; z-index: 200; max-width: 280px; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 12.5px/1.4 var(--font);
  white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); animation: tooltip-in 0.12s ease-out; }
.tooltip-above { transform: translateY(-100%); }
@keyframes tooltip-in { from { opacity: 0; } }
.toast-success { background: #065f46; }
.toast-error { background: #991b1b; }
.toast-warn { background: #92400e; }

/* Diff */
.diff { font: 12.5px/1.5 var(--mono); background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 0; overflow: auto; margin: 6px 0 18px; }
.diff div { padding: 0 12px; white-space: pre-wrap; word-break: break-all; }
.diff .add { background: #e6ffec; color: #116329; }
.diff .del { background: #ffebe9; color: #82071e; }
.diff .hunk { color: var(--muted); background: #f1f5f9; }

/* Editor */
.editor { display: flex; flex-direction: column; height: 100vh; }
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: 52px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.toolbar-start, .toolbar-center, .toolbar-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.toolbar-center { gap: 8px; }
.toolbar-end { justify-content: flex-end; }
.toolbar .icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; flex: none; }
.toolbar .icon-btn .ico { width: 18px; height: 18px; }
.toolbar .btn .ico { width: 15px; height: 15px; }
.leftbar[hidden], .sidebar[hidden] { display: none; }
.panel-collapse { margin-left: auto; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #9ca3af; }
.panel-collapse:hover { color: var(--ink); }
.panel-collapse-start { margin-left: 0; margin-right: auto; }
.panel-collapse .ico { width: 16px; height: 16px; }
/* Painel recolhido: um trilho fino no lugar dele, com a alça no meio. Clicar em qualquer ponto abre. */
.panel-rail { flex: none; width: 16px; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--panel); border: 0; color: #9ca3af; transition: background 0.15s, color 0.15s; }
.panel-rail-left { border-right: 1px solid var(--line); }
.panel-rail-right { border-left: 1px solid var(--line); }
.panel-grip { display: grid; place-items: center; width: 12px; height: 56px; border-radius: 6px; background: #f1f2f5; transition: background 0.15s, color 0.15s, height 0.15s; }
.panel-grip .ico { width: 12px; height: 12px; }
.panel-rail:hover { background: var(--accent-50); color: var(--accent-600); }
.panel-rail:hover .panel-grip { background: var(--accent); color: #fff; height: 72px; }
.panel-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-resizer { flex: none; width: 0; position: relative; z-index: 3; }
.panel-resizer::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; }
.panel-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background 0.15s; pointer-events: none; }
.panel-resizer:hover::after { background: var(--accent); }
body.panel-resizing { cursor: col-resize; user-select: none; }
body.panel-resizing iframe { pointer-events: none; }
.toolbar-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }
.project-name { color: var(--ink); font-size: 15px; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.page-name { color: var(--muted); font-size: 12px; background: #f3f4f6; border-radius: 6px; padding: 2px 7px; flex: none; }
.page-select { flex: none; }
.segmented { display: flex; background: #f1f2f5; border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button, .segmented a { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 5px 10px; font: 500 13px var(--font); color: var(--muted); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.segmented button:hover:not(.on), .segmented a:hover:not(.on) { color: var(--ink); }
.segmented button.on, .segmented a.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1), 0 0 0 1px rgba(17, 24, 39, 0.04); }
.segmented .ico { width: 16px; height: 16px; }
.save-state { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 13px; font-weight: 500; padding: 0 6px; white-space: nowrap; }
.save-state .ico { width: 15px; height: 15px; }
.changes-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 99px; padding: 4px 11px 4px 4px; font: 500 13px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.changes-btn:hover, .changes-btn.on { border-color: var(--accent); color: var(--accent-600); }
.changes-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.changes-stale { color: var(--warn); font-weight: 600; }
.avatars { display: flex; align-items: center; margin-left: 4px; }
.avatars .avatar + .avatar { margin-left: -6px; }
.avatar { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-50); color: var(--accent-600); font-weight: 700; font-size: 13px; box-shadow: 0 0 0 2px var(--panel); flex: none; }
.avatar-btn { border: 0; padding: 0; cursor: pointer; font-family: var(--font); }
.avatar-btn:hover, .avatar-btn[aria-expanded='true'] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent-50); }
.dropdown-head { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; font-size: 13px; }
.avatar-other { background: #f3f4f6; color: var(--ink-2); cursor: help; }
.avatar-dot { position: absolute; left: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--panel); }
@media (max-width: 1360px) { .share-label { display: none; } }
@media (max-width: 1180px) { .seg-label { display: none; } }
.notice-bar { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 16px; min-height: 34px; border-bottom: 1px solid var(--line); font-size: 13px; }
.notice-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-bar .btn-sm { padding: 3px 10px; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 99px; padding: 4px 10px; font: 500 12px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.status-chip .ico { width: 14px; height: 14px; }
.status-chip:hover { border-color: var(--accent); color: var(--accent-600); }
.status-chip-info { background: var(--info-50); border-color: #bfdbfe; color: #1e3a8a; }
.changes-btn.pulse { border-color: var(--accent); color: var(--accent-600); animation: pulse 1.6s ease-out 3; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); } to { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); } }
.popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 280px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 12px; font-size: 13px; color: var(--ink); }
/* Ponte invisível sobre o vão, para o mouse chegar ao popover sem ele sumir. */
.popover::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.changes-anchor .popover { visibility: hidden; opacity: 0; transition: opacity 0.12s, visibility 0s linear 0.12s; }
.changes-anchor:hover .popover, .changes-anchor:focus-within .popover { visibility: visible; opacity: 1; transition-delay: 0.15s, 0.15s; }
.popover p { margin: 0 0 10px; line-height: 1.45; }
.popover-actions { display: flex; justify-content: flex-end; gap: 6px; }
.notice-warn { background: var(--warn-50); color: #78350f; }
.notice-info { background: var(--info-50); color: #1e3a8a; }
.workspace { flex: 1; display: flex; min-height: 0; }
.stage { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; background: #e5e7eb; min-width: 0; }
.frame-area { flex: 1; width: 100%; min-height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.frame-wrap { position: relative; overflow: hidden; background: #fff; flex: none; }
.frame-wrap iframe { border: 0; background: #fff; transform-origin: 0 0; display: block; }
.stage-tablet .frame-wrap, .stage-mobile .frame-wrap { margin-top: 16px; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px var(--line-2), 0 8px 30px rgba(0, 0, 0, 0.12); }
.crumbs { width: 100%; background: var(--panel); border-top: 1px solid var(--line); padding: 5px 12px; font: 12px var(--mono); white-space: nowrap; overflow-x: auto; }
.crumb { border: 0; background: transparent; font: inherit; color: var(--ink-2); padding: 1px 3px; border-radius: 4px; cursor: pointer; }
.crumb:hover { background: var(--accent-50); color: var(--accent-600); }
.crumbs span:last-child .crumb { color: var(--accent-600); font-weight: 600; }
.sidebar { width: 320px; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 8px; }
.tab { border: 0; background: transparent; padding: 10px 10px; font: 500 13px var(--font); color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.inspector, .inspector-empty { padding: 14px; overflow: auto; }
.inspector-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.el-label { font-weight: 600; color: var(--accent-600); word-break: break-all; }
.el-text { margin: 0 0 12px; padding: 8px 10px; background: #f9fafb; border-left: 3px solid var(--line-2); border-radius: 4px; color: var(--ink); max-height: 120px; overflow: auto; }
.props { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 14px 0 0; }
.props dt { color: var(--muted); }
.props dd { margin: 0; word-break: break-all; }
.bottom-panel { max-height: 40vh; display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line-2); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.05); }
.bottom-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.pending-drawer { overflow: auto; padding: 6px 14px 12px; }
.pending-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.pending-item.stale { background: var(--warn-50); margin: 4px -14px; padding: 8px 14px; }
.pending-item-main { flex: 1; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; min-width: 0; }
.pending-label { font-weight: 600; color: var(--ink); font-size: 13px; }
.pending-change { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.stale-box { width: 100%; font-size: 13px; }
.stale-box p { margin: 0 0 8px; }
.stale-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.stale-compare pre { margin: 2px 0 0; padding: 6px 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font: 12px/1.4 var(--mono); white-space: pre-wrap; max-height: 120px; overflow: auto; }
.diff-file h3 { font-size: 13px; }

/* v2: painéis do editor */
.tiny { font-size: 11.5px; }
.input-sm { padding: 4px 7px; font-size: 12.5px; border-radius: 6px; min-width: 0; }
.input-xs { width: 52px; padding: 2px 5px; font-size: 12px; border-radius: 5px; display: inline-block; margin: 0 3px; }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn.sm { font-size: 13px; padding: 1px 5px; }
.leftbar { flex: none; width: var(--left-w, 280px); background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.leftbar-body, .sidebar-body { flex: 1; overflow: auto; min-height: 0; }
.leftbar-body { padding: 8px; }
.sidebar { flex: none; width: var(--right-w, 340px); }
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.panel-section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-section h4 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.panel-section > * + * { margin-top: 6px; }
.radio { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; }
.radio input { width: auto; }
.check { display: inline-flex; align-items: center; gap: 4px; }
.check input[type=checkbox] { width: auto; }
.prop-grid { display: grid; gap: 6px; }
.prop-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px; font-size: 12.5px; }
.prop-row > span:first-child { color: var(--ink-2); }
.color-field { display: flex; gap: 6px; align-items: center; min-width: 0; }
.color-field input[type=color], .theme-row input[type=color] { width: 28px; height: 26px; padding: 1px; border-radius: 6px; flex: none; cursor: pointer; }
.box-row { display: grid; grid-template-columns: 60px repeat(4, 1fr); gap: 4px; align-items: center; font-size: 12.5px; margin-bottom: 4px; }
.rule { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fcfcfd; }
.rule-inactive { opacity: 0.55; }
.rule-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.rule-selector { color: var(--accent-600); font-weight: 600; word-break: break-all; }
.rule-media { font: 11.5px var(--mono); color: var(--warn); margin-bottom: 4px; }
.decl { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; align-items: center; margin-top: 3px; }
.decl-prop { font: 12px var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decl.overridden .decl-prop, .decl.overridden input:not([type=color]) { text-decoration: line-through; color: var(--muted); }
.decl-new { margin-top: 6px; }
.code-area { font: 12.5px/1.5 var(--mono); resize: vertical; }
.image-preview { background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; min-height: 100px; padding: 8px; }
.image-preview img { max-width: 100%; max-height: 160px; }
.upload { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; align-items: flex-start; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.asset { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.asset:disabled { cursor: default; }
.asset.on, .asset:hover:not(:disabled) { border-color: var(--accent); }
.asset img { width: 100%; height: 64px; object-fit: contain; background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% / 12px 12px; border-radius: 4px; }
.asset-name { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.asset-meta { font-size: 10.5px; color: var(--muted); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree-row { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px; border-radius: 7px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; }
.tree-row:hover { background: #f3f4f6; }
.tree-row.on { background: var(--accent-50); }
.tree-row.on .tree-label, .tree-row.on .tree-icon { color: var(--accent-600); }
.tree-row.is-hidden .tree-label, .tree-row.is-hidden .tree-text, .tree-row.is-hidden .tree-icon { opacity: 0.45; }
.tree-toggle { display: grid; place-items: center; border: 0; background: none; width: 16px; height: 16px; padding: 0; color: #9ca3af; cursor: pointer; flex: none; }
.tree-toggle .ico { width: 13px; height: 13px; transition: transform 0.15s; }
.tree-toggle .ico.open { transform: rotate(90deg); }
.tree-icon { width: 15px; height: 15px; color: #9ca3af; }
.tree-label { color: var(--ink); flex: 0 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tree-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12.5px; }
.tree-actions { margin-left: auto; display: flex; flex: none; padding-left: 4px; }
.tree-actions .icon-btn.sm { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--muted); }
.tree-actions .ico { width: 14px; height: 14px; }
.tree-eye { visibility: hidden; }
.tree-row:hover .tree-eye, .tree-row.on .tree-eye, .tree-row.is-hidden .tree-eye { visibility: visible; }
.theme { display: flex; flex-direction: column; gap: 5px; }
.theme-row { display: grid; grid-template-columns: 1fr auto 96px; gap: 5px; align-items: center; }
.theme-row:not(:has(input[type=color])) { grid-template-columns: 1fr 120px; }
.theme-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-menu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 4px; min-width: 210px; display: flex; flex-direction: column; }
.context-menu button { border: 0; background: none; text-align: left; padding: 6px 10px; border-radius: 6px; font: 13px var(--font); color: var(--ink); cursor: pointer; }
.context-menu button:hover:not(:disabled) { background: var(--accent-50); }
.context-menu button:disabled { color: var(--muted); opacity: 0.6; cursor: not-allowed; }
.context-menu button.danger { color: var(--err); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.history-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.history-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.history-row .pill { margin-left: 6px; }
.diff .file { font-weight: 700; color: var(--ink); background: #eef2f7; margin-top: 8px; }

/* v3 */
.prompt-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.prompt-text { font: 12.5px/1.5 var(--mono); background: #f9fafb; resize: vertical; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mode-switch button { border: 1px solid var(--line-2); border-radius: 10px; background: #fff; padding: 12px; text-align: left; cursor: pointer; font: inherit; }
.mode-switch button.on { border-color: var(--accent); background: var(--accent-50); }
.mode-switch strong { display: block; color: var(--ink); }
.card-actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.waiting { max-width: 720px; margin: 40px auto; }
.menu-anchor { position: relative; }
.dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); padding: 4px; min-width: 240px; display: flex; flex-direction: column; }
.dropdown button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 6px; font: 13px var(--font); color: var(--ink); cursor: pointer; }
.dropdown button:hover { background: var(--accent-50); }
.compat-score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.compat-score strong { font-size: 28px; color: var(--ink); }
.compat-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.compat-item.warn { border-color: #fcd34d; background: var(--warn-50); }
.compat-item.ok { border-color: #a7f3d0; background: var(--ok-50); }
.compat-item h3 { font-size: 14px; margin-bottom: 2px; }
.compat-item ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }

/* v4 */
.share-main { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.share-main h3, .share-section h3 { font-size: 14px; }
.share-section { margin-bottom: 16px; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.download-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.download-card p { flex: 1; }
.share-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.link-row a { word-break: break-all; }

/* Home */
.ico { width: 16px; height: 16px; flex: none; }
.home { display: flex; flex-direction: column; gap: 20px; }
.home-head h1 { font-size: 28px; letter-spacing: -0.02em; }
.home-head p { margin: 4px 0 0; font-size: 15px; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 16px; }
.home-actions { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }

.feature { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 28px; align-items: center; min-height: 296px;
  padding: 30px; border-radius: 20px; color: rgba(255, 255, 255, 0.72); isolation: isolate;
  background: radial-gradient(520px circle at 100% 0%, rgba(99, 102, 241, 0.45), transparent 60%), radial-gradient(420px circle at 0% 110%, rgba(236, 72, 153, 0.18), transparent 60%), linear-gradient(160deg, #161a33, #0c0e1c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -18px rgba(30, 27, 75, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.feature::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); }
a.feature:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 26px 50px -20px rgba(30, 27, 75, 0.65); }
.feature-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #a5b4fc; }
.feature-title { color: #fff; font-size: 30px; letter-spacing: -0.02em; margin-top: 10px; overflow-wrap: anywhere; }
.feature-slug { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.feature-lead { margin: 12px 0 0; font-size: 15px; max-width: 440px; }
.feature-commit { display: flex; gap: 10px; align-items: baseline; margin: 18px 0 0; color: rgba(255, 255, 255, 0.88); }
.feature-commit .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); transform: translateY(-1px); }
.feature-meta { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.feature-pills { margin-top: 10px; }
.feature-pills:empty { display: none; }
.feature .pill { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }
.feature .pill-ok { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.feature .pill-warn { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.feature .pill-info { background: rgba(129, 140, 248, 0.2); color: #c7d2fe; }
.feature-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.btn.btn-light { background: #fff; border-color: #fff; color: #111827; padding: 9px 16px; font-weight: 600; }
.btn-light .ico { transition: transform 0.2s ease; }
.feature:hover .btn-light .ico, .btn-light:hover .ico { transform: translateX(3px); }
.btn.btn-glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.btn.btn-glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); }

/* Miniatura estilizada da LP */
.thumb { position: relative; border-radius: 12px; overflow: hidden; background: #fff; transform: perspective(1200px) rotateY(-9deg) rotateX(3deg); transform-origin: left center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -20px rgba(0, 0, 0, 0.6); transition: transform 0.35s ease; }
.feature:hover .thumb { transform: perspective(1200px) rotateY(-4deg) rotateX(1deg) translateY(-3px); }
.thumb-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.thumb-bar i { width: 8px; height: 8px; border-radius: 50%; }
.thumb-bar i:nth-child(1) { background: #f87171; }
.thumb-bar i:nth-child(2) { background: #fbbf24; }
.thumb-bar i:nth-child(3) { background: #34d399; }
.thumb-bar span { margin-left: 8px; flex: 1; font: 10.5px var(--mono); color: #6b7280; background: #fff; border-radius: 5px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-page { padding: 10px 12px 14px; background: linear-gradient(180deg, hsl(var(--h) 90% 97%), #fff 70%); }
.thumb-nav { display: flex; align-items: center; gap: 6px; }
.thumb-nav b { width: 18px; height: 18px; border-radius: 5px; background: hsl(var(--h) 70% 55%); margin-right: auto; }
.thumb-nav span { width: 26px; height: 5px; border-radius: 3px; background: #e5e7eb; }
.thumb-hero { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 22px 0 18px; }
.thumb-hero .l1 { width: 72%; height: 11px; border-radius: 4px; background: #1f2937; }
.thumb-hero .l2 { width: 52%; height: 6px; border-radius: 3px; background: #d1d5db; }
.thumb-hero .cta { width: 64px; height: 16px; border-radius: 6px; margin-top: 6px; background: linear-gradient(135deg, hsl(var(--h) 75% 58%), hsl(calc(var(--h) + 35) 75% 55%)); box-shadow: 0 6px 14px -6px hsl(var(--h) 70% 50%); }
.thumb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.thumb-cols span { height: 40px; border-radius: 7px; background: hsl(var(--h) 60% 96%); border: 1px solid hsl(var(--h) 50% 91%); }

/* Cards de ação */
.action-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px; text-align: left; font: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; color: var(--ink-2); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.action-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; pointer-events: none; background: radial-gradient(260px circle at 0% 0%, var(--glow), transparent 70%); }
.action-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(17, 24, 39, 0.25); }
.action-card:hover::before { opacity: 1; }
.action-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.action-repo { --tint: #4f46e5; --tint-bg: #eef2ff; --glow: rgba(99, 102, 241, 0.12); }
.action-zip { --tint: #d97706; --tint-bg: #fffbeb; --glow: rgba(245, 158, 11, 0.12); }
.action-spark { --tint: #db2777; --tint-bg: #fdf2f8; --glow: rgba(236, 72, 153, 0.12); }
.action-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--tint-bg); color: var(--tint); }
.action-icon .ico { width: 22px; height: 22px; }
.action-text { position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-text strong { color: var(--ink); font-size: 16px; }
.action-text span { font-size: 13px; color: var(--muted); }
.action-go { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #f3f4f6; color: var(--ink-2); transition: background 0.2s, color 0.2s, transform 0.2s; }
.action-card:hover .action-go { background: var(--tint); color: #fff; transform: translateX(2px); }

/* Recentes */
.recents { padding: 6px; border-radius: 18px; }
.recents-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 8px; }
.recents-head h2 { display: flex; align-items: center; gap: 8px; }
.recents-head .btn .count { margin-left: 2px; }
.count { font-size: 12px; font-weight: 600; color: var(--muted); background: #f3f4f6; border-radius: 99px; padding: 1px 8px; }
.recent-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; color: inherit; transition: background 0.15s; }
.recent-row + .recent-row { box-shadow: 0 -1px 0 #f3f4f6; }
.recent-row:hover, .recent-row:hover + .recent-row { box-shadow: none; }
.recent-row:hover { background: #f8f9fb; }
.monogram { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 72% 60%), hsl(calc(var(--h) + 40) 72% 52%)); box-shadow: 0 6px 14px -8px hsl(var(--h) 70% 45%), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }
.recent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.recent-name { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 15px; }
.recent-sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.recent-pills .pill { margin: 0; }
.recent-pills:empty { display: none; }
.recent-side { display: flex; align-items: center; gap: 10px; flex: none; }
.recent-time { font-size: 12.5px; color: var(--muted); min-width: 92px; text-align: right; }
.recent-chevron { display: grid; color: #9ca3af; transition: transform 0.15s, color 0.15s; }
.recent-row:hover .recent-chevron { color: var(--accent); transform: translateX(2px); }

/* Projetos */
.plist-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plist-head h1 { display: flex; align-items: center; gap: 10px; font-size: 28px; letter-spacing: -0.02em; }
.plist-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; --ctl: 38px; }
.plist-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: var(--ctl); padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted);
  transition: border-color 0.15s, box-shadow 0.15s; }
.plist-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.plist-search input, .plist-search input:focus { height: 100%; border: 0; padding: 0; outline: none; background: transparent; }
.plist-toolbar .segmented { height: var(--ctl); align-items: stretch; background: #eceef2; }
.plist-sort { height: var(--ctl); border-color: var(--line); border-radius: 10px; padding: 0 10px; background: #fff; }
.seg-count { font-size: 11px; color: var(--muted); background: rgba(17, 24, 39, 0.06); border-radius: 99px; padding: 0 6px; }
.segmented .on .seg-count { background: var(--accent-50); color: var(--accent-600); }

.plist { padding: 6px; border-radius: 18px; }
.prow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.1fr) 162px; gap: 18px; align-items: center;
  padding: 14px; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
.prow + .prow { box-shadow: 0 -1px 0 #f3f4f6; }
.prow:hover, .prow:hover + .prow { box-shadow: none; }
.prow:hover { background: #f8f9fb; }
.prow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prow:hover .recent-chevron { color: var(--accent); transform: translateX(2px); }
.prow-lp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow-name { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 15px; min-width: 0; }
.prow-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-name .badge { flex: none; }
.prow-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.prow-pills:empty { display: none; }
.prow-pills .pill { margin: 0; font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 13px; }
.prow-fact > .ico { width: 15px; height: 15px; margin-top: 2px; color: #9ca3af; }
.prow-fact.origin-connect > .ico { color: #4f46e5; }
.prow-fact.origin-zip > .ico { color: #d97706; }
.prow-fact.origin-lab > .ico { color: #db2777; }
.prow-fact.origin-unknown .fact-main { color: var(--muted); }
.prow-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fact { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fact-main, .fact-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact-main { color: var(--ink); line-height: 1.4; }
.fact-sub { font-size: 12px; color: var(--muted); }
.fact-repo { display: flex; align-items: center; gap: 4px; }
.repo-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: 12.5px; }
a.repo-name { display: inline-flex; align-items: center; gap: 4px; }
a.repo-name:hover { color: var(--accent); text-decoration: underline; }
a.repo-name .ico { width: 12px; height: 12px; color: var(--muted); }
.repo-copy { display: none; flex: none; padding: 3px; color: var(--muted); }
.repo-copy .ico { width: 14px; height: 14px; }
.prow:hover .repo-copy, .repo-copy:focus-visible { display: grid; }
.plist-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; border-radius: 18px; }
.plist-empty strong { color: var(--ink); font-size: 15px; }
.plist-empty .btn { margin-top: 8px; }
@media (max-width: 1000px) {
  .prow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .prow-last { display: none; }
  .prow-end .btn { display: none; }
}
@media (max-width: 640px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto; }
  .prow > .prow-fact { display: none; }
}

.rise { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .feature, .thumb, .action-card { transition: none; }
}
@media (max-width: 900px) {
  .home-top { grid-template-columns: 1fr; }
  .home-actions { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .feature { grid-template-columns: 1fr; padding: 22px; }
  .thumb { display: none; }
  .home-actions { grid-template-columns: 1fr; }
  .recent-time, .recent-side .btn { display: none; }
}