/* Feedback: màu lấy đúng bộ 4 giao diện của Helper (helper-web, app/goc.css):
   Light, Dark, Magic Blue, Classic Dark. Chọn ở Cài đặt › Giao diện, lưu ở localStorage "fb-theme". */
:root {
  color-scheme: light;
  --g-app:#efeff0;--g-panel:#f9f9fa;--g-edge:#e3e3e5;--g-card:#ffffff;--g-ring:#e6e6e8;--g-rim:transparent;--g-lift:0 1px 2px rgba(0,0,0,.04);
  --g-row:#efeff1;--g-sel:#e3e3e5;--g-field:#ffffff;--g-field-ring:#e1e1e4;
  --g-soft:#f1f1f2;--g-hover:#ebebed;--g-line:#e6e6e8;
  --g-ink:#1f2023;--g-ink-2:#6b6e76;--g-ink-3:#9b9da4;--g-btn:#1f2023;--g-btn-ink:#ffffff;--g-btn-hover:#3a3b40;
  --g-red:#d93025;--g-green:#1e8e3e;--g-amber:#b26b00;
  --c-blue:#007aff;--c-indigo:#5856d6;--c-red:#ff3b30;--c-orange:#f28c00;--c-amber:#c98a00;--c-green:#28a745;--c-teal:#0fa3b1;
  --c-cyan:#0a9fd8;--c-pink:#ff2d55;--c-purple:#af52de;--c-brown:#a2845e;--c-mint:#00a99d;--c-gray:#8e8e93;
  --g-panel-shadow:0 0 0 1px var(--g-edge),0 1px 3px rgba(0,0,0,.05);
  --g-pop-lift:0 12px 32px rgba(0,0,0,.14);
  --agent: var(--c-purple);
}
:root[data-mode=dark] {
  color-scheme: dark;
  --g-app:#09090a;--g-panel:#121213;--g-edge:#1e1f21;--g-card:#1a1a1b;--g-ring:rgba(255,255,255,.055);--g-rim:rgba(255,255,255,.06);--g-lift:0 2px 8px rgba(0,0,0,.45);
  --g-row:#252526;--g-sel:#222224;--g-field:#161617;--g-field-ring:#262628;
  --g-soft:#1f1f21;--g-hover:#242426;--g-line:#252526;
  --g-ink:#e6e6e8;--g-ink-2:#9fa0a6;--g-ink-3:#6a6b71;--g-btn:#e6e6e8;--g-btn-ink:#09090a;--g-btn-hover:#cfd0d4;
  --g-red:#ff6b5e;--g-green:#4cc27a;--g-amber:#f2b14c;
  --c-blue:#0a84ff;--c-indigo:#7d7aff;--c-red:#ff453a;--c-orange:#ff9f0a;--c-amber:#ffd60a;--c-green:#30d158;--c-teal:#40c8e0;
  --c-cyan:#64d2ff;--c-pink:#ff375f;--c-purple:#bf5af2;--c-brown:#ac8e68;--c-mint:#63e6e2;--c-gray:#98989d;
  --g-panel-shadow:0 0 0 1px var(--g-edge),inset 0 1px 0 rgba(255,255,255,.03);--g-pop-lift:0 12px 32px rgba(0,0,0,.5);
}
:root[data-mode=dark][data-tone=classic] {
  --g-app:#18191c;--g-panel:#1f2023;--g-edge:#2a2c31;--g-card:#27292c;--g-ring:rgba(255,255,255,.05);--g-rim:rgba(255,255,255,.07);--g-lift:0 2px 8px rgba(0,0,0,.35);
  --g-row:#343638;--g-sel:#2c2e32;--g-field:#232428;--g-field-ring:#33353a;
  --g-soft:#2c2e31;--g-hover:#313337;--g-line:#343638;
  --g-ink:#e3e4e6;--g-ink-2:#a3a5ab;--g-ink-3:#74767c;--g-btn:#e3e4e6;--g-btn-ink:#18191c;--g-btn-hover:#cbccd0;
  --g-pop-lift:0 12px 32px rgba(0,0,0,.42);
}
:root[data-mode=dark][data-tone=blue] {
  --g-app:#0f1017;--g-panel:#191a23;--g-edge:#262838;--g-card:#20212d;--g-ring:rgba(160,170,255,.07);--g-rim:rgba(180,190,255,.08);--g-lift:0 2px 10px rgba(0,0,10,.45);
  --g-row:#2b2d3c;--g-sel:#2b2d4d;--g-field:#1c1d28;--g-field-ring:#2e3043;
  --g-soft:#252736;--g-hover:#2a2c3d;--g-line:#2b2d3c;
  --g-ink:#e5e6ef;--g-ink-2:#9d9ea6;--g-ink-3:#6b6e86;--g-btn:#7e7fff;--g-btn-ink:#ffffff;--g-btn-hover:#6d6ef2;
  --g-pop-lift:0 12px 32px rgba(0,0,10,.5);
}
:root {
  --g-card-shadow:0 0 0 1px var(--g-ring),inset 0 1px 0 var(--g-rim),var(--g-lift);
  --g-shadow:0 0 0 1px var(--g-ring),inset 0 1px 0 var(--g-rim),var(--g-pop-lift);
  font-family: 'Segoe UI', Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 13.5px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--g-app); color: var(--g-ink); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
svg { flex: none; }

/* ---------- khung: menu trái + tấm nội dung ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; }
.sidebar { padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; padding: 4px 8px 12px; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--g-btn); color: var(--g-btn-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.nav { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; color: var(--g-ink); text-decoration: none; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.nav:hover { background: var(--g-hover); }
.nav.active { background: var(--g-hover); font-weight: 600; }
.nav .count { margin-left: auto; color: var(--g-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.nav svg { color: var(--g-ink-2); }
.nav-group { color: var(--g-ink-3); font-size: 12px; padding: 14px 8px 4px; }
.sidebar .spacer { flex: 1; min-height: 16px; }
.panel { margin: 8px 8px 8px 0; background: var(--g-panel); border-radius: 12px; box-shadow: var(--g-panel-shadow); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 18px; height: 44px; flex: none; }
.bar + .bar { height: 40px; }
.bar.line { border-bottom: 1px solid var(--g-line); }
.crumbs { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.crumbs a { text-decoration: none; color: var(--g-ink-2); font-weight: 500; }
.crumbs a:hover { color: var(--g-ink); }
.crumbs .sep { color: var(--g-ink-3); }
.grow { flex: 1; }
.muted { color: var(--g-ink-2); }
.faint { color: var(--g-ink-3); }
.scroll { flex: 1; min-height: 0; overflow: auto; }
.icon-btn.menu-btn { display: none; }

/* ---------- nút, ô nhập ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--g-soft); border-radius: 7px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--g-hover); }
.btn.primary { background: var(--g-btn); color: var(--g-btn-ink); }
.btn.primary:hover { background: var(--g-btn-hover); }
.btn.ghost { background: none; color: var(--g-ink-2); }
.btn.ghost:hover { background: var(--g-hover); color: var(--g-ink); }
.btn.danger { color: var(--g-red); }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; background: none; border-radius: 7px; color: var(--g-ink-2); cursor: pointer; position: relative; }
.icon-btn:hover, .icon-btn.on { background: var(--g-hover); color: var(--g-ink); }
.icon-btn .dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-indigo); }
.field { border: 0; background: var(--g-field); box-shadow: 0 0 0 1px var(--g-field-ring); border-radius: 7px; padding: 6px 9px; width: 100%; outline: none; }
.field:focus { box-shadow: 0 0 0 1px var(--g-ink-3); }
select.field { padding-right: 4px; }
kbd { font-family: inherit; font-size: 11px; background: var(--g-soft); border-radius: 4px; padding: 0 5px; color: var(--g-ink-2); }
.search { width: 200px; }

/* ---------- chip, nhãn, avatar ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; box-shadow: 0 0 0 1px var(--g-line); font-size: 12px; color: var(--g-ink-2); white-space: nowrap; background: none; border: 0; cursor: default; }
button.chip, a.chip { cursor: pointer; text-decoration: none; }
button.chip:hover, a.chip:hover { background: var(--g-hover); }
.chip .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--c-gray)); }
.chip.agent { box-shadow: none; background: color-mix(in srgb, var(--agent) 16%, transparent); color: var(--agent); }
.chip.icon-only { width: 24px; padding: 0; justify-content: center; }
.avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--av, var(--c-cyan)); flex: none; letter-spacing: -.2px; }
.avatar.agent { background: var(--agent); }
.avatar.none { background: none; box-shadow: inset 0 0 0 1.3px var(--g-ink-3); border: 0; color: transparent; }
.c-gray{--lc:var(--c-gray);--av:var(--c-gray)} .c-blue{--lc:var(--c-blue);--av:var(--c-blue)} .c-indigo{--lc:var(--c-indigo);--av:var(--c-indigo)}
.c-purple{--lc:var(--c-purple);--av:var(--c-purple)} .c-pink{--lc:var(--c-pink);--av:var(--c-pink)} .c-red{--lc:var(--c-red);--av:var(--c-red)}
.c-orange{--lc:var(--c-orange);--av:var(--c-orange)} .c-amber{--lc:var(--c-amber);--av:var(--c-amber)} .c-brown{--lc:var(--c-brown);--av:var(--c-brown)}
.c-green{--lc:var(--c-green);--av:var(--c-green)} .c-mint{--lc:var(--c-mint);--av:var(--c-mint)} .c-teal{--lc:var(--c-teal);--av:var(--c-teal)} .c-cyan{--lc:var(--c-cyan);--av:var(--c-cyan)}
.due-late { color: var(--g-red); }

/* ---------- danh sách ---------- */
.group-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 18px; background: var(--g-soft); font-weight: 600; position: sticky; top: 0; z-index: 1; }
.group-head .n { color: var(--g-ink-3); font-weight: 400; }
.group-head .icon-btn { width: 24px; height: 24px; }
.row { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--g-line); cursor: pointer; text-decoration: none; color: var(--g-ink); }
.row:hover { background: var(--g-hover); }
.row .key { color: var(--g-ink-2); font-size: 12.5px; min-width: 50px; flex: none; font-variant-numeric: tabular-nums; }
.row .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.row .meta { display: flex; align-items: center; gap: 8px; color: var(--g-ink-2); font-size: 12px; flex: none; }
.row .date { min-width: 64px; text-align: right; }
.empty { padding: 64px 20px; text-align: center; color: var(--g-ink-2); }

/* ---------- bảng (Kanban) ---------- */
.board { display: flex; gap: 10px; padding: 4px 12px 12px; height: 100%; overflow-x: auto; align-items: stretch; }
.col { width: 330px; flex: none; display: flex; flex-direction: column; border-radius: 10px; min-height: 0; }
.col.drop { background: var(--g-hover); }
.col-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 10px; font-weight: 600; flex: none; }
.col-head .n { color: var(--g-ink-3); font-weight: 400; }
.col-head .icon-btn { width: 24px; height: 24px; }
.col-body { flex: 1; overflow-y: auto; padding: 2px 4px 8px; display: flex; flex-direction: column; gap: 8px; }
.col-add { border: 0; background: none; border-radius: 8px; height: 30px; color: var(--g-ink-3); cursor: pointer; box-shadow: 0 0 0 1px var(--g-line); flex: none; }
.col-add:hover { background: var(--g-hover); color: var(--g-ink); }
.card { background: var(--g-card); box-shadow: var(--g-card-shadow); border-radius: 9px; padding: 10px 12px 10px; cursor: pointer; text-decoration: none; color: var(--g-ink); display: flex; flex-direction: column; gap: 7px; }
.card:hover { box-shadow: 0 0 0 1px var(--g-ink-3), var(--g-lift); }
.card.dragging { opacity: .4; }
.card-top { display: flex; align-items: center; justify-content: space-between; color: var(--g-ink-2); font-size: 12.5px; }
.card-title { display: flex; gap: 7px; align-items: flex-start; font-weight: 600; line-height: 1.35; }
.card-title .st { margin-top: 2px; }
.card-title span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-props { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card-foot { color: var(--g-ink-3); font-size: 12px; display: flex; gap: 10px; }

/* ---------- bật lên (hiển thị, lọc, chọn) ---------- */
.pop { position: fixed; z-index: 30; background: var(--g-card); box-shadow: var(--g-shadow); border-radius: 10px; padding: 6px; min-width: 200px; max-height: min(560px, calc(100vh - 24px)); overflow: auto; }
.pop-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.pop-item:hover, .pop-item:focus-visible { background: var(--g-hover); outline: none; }
.pop-item .check { margin-left: auto; color: var(--g-ink); visibility: hidden; }
.pop-item.on .check { visibility: visible; }
.pop-sep { height: 1px; background: var(--g-line); margin: 6px 0; }
.pop-title { font-size: 12px; color: var(--g-ink-3); padding: 6px 8px 2px; }
.display-pop { width: 340px; padding: 10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 8px; background: var(--g-soft); color: var(--g-ink-2); cursor: pointer; }
.seg button.on { background: var(--g-sel); color: var(--g-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--g-ring); }
.opt { display: flex; align-items: center; gap: 10px; padding: 5px 2px; }
.opt > span { flex: 1; color: var(--g-ink-2); }
.opt select { width: 150px; background: var(--g-soft); border: 0; border-radius: 6px; padding: 4px 6px; }
.toggle { width: 30px; height: 18px; border-radius: 99px; background: var(--g-sel); border: 0; position: relative; cursor: pointer; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.toggle.on { background: var(--c-indigo); }
.toggle.on::after { transform: translateX(12px); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.pill { border: 0; border-radius: 6px; padding: 3px 9px; background: var(--g-soft); color: var(--g-ink-3); cursor: pointer; font-size: 12.5px; }
.pill.on { background: var(--g-sel); color: var(--g-ink); font-weight: 600; }
.pop-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--g-line); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 8px; }

/* ---------- chi tiết ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 280px; flex: 1; min-height: 0; }
.doc { overflow: auto; }
.doc-inner { padding: 28px 48px 64px; max-width: 860px; margin: 0 auto; }
.doc-title { font-size: 24px; font-weight: 650; border: 0; background: none; width: 100%; padding: 4px 0; outline: none; resize: none; overflow: hidden; line-height: 1.3; }
.byline { color: var(--g-ink-2); font-size: 12.5px; margin: 4px 0 18px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.props { border-left: 1px solid var(--g-line); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.prop { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px; min-height: 34px; }
.prop > label { color: var(--g-ink-2); font-size: 12.5px; }
.prop-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; border-radius: 6px; padding: 5px 7px; cursor: pointer; text-align: left; width: 100%; min-width: 0; }
.prop-btn:hover { background: var(--g-hover); }
.prop-btn input[type=date] { border: 0; background: none; padding: 0; width: 100%; outline: none; }
.prop-labels { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0; }

.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md pre { background: var(--g-soft); padding: 10px 12px; border-radius: 8px; overflow: auto; }
.md code { background: var(--g-soft); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--g-line); margin: 0; padding-left: 12px; color: var(--g-ink-2); }
.md table { border-collapse: collapse; }
.md td, .md th { border: 1px solid var(--g-line); padding: 4px 8px; }
.md img { max-width: 100%; border-radius: 6px; }
.md a { color: var(--c-blue); }
.md-body { min-height: 40px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; cursor: text; }
.md-body:hover { background: var(--g-hover); }
.md-body.placeholder { color: var(--g-ink-3); }

.editor { background: var(--g-card); box-shadow: var(--g-card-shadow); border-radius: 10px; }
.editor textarea { width: 100%; border: 0; background: none; padding: 10px 12px; min-height: 84px; resize: vertical; outline: none; line-height: 1.55; display: block; }
.editor .preview { padding: 10px 12px; min-height: 84px; }
.editor-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--g-line); }
.editor-bar .hint { color: var(--g-ink-3); font-size: 12px; margin-right: auto; }
.tab { border: 0; background: none; padding: 3px 9px; border-radius: 6px; cursor: pointer; color: var(--g-ink-2); }
.tab.on { background: var(--g-soft); color: var(--g-ink); }

.activity { margin-top: 36px; border-top: 1px solid var(--g-line); padding-top: 18px; }
.activity h3 { font-size: 13.5px; margin: 0 0 12px; }
.event { display: flex; gap: 8px; align-items: center; color: var(--g-ink-2); font-size: 12.5px; padding: 7px 0 7px 4px; }
.event b { color: var(--g-ink); font-weight: 600; }
.comment { background: var(--g-card); box-shadow: var(--g-card-shadow); border-radius: 10px; padding: 11px 14px; margin: 8px 0; }
.comment.by-agent { box-shadow: 0 0 0 1px color-mix(in srgb, var(--agent) 45%, transparent), var(--g-lift); }
.comment-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.comment-head .who { font-weight: 600; }
.comment.by-agent .who { color: var(--agent); }
.comment-head .when { color: var(--g-ink-3); font-size: 12px; }
.composer { margin-top: 14px; }

/* ---------- hộp thoại tạo mới ---------- */
.overlay { position: fixed; inset: 0; background: rgb(0 0 0 / .4); display: grid; place-items: start center; padding: 10vh 16px 16px; z-index: 20; }
.dialog { background: var(--g-card); box-shadow: var(--g-shadow); border-radius: 14px; width: min(680px, 100%); }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; color: var(--g-ink-2); font-size: 12.5px; }
.dlg-body { padding: 8px 16px 4px; }
.dialog input.big { font-size: 18px; font-weight: 600; border: 0; outline: none; width: 100%; background: none; padding: 4px 0 8px; }
.dialog .editor { box-shadow: none; background: none; }
.dialog .editor textarea { padding: 4px 0; min-height: 150px; }
.dialog .editor .preview { padding: 4px 0; min-height: 150px; }
.dialog .editor-bar { border: 0; padding: 6px 0; }
.dlg-props { display: flex; gap: 6px; padding: 8px 16px 12px; flex-wrap: wrap; }
.dlg-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--g-line); }
.error { color: var(--g-red); font-size: 12.5px; }

/* ---------- đăng nhập, cài đặt ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth form { background: var(--g-panel); box-shadow: var(--g-panel-shadow); border-radius: 14px; padding: 28px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.auth h1 { margin: 0 0 4px; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.auth p { margin: 0; color: var(--g-ink-2); }
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); flex: 1; min-height: 0; }
.settings-nav { border-right: 1px solid var(--g-line); padding: 12px 8px; }
.page { padding: 26px 40px 60px; max-width: 820px; overflow: auto; }
.page h2 { font-size: 18px; margin: 0 0 6px; }
.page h3 { font-size: 14px; margin: 26px 0 8px; }
.page p { color: var(--g-ink-2); line-height: 1.6; }
.box { background: var(--g-card); box-shadow: var(--g-card-shadow); border-radius: 10px; padding: 6px 14px; margin: 10px 0; }
.box.pad { padding: 14px; }
.code { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; font-size: 12.5px; background: var(--g-soft); padding: 8px 10px; border-radius: 7px; overflow-wrap: anywhere; display: block; }
.line-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--g-line); }
.line-row:last-child { border: 0; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.theme-card { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.theme-card .swatch { height: 86px; border-radius: 10px; box-shadow: 0 0 0 1px var(--g-line); display: flex; padding: 8px; gap: 6px; overflow: hidden; }
.theme-card.on .swatch { box-shadow: 0 0 0 2px var(--c-indigo); }
.theme-card .swatch i { display: block; border-radius: 5px; }
.theme-card .name { display: block; margin-top: 7px; font-weight: 500; }
.color-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; max-width: 200px; }
.color-pick button { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: var(--lc); }
.color-pick button.on { box-shadow: 0 0 0 2px var(--g-card), 0 0 0 4px var(--lc); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--g-btn); color: var(--g-btn-ink); padding: 8px 14px; border-radius: 9px; font-size: 13px; z-index: 40; }

@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 25% 0 0; z-index: 25; background: var(--g-app); transform: translateX(-100%); transition: transform .2s; box-shadow: var(--g-shadow); }
  .shell.nav-open .sidebar { transform: none; }
  .panel { margin: 0; border-radius: 0; height: 100vh; }
  .icon-btn.menu-btn { display: inline-grid; }
  .hide-sm { display: none; }
  .bar { padding: 0 10px; }
  .search { width: 120px; }
  .row { padding: 0 12px; }
  .row .meta .chip, .row .meta .date { display: none; }
  .col { width: 82vw; }
  .detail { grid-template-columns: 1fr; overflow: auto; }
  .doc { overflow: visible; }
  .props { border-left: 0; border-bottom: 1px solid var(--g-line); order: -1; overflow: visible; }
  .doc-inner { padding: 20px 16px 48px; }
  .settings { grid-template-columns: 1fr; }
  .settings-nav { border-right: 0; border-bottom: 1px solid var(--g-line); display: flex; overflow-x: auto; }
  .settings-nav .nav { width: auto; }
  .page { padding: 20px 16px 48px; }
  .display-pop { width: calc(100vw - 24px); }
}