/* ═══════════════════════════════════════════════════════════════
   OpenClawd Admin — design system
   Tokens → base → layout → legacy flow blocks (cx-/ap-) → components
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* palette — dark (default) */
  --bg: #0b0b0e;
  --surface: #111115;
  --surface-2: #17171c;
  --surface-3: #1e1e24;
  --border: #25252c;
  --border-strong: #32323b;
  --text: #ededf0;
  --text-dim: #b4b6bf;
  --muted: #8a8d98;
  --accent: #6e79e8;
  --accent-hover: #818bf0;
  --accent-light: #9aa2f5;
  --accent-soft: rgba(110, 121, 232, .14);
  --accent-glow: rgba(110, 121, 232, .45);
  --on-accent: #fff;
  --ok: #3ecf8e;  --ok-soft: rgba(62, 207, 142, .13);
  --warn: #f0b429; --warn-soft: rgba(240, 180, 41, .13);
  --bad: #f06a6a;  --bad-soft: rgba(240, 106, 106, .13);
  /* legacy aliases used by cx-/ap- blocks */
  --panel: var(--surface); --panel-solid: var(--surface); --panel-2: var(--surface-2);
  --panel-hover: var(--surface-3); --chip: var(--surface-3);
  /* shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --transition: .15s cubic-bezier(.4, 0, .2, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --sidebar-w: 248px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #ececf0;
  --border: #e6e6eb;
  --border-strong: #d5d5dd;
  --text: #16161a;
  --text-dim: #3c3d45;
  --muted: #6c6f7a;
  --accent: #5461d6;
  --accent-hover: #4451c4;
  --accent-light: #4a57cc;
  --accent-soft: rgba(84, 97, 214, .09);
  --accent-glow: rgba(84, 97, 214, .35);
  --ok: #10a36b;  --ok-soft: rgba(16, 163, 107, .1);
  --warn: #b7791f; --warn-soft: rgba(183, 121, 31, .1);
  --bad: #d64545;  --bad-soft: rgba(214, 69, 69, .09);
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, .06);
  --shadow: 0 8px 24px rgba(20, 20, 40, .08);
  color-scheme: light;
}

/* ── base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.55 var(--font); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
h1 { font-size: 1.5rem; font-weight: 650; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 var(--space-2); }
a { color: var(--accent-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
code, pre { font-family: var(--mono); }
code { background: var(--surface-3); padding: 1px 6px; border-radius: var(--radius-xs); font-size: .88em; }
pre { font-size: 12px; }
small { font-size: .85em; }
.muted { color: var(--muted); }
blockquote { margin: var(--space-2) 0; border-left: 3px solid var(--border-strong); padding: 2px 0 2px var(--space-4); color: var(--text-dim); }
hr { border: 0; border-top: 1px solid var(--border); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── form controls ────────────────────────────────────────── */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; min-height: 40px; transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--accent); width: 16px; height: 16px; padding: 0; }
input[type=file] { padding: 7px; }
.form-row { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.form-error { color: var(--bad); background: var(--bad-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .9rem; }

/* ── buttons ──────────────────────────────────────────────── */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 16px; border-radius: var(--radius-sm);
  font: 500 14px/1.2 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
button:hover:not(:disabled), .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
button.secondary, .btn.secondary, .btn--secondary {
  background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
button.secondary:hover:not(:disabled), .btn.secondary:hover, .btn--secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--ghost, button.btn--ghost { background: transparent; color: var(--text-dim); border-color: transparent; box-shadow: none; }
.btn--ghost:hover, button.btn--ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: transparent; }
button.danger, .btn.danger, .btn--danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
button.danger:hover:not(:disabled), .btn.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.btn--sm, button.btn--sm { min-height: 32px !important; padding: 5px 12px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* ── layout ───────────────────────────────────────────────── */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5) var(--space-4); background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text); padding: 0 var(--space-2); }
.brand:hover { color: var(--text); text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); font-size: 15px; }
.brand--big { font-size: 20px; justify-content: center; margin-bottom: var(--space-2); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 500; transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.on { background: var(--accent-soft); color: var(--text); }
.nav-link.on .nav-link__icon { stroke: var(--accent-light); }
.nav-link__icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-link__label { flex: 1; min-width: 0; }
.nav-badge { min-width: 20px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; text-align: center; }
.sidebar__foot { margin-top: auto; display: flex; gap: var(--space-2); }
.sidebar__foot > * { flex: 1; }

.content { min-width: 0; padding: var(--space-6) var(--space-6) var(--space-7); }
.content > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head__titles { min-width: 0; }
.head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.head-actions:empty { display: none; }
.page-lead { margin: 0 0 var(--space-4); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-6) 0 var(--space-3); }
.section-head h2 { margin: 0; }

/* ── flow blocks (ap-/cx- class names are used by templates and JS) ── */
.autopilot{max-width:1120px;margin:auto}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.ap-card,.card{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm)}
.ap-card strong{font-size:1.75rem}.ap-card h2,.ap-card h3,.ap-card p{margin:0}
.ap-row,.ap-toolbar,.ap-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.ap-row{flex-direction:row}.ap-actions{justify-content:flex-start;flex-wrap:wrap;gap:var(--space-2)}.ap-actions form{margin:0}
.ap-form{max-width:800px}.ap-form label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.ap-form input,.ap-form select,.ap-form textarea{width:100%;min-height:40px}
.ap-checkbox{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:400!important}.ap-checkbox input{width:16px;flex:0 0 auto}
.ap-empty,.empty-state{padding:var(--space-7) var(--space-5);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius);margin:var(--space-5) 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);background:var(--surface-2)}
.empty-state h2{margin:0}.empty-state p{color:var(--muted);max-width:460px}
.ap-reason{padding:10px 12px;border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.ap-table{overflow:auto;margin:var(--space-4) 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.ap-table table{width:100%;border-collapse:collapse;font-size:13px}
.ap-table th{text-align:left;font-weight:500;color:var(--muted);background:var(--surface-2);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.ap-table td{vertical-align:top;max-width:440px;padding:10px 12px;border-bottom:1px solid var(--border)}
.ap-table tr:last-child td{border-bottom:0}
.ap-table pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.ap-card blockquote{white-space:pre-wrap;margin:var(--space-2) 0}
.autopilot small{overflow-wrap:anywhere}
@media(max-width:720px){.ap-row,.ap-toolbar{align-items:stretch;flex-direction:column}.ap-card,.card{padding:var(--space-4)}.ap-grid{grid-template-columns:1fr}.ap-actions button{width:100%}.ap-actions form{flex:1}.ap-table table{min-width:620px}}
.ap-login{max-width:1440px}
#remote-browser{height:auto;min-height:0;width:100%;aspect-ratio:3/2}
#remote-browser:fullscreen{width:100vw;height:100vh;border-radius:0}
.ap-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}.ap-tabs a{padding:10px 14px;border-radius:9px;text-decoration:none;border:1px solid #64748b55}.ap-tabs .selected{background:#3b82f622;border-color:#3b82f6}.ap-study,.ap-fact{border-top:1px solid #64748b55;padding-top:18px;margin-top:14px;display:flex;flex-direction:column;gap:10px}.ap-text,.ap-preview{white-space:pre-wrap;overflow-wrap:anywhere}.ap-json{white-space:pre-wrap;overflow-wrap:anywhere;max-height:350px;overflow:auto;font-size:12px}.ap-form{display:flex;flex-direction:column;gap:14px}.ap-card details>form{margin-top:16px}.ap-card small{display:block}button:disabled{opacity:.5;cursor:wait}section[id]{scroll-margin-top:20px}
.autopilot [hidden]{display:none!important}.ap-meter{display:flex;flex-direction:column;gap:8px;padding:16px;background:#3b82f610;border-radius:12px}.ap-meter progress{width:100%;height:12px;border:0;border-radius:8px;overflow:hidden;accent-color:#3b82f6}.ap-meter progress::-webkit-progress-bar{background:#64748b26}.ap-meter progress::-webkit-progress-value{background:#3b82f6;border-radius:8px;transition:width .3s ease}.ap-meter progress::-moz-progress-bar{background:#3b82f6}.ap-meter [data-progress-percent]{font-size:1.5rem;font-variant-numeric:tabular-nums}.ap-meter .ap-toolbar{flex-direction:row;align-items:center}.autopilot>.ap-toolbar{margin-bottom:16px}.autopilot details>summary{cursor:pointer;padding:8px 0}.autopilot details>.ap-form{margin-top:12px}.autopilot a,.autopilot h3{overflow-wrap:anywhere}.ap-tabs a{flex:1;text-align:center}@media(prefers-reduced-motion:reduce){.ap-meter progress::-webkit-progress-value{transition:none}}
.ap-chip{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid #64748b66;white-space:nowrap}.ap-chip.ok{background:#34d39922;border-color:#34d399}.ap-chip.warn{background:#fbbf2422;border-color:#fbbf24}.ap-form label>small{font-weight:400;opacity:.8}
.ap-planhead{gap:12px;padding:16px 18px}.ap-planhead__row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}.ap-switch{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.ap-switch .ap-chip{text-decoration:none;color:inherit;display:inline-flex;gap:6px;align-items:center;padding:6px 11px}.ap-switch .ap-chip small{display:inline;opacity:.65;font-weight:500}.ap-chip.selected{background:var(--accent-soft);border-color:var(--accent)}.ap-chip.dim{opacity:.55}.ap-planhead__link{font-size:.9rem;white-space:nowrap}.ap-planhead__actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0}.ap-inline{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.9rem;flex:1;min-width:200px}.ap-inline select{min-height:40px;padding:8px 10px;font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border-strong);border-radius:8px;width:100%}.ap-planhead__actions button{min-height:40px}.ap-compact{padding:12px 18px;margin-bottom:12px}.ap-compact>summary{font-weight:600}.ap-entry{padding:16px 18px;gap:8px;margin-bottom:12px}.ap-entry__head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.ap-entry__when{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ap-entry__when b{font-variant-numeric:tabular-nums;margin-right:4px}.ap-entry__topic{margin:0;opacity:.75;font-size:.92rem}.ap-entry blockquote{margin:4px 0;padding-left:12px;font-size:.98rem;line-height:1.45}.ap-entry__meta{margin:0;font-size:.88rem;opacity:.85;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ap-entry__meta form,.ap-entry__media form{margin:0;display:inline}.ap-linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:.88rem;text-decoration:underline;cursor:pointer;min-height:0!important}.ap-entry__media{margin:4px 0;display:flex;flex-direction:column;gap:6px}.ap-entry__media img{display:block;width:auto;height:auto;max-width:min(100%,420px);max-height:520px;border-radius:10px;border:1px solid var(--border-strong)}.ap-entry__media figcaption{font-size:.85rem;opacity:.85;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ap-entry__reason{padding:8px 10px;font-size:.9rem}.ap-entry__checks summary{padding:2px 0;font-size:.85rem}.ap-entry__actions{gap:8px}.ap-entry__actions button{min-height:38px;padding:8px 14px}.ap-entry__more{flex-basis:100%}.ap-entry__more>summary{font-size:.9rem;opacity:.85}.ap-entry__more .ap-form{gap:10px;margin-top:10px}@media(max-width:720px){.ap-planhead__row{align-items:stretch}.ap-planhead__actions{flex-direction:column;align-items:stretch}.ap-entry__actions button{width:100%}}
.ap-switch{flex:1 1 auto}.ap-planhead__row>.ap-planhead__link{margin-left:auto}.ap-entry__meta form,.ap-entry__media form{display:inline-flex;width:auto;flex:0 0 auto}.ap-inline{max-width:460px}
.ap-inline--days{flex:0 0 auto;min-width:96px}
.ap-planmeter{margin-top:4px}.ap-spinner{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:ap-spin .8s linear infinite}button.busy::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:ap-spin .8s linear infinite}.ap-entry__busy{margin:0;font-size:.88rem;opacity:.85;display:flex;align-items:center}@keyframes ap-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ap-spinner,button.busy::before{animation-duration:2.4s}}
.ap-flash{max-width:1120px;margin:0 auto 16px;padding:12px 16px;border-radius:10px;border:1px solid var(--warn);background:var(--warn-soft);font-weight:600}.ap-flash--ok{border-color:var(--ok);background:var(--ok-soft)}
.ap-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:12px}.ap-banner b{display:block}.ap-banner span{opacity:.85;font-size:.9rem}.ap-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.ap-filters .ap-chip{cursor:pointer;background:none;color:inherit;font:inherit;font-size:12px;font-weight:600}.ap-filters .ap-chip b{font-weight:700;opacity:.7}.ap-day{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin:18px 0 8px;font-variant-numeric:tabular-nums}.ap-entry__parent{margin:2px 0 6px;padding:8px 12px;border-left:3px solid var(--border-strong);background:var(--panel-2);border-radius:0 8px 8px 0;font-size:.9rem;opacity:.9}.autopilot [data-entry-hidden]{display:none!important}
/* ── Connect / login flow ─────────────────────────────── */

.cx-card{gap:16px}
.cx-head h2{margin:0 0 6px;font-size:1.25rem}.cx-head p{margin:0;line-height:1.5}
.cx-label{font-weight:600;font-size:.92rem;padding:0;margin:0 0 2px}
.cx-primary{min-height:48px!important;padding:12px 22px;font-size:1rem;font-weight:700;border-radius:10px}
.cx-note{margin:0;font-size:.85rem;color:var(--muted);line-height:1.45;padding-left:22px;position:relative}
.cx-note::before{content:"🔒";position:absolute;left:0;top:0;font-size:.8rem}
.cx-callout{margin:0;padding:12px 14px;border-radius:10px;border:1px solid var(--warn);background:var(--warn-soft);font-weight:600}

/* choice cards (platform, mode) */
.cx-platforms,.cx-modes{border:0;padding:0;margin:0;display:grid;gap:10px}
.cx-platforms{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cx-modes{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.cx-modes .cx-option{align-items:flex-start}
.cx-option{position:relative;display:flex!important;flex-direction:row!important;align-items:center;gap:12px!important;padding:14px 16px;border:1.5px solid var(--border-strong);border-radius:12px;background:var(--panel-2);cursor:pointer;font-weight:400!important;transition:border-color var(--transition),background var(--transition)}
.cx-option:hover{border-color:var(--accent-glow)}
.cx-option input{position:absolute;opacity:0;pointer-events:none;width:1px!important}
.cx-option b{display:block;font-size:.98rem}.cx-option small{display:block;color:var(--muted);font-size:.83rem;margin-top:2px;line-height:1.35}
.cx-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.cx-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cx-option__icon,.cx-avatar{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:20px;font-weight:800;color:#fff}
.cx-logo--twitter{background:#0f1115;border:1px solid #ffffff2e}
.cx-logo--threads{background:linear-gradient(135deg,#833ab4,#e1306c 55%,#f77737)}
.cx-input-prefix{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel-2);overflow:hidden}
.cx-input-prefix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cx-input-prefix span{padding:0 4px 0 14px;color:var(--muted);font-weight:700}
.cx-input-prefix input{border:0!important;background:transparent!important;box-shadow:none!important;flex:1;min-height:46px;padding-left:2px}
.cx-start{max-width:640px}


.cx-intro form{margin:0}

/* live login */
.cx-live{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.cx-viewer{border:1px solid var(--border-strong);border-radius:14px;overflow:hidden;background:var(--panel-solid);box-shadow:var(--shadow)}
.cx-viewer__bar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--border-strong);background:var(--panel-2)}
.cx-viewer__title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--chip);font-size:.85rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-lock{font-size:.72rem}
.cx-viewer__tools{display:flex;gap:6px}
.cx-tool{min-height:34px!important;padding:6px 11px;font-size:.82rem;font-weight:600;background:transparent;color:var(--text-dim);border:1px solid var(--border-strong);box-shadow:none}
.cx-tool:hover:not(:disabled){background:var(--panel-hover);color:var(--text)}
.cx-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.cx-dot[data-state=connected]{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.cx-dot[data-state=connecting]{animation:cx-pulse 1.2s ease-in-out infinite}
.cx-dot[data-state=error]{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
@keyframes cx-pulse{50%{opacity:.35}}
.cx-stage{position:relative;background:#16191e}
.cx-stage #remote-browser{border-radius:0;display:block}
.cx-stage #remote-browser:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.cx-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#16191ee6;color:#e8eaed;transition:opacity .25s ease}
.cx-overlay p{margin:0;max-width:420px;line-height:1.5}
.cx-overlay[hidden]{display:flex!important;opacity:0;pointer-events:none}
.cx-loader{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff26;border-top-color:var(--accent-light);animation:ap-spin .9s linear infinite}
.cx-paste{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-strong);background:var(--accent-soft)}
.cx-paste__row{display:flex;gap:8px;flex-wrap:wrap}.cx-paste__row input{flex:1;min-width:180px}
.cx-paste__row button{min-height:40px}

.cx-side{position:sticky;top:16px;gap:16px;margin:0}
.cx-side h2{margin:0 0 8px;font-size:1.15rem}
.cx-status{margin:0;padding:10px 12px;border-radius:10px;background:var(--panel-2);font-size:.9rem;line-height:1.45}
.cx-checklist{list-style:none;counter-reset:cx;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cx-checklist li{counter-increment:cx;display:grid;grid-template-columns:26px 1fr;column-gap:10px;row-gap:2px}
.cx-checklist li::before{content:counter(cx);grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-light);font-size:12px;font-weight:700}
.cx-checklist b{font-size:.92rem}.cx-checklist span{font-size:.84rem;color:var(--muted);line-height:1.4}
.cx-side form{margin:0}.cx-side .cx-primary{width:100%}
.cx-timer{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--text-dim)}
.cx-timer__row{display:flex;justify-content:space-between;gap:8px}.cx-timer__row b{font-variant-numeric:tabular-nums;color:var(--text)}
.cx-timer__bar{height:4px;border-radius:4px;background:var(--border-strong);overflow:hidden}
.cx-timer__bar span{display:block;height:100%;width:100%;background:var(--accent);transition:width 1s linear}
.cx-timer.low .cx-timer__row b{color:var(--warn)}.cx-timer.low .cx-timer__bar span{background:var(--warn)}
.cx-help summary{font-size:.88rem;font-weight:600;color:var(--text-dim);padding:0!important}
.cx-help ul{margin:8px 0 0;padding-left:18px;font-size:.85rem;color:var(--muted);line-height:1.5}

/* settings */
.cx-settings{display:flex;flex-direction:column}.cx-settings .ap-form{max-width:none}
.cx-settings>.ap-card{margin-bottom:16px}
.cx-autofill{display:flex;flex-direction:column;gap:8px}.cx-autofill p{margin:0}
.cx-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.cx-range,.cx-unit{display:flex;align-items:center;gap:8px;font-weight:400}
.cx-range input{flex:1;min-width:0}.cx-unit input{flex:1;min-width:0}.cx-unit span,.cx-range>span{color:var(--muted)}
.cx-switch{display:flex!important;flex-direction:row!important;align-items:center;gap:12px!important;cursor:pointer;font-weight:400!important}
.cx-switch input{position:absolute;opacity:0;width:1px!important}
.cx-switch__track{flex:0 0 auto;width:44px;height:26px;border-radius:999px;background:var(--border-strong);position:relative;transition:background var(--transition)}
.cx-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--transition)}
.cx-switch input:checked+.cx-switch__track{background:var(--accent)}
.cx-switch input:checked+.cx-switch__track::after{transform:translateX(18px)}
.cx-switch input:focus-visible+.cx-switch__track{outline:2px solid var(--accent);outline-offset:2px}
.cx-switch b{display:block}.cx-switch small{display:block;color:var(--muted);font-size:.83rem}
.cx-savebar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border:1px solid var(--border-strong);border-radius:12px;background:var(--panel-solid);box-shadow:var(--shadow)}
.cx-savebar.dirty{border-color:var(--accent)}.cx-savebar.dirty [data-dirty-note]{color:var(--accent-light)}

@media(max-width:1000px){.cx-live{grid-template-columns:1fr}.cx-side{position:static}}
@media(max-width:720px){
  .cx-viewer__tools .cx-tool{padding:6px 8px;font-size:.75rem}
  .cx-viewer__title{display:none}
  .cx-savebar .cx-primary{width:100%}
}
@media(prefers-reduced-motion:reduce){.cx-dot,.cx-loader{animation:none}}
.cx-viewer:fullscreen{display:flex;flex-direction:column;border-radius:0;border:0}
.cx-viewer:fullscreen .cx-stage{flex:1;min-height:0}
.cx-viewer:fullscreen #remote-browser{width:100%;height:100%!important;aspect-ratio:auto!important}

/* ── components ───────────────────────────────────────────── */
/* chips / status */
.ap-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-dim);white-space:nowrap}
.ap-chip.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}
.ap-chip.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.ap-chip--sales{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--text)}
#sales .sales-next,#sales .sales-facts{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.92rem}#sales details details{margin-top:8px}
.ap-chip.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
a.ap-chip:hover{text-decoration:none;border-color:var(--accent-glow);color:var(--text)}
.chips{margin-bottom:var(--space-4)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}.dot--ok{background:var(--ok)}.dot--warn{background:var(--warn)}

/* tabs */
.ap-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 var(--space-4);padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);width:fit-content;max-width:100%}
.ap-tabs a{flex:0 1 auto;padding:6px 14px;border-radius:7px;border:0;color:var(--text-dim);font-weight:500;text-align:center}
.ap-tabs a:hover{color:var(--text);text-decoration:none}
.ap-tabs .selected{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin-bottom:var(--space-2)}
.metric{display:flex;flex-direction:column;gap:6px;padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:inherit;box-shadow:var(--shadow-sm)}
a.metric:hover{border-color:var(--border-strong);text-decoration:none;color:inherit}
.metric__label{font-size:12.5px;color:var(--muted);font-weight:500}
.metric__value{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric__value small{font-size:.9rem;font-weight:500;color:var(--muted)}
.bar{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}.bar span{display:block;height:100%;background:var(--accent);border-radius:4px}



/* sticky save bar */
.sticky-footer{position:sticky;bottom:var(--space-3);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:10px 12px;margin:var(--space-4) 0;border:1px solid var(--border-strong);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow)}

/* call to action */
.cta-card{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;border-color:var(--accent-glow);background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--surface)}
.cta-card h2{margin:0 0 4px}.cta-card form{margin:0}

/* "⋯" action menu */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none;min-width:36px;font-size:18px;line-height:1;letter-spacing:1px;border:1px solid var(--border-strong)!important;background:var(--surface)!important}
.menu>summary::-webkit-details-marker{display:none}
.menu__list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:220px;display:flex;flex-direction:column;padding:6px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.menu__list form{margin:0;display:block!important;width:100%}
.menu__item{width:100%;justify-content:flex-start;background:transparent!important;border:0!important;color:var(--text)!important;box-shadow:none!important;min-height:34px!important;padding:6px 10px!important;font-weight:500}
.menu__item:hover:not(:disabled){background:var(--surface-2)!important}
.menu__item--danger{color:var(--bad)!important}
.autopilot details.menu>summary{padding:0 10px}

/* flash + toast */
.ap-flash{max-width:1120px;margin:0 auto var(--space-4);padding:10px 14px;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft);font-weight:500}
.ap-flash--ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
.toast{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:100;padding:10px 16px;border-radius:var(--radius-sm);background:var(--text);color:var(--bg);box-shadow:var(--shadow);font-weight:500}

/* details */
details>summary{cursor:pointer;font-weight:500;color:var(--text-dim)}
details>summary:hover{color:var(--text)}

/* login page */
.login-page{display:grid;place-items:center;min-height:100vh;padding:var(--space-4)}
.login-card{width:min(380px,100%);gap:var(--space-3);padding:var(--space-6)}
.login-card input[type=password]{width:100%}
.login-card button{width:100%;min-height:42px}
.login-card p{text-align:center}

/* responsive */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-right:0;border-bottom:1px solid var(--border)}
  .brand span:last-child{display:none}
  .sidebar__nav{order:5;flex-basis:100%;flex-direction:row;overflow-x:auto;gap:2px;scrollbar-width:none}
  .sidebar__nav::-webkit-scrollbar{display:none}
  .nav-link{flex:0 0 auto;padding:6px 10px;font-size:13px}
  .sidebar__foot{order:4;margin:0;flex:0 0 auto}
  .sidebar__foot>*{flex:0 0 auto}
  .content{padding:var(--space-4) var(--space-3) var(--space-7)}
}
@media(max-width:720px){
  h1{font-size:1.3rem}
  .metrics{grid-template-columns:1fr 1fr}
  #growth{scroll-margin-top:110px}
  .metric{padding:var(--space-3) var(--space-4)}
  .metric__value{font-size:1.3rem}
  .cta-card{flex-direction:column;align-items:stretch}
  .cta-card button{width:100%}
  .ap-tabs{width:100%}.ap-tabs a{flex:1}
  .sidebar__foot .theme-toggle{padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Compact bordered list: one row per item, its actions on the right. */
.rows{list-style:none;margin:0 0 var(--space-4);padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.rows>li{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:10px 14px;border-bottom:1px solid var(--border)}
.rows>li:last-child{border-bottom:0}
.rows>li.rows__empty{display:block;padding:0}
.rows__main{min-width:0;font-size:13px;line-height:1.4}
.rows__main small{display:inline-block;margin-left:8px;white-space:nowrap}
.rows__main p{margin:2px 0 0;color:var(--text-dim)}
.rows form{margin:0;flex:0 0 auto}
/* Account row: who on the left, state and the one next action on the right. */
.rows>li.acct{align-items:center;flex-wrap:wrap}
.acct .cx-avatar{width:34px;height:34px;font-size:16px;border-radius:10px}
.acct__who{flex:1 1 220px;min-width:0}
.acct__who>a{font-weight:600;color:var(--text);text-decoration:none}
.acct__who>a:hover{text-decoration:underline}
.acct__who small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.acct__side{display:flex;align-items:center;gap:8px;margin-left:auto}
.dash-status{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.dash-status p{margin:0}
a.menu__item{display:flex;align-items:center;text-decoration:none;border-radius:6px}
.ap-planhead__account select{min-width:220px}
.ap-planhead__summary{margin:0;font-size:13px}
.ap-form>button.btn--sm{align-self:flex-start}
.cx-more>summary{cursor:pointer;color:var(--text-dim);font-size:13.5px;padding:4px 0}
.cx-more[open]>summary{margin-bottom:var(--space-3)}
/* Product facts: one line each; the edit form opens in place. */
.facts>li{display:block}
.fact>summary{display:flex;gap:10px;align-items:baseline;cursor:pointer;list-style:none;font-size:13.5px;line-height:1.45}
.fact>summary::-webkit-details-marker{display:none}
.fact>summary .ap-chip{flex:0 0 auto}
.fact__text{flex:1;min-width:0}
.fact>summary small{flex:0 0 auto;white-space:nowrap}
.fact[open]>summary{margin-bottom:var(--space-3)}
.fact .ap-fact{border-top:0;padding-top:0;margin-top:0}
@media(max-width:720px){.fact>summary{flex-wrap:wrap}.fact>summary small{flex-basis:100%}}
.history-log{margin:var(--space-3) 0 0}
.rows>li>.ap-chip{flex:0 0 auto}

/* ── Account header and tabs: one place to move between an account's sections ── */
.sidebar__sep{display:block;height:1px;margin:var(--space-2);background:var(--border)}
.page-back{display:inline-block;font-size:13px;color:var(--muted);margin-bottom:6px}
.page-back:hover{color:var(--text)}
.acct-head{align-items:center;margin-bottom:var(--space-4)}
.acct-head__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-head__title .cx-avatar{width:36px;height:36px;font-size:17px;border-radius:10px}
.acct-tabs{margin-bottom:var(--space-5)}
.acct-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tab-dot{width:6px;height:6px;border-radius:50%;background:var(--warn)}
.pane-next{display:flex;justify-content:flex-end;margin:0 0 var(--space-4)}

/* A field whose action sits right next to it. */
.field{display:flex;flex-direction:column;gap:6px;font-weight:500}
.inline-field{display:flex;gap:8px;align-items:stretch}
.inline-field input{flex:1;min-width:0}
.inline-field button{flex:0 0 auto;min-height:40px}
.import-line{margin:0;font-size:13px}
.ap-reason:empty{display:none}

/* Styles and studies */
.style-list details>summary{padding:2px 0!important;font-size:13px}
.style-list .rows__main small{margin-left:8px}
.style-use{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.study-resume{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.study-resume .ap-inline{flex:0 0 auto;min-width:0;max-width:130px;font-weight:500;font-size:12.5px}
.study-resume .ap-inline input{min-height:32px;padding:4px 8px}
.study-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 16px;font-size:13px;margin-bottom:6px}

/* Weekday picker */
.day-picks{border:0;padding:0;margin:0}
.day-picks legend{padding:0;margin-bottom:6px}
.day-pick{position:relative;display:inline-flex!important;flex-direction:row!important;margin:0 4px 4px 0}
.day-pick input{position:absolute;opacity:0;width:1px!important;height:1px;min-height:0!important}
.day-pick span{display:inline-grid;place-items:center;min-width:40px;height:36px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-dim);font-weight:500;cursor:pointer;user-select:none}
.day-pick input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.day-pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cx-autofill{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.cx-autofill p{flex:1 1 240px;font-size:13px}

/* Plan */
.plan-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.plan-bar .ap-filters{margin:0}
.plan-bar form{margin:0}
select.ap-planhead__account{flex:1 1 240px;max-width:420px}
.ap-entry__more{flex:0 0 auto}
.autopilot .ap-entry__more>summary{list-style:none;display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:14px;font-weight:500;opacity:1}
.ap-entry__more>summary::-webkit-details-marker{display:none}
.ap-entry__more[open]{flex-basis:100%;order:10}
.autopilot .ap-entry__more[open]>summary{background:var(--surface-2)}

/* Attention cards: who, what they answer, the text, one decision. */
.attention-card{gap:10px}
.attention-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.attention-card__head a{font-weight:600}
.attention-card__quote{margin:0!important;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
.attention-card__reason{margin:0;font-size:13px;color:var(--warn)}
.attention-card .ap-form{max-width:none;gap:8px}
.stopped-jobs .rows{margin:var(--space-3) 0}

@media(max-width:900px){.sidebar__sep{display:none}}
@media(max-width:720px){
  .inline-field{flex-direction:column}
  .pane-next .btn{width:100%}
  .style-use{justify-content:flex-start}
  .acct-head{align-items:flex-start}
}
.attention-card__outcome{margin:0;font-size:13px;color:var(--muted)}

/* Bottom-left dock: every queued or running job, on every page. */
.activity{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.activity:not([hidden])+.sidebar__foot{margin-top:0}
.activity__head{display:flex;align-items:center;margin:0;padding:0!important;font-size:12.5px;font-weight:600;color:var(--text-dim);list-style:none;cursor:pointer}
.activity__head::-webkit-details-marker{display:none}
.activity__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow-y:auto}
.activity__item{position:relative}
.activity__item a{display:flex;flex-direction:column;gap:3px;padding:6px 24px 6px 8px;border-radius:var(--radius-sm);color:var(--text);text-decoration:none}
.activity__item a:hover{background:var(--surface-3);text-decoration:none}
.activity__title{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity__step{font-size:12px;color:var(--muted);line-height:1.3}
.activity__item .bar{margin-top:2px}
.activity__item.is-queued .bar span{background:var(--border-strong)}
.activity__stop{position:absolute;top:4px;right:2px;width:20px;height:20px;min-height:0!important;padding:0;border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;opacity:0}
.activity__stop:hover:not(:disabled){background:transparent;color:var(--bad)}
.activity__item:hover .activity__stop,.activity__stop:focus-visible{opacity:1}
@media(hover:none){.activity__stop{opacity:1}}
@media(max-width:900px){.activity{position:fixed;left:12px;bottom:12px;z-index:40;width:min(280px,calc(100vw - 24px));margin:0;background:var(--surface);box-shadow:var(--shadow)}.activity:not([open]){width:auto;padding:8px 12px;border-radius:var(--radius-pill)}}
/* Plan cards read like an X feed: avatar column, byline, text, a line joining parent → reply → thread parts. */
.tw-thread{display:flex;flex-direction:column;margin-top:4px}
.tw-post{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;position:relative;padding-bottom:14px}
.tw-post:last-child{padding-bottom:4px}
.tw-post:not(:last-child)::before{content:"";position:absolute;left:19px;top:46px;bottom:2px;width:2px;border-radius:2px;background:var(--border-strong)}
.tw-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;color:#fff;background:linear-gradient(135deg,hsl(var(--hue) 62% 52%),hsl(calc(var(--hue) + 40) 58% 40%));user-select:none}
.tw-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.tw-byline{display:flex;align-items:baseline;gap:6px;min-width:0;line-height:1.3}
.tw-byline b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.tw-byline span{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tw-replying{margin:0;color:var(--muted);font-size:14px}.tw-replying span{color:var(--accent)}
.tw-text{margin:0;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tw-post--parent .tw-text{color:var(--text-dim)}
.tw-count{color:var(--muted);font-size:13px}
.tw-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.tw-stats span{display:inline-flex;align-items:center;gap:5px}
.tw-stats svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tw-stats a{margin-left:auto;color:var(--muted);text-decoration:none}.tw-stats a:hover{color:var(--accent)}
.tw-body .ap-entry__media{margin:8px 0 2px}.tw-body .ap-entry__media img{max-width:100%;border-radius:16px;border-color:var(--border)}
.ap-entry>.ap-entry__busy,.ap-entry>.ap-entry__reason,.ap-entry>.ap-entry__actions{margin-left:52px}
@media(max-width:560px){.tw-post{grid-template-columns:34px minmax(0,1fr);gap:10px}.tw-avatar{width:34px;height:34px;font-size:15px}.tw-post:not(:last-child)::before{left:16px;top:40px}.ap-entry>.ap-entry__busy,.ap-entry>.ap-entry__reason,.ap-entry>.ap-entry__actions{margin-left:0}}
.ap-entry__topic+.tw-thread,.tw-thread>.ap-entry__topic{margin-top:6px}.tw-thread>.ap-entry__topic{margin-bottom:10px}
.tw-skeleton{display:flex;flex-direction:column;gap:7px;margin-top:4px}.tw-skeleton i{display:block;height:10px;border-radius:5px;background:var(--surface-3)}.tw-skeleton i:nth-child(2){width:86%}.tw-skeleton i:nth-child(3){width:52%}
.attention-card__topic{margin:0;font-size:15px;line-height:1.45}
.attention-card>.attention-card__reason,.attention-card>.attention-card__outcome,.attention-card>.ap-meter,.attention-card>.ap-entry__actions{margin-left:52px}
@media(max-width:560px){.attention-card>.attention-card__reason,.attention-card>.attention-card__outcome,.attention-card>.ap-meter,.attention-card>.ap-entry__actions{margin-left:0}}
.attention-card__reason--ok{color:var(--ok)}

.tw-body .ap-entry__media video{max-width:100%;max-height:520px;border-radius:16px;border:1px solid var(--border)}
.ap-media-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ap-media{display:flex;flex-direction:column;gap:6px;min-width:0}.ap-media img,.ap-media video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--border-strong);background:var(--panel-2)}.ap-media small{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-media form{margin:0}