/* =========================================================
   Meridian — Project Management Design System
   Foundation: warm neutral, single restrained accent (deep teal-green)
   Compact app scale, sans-serif throughout, semantic + iconographic status
   ========================================================= */

:root {
  /* Foundation — light */
  --bg:        #F6F5F0;          /* warm off-white canvas */
  --surface:   #FFFFFF;          /* cards, panels */
  --surface-2: #FBFAF6;          /* subtle elevated */
  --ink:       #15171C;          /* primary text */
  --ink-2:     #3A3F47;          /* secondary text */
  --muted:     #6E737B;          /* tertiary text / labels */
  --faint:     #9AA0A8;          /* meta, timestamps */
  --line:      #E6E3DB;          /* hairline border */
  --line-2:    #EFEDE6;          /* row separator */
  --hover:     #F1EEE6;          /* row / cell hover */
  --selected:  #EAE6DA;          /* selected row */
  --focus:     #2F6F5E;          /* focus ring */

  /* Accent — single restrained color */
  --accent:        #1F5F4D;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #E1ECE7;
  --accent-soft-2: #D2E1DA;
  --accent-line:   #B8CFC4;

  /* Semantic — used with icons + text, never color alone */
  --ok:        #2F7D58;
  --ok-soft:   #E2F0E8;
  --warn:      #A45A09;
  --warn-soft: #F6E8D2;
  --risk:      #B23B3B;
  --risk-soft: #F4DED9;
  --info:      #2A5C7A;
  --info-soft: #DCE8EE;
  --neutral:   #555A62;
  --neutral-soft: #E7E5DE;

  /* Priority */
  --p1: #B23B3B;
  --p2: #A45A09;
  --p3: #2A5C7A;
  --p4: #6E737B;

  /* Geometry */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Type scale (compact app) */
  --t-page:   20px;   /* page title — largest */
  --t-h2:     15px;
  --t-h3:     13px;
  --t-body:   13px;
  --t-cell:   12.5px;
  --t-label:  11.5px;
  --t-meta:   11px;

  /* Shadows — restrained */
  --sh-card: 0 1px 0 rgba(20,20,30,.04);
  --sh-pop:  0 2px 8px rgba(20,20,30,.07), 0 1px 2px rgba(20,20,30,.05);
  --sh-modal:0 12px 32px rgba(20,20,30,.18), 0 2px 6px rgba(20,20,30,.10);
}

[data-theme="dark"] {
  --bg:        #0D0F12;
  --surface:   #14171C;
  --surface-2: #181B21;
  --ink:       #ECEAE3;
  --ink-2:     #C7C9CD;
  --muted:     #8B9099;
  --faint:     #6A6E76;
  --line:      #23272E;
  --line-2:    #1C1F25;
  --hover:     #1B1F25;
  --selected:  #232831;

  --accent:        #4EA48E;
  --accent-ink:    #0B1411;
  --accent-soft:   #173028;
  --accent-soft-2: #1E3D33;
  --accent-line:   #2A4F44;

  --ok:        #5BB089;
  --ok-soft:   #15281F;
  --warn:      #D08A3D;
  --warn-soft: #2D2014;
  --risk:      #D26C6C;
  --risk-soft: #2D1717;
  --info:      #6FA9C2;
  --info-soft: #14252D;
  --neutral:   #A3A8B1;
  --neutral-soft: #1E2128;

  --sh-card: 0 1px 0 rgba(0,0,0,.5);
  --sh-pop:  0 2px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
  --sh-modal:0 18px 40px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01","cv11","tnum";
  background: #ECEAE2;
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="dark"] body, body.dark-page { background:#06080B; }

/* ---------- Mockup deck ---------- */
.deck {
  max-width: 1560px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
.deck-header { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; gap:24px;}
.deck-title { font-size: 22px; font-weight: 600; letter-spacing:-.01em; color:#15171C; margin:0;}
.deck-sub   { font-size: 12.5px; color:#5B6068; margin:4px 0 0;}
.deck-legend{ display:flex; gap:14px; font-size:11.5px; color:#5B6068; }
.deck-legend span{ display:inline-flex; align-items:center; gap:6px;}
.deck-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; background:#1F5F4D;}

.deck-section { margin: 56px 0 0; }
.deck-section > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color:#5B6068; font-weight: 600; margin: 0 0 12px 4px;
}
.frame {
  background: var(--bg);
  color: var(--ink);
  border-radius: 14px;
  border: 1px solid rgba(20,20,30,.08);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20,20,30,.06), 0 1px 2px rgba(20,20,30,.04);
  position: relative;
  margin-bottom: 28px;
}
.frame.dark { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); border-color:#1B1E24; }
.frame-tag {
  position:absolute; top:12px; left:14px; z-index:5;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  border:1px solid rgba(20,20,30,.10);
  padding:4px 8px; border-radius:6px; font-size:11px; color:#3A3F47; font-weight:500;
  letter-spacing:.02em;
}
.frame.dark .frame-tag { background: rgba(20,23,28,.85); border-color:#2A2D34; color:#C7C9CD;}
.frame-grid { display:grid; gap:24px; }
.frame-grid.two { grid-template-columns: 1fr 1fr; }
.frame-grid.mobile-row { grid-template-columns: repeat(4, 375px); gap:24px; justify-content:start; overflow-x:auto; padding-bottom:8px;}

/* =========================================================
   App shell
   ========================================================= */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 900px;
  background: var(--bg);
  color: var(--ink);
}
.app.with-context { grid-template-columns: 232px 1fr 312px; }
.app.tablet { grid-template-columns: 56px 1fr; height: 820px; }

/* Sidebar */
.sb {
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.sb-brand { display:flex; align-items:center; gap:8px; padding:14px 14px 12px; }
.brand-mark {
  width:22px; height:22px; border-radius:6px;
  background: var(--accent); color: var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:12px; letter-spacing:.02em;
}
.brand-name { font-weight:600; font-size:13px; letter-spacing:-.01em;}
.brand-meta { font-size:10.5px; color:var(--muted); margin-left:auto; padding:2px 6px; border:1px solid var(--line); border-radius:4px;}
.sb-section-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); padding:14px 16px 6px;}
.sb-nav { display:flex; flex-direction:column; gap:1px; padding: 0 8px; }
.sb-item {
  display:flex; align-items:center; gap:10px;
  height:30px; padding: 0 10px; border-radius:6px;
  font-size:12.5px; color: var(--ink-2); cursor:pointer;
}
.sb-item:hover { background: var(--hover); color: var(--ink); }
.sb-item.active { background: var(--accent-soft); color: var(--accent); font-weight:500;}
[data-theme="dark"] .sb-item.active { color: var(--accent); background: var(--accent-soft);}
.sb-item .icn { width:14px; height:14px; flex:none; opacity:.85;}
.sb-item .count { margin-left:auto; font-size:10.5px; color:var(--muted); background:var(--neutral-soft); padding:1px 6px; border-radius:10px;}
.sb-item.active .count{ background: var(--accent-soft-2); color: var(--accent);}
.sb-projects { padding: 0 8px; }
.sb-project {
  display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:6px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer;
}
.sb-project:hover{ background: var(--hover); color:var(--ink);}
.sb-project .dot { width:7px; height:7px; border-radius:2px; flex:none;}
.sb-project .star { margin-left:auto; color:var(--faint); font-size:11px;}
.sb-footer { margin-top:auto; padding: 10px 12px; border-top: 1px solid var(--line); display:flex; align-items:center; gap:10px;}
.sb-footer .av { width:24px; height:24px; border-radius:50%; background:#C9C2AE; color:#3A3F47; display:grid; place-items:center; font-size:10px; font-weight:600;}
.sb-footer .who { font-size:12.5px; line-height:1.1;}
.sb-footer .who small{ display:block; color:var(--muted); font-size:10.5px;}

/* Tablet rail */
.sb.rail { padding: 10px 6px; align-items:center;}
.sb.rail .brand-mark { margin-bottom: 8px;}
.rail-item { width:40px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer;}
.rail-item:hover { background: var(--hover); color: var(--ink);}
.rail-item.active { background: var(--accent-soft); color: var(--accent);}

/* Topbar */
.tb {
  display:flex; align-items:center; gap:10px;
  height: 52px; padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.crumbs { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);}
.crumbs .sep { color: var(--faint);}
.crumbs .here { color: var(--ink); font-weight: 500;}
.tb-search {
  margin-left: 12px; flex: 1; max-width: 460px;
  display:flex; align-items:center; gap:8px;
  height:30px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); font-size: 12.5px;
}
.tb-search .kbd {
  margin-left:auto; font-size:10.5px; color:var(--faint);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; background:var(--surface);
}
.tb-actions { margin-left: auto; display:flex; align-items:center; gap:6px; }
.icon-btn { width:30px; height:30px; border-radius:6px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; position:relative;}
.icon-btn:hover { background: var(--hover); }
.icon-btn .badge {
  position:absolute; top:4px; right:4px;
  background: var(--risk); color:#fff; border-radius:8px;
  font-size:9.5px; font-weight:600; padding:0 4px; height:12px; line-height:12px;
}
.av-sm { width:24px; height:24px; border-radius:50%; background:#3A3F47; color:#fff; display:grid; place-items:center; font-size:10px; font-weight:600;}
.av-sm.warm { background:#A16207; }
.av-sm.cool { background:#1F5F4D; }
.av-sm.slate{ background:#3A4555;}
.av-sm.rose { background:#9C3F4A;}
.av-sm.sand { background:#7C6F4A;}
.av-sm.plum { background:#5C3F5C;}

/* =========================================================
   Buttons / inputs / chips
   ========================================================= */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding: 0 11px;
  border-radius: 7px; font-size: 12.5px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  letter-spacing:.005em;
}
.btn .icn { width:13px; height:13px;}
.btn.primary   { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover{ background: var(--hover);}
.btn.ghost     { background: transparent; color: var(--ink-2); }
.btn.ghost:hover{ background: var(--hover); color: var(--ink);}
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px;}
.btn.danger { background: transparent; color: var(--risk); border-color: var(--line);}
.btn.danger:hover{ background: var(--risk-soft);}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px;}

.input, .select {
  height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 12.5px; min-width: 120px;
}
.input::placeholder { color: var(--faint);}
.select { display:inline-flex; align-items:center; gap:6px;}

.chip {
  display:inline-flex; align-items:center; gap:6px;
  height: 24px; padding: 0 8px;
  border-radius: 12px; font-size: 11.5px; font-weight: 500;
  background: var(--neutral-soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.chip.outline { background: transparent; border-color: var(--line); }
.chip.removable .x { color: var(--faint); cursor:pointer;}
.chip.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);}

/* Status badges — semantic + icon, never color-only */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding: 2px 7px; height: 20px; border-radius: 4px;
  font-size: 11px; font-weight: 500; letter-spacing:.01em;
  background: var(--neutral-soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.badge .glyph { width:8px; height:8px; border-radius:2px;}
.badge.ok    { background: var(--ok-soft);   color: var(--ok); }
.badge.ok    .glyph { background: var(--ok); }
.badge.warn  { background: var(--warn-soft); color: var(--warn); }
.badge.warn  .glyph { background: var(--warn); }
.badge.risk  { background: var(--risk-soft); color: var(--risk); }
.badge.risk  .glyph { background: var(--risk); }
.badge.info  { background: var(--info-soft); color: var(--info); }
.badge.info  .glyph { background: var(--info); }
.badge.neutral{ background: var(--neutral-soft); color: var(--neutral); }
.badge.neutral .glyph { background: var(--neutral);}

/* Priority pill — uses letter, not just color */
.prio { display:inline-flex; align-items:center; gap:4px; font-size:11px; color: var(--ink-2); font-weight:500;}
.prio .pip {
  width:14px; height:14px; border-radius:3px; color:#fff;
  display:grid; place-items:center; font-size:9.5px; font-weight:700;
}
.prio.p1 .pip { background: var(--p1);}
.prio.p2 .pip { background: var(--p2);}
.prio.p3 .pip { background: var(--p3);}
.prio.p4 .pip { background: var(--p4);}

/* Avatars */
.av { width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:10px; font-weight:600; color:#fff; background:#3A3F47; border:1.5px solid var(--surface);}
.av.lg { width:28px; height:28px; font-size:11px;}
.av.xs { width:18px; height:18px; font-size:9px; border-width:1.5px;}
.av-stack { display:inline-flex;}
.av-stack .av + .av { margin-left:-6px;}
.av-stack .more { background:#E2DED2; color:#3A3F47; font-size:10px; font-weight:600;}
[data-theme="dark"] .av-stack .more { background:#2A2D34; color:#C7C9CD;}

/* =========================================================
   Page shell (main content area)
   ========================================================= */
.page { display:flex; flex-direction:column; min-width:0; min-height:0; }
.page-head { padding: 14px 20px 12px; background: var(--surface); border-bottom: 1px solid var(--line);}
.page-head h1 { font-size: var(--t-page); font-weight: 600; margin: 0; letter-spacing:-.012em;}
.page-head .sub { color: var(--muted); font-size: 12px; margin-top: 2px;}
.page-toolbar { display:flex; align-items:center; gap:8px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap:wrap;}
.tabs { display:flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 16px; background: var(--surface);}
.tab { padding: 8px 12px; font-size: 12.5px; color: var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tab:hover { color: var(--ink-2);}
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight:500;}
.tab .count { margin-left:6px; font-size:10.5px; color:var(--faint); background:var(--neutral-soft); padding:0 5px; border-radius:8px;}
.tab.active .count { background: var(--accent-soft); color: var(--accent);}

.page-body { padding: 20px; overflow:auto; flex: 1; min-height:0; }
.page-body.tight { padding: 16px 20px; }

/* =========================================================
   KPI cards
   ========================================================= */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: var(--surface); border:1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; box-shadow: var(--sh-card);
}
.kpi .label { font-size: 11.5px; color: var(--muted); display:flex; align-items:center; justify-content:space-between;}
.kpi .label .trend { font-size:10.5px; color: var(--ok); display:inline-flex; align-items:center; gap:3px;}
.kpi .label .trend.down { color: var(--risk);}
.kpi .value { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 2px; font-variant-numeric: tabular-nums;}
.kpi .meta  { font-size: 11.5px; color: var(--faint);}
.kpi .spark { margin-top: 8px; height: 22px; display:flex; align-items:end; gap:2px;}
.kpi .spark span { display:block; width: 5px; background: var(--accent-soft-2); border-radius: 1px;}
.kpi .spark span.h { background: var(--accent);}
.kpi .bar-row { margin-top: 10px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted);}
.kpi .bar { flex:1; height: 5px; background: var(--neutral-soft); border-radius: 3px; overflow:hidden;}
.kpi .bar > i { display:block; height:100%; background: var(--accent);}

/* =========================================================
   Section card
   ========================================================= */
.section {
  background: var(--surface); border:1px solid var(--line); border-radius: 10px;
  box-shadow: var(--sh-card);
}
.section-head {
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: var(--t-h2); font-weight: 600; margin:0; letter-spacing:-.005em;}
.section-head .meta { font-size: 11.5px; color: var(--muted);}
.section-body { padding: 6px 0; }
.section-body.padded { padding: 14px;}

/* =========================================================
   Tables (List view, project status table)
   ========================================================= */
.tbl { width:100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-cell);}
.tbl thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left; color: var(--muted); font-weight: 500;
  font-size: 11.5px; letter-spacing: .02em;
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl thead th .sort { color: var(--faint); margin-left: 4px;}
.tbl tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle;}
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tbody tr.selected td { background: var(--selected);}
.tbl tbody tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--accent);}
.tbl .cell-task { display:flex; align-items:center; gap:8px;}
.tbl .cell-task .check {
  width:14px; height:14px; border:1.5px solid var(--line); border-radius:3px; flex:none;
  display:grid; place-items:center;
}
.tbl .cell-task .check.done { background: var(--accent); border-color: var(--accent); color: #fff;}
.tbl .cell-task .name { color: var(--ink); font-weight: 500;}
.tbl .cell-task .id { color: var(--faint); font-size: 11px; margin-right: 4px;}
.tbl .cell-meta { color: var(--muted); font-variant-numeric: tabular-nums;}
.tbl tr.overdue .cell-meta.due { color: var(--risk); font-weight: 500;}
.row-controls { display:flex; align-items:center; gap:4px; opacity: 0; transition: opacity .12s;}
.tbl tbody tr:hover .row-controls { opacity: 1;}

/* Bulk action bar */
.bulkbar {
  display:flex; align-items:center; gap:10px;
  padding: 8px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line);
  font-size: 12px; color: var(--accent);
}
.bulkbar .ct { font-weight:600;}
.bulkbar .sep { color: var(--accent-line);}
.bulkbar .btn { background: var(--surface); color: var(--accent); border-color: var(--accent-line);}
.bulkbar .btn.primary{ background: var(--accent); color:var(--accent-ink); border-color: var(--accent);}

/* =========================================================
   Board (Kanban)
   ========================================================= */
.board { display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 14px; }
.col {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  display:flex; flex-direction:column; min-height: 540px;
}
.col-head { display:flex; align-items:center; gap:8px; padding: 10px 12px; border-bottom: 1px solid var(--line);}
.col-head .title { font-size: 12px; font-weight: 600; letter-spacing:.02em; text-transform: uppercase; color: var(--ink-2);}
.col-head .count { font-size: 11px; color: var(--muted); background: var(--neutral-soft); padding: 1px 7px; border-radius: 10px;}
.col-head .add { margin-left:auto; color: var(--muted); cursor:pointer; }
.col-body { padding: 10px; display:flex; flex-direction: column; gap: 8px; flex:1; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 11px; display:flex; flex-direction:column; gap: 8px;
  cursor: grab; box-shadow: var(--sh-card);
}
.card:hover { border-color: rgba(20,20,30,.14);}
[data-theme="dark"] .card:hover { border-color:#2F343C; }
.card.dragging { opacity:.7; box-shadow: var(--sh-pop); transform: rotate(.4deg);}
.card .top { display:flex; align-items:center; gap:6px; font-size: 11px; color: var(--muted);}
.card .top .id { font-variant-numeric: tabular-nums;}
.card .top .spacer{ flex:1;}
.card .title { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ink);}
.card .meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card .meta .mini { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted);}
.card .meta .due.overdue { color: var(--risk);}
.card .progress { height: 3px; background: var(--neutral-soft); border-radius: 2px; overflow:hidden;}
.card .progress > i { display:block; height:100%; background: var(--accent);}
.card .bottom { display:flex; align-items:center; justify-content:space-between;}
.card .tags { display:flex; gap: 4px; flex-wrap: wrap;}
.tag { font-size: 10.5px; color: var(--muted); background: var(--neutral-soft); padding: 1px 6px; border-radius: 4px; letter-spacing:.01em;}
.tag.accent { background: var(--accent-soft); color: var(--accent);}

/* =========================================================
   Calendar / Timeline
   ========================================================= */
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow:hidden;}
.cal-head { display:flex; align-items:center; gap:8px; padding: 10px 12px; border-bottom: 1px solid var(--line);}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line);}
.cal-dow { font-size: 10.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); padding: 6px 8px; border-right: 1px solid var(--line); background: var(--surface-2); }
.cal-dow:last-child{ border-right:0;}
.cal-cell {
  min-height: 92px; padding: 6px 8px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display:flex; flex-direction: column; gap: 4px; background: var(--surface);
}
.cal-cell:nth-child(7n) { border-right: 0;}
.cal-cell .num { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight:500;}
.cal-cell.muted .num { color: var(--faint);}
.cal-cell.today .num { color: var(--accent-ink); background: var(--accent); border-radius: 50%; width:18px; height:18px; display:grid; place-items:center; font-size:10.5px;}
.cal-evt {
  font-size: 11px; padding: 2px 6px; border-radius: 4px; line-height: 1.25;
  white-space: nowrap; text-overflow: ellipsis; overflow:hidden;
  display:flex; align-items:center; gap:4px;
}
.cal-evt .dot { width:6px; height:6px; border-radius:2px; flex:none;}
.cal-evt.ok    { background: var(--ok-soft);   color: var(--ok); }
.cal-evt.warn  { background: var(--warn-soft); color: var(--warn); }
.cal-evt.risk  { background: var(--risk-soft); color: var(--risk); }
.cal-evt.info  { background: var(--info-soft); color: var(--info); }

/* Timeline / Gantt */
.gantt { background: var(--surface); border:1px solid var(--line); border-radius: 10px; overflow:hidden;}
.gantt-head { display:flex; padding: 8px 12px; border-bottom: 1px solid var(--line); align-items:center; gap:8px;}
.gantt-grid {
  display:grid; grid-template-columns: 220px 1fr;
}
.gantt-rows { border-right: 1px solid var(--line);}
.gantt-rows .row { padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; display:flex; align-items:center; gap:8px;}
.gantt-rows .row.h { color: var(--muted); font-weight:500; background: var(--surface-2);}
.gantt-rows .row .label { font-weight: 500;}
.gantt-rows .row .sub { color: var(--muted); font-size: 11px; margin-left:auto;}
.gantt-track {
  position:relative;
  background:
    repeating-linear-gradient( to right,
      transparent 0, transparent calc((100%/12) - 1px),
      var(--line-2) calc((100%/12) - 1px), var(--line-2) calc(100%/12)
    );
}
.gantt-track .scale {
  display:grid; grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-size: 10.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted);
}
.gantt-track .scale span { padding: 6px 8px; border-right: 1px solid var(--line);}
.gantt-track .scale span:last-child{ border-right:0;}
.gantt-row {
  position: relative; height: 35px; border-bottom: 1px solid var(--line-2);
}
.gantt-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 16px; border-radius: 4px; background: var(--accent-soft-2);
  border: 1px solid var(--accent-line);
  font-size: 10.5px; color: var(--accent); padding: 0 6px;
  display:flex; align-items:center; gap:4px;
}
.gantt-bar.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent);}
.gantt-bar.warn  { background: var(--warn-soft); color: var(--warn); border-color: #E5C99A;}
.gantt-bar.risk  { background: var(--risk-soft); color: var(--risk); border-color: #E6B7B2;}
.gantt-mile {
  position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--ink); border:1px solid var(--surface);
}
.gantt-dep {
  position:absolute; height: 1px; background: var(--faint); top: 50%;
}
.gantt-dep::after{
  content:""; position:absolute; right:-3px; top:-3px;
  border: 3px solid transparent; border-left-color: var(--faint);
}
.gantt-track .today-line { position:absolute; top:0; bottom:0; width:1px; background: var(--accent); opacity:.6;}
.gantt-track .today-line::before {
  content:"TODAY"; position:absolute; top:-4px; left: 4px;
  font-size: 9.5px; letter-spacing:.1em; color: var(--accent); font-weight: 600;
}

/* =========================================================
   Workload
   ========================================================= */
.workload { background: var(--surface); border:1px solid var(--line); border-radius: 10px; overflow:hidden;}
.wl-head { display:grid; grid-template-columns: 220px repeat(5, 1fr) 90px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing:.08em; color:var(--muted); background: var(--surface-2);}
.wl-row { display:grid; grid-template-columns: 220px repeat(5, 1fr) 90px; padding: 12px; border-bottom: 1px solid var(--line-2); align-items:center;}
.wl-row .who { display:flex; align-items:center; gap:10px;}
.wl-row .who .name { font-weight:500; font-size: 12.5px;}
.wl-row .who small { color: var(--muted); display:block; font-size: 11px;}
.wl-cell { padding: 0 6px;}
.wl-bar { height: 8px; background: var(--neutral-soft); border-radius: 4px; position: relative; overflow:hidden;}
.wl-bar > i { display:block; height: 100%; background: var(--accent); border-radius: 4px;}
.wl-bar.warn > i { background: var(--warn);}
.wl-bar.risk > i { background: var(--risk);}
.wl-bar.over::after {
  content:""; position:absolute; right:0; top:0; bottom:0; width:3px; background: var(--risk);
}
.wl-cap { display:flex; align-items:center; gap:6px; font-size:11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;}
.wl-status { font-size: 11px; color: var(--muted);}

/* =========================================================
   Right panel (context)
   ========================================================= */
.ctx {
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height:0;
}
.ctx-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line);}
.ctx-head h3 { font-size: 13px; font-weight:600; margin: 0;}
.ctx-head .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px;}
.ctx-body { padding: 12px 16px; overflow:auto; flex:1; display:flex; flex-direction:column; gap: 14px;}
.ctx-section .h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px;}
.kv { display:grid; grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 12px;}
.kv dt { color: var(--muted);}
.kv dd { margin: 0; color: var(--ink); }
.activity { display:flex; flex-direction:column; gap: 10px;}
.activity .item { display:flex; gap: 8px; font-size: 12px;}
.activity .item .av { width:20px; height: 20px; font-size: 9.5px; flex:none;}
.activity .item .body { color: var(--ink-2);}
.activity .item .body small { color: var(--faint); display:block; margin-top: 2px; font-size: 10.5px;}
.comment {
  background: var(--surface-2); border:1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px;
}
.comment .who { display:flex; align-items:center; gap:6px; margin-bottom: 4px; font-size: 11.5px; color: var(--ink-2);}
.comment small { color: var(--faint); margin-left: auto; font-size: 10.5px;}

/* =========================================================
   Drawer / modal (task detail)
   ========================================================= */
.drawer-stage {
  position: relative; height: 720px; background: var(--bg);
  border:1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.drawer-stage::before {
  content:""; position:absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(20,20,30,.018) 0 1px, transparent 1px 8px);
}
.drawer {
  position:absolute; right:0; top:0; bottom:0; width: 540px;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--sh-modal);
  display:flex; flex-direction:column;
}
.drawer-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display:flex; align-items:center; gap: 10px; flex-wrap:wrap;}
.drawer-head .id { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;}
.drawer-head .actions { margin-left:auto; display:flex; gap: 4px;}
.drawer-title { font-size: 17px; font-weight: 600; margin: 6px 16px 0; padding-bottom: 8px; line-height: 1.3;}
.drawer-meta { display:grid; grid-template-columns: 100px 1fr; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px;}
.drawer-meta dt { color: var(--muted);}
.drawer-meta dd { margin: 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.drawer-body { padding: 14px 16px; overflow: auto; flex:1; display:flex; flex-direction: column; gap: 18px;}
.drawer-body h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600;}
.subtask {
  display:flex; align-items:center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px;
}
.subtask .ck {
  width:14px; height:14px; border:1.5px solid var(--line); border-radius:3px; flex:none; display:grid; place-items:center;
}
.subtask.done .ck { background: var(--accent); border-color: var(--accent); color: #fff;}
.subtask.done .lbl { color: var(--muted); text-decoration: line-through;}
.subtask .lbl { flex:1;}
.subtask .due { color: var(--muted); font-size: 11.5px;}
.attach { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius: 8px; font-size: 12px; background: var(--surface-2);}
.attach .ext { font-size: 10px; font-weight:700; padding: 2px 5px; border-radius: 3px; background: var(--neutral-soft); color: var(--ink-2);}
.attach .meta { color: var(--muted); margin-left:auto; font-size: 11px;}
.thread { display:flex; flex-direction:column; gap: 10px;}
.thread .msg { display:flex; gap: 10px;}
.thread .msg .body { flex:1; background: var(--surface-2); border:1px solid var(--line); border-radius: 8px; padding: 8px 10px;}
.thread .msg .body .who { display:flex; align-items:center; gap:6px; font-size: 11.5px; margin-bottom: 4px;}
.thread .msg .body .who small{ color: var(--faint); margin-left:auto;}
.thread .msg .body p { margin: 0; font-size: 12.5px; color: var(--ink-2);}
.composer {
  border:1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface);
  display:flex; flex-direction:column; gap: 8px;
}
.composer .input { border: none; padding: 0; height: auto; min-width: 0;}
.composer .row { display:flex; align-items:center; gap: 6px;}
.composer .row .right { margin-left:auto; display:flex; gap: 6px;}
.drawer-foot { padding: 10px 16px; border-top: 1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background: var(--surface-2);}

/* =========================================================
   Notifications panel
   ========================================================= */
.notif {
  position:absolute; right: 16px; top: 60px;
  width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sh-modal); overflow: hidden;
}
.notif-head { display:flex; align-items:center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line);}
.notif-head h3 { font-size: 13px; margin: 0; font-weight: 600;}
.notif-head .right { margin-left:auto; display:flex; gap: 4px;}
.notif-tabs { display:flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line);}
.notif-tabs .tab { padding: 6px 10px; font-size: 12px;}
.notif-list { max-height: 460px; overflow:auto;}
.notif-item { display:flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); position: relative;}
.notif-item.unread::before { content:""; position:absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);}
.notif-item.unread { padding-left: 18px;}
.notif-item .body { font-size: 12.5px; color: var(--ink-2); flex:1;}
.notif-item .body strong { color: var(--ink); font-weight: 600;}
.notif-item .body small { color: var(--faint); display:block; margin-top: 2px; font-size: 11px;}
.notif-foot { padding: 8px 12px; text-align: center; border-top: 1px solid var(--line); font-size: 12px; color: var(--accent);}

/* =========================================================
   Settings
   ========================================================= */
.set-grid { display:grid; grid-template-columns: 200px 1fr; gap: 20px;}
.set-nav { display:flex; flex-direction:column; gap: 1px;}
.set-nav .item { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); cursor:pointer;}
.set-nav .item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500;}
.set-nav .item:hover:not(.active){ background: var(--hover);}
.set-card { background: var(--surface); border:1px solid var(--line); border-radius: 10px;}
.set-card h3 { font-size: 14px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600;}
.set-row { display:grid; grid-template-columns: 220px 1fr 120px; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); align-items:center;}
.set-row:last-child { border-bottom: 0;}
.set-row .label { font-size: 12.5px; font-weight: 500;}
.set-row .label small { display:block; color: var(--muted); font-weight: 400; margin-top: 2px;}
.set-row .ctrl { display:flex; align-items:center; gap: 8px;}
.toggle {
  width: 30px; height: 17px; border-radius: 999px; background: var(--neutral-soft); position: relative; cursor:pointer; flex:none;
}
.toggle::after { content:""; position:absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius:50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition:.15s;}
.toggle.on { background: var(--accent);}
.toggle.on::after { left: 15px;}

/* =========================================================
   Empty / loading / error states
   ========================================================= */
.state {
  background: var(--surface); border:1px dashed var(--line); border-radius: 10px;
  padding: 28px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 8px; text-align:center; min-height: 240px;
}
.state .ill { width: 56px; height: 56px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display:grid; place-items:center; }
.state h3 { margin: 0; font-size: 14px;}
.state p { margin: 0; color: var(--muted); font-size: 12.5px; max-width: 300px;}
.state.error .ill { background: var(--risk-soft); color: var(--risk);}

.skeleton { background: var(--surface); border:1px solid var(--line); border-radius: 10px; padding: 14px;}
.skeleton .ln {
  height: 10px; background: linear-gradient(90deg, var(--neutral-soft) 0%, var(--line-2) 50%, var(--neutral-soft) 100%);
  border-radius: 4px; margin-bottom: 8px;
}
.skeleton .ln.w-50 { width: 50%;} .skeleton .ln.w-70 { width: 70%;} .skeleton .ln.w-30 { width: 30%;} .skeleton .ln.w-90 { width: 90%;}

/* Toast */
.toast {
  position:absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display:inline-flex; align-items:center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: #15171C; color: #ECEAE3; font-size: 12.5px; box-shadow: var(--sh-modal);
}
.toast .ok-pill { background: var(--ok); color: #fff; padding: 1px 5px; border-radius: 4px; font-size: 10.5px;}
.toast a { color: #9DD5BE; text-decoration: none; margin-left: 4px;}

/* =========================================================
   Mobile frames
   ========================================================= */
.phone {
  width: 375px; height: 760px; background: var(--bg); color: var(--ink);
  border-radius: 28px; border: 8px solid #15171C;
  overflow: hidden; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
}
.phone.dark { border-color: #06080B;}
.phone .status {
  height: 26px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 18px; font-size: 11px; font-weight: 600; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.phone .m-tb {
  display:flex; align-items:center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.phone .m-tb h1 { font-size: 16px; margin: 0; font-weight: 600;}
.phone .m-body { flex: 1; overflow: auto; padding: 12px;}
.phone .m-body.tight { padding: 0;}
.phone .m-bn {
  display:grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); background: var(--surface);
}
.phone .m-bn .it { display:flex; flex-direction:column; align-items:center; gap: 2px; padding: 8px 0; color: var(--muted); font-size: 10px;}
.phone .m-bn .it.active { color: var(--accent);}
.phone .m-bn .it .icn { width: 18px; height: 18px;}
.phone .m-bn .it .fab { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; margin-top: -10px;}

.m-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;}
.m-card .t { font-size: 13px; font-weight: 500;}
.m-card .meta { display:flex; align-items:center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted);}

.m-bottomsheet {
  position:absolute; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(0,0,0,.18);
  padding: 8px 16px 14px;
}
.m-bottomsheet .grab { width: 36px; height: 4px; background: #D9D5C8; border-radius: 4px; margin: 4px auto 10px;}
[data-theme="dark"] .m-bottomsheet .grab { background:#2A2D34;}

/* small icon glyphs (CSS-drawn) */
.icn { display: inline-block; width: 14px; height: 14px; vertical-align: middle;}
.dot-status { width:8px; height:8px; border-radius:2px; display:inline-block;}
.dot-status.ok { background: var(--ok);}
.dot-status.warn { background: var(--warn);}
.dot-status.risk { background: var(--risk);}
.dot-status.info { background: var(--info);}
.dot-status.neutral{ background: var(--neutral);}

/* =========================================================
   Component spec sheet
   ========================================================= */
.specs { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px;}
.spec {
  background: var(--surface); border:1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.spec h4 { margin: 0 0 8px; font-size: 12px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); font-weight:600;}
.spec .swatch-row { display:flex; gap: 6px; flex-wrap:wrap;}
.spec .swatch { width: 38px; height: 38px; border-radius: 7px; border:1px solid rgba(0,0,0,.06); position:relative;}
.spec .swatch small { position:absolute; bottom: -16px; left: 0; font-size: 10px; color: var(--muted);}

/* annotations */
.note {
  background: var(--surface-2); border-left: 2px solid var(--accent);
  padding: 8px 12px; margin: 8px 0; font-size: 12px; color: var(--ink-2); border-radius: 4px;
}
.note strong { color: var(--ink); font-weight: 600;}
.note-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px 16px;}

/* utility */
.flex { display:flex;} .flex.aic { align-items:center;} .flex.jcb { justify-content:space-between;} .gap-6{gap:6px;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.mt-8 { margin-top: 8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;}
.muted { color: var(--muted);} .faint { color: var(--faint);} .strong{ font-weight:600;}
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;}
.divider { height: 1px; background: var(--line);}
.right { text-align: right;}
.tnum { font-variant-numeric: tabular-nums;}

/* progress small */
.bar-mini { height: 4px; background: var(--neutral-soft); border-radius: 2px; overflow:hidden;}
.bar-mini > i { display:block; height:100%; background: var(--accent);}

/* link-ish */
.link { color: var(--accent); cursor:pointer; font-weight:500;}
.link:hover { text-decoration: underline;}