/* Theme: Apple-clean — #f5f5f7 canvas, white cards, frosted light sidebar, system blue accent.
   Money states keep green / orange / red. */
:root {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7; --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73;
  --line: #e8e8ed; --line-strong: #d2d2d7;
  --brand: #0071e3; --brand-hover: #0066cc; --brand-ink: #ffffff; --brand-soft: #e8f1fc; --brand-text: #0066cc; --accent: #0071e3;
  --feature-bg: #ffffff; --feature-ink: #1d1d1f; --feature-num: #1d1d1f;
  --side-bg: rgba(255, 255, 255, .72); --side-fg: #1d1d1f; --side-muted: #86868b; --side-line: #e8e8ed; --side-hover: rgba(0, 0, 0, .04); --side-active-bg: rgba(0, 113, 227, .1); --side-active-fg: #0066cc; --side-ink: #1d1d1f;
  --good: #1d7f3a; --good-bg: #e9f7ee; --warn: #b25000; --warn-bg: #fff4e5; --bad: #d70015; --bad-bg: #ffeef0; --info: #0066cc; --info-bg: #e8f1fc;
  --income: #0071e3; --expense: #aeaeb2; --undated-bg: #f5f5f7;
  --acc-company: #0071e3; --acc-personal: #ff9f0a; --acc-unknown: #d2d2d7;
  --shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 4px 24px rgba(0, 0, 0, .06);
  --font-display: "SF Pro Text", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 18px; --r-sm: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #98989d;
  --line: #2c2c2e; --line-strong: #3a3a3c;
  --brand: #0a84ff; --brand-hover: #409cff; --brand-ink: #ffffff; --brand-soft: #0b2a4a; --brand-text: #4aa3ff; --accent: #0a84ff;
  --feature-bg: #1c1c1e; --feature-ink: #f5f5f7; --feature-num: #f5f5f7;
  --side-bg: rgba(28, 28, 30, .72); --side-fg: #f5f5f7; --side-muted: #98989d; --side-line: #2c2c2e; --side-hover: rgba(255, 255, 255, .06); --side-active-bg: rgba(10, 132, 255, .2); --side-active-fg: #4aa3ff; --side-ink: #f5f5f7;
  --good: #30d158; --good-bg: #0f2a18; --warn: #ff9f0a; --warn-bg: #33240a; --bad: #ff453a; --bad-bg: #3a1412; --info: #4aa3ff; --info-bg: #0b2a4a;
  --income: #0a84ff; --expense: #636366; --undated-bg: #1c1c1e;
  --acc-company: #0a84ff; --acc-personal: #ff9f0a; --acc-unknown: #48484a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.7);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #98989d;
  --line: #2c2c2e; --line-strong: #3a3a3c;
  --brand: #0a84ff; --brand-hover: #409cff; --brand-ink: #ffffff; --brand-soft: #0b2a4a; --brand-text: #4aa3ff; --accent: #0a84ff;
  --feature-bg: #1c1c1e; --feature-ink: #f5f5f7; --feature-num: #f5f5f7;
  --side-bg: rgba(28, 28, 30, .72); --side-fg: #f5f5f7; --side-muted: #98989d; --side-line: #2c2c2e; --side-hover: rgba(255, 255, 255, .06); --side-active-bg: rgba(10, 132, 255, .2); --side-active-fg: #4aa3ff; --side-ink: #f5f5f7;
  --good: #30d158; --good-bg: #0f2a18; --warn: #ff9f0a; --warn-bg: #33240a; --bad: #ff453a; --bad-bg: #3a1412; --info: #4aa3ff; --info-bg: #0b2a4a;
  --income: #0a84ff; --expense: #636366; --undated-bg: #1c1c1e;
  --acc-company: #0a84ff; --acc-personal: #ff9f0a; --acc-unknown: #48484a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
small { font-size: 12px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex-shrink: 0; display: block; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.muted, .muted-text { color: var(--muted); }
.muted-text { font-size: 13px; margin: 6px 0 12px; }
.pad { padding: 16px 20px; } .pad-x { padding: 0 20px; margin-bottom: 8px; }
.helper { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.helper.pad-x { margin: 0 0 16px; }

/* ---------- shell ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 30; background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; padding: calc(30px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 6px 34px; }
.brand-mark { font-family: var(--font-display); font-size: 34px; line-height: 1; width: 44px; height: 50px; display: grid; place-items: center; padding-right: 4px; letter-spacing: -4px; color: #f2f3e2; border: 1px solid rgba(220, 230, 210, .45); border-radius: 22px 22px 4px 4px; }
.brand-name { font-family: var(--font-display); font-size: 25px; letter-spacing: -.5px; color: #f6f7ea; display: block; line-height: 1.1; }
.brand small { display: block; font-size: 8px; letter-spacing: .2em; color: var(--side-muted); margin-top: 5px; }
.workspace-label { font-size: 9.5px; letter-spacing: .18em; color: var(--side-muted); margin: 0 12px 12px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); text-align: left; color: var(--side-fg); font-size: 14px; }
.sidebar nav button:hover { background: rgba(255,255,255,.06); color: #eef3e6; }
.sidebar nav button.active { background: var(--side-active-bg); color: var(--side-active-fg); font-weight: 600; }
.nav-count { margin-left: auto; min-width: 22px; padding: 1px 6px; border-radius: 999px; font-size: 11px; text-align: center; background: rgba(255,255,255,.12); color: inherit; font-variant-numeric: tabular-nums; }
.sidebar nav button.active .nav-count { background: rgba(21,60,45,.12); }
.nav-count.warn { background: #d9a441; color: #241a05; }
.sidebar-card { border-top: 1px solid var(--side-line); margin: 30px 8px 0; padding-top: 22px; color: var(--accent); }
.sidebar-card p { font-family: var(--font-display); font-size: 21px; line-height: 1.4; margin: 12px 0 8px; color: #dfe8d3; }
.sidebar-card small { color: var(--side-muted); line-height: 1.6; font-size: 12px; }
.sidebar-bottom { margin-top: auto; padding-top: 26px; display: grid; gap: 14px; font-size: 12px; color: var(--side-muted); }
.privacy { display: flex; align-items: center; gap: 7px; padding: 0 6px; }
.profile { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--side-line); padding: 16px 6px 0; }
.profile strong { display: block; font-size: 13px; color: #e8efe0; }
.profile small { color: var(--side-muted); font-size: 11.5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #86b06a; margin-left: auto; flex-shrink: 0; }
.live-dot.off { background: #8b8b80; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line); object-fit: cover; }
.profile .avatar { background: #2f5a45; border-color: #4f7a62; color: #e2ead6; }
.shell { margin-left: 248px; min-width: 0; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(16px, 3vw, 36px); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); min-width: 0; }
.crumb strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); }
.today { display: flex; align-items: center; gap: 7px; }
.sync { padding: 3px 10px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-size: 12px; }
.sync.loading { background: var(--surface-2); color: var(--muted); } .sync.nodb { background: var(--warn-bg); color: var(--warn); }
.icon-btn.mobile-menu { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--ink-2); }
.icon-btn:hover { background: var(--brand-soft); }
main { max-width: 1440px; margin: 0 auto; padding-block: 30px 22px; padding-inline: clamp(16px, 3vw, 36px); }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(8, 18, 12, .45); z-index: 25; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.foot .dot { color: var(--accent); }
.loading { display: flex; align-items: center; gap: 12px; padding: 60px 0; color: var(--muted); justify-content: center; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- page heading ---------- */
.page-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.page-title > div:first-child { min-width: 0; max-width: 720px; }
.eyebrow { display: block; font-size: 10.5px; letter-spacing: .16em; font-weight: 600; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; letter-spacing: -.4px; }
.page-title p { color: var(--muted); margin-top: 8px; font-size: 14px; }
.title-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.period { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); }
.period select { border: 0; background: transparent; color: var(--ink); font-size: 13.5px; max-width: 200px; padding: 0; }
.period select:focus-visible { outline: none; }
.period:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(10, 30, 20, .15); }
.btn.primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn.outline { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.btn.outline:hover:not(:disabled) { background: var(--brand-soft); }
.btn.ghost { color: var(--ink-2); } .btn.ghost:hover:not(:disabled) { background: var(--brand-soft); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.text-btn { color: var(--brand); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; text-align: left; }
:root[data-theme="dark"] .text-btn { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .text-btn { color: var(--accent); } }
.text-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-btn.strong { color: var(--ink); font-size: 14px; }
.text-btn.small { font-size: 12px; font-weight: 500; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; font-size: 14px; color: var(--ink); min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); padding: 0; cursor: pointer; }
input:disabled, select:disabled { opacity: .6; }
textarea { resize: vertical; line-height: 1.5; }
select.inline { padding: 5px 8px; font-size: 12.5px; border-radius: 999px; max-width: 170px; }
select.inline.unclassified { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
select.inline.deposit { background: var(--info-bg); border-color: transparent; color: var(--info); }
select.inline.acc.unknown { background: var(--surface-2); color: var(--muted); }
select.inline.acc.personal { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
select.inline.acc.company { background: var(--good-bg); border-color: transparent; color: var(--good); }

/* ---------- toolbars & chips ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar.in-panel { padding: 16px 20px 4px; margin: 0; }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--muted); min-width: 0; }
.search input { border: 0; padding: 0; background: transparent; flex: 1; height: 100%; }
.search input:focus-visible { outline: none; }
.search:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.toolbar select { height: 40px; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.stage-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.stage-chip strong { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); }
.stage-chip:hover { border-color: var(--line-strong); }
.stage-chip.selected { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.stage-chip.selected strong { color: var(--brand-ink); }
.stage-chip.bad strong { color: var(--bad); } .stage-chip.warn strong { color: var(--warn); }
.stage-chip.selected.bad strong, .stage-chip.selected.warn strong { color: var(--brand-ink); }
.stage-chip.owed { border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.muted { color: var(--muted); }
.seg-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 16px; width: fit-content; max-width: 100%; }
.seg-tabs button { padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2); }
.seg-tabs button.selected { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ---------- badges & pills ---------- */
.badge, .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge.done, .pill.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.badge.doing { background: var(--info-bg); color: var(--info); border-color: transparent; }
.badge.wait, .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.muted, .pill.muted { color: var(--muted); }
.pill.info { background: var(--info-bg); color: var(--info); border-color: transparent; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 18px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 18px 20px 14px; }
.panel-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.panel-head h3 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-2 > .panel { margin-bottom: 18px; }
.grid-2.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-bg); color: var(--info); font-size: 13px; line-height: 1.55; margin: 0 0 12px; }
.notice p { color: inherit; }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.block { padding: 18px 20px; border-radius: var(--r); }
.notice.block strong { display: block; margin-bottom: 4px; color: var(--ink); }
.notice.block p { color: var(--ink-2); }
.empty { text-align: center; padding: 36px 20px 40px; display: grid; justify-items: center; gap: 8px; }
.empty-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 4px; }
.empty h3 { font-size: 15px; font-weight: 600; }
.empty p { color: var(--muted); font-size: 13.5px; max-width: 460px; }
.empty .btn { margin-top: 8px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; color: var(--ink); }
.kpi.as-btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.kpi-top span { font-size: 10.5px; letter-spacing: .14em; font-weight: 600; }
.kpi h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.5px; line-height: 1.15; margin-top: 6px; white-space: nowrap; }
.kpi h2 small { font-family: var(--font-body); font-size: 11px; margin-left: 6px; letter-spacing: .05em; }
.kpi p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.kpi-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.kpi.featured { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.kpi.featured .kpi-top, .kpi.featured p, .kpi.featured h2 small { color: color-mix(in srgb, var(--brand-ink) 72%, transparent); }
.acc-split { margin-top: 8px; display: grid; gap: 5px; }
.acc-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.15); margin-bottom: 4px; }
.acc-bar span { display: block; height: 100%; }
.acc-bar .company { background: #cfe3b5; } .acc-bar .personal { background: #e9b45a; } .acc-bar .unknown { background: rgba(255,255,255,.35); }
.acc-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.acc-row i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.acc-row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi.featured .acc-row.company i { background: #cfe3b5; } .kpi.featured .acc-row.personal i { background: #e9b45a; } .kpi.featured .acc-row.unknown i { background: rgba(255,255,255,.4); }
.acc-mini { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.acc-mini .acc-row.company i { background: var(--acc-company); } .acc-mini .acc-row.personal i { background: var(--acc-personal); } .acc-mini .acc-row.unknown i { background: var(--acc-unknown); }

/* ---------- chart ---------- */
.chart-wrap { padding: 0 20px 16px; }
.chart-readout { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; min-height: 22px; font-variant-numeric: tabular-nums; }
.chart-readout strong { color: var(--ink); }
.chart-readout span { display: inline-flex; align-items: center; gap: 6px; }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw.inc { background: var(--income); } .sw.exp { background: var(--expense); }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .axis { stroke: var(--line-strong); stroke-width: 1; }
svg .tick { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
svg .xlabel { fill: var(--muted); font-size: 11.5px; font-family: var(--font-body); }
svg .xlabel.undated { font-style: italic; }
svg .bar.inc { fill: var(--income); } svg .bar.exp { fill: var(--expense); }
svg .bar.inc.undated { fill: url(#hatch-inc); stroke: var(--income); stroke-width: 1; }
svg .bar.exp.undated { fill: url(#hatch-exp); stroke: var(--expense); stroke-width: 1; }
.hatch-inc rect, .hatch-exp rect { fill: var(--undated-bg); }
.hatch-inc line { stroke: var(--income); } .hatch-exp line { stroke: var(--expense); }
svg .hit { fill: transparent; }
svg .bar-group { cursor: default; outline: none; }
svg .bar-group.on .hit { fill: var(--brand-soft); opacity: .55; }
svg .bar-group:focus-visible .hit { stroke: var(--brand); stroke-width: 1.5; }

/* ---------- lists ---------- */
.row-list, .history, .check-list, .done-list, .bullets, .plain { list-style: none; margin: 0; padding: 0; }
.row-list li + li { border-top: 1px solid var(--line); }
.row-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 20px; }
.row-btn:hover { background: var(--surface-2); }
.row-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.row-main strong { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.row-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.focus-list { display: grid; padding: 0 12px 14px; gap: 4px; }
.focus-row { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: var(--r-sm); text-align: left; color: var(--ink); }
.focus-row:hover { background: var(--surface-2); }
.focus-row div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.focus-num { font-family: var(--font-display); font-size: 30px; line-height: 1; min-width: 42px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.focus-num.bad { color: var(--bad); } .focus-num.warn { color: var(--warn); }
.check-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.check-list.compact li { padding: 0; }
.check-list.compact .row-btn { padding: 11px 20px; font-size: 13.5px; }
.check-list.compact .row-btn span:nth-child(2) { flex: 1; }
.check-main { display: flex; gap: 12px; min-width: 0; flex: 1 1 420px; }
.check-main p { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }
.sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--muted); }
.lvl-high .sev, li.lvl-high .sev { background: var(--bad); }
.lvl-mid .sev, li.lvl-mid .sev { background: var(--warn); }
.lvl-low .sev, li.lvl-low .sev { background: var(--info); }
.done-list li { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }
.done-list li span { flex: 1; min-width: 0; }
.bullets { padding: 0 20px 16px 38px; list-style: disc; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.plain { display: grid; gap: 4px; margin-top: 8px; font-size: 13.5px; }

/* ---------- suggestions ---------- */
.suggestions { display: grid; gap: 12px; padding: 0 20px 20px; }
.suggestion { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 10px; background: var(--surface-2); }
.suggestion.fix { border-left: 3px solid var(--warn); }
.suggestion header { display: grid; gap: 8px; justify-items: start; }
.suggestion h4 { font-size: 15px; font-weight: 600; }
.suggestion p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.suggestion details summary { cursor: pointer; font-size: 13px; color: var(--brand); font-weight: 600; }
.suggestion details ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.proposal { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.suggestion-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
td small { display: block; margin-top: 2px; }
tbody tr:last-child td { border-bottom: 0; }
th.r, td.r { text-align: right; } th.c, td.c { text-align: center; }
td.r .micro-bar { margin-left: auto; }
table.orders tbody tr, table.ledger tbody tr { cursor: default; }
table.orders tbody tr { cursor: pointer; }
table.orders tbody tr:hover, table.ledger tbody tr:hover { background: var(--surface-2); }
table.orders td:first-child { min-width: 230px; }
table.compact td, table.compact th { padding: 8px 12px; }
.cell-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.cell-main > div { min-width: 0; }
.cell-main strong { font-weight: 600; }
.thumb { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.thumb.in { background: var(--good-bg); color: var(--good); } .thumb.out { background: var(--warn-bg); color: var(--warn); }
small.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
table.ledger td.main { min-width: 250px; max-width: 440px; }
.more-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.more-row:hover { background: var(--surface-2); }
.clip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
.clip2 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }
.micro-bar { height: 4px; width: 100%; max-width: 140px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.micro-bar span { display: block; height: 100%; background: var(--muted); border-radius: 999px; }
.micro-bar.good span { background: var(--good); } .micro-bar.warn span { background: var(--warn); }
.task-progress { display: grid; gap: 2px; min-width: 90px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.photo { width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
table.source td { font-size: 12.5px; }
.src-cell { display: inline-flex; gap: 6px; margin: 2px 12px 2px 0; white-space: pre-wrap; }
.src-cell b { color: var(--muted); font-weight: 600; }

/* ---------- finance cards ---------- */
.acc-cards { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.acc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; text-align: left; color: var(--ink); min-width: 0; }
.acc-card span { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.acc-card span i { width: 9px; height: 9px; border-radius: 3px; }
.acc-card.company span i { background: var(--acc-company); } .acc-card.personal span i { background: var(--acc-personal); } .acc-card.unknown span i { background: var(--acc-unknown); }
.acc-card strong { font-size: 19px; font-weight: 600; }
.acc-card.total { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.acc-card.total span, .acc-card.total small { color: color-mix(in srgb, var(--brand-ink) 72%, transparent); }
.acc-card.total strong { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
button.acc-card:hover { border-color: var(--line-strong); }
button.acc-card.selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.fin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fin-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; display: grid; gap: 2px; min-width: 0; }
.fin-stats span { font-size: 12.5px; color: var(--muted); }
.fin-stats strong { font-size: 18px; font-weight: 600; }
.fin-stats.in-panel { padding: 0 20px; }
.fin-stats.in-panel > div { background: var(--surface-2); }

/* ---------- giving ---------- */
.giving-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 14px; }
.giving-stats > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.giving-stats span { font-size: 12.5px; color: var(--muted); }
.giving-stats strong { font-size: 19px; font-weight: 600; }
.giving-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--line); }
.give-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; border-bottom: 1px solid var(--line); min-width: 0; }
.give-row input { margin-top: 3px; }
.give-row.pending { opacity: .82; }
.give-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.give-side { flex-shrink: 0; text-align: right; }
.giving .helper { padding: 0 20px 16px; }
.giving-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-sm); background: var(--good-bg); color: var(--good); margin-top: 16px; }
.giving-box div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.giving-box strong { color: var(--ink); }
.giving-box small { color: var(--ink-2); }

/* ---------- drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(8, 18, 12, .42); display: flex; justify-content: flex-end; }
.drawer { width: min(640px, 100%); height: 100%; background: var(--surface); overflow-y: auto; padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 30px) calc(30px + env(safe-area-inset-bottom, 0px)); box-shadow: -10px 0 30px rgba(0,0,0,.12); animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.drawer-head .eyebrow { margin: 0; }
.drawer-title h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; }
.drawer-title p { color: var(--muted); margin-top: 4px; font-size: 13.5px; }
.drawer-actions { display: flex; gap: 10px; align-items: center; margin: 16px 0 18px; flex-wrap: wrap; }
.stage-select select { height: 40px; font-weight: 600; }
.drawer-h { font-size: 15px; font-weight: 600; margin: 24px 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.drawer-h small { font-weight: 400; }
.drawer-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.stat-grid, .meta-grid, .cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-grid > div, .meta-grid > div, .cmp-grid > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; gap: 3px; min-width: 0; }
.stat-grid > div { background: var(--surface-2); }
.stat-grid span, .meta-grid span, .cmp-grid span { font-size: 12px; color: var(--muted); }
.stat-grid strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meta-grid strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.brief { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; white-space: pre-wrap; }
.workflow { list-style: none; padding: 0; margin: 10px 0 0; display: grid; }
.workflow li { position: relative; }
.workflow li .row-btn { padding: 9px 4px; align-items: flex-start; }
.workflow li + li { border-top: 1px dashed var(--line); }
.wf-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; margin-top: 2px; color: #fff; }
.workflow li.doing .wf-dot { border-color: var(--info); background: var(--info-bg); }
.workflow li.done .wf-dot { background: var(--good); border-color: var(--good); }
.workflow li.done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.history li { border-top: 1px solid var(--line); }
.history li:first-child { border-top: 0; }
.history li > div, .history li .row-btn { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.history li > div > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.notes-block { margin-top: 18px; }
pre.notes { white-space: pre-wrap; font-family: var(--font-body); font-size: 12.5px; line-height: 1.65; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0 0; overflow-wrap: anywhere; }

/* ---------- board ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.board-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; min-width: 0; }
.board-col header { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.board-col header h3 { font-size: 14px; font-weight: 600; }
.board-col header .icon-btn { margin-left: auto; }
.board-col .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.col-1 .dot { background: var(--info); } .col-2 .dot { background: var(--good); }
.task-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; display: grid; gap: 8px; min-width: 0; }
.task-card.late { border-left: 3px solid var(--bad); } .task-card.near { border-left: 3px solid var(--warn); }
.task-top { display: flex; justify-content: space-between; align-items: center; }
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.prio.high { color: var(--bad); font-weight: 600; }
.pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.task-title { text-align: left; font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink); }
.task-title:hover { color: var(--brand); }
.task-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.owner .avatar { width: 22px; height: 22px; font-size: 10px; }
.due { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.task-card select { padding: 5px 8px; font-size: 12.5px; }
.empty-task { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--muted); font-size: 13px; }
.empty-task:hover { border-color: var(--brand); color: var(--brand); }
.workflow-note { display: flex; gap: 12px; padding: 14px 16px; margin-top: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ---------- inventory ---------- */
.inv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.inv-stats .panel { padding: 16px 18px; display: grid; gap: 4px; text-align: left; color: var(--ink); }
.inv-stats small { font-size: 10.5px; letter-spacing: .14em; font-weight: 600; }
.inv-stats strong { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; }
.inv-stats span { font-size: 12.5px; color: var(--brand); font-weight: 600; }
.inv-stats .as-btn:hover { border-color: var(--line-strong); }
.inv-stats .selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- recon ---------- */
.src-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
details.src { border-bottom: 1px solid var(--line); }
details.src > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer; list-style: none; flex-wrap: wrap; }
details.src > summary::-webkit-details-marker { display: none; }
details.src > summary > div:first-child { display: grid; gap: 2px; min-width: 0; }
details.src > summary span { font-size: 12.5px; color: var(--muted); }
details.src[open] > summary { background: var(--surface-2); }
details.src.inner { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.src-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.src-body { padding: 12px 20px 18px; display: grid; gap: 10px; }
.src-body .bullets { padding: 0 0 0 18px; }
.installments { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.installments > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); display: grid; gap: 2px; }
.installments span { font-size: 12px; color: var(--muted); }
.cmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-grid strong { font-variant-numeric: tabular-nums; }
.ext { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-weight: 600; font-size: 13px; text-decoration: none; }
.ext:hover { text-decoration: underline; }
.contract-results { display: grid; gap: 10px; padding: 0 20px 20px; }
.contract-results article { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); white-space: pre-wrap; font-size: 13px; }

/* ---------- modal & forms ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(8, 18, 12, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: calc(100% - 8px); display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); animation: pop .16s ease-out; }
.modal.wide { width: min(760px, 100%); }
.modal.small { width: min(440px, 100%); }
.modal.photo { width: min(900px, 100%); }
@keyframes pop { from { transform: translateY(8px) scale(.99); opacity: .6; } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; }
.modal-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.modal-head .eyebrow { margin-bottom: 6px; }
.modal-body { padding: 4px 22px 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.spacer { flex: 1; }
.danger-btn { color: var(--bad); } .danger-btn:hover { background: var(--bad-bg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field.wide, .wide { grid-column: 1 / -1; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; }
.hint { font-size: 12px; color: var(--muted); }
.money-input { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.money-input:focus-within { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.money-input input { border: 0; flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.money-input input:focus-visible { outline: none; }
.money-input span { padding: 0 11px; font-size: 12px; color: var(--muted); }
.form-total { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--brand-soft); }
.form-total span { font-size: 12px; color: var(--muted); }
.form-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.fin-fields { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 14px 16px 16px; margin: 4px 0 0; min-width: 0; }
.fin-fields legend { display: inline-flex; gap: 6px; align-items: center; padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.check-field { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
.check-field input { margin-top: 2px; }
.check-field div { display: grid; gap: 2px; }
.check-field strong { font-size: 13.5px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.segmented button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 6px; font-weight: 600; color: var(--muted); }
.segmented button.selected { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.form-error { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bad-bg); color: var(--bad); font-size: 13.5px; }
.confirm-text { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.photo-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.photo-preview { width: 84px; height: 84px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.photo-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
img.zoom { width: 100%; height: auto; border-radius: var(--r-sm); }
.csv-box { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; margin-top: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; gap: 8px; align-items: center; padding: 11px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13.5px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); max-width: calc(100% - 32px); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); }
  .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 10px 0 30px rgba(0,0,0,.2); }
  .sidebar.open { transform: none; }
  .shell { margin-left: 0; }
  .icon-btn.mobile-menu { display: inline-flex; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .topbar { height: 56px; }
  .today { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi.featured { grid-column: 1 / -1; }
  .kpi { padding: 14px; }
  .kpi h2 { font-size: 26px; }
  .kpi p { font-size: 12px; }
  .acc-cards, .fin-stats, .giving-stats, .inv-stats { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .stat-grid, .meta-grid, .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .page-title { align-items: stretch; }
  .title-actions { width: 100%; }
  .title-actions .btn, .title-actions .period { flex: 1 1 auto; }
  .panel-head { padding: 16px 16px 12px; }
  .row-btn, .check-list li, .give-row, details.src > summary { padding-left: 16px; padding-right: 16px; }
  .chart-wrap { padding: 0 10px 14px; }
  .modal { max-height: 100%; border-radius: 12px; }
  .overlay { padding: 8px; align-items: flex-end; }
  .seg-tabs { width: 100%; }
}

/* ---------- tables become cards on phones ---------- */
@media (max-width: 640px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody { display: block; }
  table.cards tr { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.cards tbody tr:last-child { border-bottom: 0; }
  table.cards td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0; border: 0; text-align: left; min-width: 0; }
  table.cards td::before { content: attr(data-label); font-size: 12px; color: var(--muted); flex-shrink: 0; padding-top: 2px; }
  table.cards td.main { order: -1; display: block; padding-bottom: 2px; min-width: 0; max-width: none; }
  table.cards td.main::before, table.cards td.edit::before, table.cards td.actions-cell::before { content: none; }
  table.cards td > .v { text-align: right; min-width: 0; display: grid; justify-items: end; gap: 3px; }
  table.cards td .micro-bar { width: 120px; margin-top: 2px; }
  table.cards td.edit { justify-content: flex-end; }
  table.cards td.actions-cell { display: block; padding-top: 4px; }
  table.cards .hide-m { display: none; }
  table.orders.cards td:first-child { min-width: 0; }
  small.one-line { max-width: 100%; }
}
/* ---------- modern overrides ---------- */
body { font-size: 14.5px; letter-spacing: -.003em; }
.sidebar { border-right: 1px solid var(--side-line); }
.brand { padding: 0 8px 28px; }
.brand-mark { font-family: var(--font-body); font-size: 22px; font-weight: 700; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--brand); color: var(--brand-ink); letter-spacing: 0; padding: 0 0 2px; }
.brand-name { font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.brand small { color: var(--side-muted); letter-spacing: .12em; font-size: 9px; margin-top: 3px; }
.workspace-label { letter-spacing: .1em; font-size: 10.5px; font-weight: 600; }
.sidebar nav button { font-weight: 500; padding: 10px 12px; }
.sidebar nav button:hover { background: var(--surface-2); color: var(--ink); }
.sidebar nav button.active { font-weight: 600; }
.nav-count { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.sidebar nav button.active .nav-count { background: var(--surface); }
.nav-count.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.sidebar-card { display: none; }
.profile strong { color: var(--ink); }
.profile .avatar { background: var(--brand-soft); border-color: var(--line); color: var(--brand); }
.live-dot { background: var(--good); }
.topbar { background: color-mix(in srgb, var(--surface) 82%, transparent); }
h1 { font-family: var(--font-body); font-weight: 700; font-size: clamp(24px, 2.3vw, 30px); letter-spacing: -.025em; line-height: 1.25; }
.page-title { margin-bottom: 22px; align-items: center; }
.page-title p { font-size: 14.5px; margin-top: 6px; }
.panel, .kpi, .acc-card, .fin-stats > div, .inv-stats .panel { border-radius: var(--r); box-shadow: var(--shadow); }
.panel-head h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.kpi { padding: 20px; gap: 8px; }
.kpi-top span { font-size: 13px; letter-spacing: 0; font-weight: 600; color: var(--ink-2); }
.kpi h2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi h2 small { font-size: 12px; font-weight: 500; }
.kpi.featured, .acc-card.total { background: var(--feature-bg); border-color: var(--feature-bg); color: var(--feature-ink); }
.kpi.featured .kpi-top span, .kpi.featured .kpi-top, .kpi.featured p, .kpi.featured h2 small, .acc-card.total span, .acc-card.total small { color: color-mix(in srgb, var(--feature-ink) 75%, transparent); }
.acc-bar .company, .kpi.featured .acc-row.company i { background: #8fe8bd; }
.acc-bar .personal, .kpi.featured .acc-row.personal i { background: #fcd38a; }
.focus-num, .acc-card.total strong, .inv-stats strong { font-family: var(--font-body); font-weight: 700; letter-spacing: -.03em; }
.focus-num { font-size: 26px; }
.drawer-title h2, .modal-head h2 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.02em; }
.drawer-title h2 { font-size: 24px; } .modal-head h2 { font-size: 20px; }
.inv-stats small { letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.inv-stats strong { font-size: 28px; }
th { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--muted); }
.btn { border-radius: var(--r-sm); font-weight: 600; }
.btn.outline { background: var(--surface); }
.badge, .pill { font-weight: 600; font-size: 12px; padding: 3px 10px; }
.stage-chip { border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow); }
.seg-tabs button { border-radius: 8px; }
.foot { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.eyebrow { letter-spacing: .1em; }
.owe-list li { display: flex; align-items: center; gap: 8px; padding-right: 16px; }
.owe-list li .row-btn { flex: 1; min-width: 0; }
.owe-list .micro-bar { max-width: 180px; }
.owe-btn { flex-shrink: 0; }
.bottom-nav { display: none; }
@media (max-width: 1023px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 500; }
  .bottom-nav button.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
  .bottom-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  main { padding-bottom: 96px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .topbar .icon-btn.mobile-menu { display: none; }
}
@media (max-width: 640px) { .owe-list .micro-bar { display: none; } .owe-list li { flex-wrap: wrap; padding: 0 16px 12px 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- commission (Huy) ---------- */
.fin-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fin-stats small { font-size: 11.5px; line-height: 1.35; }
.comm-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.comm-steps .pill { font-variant-numeric: tabular-nums; }
.panel.commission { margin-top: 16px; }
@media (max-width: 1100px) { .fin-stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fin-stats.four { grid-template-columns: minmax(0, 1fr); } }
.comm td:nth-child(3) .v, .comm td:nth-child(2) .v { white-space: nowrap; }

/* ---------- delivery schedule ---------- */
.panel.schedule { margin-bottom: 16px; }
.sched-day { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid var(--line); }
.sched-date { padding: 14px 20px; display: grid; align-content: start; gap: 2px; border-right: 1px solid var(--line); background: var(--surface-2); }
.sched-date strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sched-date small { font-size: 12px; color: var(--muted); }
.sched-day.near .sched-date small { color: var(--warn); font-weight: 600; }
.sched-day.late .sched-date { background: var(--bad-bg); }
.sched-day.late .sched-date strong, .sched-day.late .sched-date small { color: var(--bad); }
.sched-day .row-list .row-btn { padding-left: 16px; }
.sched-foot { border-top: 1px solid var(--line); }
.sched-foot .more-row { border-bottom: 0; }
.sched-foot .row-list.later { border-top: 1px solid var(--line); }
.sched-foot .helper { margin: 12px 0 14px; }
@media (max-width: 640px) {
  .sched-day { grid-template-columns: minmax(0, 1fr); }
  .sched-date { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; justify-content: space-between; padding: 10px 16px; }
}
.pill.tiny { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; font-weight: 600; }
td .v > .pill.tiny { display: table; margin: 4px 0 0 auto; }
.est-list { list-style: none; margin: 0; padding: 0; }
.est-list li { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--line); }
.est-main { display: flex; gap: 10px; min-width: 0; align-items: flex-start; }
.est-main .pill.tiny { margin: 2px 0 0; flex: none; }
.est-main strong { font-size: 14px; }
.est-main p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.est-side { display: grid; justify-items: end; gap: 8px; flex: none; }
.est-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .est-list li { flex-direction: column; } .est-side { justify-items: start; width: 100%; } .est-actions { justify-content: flex-start; } }

/* ---------- leads ---------- */
.lead-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead-stats small { font-size: 12px; }
table.leads td .v small, table.report td .v small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
table.leads td .v small.bad { color: var(--bad); } table.leads td .v small.warn { color: var(--warn); }
table.leads .actions { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 640px) { table.leads .actions { justify-content: flex-start; flex-wrap: wrap; } }

/* ---------- monthly report ---------- */
.rep-kpis { margin-bottom: 16px; }
table.report td, table.report th { white-space: nowrap; }
table.report tr.rep-row { cursor: default; }
table.report tr.rep-row[tabindex="0"] { cursor: pointer; }
table.report tr.rep-row[tabindex="0"]:hover td { background: var(--surface-2); }
table.report tr.rep-row.open td { background: var(--surface-2); }
table.report tr.rep-row td.main small { display: block; font-size: 12px; color: var(--brand-text); font-weight: 600; }
table.report tr.undated td.main strong { color: var(--muted); font-style: italic; }
table.report tfoot td { border-top: 2px solid var(--line-strong); font-weight: 700; background: var(--surface-2); }
table.report .rep-detail td { padding: 0; background: var(--surface-2); }
.rep-orders { list-style: none; margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand); }
.rep-orders li + li { border-top: 1px solid var(--line); }
.rep-orders .row-btn { padding: 9px 16px; }
.rep-orders .row-side { display: grid; justify-items: end; gap: 2px; }
.rep-orders .row-side small { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  table.report tfoot { display: block; } table.report tfoot tr { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; }
  table.report .rep-detail { padding: 0 !important; }
  .rep-orders { padding-left: 8px; }
  .lead-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- black & gold theme ---------- */
.sidebar { background: var(--side-bg); border-right-color: var(--side-line); }
.brand-name { color: var(--side-ink); }
.brand-mark { background: linear-gradient(145deg, #e2bd74, #b8893b 60%, #8f6727); color: #15130f; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.brand small { color: var(--side-active-fg); opacity: .8; }
.sidebar nav button { color: var(--side-fg); }
.sidebar nav button:hover { background: var(--side-hover); color: var(--side-ink); }
.sidebar nav button.active { background: var(--side-active-bg); color: var(--side-active-fg); box-shadow: inset 2px 0 0 var(--side-active-fg); }
.sidebar nav button.active .nav-count { background: rgba(232, 196, 126, .18); }
.profile strong { color: var(--side-ink); }
.profile .avatar { background: var(--side-active-bg); border-color: #4a3d25; color: var(--side-active-fg); }
.sidebar .text-btn, .sidebar-bottom button { color: var(--side-fg); }
.kpi.featured, .acc-card.total { background: var(--feature-bg); border-color: var(--feature-bg); color: var(--feature-ink); box-shadow: inset 0 0 0 1px rgba(226, 189, 116, .22), var(--shadow); }
.kpi.featured h2, .acc-card.total strong { color: var(--feature-num); }
.acc-bar .company, .kpi.featured .acc-row.company i { background: #e2bd74; }
.acc-bar .personal, .kpi.featured .acc-row.personal i { background: #efe6d2; }
.btn.primary:hover:not(:disabled) { background: var(--brand-hover); }
.text-btn { color: var(--brand-text); }
.page-title h1 { letter-spacing: -.02em; }

/* ---------- departments & members ---------- */
.dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dept-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow); }
.dept-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dept-top strong { font-size: 15px; }
.dept-card p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.dept-card .text-btn { margin-top: 4px; }
table.members td { vertical-align: middle; }
table.members tr.waiting td.main strong { color: var(--brand-text); }
table.members .cell-main { display: flex; align-items: center; gap: 10px; }
.add-list { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.add-list .row-btn.static { cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.add-list .cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.preview-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px clamp(16px, 3vw, 40px); background: var(--feature-bg); color: var(--feature-ink); font-size: 13.5px; }
.preview-bar strong { color: var(--feature-num); }
.preview-bar span { flex: 1; min-width: 0; }
.preview-bar .btn { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dept-grid, .stat-grid.three { grid-template-columns: minmax(0, 1fr); } .preview-bar { flex-wrap: wrap; } .add-list .row-btn.static { flex-wrap: wrap; } }
table.members td > .v { justify-items: start; text-align: left; }
@media (max-width: 640px) { table.members td > .v { justify-items: end; text-align: right; } }

/* ---------- bento luxe ---------- */
:root { --r: 20px; --r-sm: 12px; --gap: 16px; }
:root { --shadow: 0 1px 1px rgba(29, 26, 22, .03), 0 10px 30px -18px rgba(29, 26, 22, .22); }
body { font-size: 14.5px; }
main { padding-block: 34px 28px; }
@media (min-width: 1024px) {
  .sidebar { inset: 12px auto 12px 12px; width: 240px; border-radius: 26px; border-right: 0; box-shadow: 0 20px 50px -24px rgba(0,0,0,.55); }
  .shell { margin-left: 264px; }
  .topbar { border-bottom: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); }
}
.page-title { margin-bottom: 26px; }
.page-title h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.page-title p { color: var(--muted); }
.panel { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); margin-bottom: var(--gap); }
.panel-head { padding: 22px 24px 14px; }
.panel-head h3 { font-size: 17px; letter-spacing: -.02em; }
.grid-2 { gap: var(--gap); }
.grid-2 > .panel { margin-bottom: var(--gap); }
.btn { border-radius: 999px; }
.btn.primary { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
.search, select, .period select, input[type="text"], input[type="date"], input[type="number"], textarea { border-radius: 14px; }

/* KPI bento: featured tile spans two rows, four tiles around it */
.kpis.bento { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--gap); margin-bottom: var(--gap); }
.kpis.bento .kpi.featured { grid-row: span 2; padding: 26px; justify-content: flex-start; position: relative; overflow: hidden; }
.kpis.bento .kpi.featured::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 189, 116, .22), transparent 70%); pointer-events: none; }
.kpis.bento .kpi.featured h2 { font-size: clamp(40px, 4.2vw, 58px); letter-spacing: -.045em; margin: 10px 0 4px; }
.kpis.bento .kpi.featured .acc-split { margin-top: auto; padding-top: 18px; }
.kpi { padding: 22px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.kpi.as-btn:hover { transform: translateY(-2px); }
.kpi-top span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi.featured .kpi-top span { color: color-mix(in srgb, var(--feature-ink) 70%, transparent); }
.kpi h2 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.04em; }
.kpi-foot { border-top: 0; padding-top: 6px; }
.tile-next h2.tile-client { font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.025em; white-space: normal; line-height: 1.2; }
.tile-next { background: linear-gradient(160deg, var(--brand-soft), var(--surface) 70%); }
.sched-day, .row-list li { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
.badge, .pill { border-radius: 999px; }
@media (max-width: 1100px) { .kpis.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.bento .kpi.featured { grid-row: auto; grid-column: 1 / -1; } }
@media (max-width: 640px) { .kpis.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; grid-auto-rows: auto; } .kpis.bento .kpi.featured h2 { font-size: 40px; } .tile-next { grid-column: 1 / -1; } .panel-head { padding: 18px 16px 12px; } }

/* ---------- production brief ---------- */
.brief-panel { margin: 22px 0 6px; padding: 18px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 16px; }
.brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.brief-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brief-head label.btn { cursor: pointer; }
.brief-head label.disabled { opacity: .6; pointer-events: none; }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.brief-grid figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.brief-grid figcaption { font-size: 12px; color: var(--muted); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.brief-thumb { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--line); position: relative; }
.brief-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.brief-thumb:hover img { transform: scale(1.04); }
.brief-thumb.broken img { display: none; }
.brief-thumb.broken::after { content: "Ảnh chỉ xem được khi đăng nhập tài khoản công ty"; position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 11px; color: var(--muted); }
.brief-thumb.pdf { display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; color: var(--brand-text); text-decoration: none; font-size: 12px; text-align: center; word-break: break-word; }
.brief-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface); text-align: center; cursor: pointer; color: var(--muted); }
.brief-drop strong { color: var(--ink); }
.brief-drop span { font-size: 12.5px; }
.brief-drop:hover { border-color: var(--brand); }
.brief-sub { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.brief-sub h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 0; }
.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.spec-list > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-width: 0; }
.spec-list dt { font-size: 11.5px; color: var(--muted); }
.spec-list dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.spec-list > div.empty dd { color: var(--muted); font-weight: 400; font-style: italic; }
.spec-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spec-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.spec-form textarea, .note-compose textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); background: var(--surface); resize: vertical; font-size: 13.5px; }
.spec-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.note-compose { display: grid; gap: 8px; justify-items: end; }
.note-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.note-list li { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: 10px 12px; }
.note-meta { display: flex; align-items: baseline; gap: 8px; }
.note-meta strong { font-size: 13px; }
.note-meta .text-btn { margin-left: auto; }
.note-list p { margin-top: 4px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.text-btn.small { font-size: 12px; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(10, 9, 7, .86); display: grid; place-items: center; padding: 20px; }
.lightbox-inner { display: grid; gap: 10px; max-width: min(1100px, 100%); max-height: 100%; }
.lightbox-inner img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; justify-self: center; background: #111; }
.lightbox-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #efe6d2; }
.lightbox-bar input { flex: 1 1 240px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; }
.lightbox-bar small { color: #b9ae9a; }
.lightbox-bar .btn.ghost { color: #efe6d2; }
@media (max-width: 640px) { .spec-list, .spec-form { grid-template-columns: minmax(0, 1fr); } .brief-panel { padding: 14px; } .brief-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-list > div { text-align: left; display: grid; align-content: start; }

/* ---------- order types ---------- */
.type-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.type-seg button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.type-seg button:hover { border-color: var(--brand); }
.type-seg button.on { background: var(--feature-bg); border-color: var(--feature-bg); color: var(--feature-num); font-weight: 600; }
.type-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; margin-right: 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.type-tag.big { font-size: 12px; padding: 3px 10px; margin: 0 0 8px; }
.type-tag.big.t-booth { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.thumb.t-software, .thumb.t-parts, .thumb.t-consumables, .thumb.t-design, .thumb.t-rental, .thumb.t-frame { background: var(--feature-bg); color: var(--feature-num); }

/* ---------- stock lines & profit ---------- */
.stock-lines { gap: 8px; }
.line-list { display: grid; gap: 6px; }
.line-head, .line-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 34px; gap: 8px; align-items: center; }
.line-list.owner .line-head, .line-list.owner .line-row { grid-template-columns: minmax(0, 1fr) 70px 150px 110px 34px; }
.line-head span { font-size: 11.5px; color: var(--muted); }
.line-row input[type="number"] { width: 100%; }
.line-cost { font-size: 12.5px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.line-cost.warn { color: var(--warn); }
.add-line { justify-self: start; }
.profit-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.profit-box > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 2px; }
.profit-box span { font-size: 12px; color: var(--muted); }
.profit-box strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.profit-box .hl { background: var(--feature-bg); border-color: var(--feature-bg); }
.profit-box .hl span, .profit-box .hl small { color: color-mix(in srgb, var(--feature-ink) 70%, transparent); }
.profit-box .hl strong.good { color: var(--feature-num); }
.stock-list { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.stock-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.stock-list li:first-child { border-top: 0; }
.helper.warn { color: var(--warn); }
@media (max-width: 640px) { .line-list.owner .line-head { display: none; } .line-list.owner .line-row { grid-template-columns: 70px minmax(0, 1fr) 34px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .line-list.owner .line-row > select { grid-column: 1 / -1; } .line-list.owner .line-row > .line-cost { grid-column: 1 / 3; text-align: left; } .profit-box { grid-template-columns: minmax(0, 1fr); } }
.stock-list li small { display: block; }
.stage-chip.zero { opacity: .55; }
.chip-row .stage-chip { white-space: nowrap; flex-wrap: nowrap; }
.inv-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- purchase inbox ---------- */
.pu-list { list-style: none; margin: 0; padding: 0; }
.pu-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); }
.pu-list li.guess-personal { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.pu-main { display: grid; gap: 2px; min-width: 0; }
.pu-main strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pu-side { display: grid; justify-items: end; gap: 2px; }
.pu-src { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.pu-src.s-shopee { background: #fdeee8; color: #c2410c; border-color: transparent; }
.pu-src.s-taobao { background: #fff1e6; color: #b45309; border-color: transparent; }
.pu-src.s-alibaba, .pu-src.s-1688 { background: #fff4e5; color: #9a5b00; border-color: transparent; }
.pu-list.done li { opacity: .75; }
@media (max-width: 760px) { .pu-list li { grid-template-columns: auto minmax(0, 1fr); padding: 12px 16px; } .pu-list .pu-side { justify-items: start; grid-column: 2; } .pu-list .actions { grid-column: 1 / -1; } }

/* ---------- palm logo ---------- */
.brand-mark { background: url("data:image/png;base64,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") center / contain no-repeat; box-shadow: none; border: 0; border-radius: 0; width: 38px; height: 44px; padding: 0; color: transparent; font-size: 0; }

/* ---------- fixed costs ---------- */
.fixed-kpis { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
.fx-split { margin-top: auto; padding-top: 16px; display: grid; gap: 7px; }
.fx-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; color: color-mix(in srgb, var(--feature-ink) 80%, transparent); }
.fx-row i { height: 6px; border-radius: 999px; background: var(--feature-num); display: block; }
.fx-row b { font-variant-numeric: tabular-nums; color: var(--feature-ink); }
.rate-edit { margin: 8px 0 4px; }
.fx-due { list-style: none; margin: 0; padding: 0; }
.fx-due li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); }
.fx-due li.done { opacity: .65; }
.fx-due li.late .fx-day strong { color: var(--warn); }
.fx-day { display: grid; justify-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px; }
.fx-day strong { font-size: 18px; line-height: 1.1; }
.fx-day small { font-size: 10px; }
.fx-main { display: grid; gap: 2px; min-width: 0; }
.fx-amt { display: grid; justify-items: end; }
.fx-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; min-width: 150px; }
.fx-table tr.off td { opacity: .55; }
@media (max-width: 760px) { .fx-due li { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 16px; } .fx-amt, .fx-act { grid-column: 2; justify-items: start; justify-content: flex-start; } .fx-row { grid-template-columns: 100px minmax(0, 1fr) auto; } }

/* ---------- Apple-clean overrides ---------- */
body { font-size: 15px; letter-spacing: -.01em; }
.sidebar { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--side-line); }
@media (min-width: 1024px) { .sidebar { box-shadow: 0 4px 24px rgba(0, 0, 0, .06); } }
@media (max-width: 1023px) { .sidebar { background: var(--surface); } }
.sidebar nav button.active { box-shadow: none; }
.sidebar nav button.active .nav-count { background: var(--surface); }
.nav-count { background: var(--surface-2); color: var(--ink-2); }
.nav-count.warn { background: #ff9f0a; color: #fff; }
.brand small { color: var(--side-muted); opacity: 1; }
.profile .avatar { background: var(--brand-soft); border-color: var(--line); color: var(--brand-text); }
.topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.page-title h1 { font-weight: 700; letter-spacing: -.03em; }
.panel, .kpi, .acc-card, .fin-stats > div, .inv-stats .panel, .dept-card { border: 1px solid rgba(0, 0, 0, .04); box-shadow: var(--shadow); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi { border-color: rgba(255,255,255,.06); }
.kpi.featured, .acc-card.total { background: var(--feature-bg); border-color: rgba(0, 0, 0, .04); color: var(--feature-ink); box-shadow: var(--shadow); }
.kpis.bento .kpi.featured::after { display: none; }
.kpi.featured h2, .acc-card.total strong { color: var(--feature-num); }
.kpi.featured .kpi-top span, .kpi.featured p, .kpi.featured h2 small, .acc-card.total span, .acc-card.total small { color: var(--muted); }
.kpi-top span { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.acc-bar { background: var(--surface-2); }
.acc-bar .company, .kpi.featured .acc-row.company i { background: var(--acc-company); }
.acc-bar .personal, .kpi.featured .acc-row.personal i { background: var(--acc-personal); }
.acc-bar .unknown, .kpi.featured .acc-row.unknown i { background: var(--acc-unknown); }
.kpi.featured .acc-row { color: var(--ink-2); }
.kpi.featured .acc-row b { color: var(--ink); }
.tile-next { background: var(--surface); }
.btn.primary { box-shadow: none; }
.btn.primary:hover:not(:disabled) { background: var(--brand-hover); transform: scale(1.02); }
.btn { transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.type-seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.profit-box .hl { background: var(--brand-soft); border-color: transparent; }
.profit-box .hl span, .profit-box .hl small { color: var(--brand-text); }
.profit-box .hl strong.good { color: var(--brand-text); }
.preview-bar { background: var(--brand); color: #fff; }
.preview-bar strong { color: #fff; }
.preview-bar .btn { background: #fff; color: var(--brand); }
.fx-row { color: var(--ink-2); }
.fx-row i { background: var(--brand); }
.fx-row b { color: var(--ink); }
.note-list li { border-left-color: var(--brand); }
.rep-orders { border-left-color: var(--brand); }
.stage-chip.selected { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stage-chip.selected strong { color: var(--surface); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
main > * { animation: fadeUp .35s cubic-bezier(.25, .1, .25, 1) both; }
@media (prefers-reduced-motion: reduce) { main > * { animation: none; } .btn.primary:hover:not(:disabled) { transform: none; } }

/* ---------- iOS 27 Liquid Glass ---------- */
:root {
  --glass: .55;
  --glass-tint: 255, 255, 255;
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 10px 34px -12px rgba(30, 40, 70, .18);
  --wall-1: rgba(0, 113, 227, .16); --wall-2: rgba(255, 159, 10, .16); --wall-3: rgba(175, 82, 222, .12);
  --r: 24px; --r-sm: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-tint: 36, 36, 40; --glass-edge: rgba(255, 255, 255, .1); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .12); --glass-shadow: 0 12px 36px -12px rgba(0, 0, 0, .8); --wall-1: rgba(10, 132, 255, .22); --wall-2: rgba(255, 159, 10, .14); --wall-3: rgba(191, 90, 242, .16); } }
:root[data-theme="dark"] { --glass-tint: 36, 36, 40; --glass-edge: rgba(255, 255, 255, .1); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .12); --glass-shadow: 0 12px 36px -12px rgba(0, 0, 0, .8); --wall-1: rgba(10, 132, 255, .22); --wall-2: rgba(255, 159, 10, .14); --wall-3: rgba(191, 90, 242, .16); }

/* Soft colour wallpaper under everything so the glass has something to refract. */
html, body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(40vmax 40vmax at 12% 8%, var(--wall-1), transparent 60%), radial-gradient(38vmax 38vmax at 92% 18%, var(--wall-2), transparent 60%), radial-gradient(46vmax 46vmax at 70% 96%, var(--wall-3), transparent 60%), var(--bg); }
.app { position: relative; }

.panel, .kpi, .kpi.featured, .acc-card, .acc-card.total, .fin-stats > div, .inv-stats .panel, .dept-card, .sidebar, .topbar, .brief-panel {
  background: rgba(var(--glass-tint), var(--glass));
  backdrop-filter: blur(28px) saturate(185%); -webkit-backdrop-filter: blur(28px) saturate(185%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.topbar { box-shadow: none; border-width: 0 0 1px; border-radius: 0; }
.panel .panel, .grid-2 > .panel .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
.table-scroll thead th, table thead th { background: rgba(var(--glass-tint), calc(var(--glass) * .6)); }
.kpi.as-btn:hover { transform: translateY(-2px); box-shadow: var(--glass-hi), 0 16px 40px -14px rgba(30, 40, 70, .28); }
@media (min-width: 1024px) { .sidebar { border-radius: 30px; } }
.sidebar nav button { border-radius: 14px; }
.sidebar nav button.active { background: rgba(var(--glass-tint), .9); color: var(--brand-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 14px -6px rgba(0, 0, 0, .18); }

/* Controls: glass pills, tinted primary. */
.btn.outline, .btn.ghost, .period select, .toolbar select, .search, select.inline {
  background: rgba(var(--glass-tint), calc(var(--glass) + .15));
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: var(--glass-edge);
}
.btn.ghost { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.stage-chip { background: rgba(var(--glass-tint), calc(var(--glass) + .1)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--glass-edge); }
.stage-chip.selected { background: var(--ink); color: var(--surface); }
.modal, .drawer { background: rgba(var(--glass-tint), .88); backdrop-filter: blur(36px) saturate(190%); -webkit-backdrop-filter: blur(36px) saturate(190%); border: 1px solid var(--glass-edge); }
.drawer { border-radius: 28px 0 0 28px; }
.overlay, .drawer-overlay { background: rgba(0, 0, 0, .22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.stat-grid > div, .meta-grid > div, .spec-list > div, .profit-box > div:not(.hl), .stock-list, .note-list li { background: rgba(var(--glass-tint), .5); border-color: var(--glass-edge); }

/* Floating glass tab bar on phones, like iOS. */
@media (max-width: 1023px) {
  .bottom-nav { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 999px; padding: 6px; border: 1px solid var(--glass-edge);
    background: rgba(var(--glass-tint), calc(var(--glass) + .1)); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); box-shadow: var(--glass-hi), 0 14px 36px -10px rgba(0, 0, 0, .3); }
  .bottom-nav button { border-radius: 999px; }
  .bottom-nav button.active { background: rgba(var(--glass-tint), .95); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .25); }
  main { padding-bottom: 110px; }
}

/* Transparency slider (iOS 27: clear ↔ tinted). */
.glass-slider { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 12px; color: var(--side-muted); }
.glass-slider span { font-weight: 600; color: var(--side-fg); margin-right: 4px; }
.glass-slider input { width: 100%; accent-color: var(--brand); }

@media (prefers-reduced-transparency: reduce) {
  .panel, .kpi, .sidebar, .topbar, .modal, .drawer, .bottom-nav, .btn, .stage-chip, .search, select { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .panel, .kpi, .sidebar, .modal, .drawer, .bottom-nav { background: var(--surface) !important; }
}
html { background: var(--bg); }
body { background: transparent !important; }
:root { --wall-1: rgba(0, 113, 227, .22); --wall-2: rgba(255, 159, 10, .2); --wall-3: rgba(175, 82, 222, .16); }

/* ---------- stage colours ---------- */
.st-new { --sc: #5856d6; --sb: #eeeefc; } .st-design { --sc: #9a3fc9; --sb: #f6ecfb; } .st-agree { --sc: #0a7c8c; --sb: #e5f5f7; }
.st-make { --sc: #c25700; --sb: #fff1e3; } .st-build { --sc: #8a6a00; --sb: #fbf4dc; } .st-qc { --sc: #c8265a; --sb: #fde9ef; }
.st-run { --sc: #0066cc; --sb: #e8f1fc; } .st-hold { --sc: #c93400; --sb: #ffece5; } .st-hand { --sc: #127a5c; --sb: #e3f5ee; }
.st-ship { --sc: #7a5af8; --sb: #f0ecfe; } .st-out { --sc: #0a84a8; --sb: #e3f3f8; }
.st-care { --sc: #0b7570; --sb: #e2f4f3; } .st-done { --sc: #1d7f3a; --sb: #e9f7ee; } .st-cancel { --sc: #6e6e73; --sb: #f0f0f2; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .st-new { --sb: color-mix(in srgb, #5856d6 22%, #1c1c1e); --sc: color-mix(in srgb, #5856d6 55%, #fff); }
:root:not([data-theme="light"]) .st-design { --sb: color-mix(in srgb, #9a3fc9 22%, #1c1c1e); --sc: color-mix(in srgb, #9a3fc9 55%, #fff); }
:root:not([data-theme="light"]) .st-agree { --sb: color-mix(in srgb, #0a7c8c 22%, #1c1c1e); --sc: color-mix(in srgb, #0a7c8c 55%, #fff); }
:root:not([data-theme="light"]) .st-make { --sb: color-mix(in srgb, #c25700 22%, #1c1c1e); --sc: color-mix(in srgb, #c25700 55%, #fff); }
:root:not([data-theme="light"]) .st-build { --sb: color-mix(in srgb, #8a6a00 22%, #1c1c1e); --sc: color-mix(in srgb, #8a6a00 55%, #fff); }
:root:not([data-theme="light"]) .st-qc { --sb: color-mix(in srgb, #c8265a 22%, #1c1c1e); --sc: color-mix(in srgb, #c8265a 55%, #fff); }
:root:not([data-theme="light"]) .st-run { --sb: color-mix(in srgb, #0066cc 22%, #1c1c1e); --sc: color-mix(in srgb, #0066cc 55%, #fff); }
:root:not([data-theme="light"]) .st-hold { --sb: color-mix(in srgb, #c93400 22%, #1c1c1e); --sc: color-mix(in srgb, #c93400 55%, #fff); }
:root:not([data-theme="light"]) .st-hand { --sb: color-mix(in srgb, #127a5c 22%, #1c1c1e); --sc: color-mix(in srgb, #127a5c 55%, #fff); }
:root:not([data-theme="light"]) .st-ship { --sb: color-mix(in srgb, #7a5af8 22%, #1c1c1e); --sc: color-mix(in srgb, #7a5af8 55%, #fff); }
:root:not([data-theme="light"]) .st-out { --sb: color-mix(in srgb, #0a84a8 22%, #1c1c1e); --sc: color-mix(in srgb, #0a84a8 55%, #fff); }
:root:not([data-theme="light"]) .st-care { --sb: color-mix(in srgb, #0b7570 22%, #1c1c1e); --sc: color-mix(in srgb, #0b7570 55%, #fff); }
:root:not([data-theme="light"]) .st-done { --sb: color-mix(in srgb, #1d7f3a 22%, #1c1c1e); --sc: color-mix(in srgb, #1d7f3a 55%, #fff); }
:root:not([data-theme="light"]) .st-cancel { --sb: color-mix(in srgb, #6e6e73 22%, #1c1c1e); --sc: color-mix(in srgb, #6e6e73 55%, #fff); }
}
:root[data-theme="dark"] .st-new { --sb: color-mix(in srgb, #5856d6 22%, #1c1c1e); --sc: color-mix(in srgb, #5856d6 55%, #fff); }
:root[data-theme="dark"] .st-design { --sb: color-mix(in srgb, #9a3fc9 22%, #1c1c1e); --sc: color-mix(in srgb, #9a3fc9 55%, #fff); }
:root[data-theme="dark"] .st-agree { --sb: color-mix(in srgb, #0a7c8c 22%, #1c1c1e); --sc: color-mix(in srgb, #0a7c8c 55%, #fff); }
:root[data-theme="dark"] .st-make { --sb: color-mix(in srgb, #c25700 22%, #1c1c1e); --sc: color-mix(in srgb, #c25700 55%, #fff); }
:root[data-theme="dark"] .st-build { --sb: color-mix(in srgb, #8a6a00 22%, #1c1c1e); --sc: color-mix(in srgb, #8a6a00 55%, #fff); }
:root[data-theme="dark"] .st-qc { --sb: color-mix(in srgb, #c8265a 22%, #1c1c1e); --sc: color-mix(in srgb, #c8265a 55%, #fff); }
:root[data-theme="dark"] .st-run { --sb: color-mix(in srgb, #0066cc 22%, #1c1c1e); --sc: color-mix(in srgb, #0066cc 55%, #fff); }
:root[data-theme="dark"] .st-hold { --sb: color-mix(in srgb, #c93400 22%, #1c1c1e); --sc: color-mix(in srgb, #c93400 55%, #fff); }
:root[data-theme="dark"] .st-hand { --sb: color-mix(in srgb, #127a5c 22%, #1c1c1e); --sc: color-mix(in srgb, #127a5c 55%, #fff); }
:root[data-theme="dark"] .st-ship { --sb: color-mix(in srgb, #7a5af8 22%, #1c1c1e); --sc: color-mix(in srgb, #7a5af8 55%, #fff); }
:root[data-theme="dark"] .st-out { --sb: color-mix(in srgb, #0a84a8 22%, #1c1c1e); --sc: color-mix(in srgb, #0a84a8 55%, #fff); }
:root[data-theme="dark"] .st-care { --sb: color-mix(in srgb, #0b7570 22%, #1c1c1e); --sc: color-mix(in srgb, #0b7570 55%, #fff); }
:root[data-theme="dark"] .st-done { --sb: color-mix(in srgb, #1d7f3a 22%, #1c1c1e); --sc: color-mix(in srgb, #1d7f3a 55%, #fff); }
:root[data-theme="dark"] .st-cancel { --sb: color-mix(in srgb, #6e6e73 22%, #1c1c1e); --sc: color-mix(in srgb, #6e6e73 55%, #fff); }
.badge[class*="st-"] { background: var(--sb); color: var(--sc); border-color: transparent; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); display: inline-block; flex-shrink: 0; }
.stage-chip[class*="st-"] { display: inline-flex; align-items: center; gap: 7px; }
.stage-chip[class*="st-"].selected { background: var(--sc); border-color: var(--sc); color: #fff; }
.stage-chip[class*="st-"].selected strong, .stage-chip[class*="st-"].selected .sdot { color: #fff; background: #fff; }
.stage-chip[class*="st-"].selected strong { background: transparent; }
.stage-select[class*="st-"] select { background: var(--sb); color: var(--sc); border-color: transparent; font-weight: 600; }

/* Delivery schedule: each day is its own card with clear dividers. */
.panel.schedule { padding-bottom: 14px; }
.sched-day { margin: 0 16px 10px; border: 1px solid var(--line-strong) !important; border-radius: 16px; overflow: hidden; background: rgba(var(--glass-tint), .7); }
.sched-day:first-of-type { margin-top: 2px; }
.sched-date { background: var(--brand-soft); border-right: 1px solid var(--line-strong); }
.sched-date strong { font-size: 14.5px; }
.sched-day.near .sched-date { background: var(--warn-bg); }
.sched-day .row-list li + li { border-top: 1px solid var(--line-strong) !important; }
.sched-day .row-list li { border-bottom: 0 !important; }
.sched-foot { border-top: 0; margin: 4px 16px 0; }
@media (max-width: 640px) { .sched-day { margin: 0 12px 10px; } .sched-date { border-right: 0; border-bottom: 1px solid var(--line-strong); } }

/* ---------- urgency: chill → gấp → trễ ---------- */
.u-chill { --uc: #1d7f3a; --ub: #e9f7ee; } .u-ok { --uc: #0066cc; --ub: #e8f1fc; } .u-soon { --uc: #8a6a00; --ub: #fbf2d2; }
.u-hot { --uc: #c25700; --ub: #ffead6; } .u-late { --uc: #d70015; --ub: #ffe5e8; } .u-none { --uc: #6e6e73; --ub: #f0f0f2; } .u-shipped { --uc: #0a7c8c; --ub: #e3f4f6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .u-chill { --uc: #6fd08c; --ub: #17301f; } :root:not([data-theme="light"]) .u-ok { --uc: #6fb3ff; --ub: #142538; } :root:not([data-theme="light"]) .u-soon { --uc: #e6c45a; --ub: #33290d; } :root:not([data-theme="light"]) .u-hot { --uc: #ffa35c; --ub: #3d2410; } :root:not([data-theme="light"]) .u-late { --uc: #ff6b78; --ub: #451a1f; } :root:not([data-theme="light"]) .u-none { --uc: #a1a1a6; --ub: #2c2c2e; } :root:not([data-theme="light"]) .u-shipped { --uc: #5fd0dd; --ub: #12302f; } }
:root[data-theme="dark"] .u-chill { --uc: #6fd08c; --ub: #17301f; } :root[data-theme="dark"] .u-ok { --uc: #6fb3ff; --ub: #142538; } :root[data-theme="dark"] .u-soon { --uc: #e6c45a; --ub: #33290d; } :root[data-theme="dark"] .u-hot { --uc: #ffa35c; --ub: #3d2410; } :root[data-theme="dark"] .u-late { --uc: #ff6b78; --ub: #451a1f; } :root[data-theme="dark"] .u-none { --uc: #a1a1a6; --ub: #2c2c2e; } :root[data-theme="dark"] .u-shipped { --uc: #5fd0dd; --ub: #12302f; }
.urg { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 2px 9px; border-radius: 999px; background: var(--ub); color: var(--uc); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.urg i { width: 7px; height: 7px; border-radius: 50%; background: var(--uc); }
.u-hot.urg i, .u-late.urg i { animation: urgpulse 1.6s ease-in-out infinite; }
@keyframes urgpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--uc) 25%, transparent); } }
.urg.big { font-size: 13px; padding: 4px 12px; margin: 6px 0 4px; }
table.orders tr.urow td:first-child { box-shadow: inset 4px 0 0 var(--uc); }
.urg-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 12px; }
.urg-legend .urg { margin: 0; font-weight: 500; }
.sched-day[class*="u-"] .sched-date { background: var(--ub); }
.sched-day[class*="u-"] .sched-date small { color: var(--uc); font-weight: 600; }
.sched-day[class*="u-"] { box-shadow: inset 4px 0 0 var(--uc); }
@media (max-width: 640px) { table.orders.cards tr.urow { box-shadow: inset 4px 0 0 var(--uc); } table.orders tr.urow td:first-child { box-shadow: none; } .urg-legend { padding: 0 16px 10px; } }
@media (prefers-reduced-motion: reduce) { .urg i { animation: none !important; } }
.del-btn { color: var(--bad); }
.hidden-items { margin: 4px 0 14px; }
.hidden-items ul { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(var(--glass-tint), .6); }
.hidden-items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.hidden-items li:first-child { border-top: 0; }
.hidden-items li span:first-child { display: grid; }
.ws-list li.done { opacity: .7; }
.workshop-log .panel-actions { display: flex; gap: 10px; align-items: center; }
.ws-shops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 24px 14px; }
.ws-shop { text-align: left; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--glass-tint), .55); }
.ws-shop small { font-size: 12px; color: var(--muted); }
.ws-shop.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ws-shop.on small { color: rgba(255, 255, 255, .85); }
.ws-tag { font-weight: 600; color: var(--brand-text); }
@media (max-width: 760px) { .ws-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 12px; } }
.ws-view { margin: 0 24px 12px; display: inline-flex; }
.ws-view button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ws-view button.on { background: var(--ink); color: var(--surface); }
.ws-totals .ws-big { font-size: 16px; }
.ws-by { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-totals th .text-btn { margin-left: 8px; font-weight: 500; }
@media (max-width: 760px) { .ws-view { margin: 0 16px 10px; } }
.ws-use { display: grid; gap: 3px; max-width: 320px; margin-top: 4px; }
.ws-left { color: var(--warn) !important; font-weight: 600; }
.ws-shop.on .ws-left { color: #fff !important; }
.qty-row { display: flex; gap: 8px; align-items: center; }
.qty-row input { flex: 1; }
.ws-hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 0 24px 16px; }
.ws-hand-col { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: rgba(var(--glass-tint), .55); }
.ws-hand-col h4 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.ws-hand-col ul { list-style: none; margin: 0; padding: 0; }
.ws-hand-col li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ws-hand-col li span { display: grid; }
.ws-hand-col li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ws-hand { padding: 0 16px 12px; } }

/* booth equipment checklist */
.kit-box { gap: 8px; }
.kit-box .field-label small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.kit-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kit-tools select { max-width: 280px; }
.kit-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.kit-list li { display: grid; grid-template-columns: minmax(130px, 1fr) 64px minmax(140px, 1.3fr) 100px 150px; gap: 8px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); }
.kit-list li:first-child { border-top: 0; }
.kit-list li:not(.on) { grid-template-columns: minmax(150px, 1fr) auto; }
.kit-list li.on { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.kit-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.kit-check input { width: 17px; height: 17px; accent-color: var(--brand); }
.kit-qty { width: 100%; }
.kit-stock { font-size: 12px; color: var(--muted); } .kit-stock.good { color: var(--good, #1d7f3a); } .kit-stock.bad { color: var(--bad, #c93400); }
.kit-cost { text-align: right; font-size: 13px; }
@media (max-width: 640px) { .kit-list li.on { grid-template-columns: minmax(0, 1fr) 64px; } .kit-list li.on .kit-item, .kit-list li.on .kit-stock, .kit-list li.on .kit-cost, .kit-list li.on .money-input { grid-column: 1 / -1; } }
.kit-list .kit-item { min-width: 0; width: 100%; } .kit-list .money-input { min-width: 0; }
.check-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; }
.tick-btn { color: var(--good, #1d7f3a); }
.check-list.compact li { display: flex; align-items: center; gap: 4px; }
.check-list.compact li .row-btn { flex: 1; min-width: 0; }
.tick-mini { color: var(--muted); flex: none; } .tick-mini:hover { color: var(--good, #1d7f3a); }
/* ---------- notifications (Thông báo) ---------- */
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.nt-strip { width: 100%; align-items: center; text-align: left; margin: -6px 0 18px; cursor: pointer; }
.nt-strip > span { flex: 1; min-width: 0; }
.nt-strip strong { color: inherit; }
.nt-strip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.nt-stats strong { font-size: 24px; line-height: 1.2; }
.nt-stats small { display: block; }
.nt-list strong { display: block; font-weight: 600; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.nt-list .check-main > div { min-width: 0; flex: 1; }
.nt-list li.nt-done { opacity: .62; }
.nt-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nt-src { font-weight: 600; color: var(--ink-2); }
.nt-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nt-actions a.btn { text-decoration: none; }
.nt-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.nt-brief-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); padding: 0 20px 4px; overflow-wrap: anywhere; max-width: 78ch; }
.nt-brief-text.clamped { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
.nt-brief-foot { padding: 6px 20px 16px; }
.nt-anchor { scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }
.nt-email .panel-actions .seg-tabs, .nt-history .panel-actions .seg-tabs { margin: 0; }
.nt-prio { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.nt-prio.cao { background: var(--bad-bg); color: var(--bad); }
.nt-prio.vua { background: var(--warn-bg); color: var(--warn); }
table.nt-mail td.main { min-width: 200px; max-width: 280px; }
table.nt-mail td.main small { display: block; }
table.nt-mail td.need { min-width: 240px; max-width: 460px; line-height: 1.55; color: var(--ink-2); }
.nt-subject { max-width: 260px; }
table.nt-mail td.actions-cell, table.nt-mail .ext { white-space: nowrap; }
.nt-wait.bad { color: var(--bad); font-weight: 600; }
.nt-day { padding: 9px 20px 7px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); }
.nt-hist .check-list li:first-child { border-top: 0; }
.nt-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 20px; border-top: 1px solid var(--line); align-items: start; }
.nt-task-main { display: grid; gap: 2px; min-width: 0; }
.nt-task-main strong { font-weight: 600; }
.nt-task-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.nt-task p { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.bottom-nav button { position: relative; }
.bn-badge { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--brand-ink); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .nt-stats strong { font-size: 20px; }
  .nt-task { grid-template-columns: minmax(0, 1fr); padding-left: 16px; padding-right: 16px; }
  .nt-task-side { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
  .nt-day { padding-left: 16px; padding-right: 16px; }
  .nt-brief-text { padding-left: 16px; padding-right: 16px; }
  .nt-brief-foot { padding-left: 16px; padding-right: 16px; }
  table.cards.nt-mail td.main { max-width: none; }
  table.cards.nt-mail td.need { display: block; min-width: 0; max-width: none; }
  table.cards.nt-mail td.need::before { content: none; }
  .nt-subject { max-width: 100%; }
}
.nt-tick { color: var(--good, #1d7f3a); }
table.nt-mail tr.nt-done { opacity: .62; }
table.nt-mail .nt-actions { justify-content: flex-end; flex-wrap: nowrap; }

/* first brief image as order thumbnail */
.thumb.brief-thumb-mini { width: 44px; height: 44px; padding: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.thumb.brief-thumb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.brief-thumb-mini.sm { width: 38px; height: 38px; }
.row-btn > .thumb { margin-right: 2px; }

/* Numbers: one flat row */
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.stats-head h3 { font-size: 15px; font-weight: 600; }
.stats-head .period { height: 34px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin-bottom: var(--gap); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-align: left; color: var(--ink); min-width: 0; border-right: 1px solid var(--line); background: transparent; }
.stat:last-child { border-right: 0; }
button.stat:hover { background: var(--surface-2); }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-val { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } .stat { border-bottom: 1px solid var(--line); } .stat:nth-child(2n) { border-right: 0; } .stat-val { font-size: 19px; } }

/* Delivery calendar: 2 weeks, Monday first */
.panel.cal { padding: 0 0 6px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; flex-wrap: wrap; }
.cal-head h3 { font-size: 15px; font-weight: 600; }
.cal-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav .btn.small { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.flip { display: inline-flex; transform: rotate(180deg); }
.cal-late { display: flex; gap: 10px; align-items: flex-start; margin: 0 18px 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bad-bg); }
.cal-late-label { font-size: 12px; font-weight: 600; color: var(--bad); padding-top: 7px; white-space: nowrap; }
.cal-late-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cal-late .cal-chip { background: var(--surface); max-width: 240px; }
.cal-grid { border-top: 1px solid var(--line); }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-row + .cal-row { border-top: 1px solid var(--line); }
.cal-wd { border-top: 0 !important; }
.cal-wd span { font-size: 11px; color: var(--muted); padding: 6px 8px; text-align: left; font-weight: 600; letter-spacing: .04em; }
.cal-cell { min-height: 92px; padding: 6px 6px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-cell:last-child { border-right: 0; }
.cal-cell.past { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cal-cell.past .cal-date b { color: var(--muted); font-weight: 500; }
.cal-date { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 2px; font-size: 12px; }
.cal-date b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-date em { font-style: normal; font-size: 11px; color: var(--muted); }
.cal-wd-m { display: none; }
.cal-cell.today .cal-date b { background: var(--bad); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px; }
.cal-cell.today .cal-today { color: var(--bad); font-weight: 600; }
.cal-items { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-chip { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px 4px 4px; border-radius: 8px; background: var(--sb, var(--surface-2)); border: 1px solid transparent; text-align: left; color: var(--ink); min-width: 0; }
.cal-chip:hover { border-color: var(--sc, var(--line-strong)); }
.cal-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cal-chip strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip small { font-size: 11px; color: var(--sc, var(--muted)); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .sdot { width: 6px; height: 6px; }
.thumb.brief-thumb-mini.xs { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; }
.cal-foot { padding: 8px 18px 6px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.cal-foot p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12.5px; }
.cal-foot p > span { color: var(--muted); min-width: 92px; }
.cal-foot .text-btn small { color: var(--muted); margin-left: 2px; }
/* Phones: agenda list — only today and days that have deliveries */
@media (max-width: 760px) {
  .cal-row.cal-wd { display: none; }
  .cal-row { display: block; }
  .cal-row + .cal-row { border-top: 0; }
  .cal-cell { display: none; min-height: 0; border-right: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: flex-start; gap: 10px; padding: 8px 14px; }
  .cal-cell.has, .cal-cell.today { display: flex; }
  .cal-cell .cal-date { flex-direction: column; align-items: flex-start; gap: 0; width: 46px; flex-shrink: 0; padding-top: 2px; }
  .cal-items { flex: 1; }
  .cal-wd-m { display: block; font-size: 11px; color: var(--muted); }
  .cal-cell .cal-date em:not(.cal-today) { display: none; }
  .cal-late { margin: 0 14px 10px; flex-direction: column; gap: 4px; }
  .cal-late-label { padding-top: 0; }
  .cal-late .cal-chip { max-width: none; }
  .cal-head { padding: 12px 14px 8px; }
  .cal-foot { padding: 8px 14px 6px; }
}

/* Calmer chart and sidebar */
.cal-cell.today { align-items: stretch; text-align: left; } .cal-cell.today .cal-date { justify-content: flex-start; }

/* ---- v43: deeper clean ---- */
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-2); margin-right: 6px; }
.seg button { padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.cal-month .cal-cell { min-height: 84px; }
.cal-cell.out { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-cell.out .cal-date b { color: var(--muted); font-weight: 400; opacity: .6; }
.cal-chip.compact { padding: 2px 6px; border-radius: 6px; }
.cal-chip.compact strong { font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.cal-chip.compact strong .sdot { flex-shrink: 0; }
.owe-list li { display: flex; align-items: center; }
.owe-list li .row-btn { flex: 1; min-width: 0; }
.owe-btn { margin-right: 12px; flex-shrink: 0; }
.owe-list .row-side .num { font-weight: 600; }
.sidebar .brand { margin-bottom: 22px; }
.sidebar nav { gap: 2px; }
.sidebar nav button { font-size: 13.5px; }
@media (max-width: 760px) {
  .cal-nav { width: 100%; }
  .cal-nav .seg { margin-right: auto; }
  .cal-cell.out { display: none !important; }
}
@media (max-width: 640px) { .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; } .panel-head { flex-wrap: nowrap; } .panel-head > div:first-child { flex: 1 1 auto; } }

/* ---- IT board ---- */
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--muted); }
.tk-new .tk-dot { background: var(--bad); } .tk-doing .tk-dot { background: var(--warn); } .tk-done .tk-dot { background: var(--good); }
.tk-done { opacity: .7; }
.tk-main { flex: 1; min-width: 0; }
.tk-main strong { font-size: 14px; display: flex; gap: 10px; align-items: baseline; }
.tk-main p { font-size: 13.5px; margin: 2px 0; color: var(--ink-2); }
.tk-main small { font-size: 12px; color: var(--muted); }
.tk-order { font-size: 12px; font-weight: 500; }
.tk-act { display: flex; gap: 6px; flex-shrink: 0; }
.tk-act .btn.small { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.tk-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; padding: 0 18px 12px; }
.tk-form input { height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 13.5px; }
.it-chip.it-order { border: 1px dashed var(--line-strong); }
@media (max-width: 640px) {
  .tk { padding: 12px 14px; flex-wrap: wrap; }
  .tk-act { width: 100%; padding-left: 20px; }
  .tk-form { grid-template-columns: 1fr; padding: 0 14px 12px; }
  .stats > .stat:nth-child(3):last-child { grid-column: 1 / -1; }
}
.panel-actions .text-btn { white-space: nowrap; }
.panel.foryou { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.foryou .panel-head h3 .nav-count { margin-left: 4px; }
.foryou .row-list li { border-top: 1px solid var(--line); }

/* Orders on iPad / phone (v49): compact one-tap rows instead of the wide table */
.olist { display: none; list-style: none; margin: 0; padding: 0; }
.orow { display: flex; align-items: center; border-top: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--uc, transparent); }
.orow-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 6px 11px 16px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.orow-btn:active { background: var(--hover, rgba(0,0,0,.04)); }
.orow-btn .thumb { flex-shrink: 0; width: 38px; height: 38px; }
.orow-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.orow-main strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow-main small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow-side { flex-shrink: 0; display: grid; justify-items: end; gap: 3px; max-width: 48%; }
.orow-side small { font-size: 12px; white-space: nowrap; }
.orow-side .urg { margin-top: 0; font-size: 11px; padding: 1px 8px; }
.orow-side .badge, .orow-side [class*="badge"] { font-size: 11.5px; }
.orow-done { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; align-self: stretch; cursor: pointer; }
.orow-done input { width: 20px; height: 20px; }
@media (max-width: 1199px) {
  .olist { display: block; }
  .orders-wide { display: none; }
}
@media (max-width: 640px) {
  .hide-phone { display: none !important; }
  .orow-btn { gap: 10px; padding-left: 14px; }
  .orow-btn .thumb { width: 34px; height: 34px; }
  .orow-done { width: 40px; }
}
@media (max-width: 640px) {
  .orders-panel .panel-head p, .orders-panel .urg-legend { display: none; }
  .orders-panel .panel-head { padding-bottom: 10px; }
  .chip-row .stage-chip { padding: 6px 11px; font-size: 13px; }
}

/* Tasks (v52): one-line rows grouped by deadline */
.tlist { padding: 4px 0 6px; }
.tgroup + .tgroup { border-top: 1px solid var(--line); }
.tgroup-h { display: flex; align-items: center; gap: 8px; padding: 14px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); list-style: none; }
.tgroup-h::-webkit-details-marker { display: none; }
.g-late .tgroup-h { color: var(--bad); } .g-today .tgroup-h { color: var(--warn); }
.tgroup ul { list-style: none; margin: 0; padding: 0 0 6px; }
details.tdone > summary { cursor: pointer; }
details.tdone > summary::after { content: '›'; font-size: 15px; transition: transform .15s; }
details.tdone[open] > summary::after { transform: rotate(90deg); }
.trow { display: flex; align-items: center; }
.trow + .trow { border-top: 1px solid var(--line); }
.trow-check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; align-self: stretch; cursor: pointer; padding-left: 8px; }
.trow-check input { width: 20px; height: 20px; border-radius: 50%; }
.trow-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 4px; text-align: left; }
.trow-btn:hover { background: var(--surface-2); }
.trow-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.trow-main strong { font-weight: 500; font-size: 14.5px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.trow-main small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow-hi { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex-shrink: 0; }
.trow-doing { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: 11.5px; }
.trow-side { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.trow-owner { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); min-width: 120px; }
.trow-owner .avatar { width: 22px; height: 22px; font-size: 10px; }
.trow-due { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; color: var(--ink-2); }
.trow-due.bad { color: var(--bad); font-weight: 600; } .trow-due.warn { color: var(--warn); font-weight: 600; }
.trow.done .trow-main strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
details.workflow-note { display: block; }
details.workflow-note summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--ink-2); list-style: none; }
details.workflow-note summary::-webkit-details-marker { display: none; }
details.workflow-note p { margin-top: 8px; }
@media (max-width: 640px) {
  .tgroup-h { padding: 12px 16px 4px; }
  .trow-check { width: 44px; padding-left: 4px; }
  .trow-btn { padding: 10px 14px 10px 2px; gap: 10px; }
  .trow-side { flex-direction: column; align-items: flex-end; gap: 2px; }
  .trow-owner { min-width: 0; font-size: 12px; }
  .trow-owner .avatar { display: none; }
}

.stats { background: rgba(var(--glass-tint), var(--glass)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); }
.stat { border-right-color: rgba(0, 0, 0, .06); }
/* DEV nightly digest */
.devd-list { list-style: none; margin: 0; padding: 0 0 8px; counter-reset: dv; }
.devd-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line); counter-increment: dv; }
.devd-list li::before { content: counter(dv); flex-shrink: 0; width: 20px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.devd-list li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.devd-list strong { font-weight: 500; font-size: 14px; }
.devd-area { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--info); margin-right: 8px; }
@media (max-width: 640px) { .devd-list li { padding: 10px 16px; } }
.ship-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.ship-box.pending { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.ship-main { display: grid; gap: 2px; }
.ship-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ship-act .money-input { width: 160px; }

/* Commit Sale & Shipping block */
.special-cost { margin-top: 18px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sc-card { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.sc-card.commit { border-left: 4px solid var(--accent, #0a84ff); }
.sc-card.ship { border-left: 4px solid var(--warn); }
.sc-card.warn { background: var(--warn-bg); }
.sc-k { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.sc-card > strong { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); }
.sc-card > small { color: var(--ink-2); }
.sc-lines { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.sc-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.sc-lines li span { min-width: 0; display: grid; }
.sc-lines li small { color: var(--ink-3, var(--ink-2)); font-size: 11px; }
.sc-lines li b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.special-cost .ship-box { margin-top: 10px; }

/* Sale: customer emails waiting */
.sale-mail .sm-list li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sale-mail .sm-list .check-main { flex: 1 1 320px; min-width: 0; }
.sale-mail .sm-list p { margin: 3px 0; color: var(--ink-2); }
.sale-mail .nt-meta a { color: var(--brand-text, inherit); word-break: break-all; }
.sale-mail .actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Order kit: add a product that is not in stock yet */
.kit-new { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 8px; align-items: center; margin-top: 8px; }
.kit-new input { min-width: 0; }
@media (max-width: 520px) { .kit-new { grid-template-columns: minmax(0, 1fr) 72px; } .kit-new .btn { grid-column: 1 / -1; } }
.helper.good { color: var(--good); }

/* Light / dark switch in the top bar */
.theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.theme-toggle button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.theme-toggle button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 520px) { .topbar-right { gap: 8px; } .topbar-right .sync { display: none; } }

/* Orders: tint the whole row by urgency so late / urgent orders stand out at a glance */
table.orders tr.urow > td { background: color-mix(in srgb, var(--ub) 55%, transparent); }
table.orders tr.urow.u-soon > td { background: color-mix(in srgb, var(--ub) 80%, transparent); }
table.orders tr.urow.u-hot > td, table.orders tr.urow.u-late > td { background: var(--ub); }
table.orders tr.urow.u-late > td { border-bottom-color: color-mix(in srgb, var(--uc) 25%, transparent); }
table.orders tr.urow:hover > td { background: color-mix(in srgb, var(--ub) 100%, var(--uc) 8%); }
table.orders tr.urow.u-late td.main strong, .orow.u-late .orow-main strong { color: var(--uc); }
.orow[class*="u-"] { background: color-mix(in srgb, var(--ub) 55%, transparent); }
.orow.u-soon { background: color-mix(in srgb, var(--ub) 80%, transparent); }
.orow.u-hot, .orow.u-late { background: var(--ub); }
.orow.u-late { box-shadow: inset 5px 0 0 var(--uc); }

/* Order: destination power and plug */
.power-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 8px; }
.power-row select { min-width: 0; }
@media (max-width: 560px) { .power-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .power-row #o-country { grid-column: 1 / -1; } }
.power-box .helper.warn { color: var(--warn); }
.kit-modes { flex-wrap: wrap; }

/* Kit packs: one row per set, open to tick single items */
.kit-packs { display: grid; gap: 6px; }
.kit-pack { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.kit-pack.some { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.kit-pack-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.kit-pack.some .kit-pack-h { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.kit-pack-h .kit-check { flex: 1; min-width: 0; }
.kit-pack-toggle { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 2px; color: var(--muted); cursor: pointer; font: inherit; }
.kit-pack-toggle small { font-size: 12px; }
.kit-pack-toggle .num { color: var(--ink); font-size: 13px; }
.kit-pack-toggle svg { transition: transform .15s ease; }
.kit-pack.open .kit-pack-toggle svg { transform: rotate(90deg); }
.kit-pack .kit-list { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.kit-pack .kit-list li { padding-left: 30px; }
@media (max-width: 640px) { .kit-pack .kit-list li { padding-left: 10px; } .kit-pack-toggle .num { display: none; } }

/* Văn phòng 3D */
.o3-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.o3-stage { position: relative; height: min(76vh, 760px); min-height: 420px; border-radius: var(--r, 18px); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.o3-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.o3-canvas:active { cursor: grabbing; }
.o3-loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }
.o3-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 230px; padding: 8px 11px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 28px -8px rgba(0,0,0,.35); border: 1px solid var(--line); display: grid; gap: 1px; font-size: 13px; }
.o3-tip small { color: var(--muted); font-size: 12px; }
.o3-views { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.o3-views button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.o3-views button:hover { border-color: var(--brand); color: var(--brand); }
.o3-legend { position: absolute; left: 12px; bottom: 34px; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 85%, transparent); font-size: 12px; color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: calc(100% - 24px); }
.o3-legend span { display: inline-flex; align-items: center; gap: 5px; } .o3-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.o3-help { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; color: var(--muted); }
.o3-side { display: grid; gap: 12px; max-height: min(76vh, 760px); overflow: auto; }
.o3-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.o3-kpis > * { display: grid; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; font: inherit; color: var(--ink); }
.o3-kpis strong { font-size: 22px; line-height: 1.1; } .o3-kpis small { color: var(--muted); font-size: 12px; }
.o3-kpis .bad strong { color: var(--bad, #d70015); } .o3-kpis .warn strong { color: var(--warn, #c25700); } .o3-kpis button { cursor: pointer; }
.o3-zone h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.o3-zone h3 span { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--line); color: var(--ink); }
.o3-zone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.o3-zone button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) 14px; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.o3-zone button:hover { border-color: var(--brand); }
.o3-zone button i { width: 10px; height: 10px; border-radius: 50%; }
.o3-zone button span { display: grid; min-width: 0; } .o3-zone button strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .o3-zone button small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o3-zone button svg { color: var(--muted); }
@media (max-width: 980px) { .o3-layout { grid-template-columns: 1fr; } .o3-stage { height: 62vh; min-height: 360px; } .o3-side { max-height: none; } .o3-help { display: none; } .o3-legend { bottom: 10px; } }
.o3-stage:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.o3-walk { position: absolute; bottom: 30px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.o3-walk button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.o3-walk button.on { background: #0f766e; border-color: #0f766e; color: #fff; }
.o3-near { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 999px; background: #0f766e; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 26px -8px rgba(0,0,0,.4); max-width: calc(100% - 24px); }
.o3-near[hidden] { display: none; }
.o3-near span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o3-near button { font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 0; background: #fff; color: #0f766e; cursor: pointer; }
@media (max-width: 980px) { .o3-walk { bottom: auto; top: 96px; left: 12px; right: auto; justify-content: flex-start; } }

/* Production plan (tiến độ theo bước) */
.plan-mini { display: grid; gap: 3px; margin-top: 4px; min-width: 120px; }
.plan-mini small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.plan-mini.good small { color: var(--good); } .plan-mini.warn small { color: var(--warn); } .plan-mini.bad small { color: var(--bad); } .plan-mini.shipped small { color: #0a7c8c; }
.plan-bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.plan-bar i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.plan-mini.warn .plan-bar i { background: var(--warn); } .plan-mini.bad .plan-bar i { background: var(--bad); } .plan-mini.good .plan-bar i { background: var(--good); }
.orow-side .plan-mini { min-width: 0; justify-items: end; }
.plan-box { margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 10px; }
.plan-box.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); } .plan-box.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } .plan-box.good { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.plan-box .drawer-buttons { margin: 0; }
.plan-head { display: grid; gap: 2px; } .plan-head strong { font-size: 14px; } .plan-head small { font-size: 12.5px; color: var(--muted); }
.plan-head small.good { color: var(--good); } .plan-head small.warn { color: var(--warn); } .plan-head small.bad { color: var(--bad); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.plan-steps li { flex-basis: 0; min-width: 0; display: grid; gap: 4px; }
.plan-steps i { height: 8px; border-radius: 4px; background: var(--line); }
.plan-steps li.done i { background: var(--good); } .plan-steps li.cur i { background: var(--brand); } .plan-steps li.cur.over i { background: var(--bad); }
.plan-steps span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-steps li.cur span { color: var(--ink); font-weight: 700; }
.plan-note { margin: 0; font-size: 12.5px; color: var(--muted); } .plan-note b.bad { color: var(--bad); }
.plan-settings { margin-bottom: 14px; display: grid; gap: 10px; }
.plan-num { width: 64px; text-align: right; }

/* Chi tiêu cá nhân */
.pc-month { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.pc-month .icon-btn:first-child svg { transform: rotate(180deg); }
.pc-month strong { min-width: 118px; text-align: center; font-size: 14px; }
.pc-quick { display: grid; grid-template-columns: 170px 180px minmax(0, 1fr) 150px 150px auto; gap: 8px; padding: 12px; align-items: center; }
.pc-quick > * { min-width: 0; }
@media (max-width: 980px) { .pc-quick { grid-template-columns: 1fr 1fr; } .pc-quick #pc-note { grid-column: 1 / -1; } .pc-quick button { grid-column: 1 / -1; } }
.pc-meter { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--brand-ink) 25%, transparent); overflow: hidden; margin-top: 6px; }
.pc-meter i { display: block; height: 100%; background: var(--brand-ink); border-radius: 6px; } .pc-meter i.near { background: var(--warn-bg); } .pc-meter i.over { background: var(--bad-bg); }
.pc-grid { align-items: start; }
.pc-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pc-cats li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
.pc-cat-name { text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.pc-cat-name.on { color: var(--brand-text); font-weight: 700; }
.pc-bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; } .pc-bar i { display: block; height: 100%; border-radius: 8px; background: var(--brand); }
.pc-cats li.ok .pc-bar i { background: var(--good); } .pc-cats li.near .pc-bar i { background: var(--warn); } .pc-cats li.over .pc-bar i { background: var(--bad); }
.pc-cats li.over .pc-cat-num b { color: var(--bad); }
.pc-cat-num { text-align: right; font-variant-numeric: tabular-nums; } .pc-cat-num small { color: var(--muted); margin-left: 4px; }
@media (max-width: 640px) { .pc-cats li { grid-template-columns: 1fr auto; } .pc-cats .pc-bar { grid-column: 1 / -1; grid-row: 2; } }
.pc-days { display: flex; gap: 2px; align-items: flex-end; height: 140px; padding: 6px 0; }
.pc-days span { flex: 1; height: 100%; display: flex; align-items: flex-end; } .pc-days i { display: block; width: 100%; background: var(--brand); border-radius: 3px 3px 0 0; opacity: .85; }
.pc-days span.today i { background: var(--warn); opacity: 1; }
.pc-days-axis { display: flex; justify-content: space-between; color: var(--muted); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pc-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--line); }
.pc-list li:first-child { border-top: 0; }
.pc-date { display: grid; justify-items: center; line-height: 1.1; } .pc-date strong { font-size: 17px; } .pc-date small { color: var(--muted); font-size: 11px; }
.pc-main { display: grid; min-width: 0; } .pc-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-main small { color: var(--muted); font-size: 12px; }
.pc-amt { font-weight: 700; } .pc-act { display: inline-flex; gap: 2px; }
@media (max-width: 640px) { .pc-list li { grid-template-columns: 40px minmax(0, 1fr) auto; } .pc-list .pc-act, .pc-list .pill { grid-column: 2 / -1; justify-self: end; } }
.pc-cats, .pc-days, .pc-days-axis { margin-left: 24px; margin-right: 24px; }
.pc-cats { margin-bottom: 18px; } .pc-grid .helper { margin: 6px 24px 18px; }
@media (max-width: 640px) { .pc-cats, .pc-days, .pc-days-axis { margin-left: 16px; margin-right: 16px; } }

/* Kanban đơn hàng · Kẹt việc · Scorecard (feedback 02/11) */
.seg-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.seg-toggle button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9px; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.seg-toggle button.on { background: var(--brand); color: var(--brand-ink); }
.board-wrap { margin-bottom: 18px; }
.board-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 10px; font-size: 13px; }
.board-legend small { color: var(--muted); }
.bt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .bt i { width: 10px; height: 10px; border-radius: 50%; }
.bt.green i, .bcard.green .bcard-tone i { background: var(--good); } .bt.yellow i, .bcard.yellow .bcard-tone i { background: var(--warn); } .bt.red i, .bcard.red .bcard-tone i { background: var(--bad); }
.kb-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.kb-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.kb-col.over { border-color: var(--brand); background: var(--brand-soft); }
.kb-col > header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.kb-col > header strong { font-size: 13.5px; }
.kb-empty { color: var(--muted); font-size: 12.5px; text-align: center; margin: 12px 0; }
.bcard { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: var(--r-sm); box-shadow: var(--shadow); cursor: grab; }
.bcard.yellow { border-left-color: var(--warn); } .bcard.red { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-bg) 55%, var(--surface)); }
.bcard-main { display: grid; gap: 3px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px 6px; font: inherit; color: var(--ink); cursor: pointer; }
.bcard-main strong { font-size: 14px; } .bcard-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-tone { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .bcard-tone i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bcard.green .bcard-tone { color: var(--good); } .bcard.yellow .bcard-tone { color: var(--warn); } .bcard.red .bcard-tone { color: var(--bad); }
.bcard .plan-bar { margin-top: 4px; }
.bcard footer { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 6px 12px; border-top: 1px solid var(--line); }
.bcard-owner { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.bcard-act { display: inline-flex; align-items: center; gap: 2px; } .icon-btn.small { width: 28px; height: 28px; }
.block-btn { margin: 10px 0 0; }
.block-box { margin: 10px 0 0; }
.block-box.ask { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
.block-box.bad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.block-box.bad strong { display: block; } .block-box.bad small { color: var(--ink-2); }
.scorecard { padding: 14px 16px; margin-bottom: 16px; }
.scorecard header strong { font-size: 15px; display: block; } .scorecard header small { color: var(--muted); font-size: 12.5px; }
.scorecard ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.scorecard li button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.scorecard li button i { width: 10px; height: 10px; border-radius: 50%; background: var(--good); grid-row: 1 / 3; } .scorecard li button.bad i { background: var(--bad); }
.scorecard li button.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.scr-k { font-size: 12.5px; color: var(--ink-2); } .scorecard li strong { font-size: 15px; grid-row: 1 / 3; grid-column: 3; } .scorecard li button.bad strong { color: var(--bad); }
.scorecard li small { color: var(--muted); font-size: 11.5px; grid-column: 2; }
.blocked-list { padding: 12px 16px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.blocked-list header { display: flex; justify-content: space-between; align-items: center; color: var(--bad); }
.blocked-list ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.blocked-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.blocked-list li > button:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; text-align: left; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; padding: 4px 0; }
.blocked-list li span { display: grid; } .blocked-list li small { color: var(--muted); font-size: 12px; } .blocked-list li em { font-style: normal; color: var(--bad); font-weight: 600; font-size: 13px; }
@media (max-width: 640px) { .blocked-list li > button:first-child { grid-template-columns: 1fr; } }
.kit-list li.shop-made, .kit-list li.shop-made.on { grid-template-columns: minmax(150px, 1fr) auto; }
.kit-list li.shop-made .kit-stock { color: var(--good); }
.kit-list li.shop-made.shell-price { grid-template-columns: minmax(130px, 1fr) 64px minmax(140px, 1.3fr) 150px; }
@media (max-width: 640px) { .kit-list li.shop-made.shell-price { grid-template-columns: minmax(0, 1fr) 64px; } .kit-list li.shell-price .kit-stock, .kit-list li.shell-price .money-input { grid-column: 1 / -1; } }

/* ---------- Bảng chi phí booth (drawer, owner only) — layout giống tab Google Sheet ---------- */
.drawer.wide { width: min(1080px, 100%); }
.cost-sheet .drawer-h .cs-wide { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; }
.cs-table { font-size: 13px; min-width: 640px; }
.cs-table th { padding: 8px 6px; }
.cs-table td { padding: 2px 4px; vertical-align: middle; }
.cs-table td.c { width: 34px; font-variant-numeric: tabular-nums; }
.cs-table td:nth-child(2) { min-width: 170px; }
.cs-table td:nth-child(3) { width: 64px; min-width: 64px; }
.cs-table td:nth-child(4), .cs-table td:nth-child(5) { width: 112px; }
.cs-table td.cs-sum { width: 112px; padding-right: 8px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-table td.cs-sum.warn { color: var(--warn); font-weight: 500; font-size: 12px; }
.cs-table tbody tr:hover { background: var(--surface-2); }
.cs-table tr.stock td { color: var(--muted); }
.cs-in { width: 100%; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 6px 6px; font: inherit; color: var(--ink); height: 32px; }
.cs-in.r { text-align: right; font-variant-numeric: tabular-nums; }
.cs-in.sm { min-width: 48px; }
.cs-in.note { font-size: 12px; color: var(--ink-2); min-width: 110px; }
.cs-in::placeholder { color: var(--muted); opacity: .8; }
.cs-in:hover { border-color: var(--line); }
.cs-in:focus-visible { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 2px var(--brand-soft); }
.cs-act { white-space: nowrap; width: 58px; opacity: .35; }
.cs-table tr:hover .cs-act, .cs-act:focus-within { opacity: 1; }
.icon-btn.tiny { width: 24px; height: 24px; font-size: 13px; }
.cs-table tfoot td { padding: 8px 6px; border-top: 1px solid var(--line); border-bottom: 0; }
.cs-table tfoot tr.cs-total td { font-weight: 600; border-top: 2px solid var(--line-strong); }
.cs-table tfoot td .cs-in { font-weight: 600; }
.cs-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; }
.cs-cell { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.cs-cell span { display: block; font-size: 11px; letter-spacing: .08em; font-weight: 600; color: var(--muted); }
.cs-cell strong { display: block; font-size: 15.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cs-cell small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cs-cell.main { background: var(--brand-soft); border-color: transparent; }
.cs-cell.good strong { color: var(--good); } .cs-cell.bad strong { color: var(--bad); }
.cs-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 12px 14px; }
.readonly-val { display: block; padding: 9px 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Đã giao · chờ thanh toán ---------- */
.st-unpaid { --sc: var(--warn); --sb: var(--warn-bg); }
.unpaid-box { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.unpaid-box > svg { color: var(--warn); flex-shrink: 0; }
.unpaid-box > div { flex: 1; min-width: 0; }
.unpaid-box strong { display: block; font-size: 14px; }
.unpaid-box small { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }

/* ---------- Bảng chi phí & thiết bị theo nhóm (07/11) ---------- */
.cs-table tbody.cs-group tr.cs-gh td { background: var(--surface-2); border-top: 1px solid var(--line-strong); padding: 6px 8px; font-weight: 600; }
.cs-table tbody.cs-group:first-of-type tr.cs-gh td { border-top: 0; }
.cs-gt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: inherit; }
.cs-gt svg { transition: transform .15s ease; transform: rotate(90deg); color: var(--muted); }
.cs-group.shut .cs-gt svg { transform: rotate(0deg); }
.cs-gt strong { font-size: 13px; font-weight: 600; }
.cs-gt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.cs-gh .text-btn.small { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }
.cs-act { width: 96px; }
.cs-move { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted); font-size: 13px; vertical-align: middle; cursor: pointer; }
.cs-move:hover { background: var(--brand-soft); }
.cs-move select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cs-move:focus-within { outline: 2px solid var(--brand); }
.kit-groups { display: grid; gap: 10px; }
.kit-group h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 4px 0 4px; display: flex; gap: 8px; align-items: baseline; }
.kit-group h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kit-with strong { font-weight: 600; }