/* ADSIN Workspace · overview · "Staff room" direction, second pass
     unslop by Damir Sokolovsky (@heydamir), CC BY 4.0 */
  :root {
    --page: #f7f3ec;
    --card: #fffdf8;
    --raised: #efe9df;
    --line: rgba(43, 32, 40, 0.10);
    --line-strong: rgba(43, 32, 40, 0.20);
    --text: #2b2028;
    --text-2: #5c4e57;
    --text-3: #76676f;
    --accent: #62445e;
    --accent-hover: #533950;
    --on-accent: #fffaf4;
    --mark: #62445e;
    --danger: #a5463d;
    --warn: #8a5a12;
    --focus: rgba(98, 68, 94, 0.28);
    --card-shadow: 0 1px 0 rgba(43, 32, 40, 0.06), 0 8px 16px -12px rgba(43, 32, 40, 0.28);
    --pop-shadow: 0 24px 64px -16px rgba(43, 32, 40, 0.35), 0 0 0 1px var(--line);
    --scrim: rgba(43, 32, 40, 0.36);
    --logo-filter: brightness(0) opacity(0.86);

    --side: #3a2837;
    --side-text: #f3eaf0;
    --side-text-2: #c3b4be;
    --side-text-3: #a2919c;
    --side-active: rgba(255, 255, 255, 0.10);
    --side-hover: rgba(255, 255, 255, 0.06);
    --side-line: rgba(255, 255, 255, 0.10);

    --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
    --ui: "DM Sans", system-ui, sans-serif;
    --r-control: 10px;
    --r-card: 12px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fast: 140ms;
    --enter: 320ms;

    --card-h: 64px; --card-py: 12px; --row-h: 44px; --trow-h: 52px;
  }
  :root[data-theme="dark"] {
    --page: #1a1518;
    --card: #231c21;
    --raised: #2e252b;
    --line: rgba(242, 235, 230, 0.09);
    --line-strong: rgba(242, 235, 230, 0.20);
    --text: #f2ebe6;
    --text-2: #c0b3ba;
    --text-3: #978990;
    --accent: #f2ebe6;
    --accent-hover: #ffffff;
    --on-accent: #1a1518;
    --mark: #d4b0cd;
    --danger: #e8978c;
    --warn: #e0b25c;
    --focus: rgba(212, 176, 205, 0.35);
    --card-shadow: 0 0 0 1px var(--line);
    --pop-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line-strong);
    --scrim: rgba(0, 0, 0, 0.55);
    --logo-filter: none;
    --side: #120e11;
    --side-text: #f2ebe6;
    --side-text-2: #a99ba3;
    --side-text-3: #85777f;
    --side-active: rgba(242, 235, 230, 0.09);
    --side-hover: rgba(242, 235, 230, 0.05);
    --side-line: rgba(242, 235, 230, 0.08);
  }
  body[data-density="compact"] { --card-h: 48px; --card-py: 6px; --row-h: 36px; --trow-h: 44px; }

  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--page); color: var(--text); font: 400 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  h1, h2, h3, p, ul { margin: 0; padding: 0; }
  [hidden] { display: none !important; }
  .num { font-variant-numeric: tabular-nums; }
  .ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  :focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

  /* ---------- Shell ---------- */
  .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; height: 100dvh; }

  .sidebar { background: var(--side); color: var(--side-text); display: flex; flex-direction: column; padding: 0 12px 12px; overflow-y: auto; }
  .sidebar :focus-visible { outline-color: #e6d2e1; }
  /* The logo row is exactly as tall as the top bar, so the two line up */
  .brand { height: 56px; flex: none; display: flex; align-items: center; padding: 0 12px; }
  .brand img { display: block; width: 108px; height: auto; }
  .nav-label { padding: 20px 12px 8px; color: var(--side-text-3); font-size: 13px; }
  .nav-label:first-of-type { padding-top: 12px; }
  .nav { display: grid; gap: 2px; }
  .nav button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--side-text-2); font-size: 14px; text-align: left; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
  .nav button:hover { background: var(--side-hover); color: var(--side-text); }
  .nav button[aria-current="page"] { background: var(--side-active); color: var(--side-text); font-weight: 500; }
  .nav button .n { margin-left: auto; font-size: 13px; color: var(--side-text-3); font-weight: 400; }
  .nav button .n.late { color: #f0b3a8; }

  .side-bottom { margin-top: auto; padding-top: 12px; position: relative; }
  .user { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--side-text); text-align: left; transition: background-color var(--fast) var(--ease); }
  .user:hover, .user[aria-expanded="true"] { background: var(--side-hover); }
  .user .avatar { background: rgba(255, 255, 255, 0.14); color: var(--side-text); }
  .user b { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; }
  .user small { display: block; font-size: 12px; color: var(--side-text-3); }
  .user .ic { margin-left: auto; color: var(--side-text-3); }
  .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--raised); color: var(--text-2); display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; }

  .main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow-y: auto; }
  .topbar { position: sticky; top: 0; z-index: 5; height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 32px; background: var(--page); border-bottom: 1px solid var(--line); }
  .icon-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
  .icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--raised); color: var(--text); }
  .menu-btn, .top-logo { display: none; }
  .top-logo { height: 30px; width: auto; filter: var(--logo-filter); }
  .cmd-trigger { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--card); color: var(--text-3); font-size: 14px; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
  .cmd-trigger:hover { border-color: var(--line-strong); color: var(--text-2); }
  .cmd-trigger span { flex: 1; text-align: left; }
  kbd { font: 500 12px var(--ui); color: var(--text-2); background: var(--raised); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; }
  .top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .bell-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: var(--page); font: 500 11px/16px var(--ui); text-align: center; }

  .content { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 32px 48px; }

  /* ---------- Popovers, segmented controls, switches ---------- */
  .pop-wrap { position: relative; }
  .pop { position: absolute; right: 0; top: 44px; z-index: 12; width: 288px; padding: 8px; background: var(--card); color: var(--text); border-radius: var(--r-card); box-shadow: var(--pop-shadow); animation: rise 160ms var(--ease) both; }
  .pop.up { top: auto; bottom: 60px; left: 0; right: 0; width: auto; }
  .opt { padding: 8px; }
  .opt-label { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
  .pop-sep { height: 1px; background: var(--line); margin: 4px 8px; }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; background: var(--raised); border-radius: 8px; }
  .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
  .seg button:hover { color: var(--text); }
  .seg button[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(43, 32, 40, 0.08); }
  .seg button .num { color: var(--text-3); font-weight: 400; }
  .switch-row, .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; text-align: left; transition: background-color var(--fast) var(--ease); }
  .switch-row { justify-content: space-between; }
  .switch-row:hover, .menu-item:hover { background: var(--raised); }
  .menu-item .ic { color: var(--text-2); }
  .switch { width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); padding: 2px; flex: none; transition: background-color var(--fast) var(--ease); }
  .switch i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: transform var(--fast) var(--ease); }
  [aria-checked="true"] > .switch { background: var(--mark); }
  [aria-checked="true"] > .switch i { transform: translateX(16px); }

  /* ---------- Header ---------- */
  .rise { animation: rise var(--enter) var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
  .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .head .date { color: var(--text-3); font-size: 14px; }
  .head h1 { font: 600 40px/1.05 var(--display); letter-spacing: -0.03em; margin-top: 4px; }
  .head .sum { margin-top: 8px; color: var(--text-2); font-size: 16px; }
  .head .sum .late { color: var(--danger); font-weight: 500; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
  .btn:hover { background: var(--raised); }
  .btn:active { transform: scale(0.98); }
  .btn.primary { height: 40px; padding: 0 16px; border-color: transparent; background: var(--accent); color: var(--on-accent); }
  .btn.primary:hover { background: var(--accent-hover); }
  .btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); padding: 0 8px; margin-right: -8px; }
  .btn.quiet:hover { background: var(--raised); color: var(--text); }

  /* The four counts double as shortcuts into the task filter */
  .stats { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
  .stat { position: relative; padding: 16px 20px; border: 0; border-left: 1px solid var(--line); background: transparent; text-align: left; transition: background-color var(--fast) var(--ease); }
  .stat:first-child { border-left: 0; }
  .stat:hover { background: color-mix(in srgb, var(--raised) 55%, transparent); }
  .stat:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
  .stat b { display: block; font: 600 28px/1.1 var(--display); letter-spacing: -0.02em; }
  .stat span { font-size: 13px; color: var(--text-3); }
  .stat.is-late b { color: var(--danger); }
  .stat[aria-pressed="true"]::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--mark); }

  .cols { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .stack { display: grid; gap: 32px; min-width: 0; }
  .stack > * { min-width: 0; }
  .sec-head { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 8px; flex-wrap: wrap; }
  .sec-head h2 { font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; margin-right: auto; }
  .sec-head .count { color: var(--text-3); font-size: 14px; margin-left: 8px; font-family: var(--ui); font-weight: 400; letter-spacing: 0; }
  #tasks-sec { scroll-margin-top: 72px; }
  .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .toolbar .seg { grid-auto-columns: auto; }
  .toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .seg.icons button { width: 36px; padding: 0; }
  .select { position: relative; display: inline-flex; align-items: center; }
  .select select { appearance: none; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--card); font-size: 14px; cursor: pointer; }
  .select .ic { position: absolute; right: 8px; pointer-events: none; color: var(--text-3); }

  /* ---------- Today: index cards ---------- */
  .cards { display: grid; gap: 8px; }
  .tcard { position: relative; background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: var(--card-py) 16px var(--card-py) 20px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: var(--card-h); }
  .tcard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--raised); }
  .tcard[data-p="High"]::before { background: var(--mark); }
  .tcard[data-p="Medium"]::before { background: var(--text-3); opacity: 0.55; }
  .tcard .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--enter) var(--ease); }
  .tcard .m { font-size: 13px; color: var(--text-3); }
  .tcard.done .t { color: var(--text-3); }
  body[data-density="compact"] .tcard > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  body[data-density="compact"] .tcard .m { white-space: nowrap; }

  .chk { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; border-radius: 8px; }
  .chk i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--text-3); display: grid; place-items: center; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
  .chk:hover i { border-color: var(--mark); }
  .chk:active i { transform: scale(0.9); }
  .chk svg { width: 12px; height: 12px; fill: none; stroke: var(--card); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .chk path { stroke-dasharray: 14; stroke-dashoffset: 14; }
  .chk[aria-checked="true"] i { background: var(--mark); border-color: var(--mark); }
  .chk[aria-checked="true"] path { stroke-dashoffset: 0; }
  .just .chk path { animation: draw 220ms var(--ease) both; }

  /* Status chip: one click moves a task between To do and In progress */
  .status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
  .status:hover { background: var(--raised); border-color: var(--line-strong); }
  .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; }
  .dot.s-prog { border-color: var(--mark); background: linear-gradient(90deg, var(--mark) 50%, transparent 50%); }
  .dot.s-review { border-color: var(--warn); }
  .dot.s-done { border-color: var(--mark); background: var(--mark); }

  .due { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); white-space: nowrap; min-width: 88px; justify-content: flex-end; }
  .due .ic { width: 14px; height: 14px; }
  .due.today { color: var(--warn); font-weight: 500; }
  .due.late { color: var(--danger); font-weight: 500; }
  /* Signature: the date stamp, only on finished work */
  .stamp { font: 600 11px/1 var(--display); letter-spacing: 0.06em; color: var(--mark); border: 1.5px solid var(--mark); border-radius: 4px; padding: 4px 6px; transform: rotate(-5deg); white-space: nowrap; justify-self: end; }
  .just .stamp { animation: stamp 260ms var(--ease) 100ms both; }

  /* ---------- Tasks by status: list ---------- */
  .groups { display: grid; gap: 16px; }
  .group { background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
  .group-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .group-head .count { color: var(--text-3); font-weight: 400; }
  .row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 88px 132px 112px; gap: 12px; align-items: center; min-height: var(--row-h); padding: 0 16px 0 12px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background-color var(--fast) var(--ease); }
  .row:last-child { border-bottom: 0; }
  .row:hover { background: color-mix(in srgb, var(--raised) 50%, transparent); }
  .row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row.done .t { color: var(--text-3); }
  .row .from { color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row .due { min-width: 0; justify-self: end; }
  .prio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
  .prio i { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
  .prio i u { width: 3px; border-radius: 1px; background: var(--line-strong); }
  .prio i u:nth-child(1) { height: 5px; } .prio i u:nth-child(2) { height: 8px; } .prio i u:nth-child(3) { height: 11px; }
  .prio[data-p="Low"] u:nth-child(1), .prio[data-p="Medium"] u:nth-child(-n+2) { background: var(--text-2); }
  .prio[data-p="High"] u { background: var(--mark); }
  .prio[data-p="High"] { color: var(--text); font-weight: 500; }
  .group-empty { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-3); font-size: 14px; }
  .group-empty svg { width: 32px; height: 24px; flex: none; }

  /* ---------- Tasks by status: board ---------- */
  .kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .kcol { background: color-mix(in srgb, var(--raised) 70%, transparent); border-radius: 14px; padding: 6px; min-height: 120px; }
  .kcol-head { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; font-size: 14px; font-weight: 500; }
  .kcol-head .count { color: var(--text-3); font-weight: 400; }
  .kcards { display: grid; gap: 6px; }
  .kcard { background: var(--card); border-radius: 8px; box-shadow: var(--card-shadow); padding: 10px 12px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 8px; align-items: start; font-size: 14px; }
  .kcard .t { font-weight: 500; line-height: 1.35; padding-top: 2px; }
  .kcard.done .t { color: var(--text-3); }
  .kcard .kfoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; padding-left: 4px; }
  .kcard .prio { font-size: 0; gap: 0; }
  .kcard .due { min-width: 0; }
  .kcol-empty { padding: 12px 8px; color: var(--text-3); font-size: 13px; }

  /* ---------- Empty state ---------- */
  .empty { background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 32px 24px; display: grid; justify-items: center; text-align: center; gap: 4px; animation: rise var(--enter) var(--ease) both; }
  .empty svg { width: 120px; height: 88px; margin-bottom: 12px; color: var(--text-3); }
  .empty b { font: 600 18px var(--display); }
  .empty p { color: var(--text-2); font-size: 14px; max-width: 320px; }
  .draw .ink { stroke: var(--mark); }
  .draw .paper { fill: var(--raised); stroke: none; }

  /* ---------- Team ---------- */
  .team { background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
  .trow { display: grid; grid-template-columns: minmax(180px, 1.2fr) 148px 80px 64px minmax(0, 1.4fr); gap: 16px; align-items: center; min-height: var(--trow-h); padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .trow:last-child { border-bottom: 0; }
  .trow.th { min-height: 36px; color: var(--text-3); font-size: 13px; }
  .trow .r { text-align: right; }
  .person { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .person b { display: block; font-weight: 500; line-height: 1.25; }
  .person small { display: block; color: var(--text-3); font-size: 12px; }
  .load { display: flex; align-items: center; gap: 8px; }
  .load .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; display: flex; gap: 1px; }
  .load .bar i { display: block; height: 100%; background: var(--text-3); }
  .load .bar i.l { background: var(--danger); }
  .load span { width: 20px; text-align: right; }
  .trow .late-n { color: var(--danger); font-weight: 500; }
  .trow .zero { color: var(--text-3); }
  .next { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .next .late { color: var(--danger); }
  body:not([data-role="manager"]) .manager-only { display: none; }

  /* ---------- Aside ---------- */
  .panel { background: var(--card); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 20px; }
  .panel h2 { font: 600 16px/1.3 var(--display); }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
  .week-top { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
  .ring-wrap { position: relative; width: 104px; height: 104px; flex: none; }
  .ring-wrap svg { display: block; transform: rotate(-90deg); }
  .ring-track { stroke: var(--raised); }
  .ring-fill { stroke: var(--mark); transition: stroke-dashoffset 600ms var(--ease); }
  .ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .ring-num b { font: 600 26px/1 var(--display); }
  .ring-num span { font-size: 12px; color: var(--text-3); margin-top: 2px; }
  .week-say b { display: block; font-weight: 500; }
  .week-say span { color: var(--text-3); font-size: 13px; }
  .days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 88px; margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line); }
  .day { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; justify-items: center; height: 100%; font-size: 12px; color: var(--text-3); }
  .day .col { align-self: end; width: 100%; max-width: 28px; border-radius: 4px 4px 2px 2px; background: var(--line-strong); min-height: 2px; }
  .day.is-today .col { background: var(--mark); }
  .day.is-today { color: var(--text); font-weight: 500; }
  .perf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

  .routine { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
  .routine:last-child { border-bottom: 0; padding-bottom: 0; }
  .routine b { display: block; color: var(--text); font-weight: 500; font-size: 14px; }
  .routine small { display: block; font-size: 13px; color: var(--text-3); line-height: 1.4; }
  .ann { padding: 12px 0 0; }
  .ann b { display: block; font-weight: 500; font-size: 14px; }
  .ann p { color: var(--text-2); font-size: 14px; margin-top: 2px; }
  .ann small { display: block; margin-top: 8px; color: var(--text-3); font-size: 12px; }

  .foot { margin-top: 48px; display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; }
  .foot img { height: 22px; width: auto; filter: var(--logo-filter); opacity: 0.6; }

  /* ---------- Command bar ---------- */
  .scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; animation: fade var(--fast) var(--ease) both; }
  .cmd { width: min(600px, 100%); background: var(--card); border-radius: 16px; box-shadow: var(--pop-shadow); overflow: hidden; animation: rise 200ms var(--ease) both; }
  .cmd-in { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
  .cmd-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); }
  .cmd-in input::placeholder { color: var(--text-3); }
  .cmd-list { max-height: min(400px, 56vh); overflow-y: auto; padding: 8px; }
  .cmd-sec { padding: 8px 8px 4px; font-size: 12px; color: var(--text-3); }
  .cmd-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 14px; text-align: left; }
  .cmd-item .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .cmd-item .h { font-size: 12px; color: var(--text-3); white-space: nowrap; }
  .cmd-item[aria-selected="true"] { background: var(--raised); }
  .cmd-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
  .cmd-foot span { display: inline-flex; align-items: center; gap: 6px; }

  .toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 8px); padding: 10px 16px; border-radius: var(--r-control); background: var(--text); color: var(--page); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); max-width: calc(100vw - 32px); }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .dock, .shade { display: none; }

  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes draw { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
  @keyframes stamp { from { opacity: 0; transform: rotate(-5deg) scale(1.3); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1280px) {
    .cols { grid-template-columns: minmax(0, 1fr); }
    .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
    .aside .panel:first-child { grid-row: span 2; }
    .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 960px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 15; width: 272px; transform: translateX(-100%); transition: transform 240ms var(--ease); }
    .sidebar.open { transform: none; }
    .shade { position: fixed; inset: 0; z-index: 14; background: var(--scrim); }
    .shade.show { display: block; animation: fade var(--fast) var(--ease) both; }
    .nav button { height: 44px; }
    .menu-btn { display: grid; margin-left: -8px; }
    .top-logo { display: block; margin-right: 8px; }
    .topbar { padding: 0 16px; }
    .cmd-trigger { width: 36px; flex: none; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--text-2); margin-left: auto; }
    .cmd-trigger span, .cmd-trigger kbd { display: none; }
    .top-right { margin-left: 0; }
    .content { padding: 24px 16px 96px; }
    .row { grid-template-columns: 24px minmax(0, 1fr) 88px 112px; }
    .row .from { display: none; }
    .trow { grid-template-columns: minmax(0, 1fr) 120px 64px 48px; }
    .trow .next { display: none; }
    .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
    .dock button { display: grid; justify-items: center; gap: 2px; height: 56px; align-content: center; border: 0; background: transparent; color: var(--text-3); font-size: 12px; }
    .toast { bottom: 72px; }
  }
  @media (max-width: 640px) {
    .head h1 { font-size: 30px; }
    .head .btn.primary { width: 100%; height: 44px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .aside { grid-template-columns: minmax(0, 1fr); }
    .tcard { grid-template-columns: 24px minmax(0, 1fr) auto; padding-right: 12px; }
    .tcard .t { white-space: normal; }
    .tcard > div { grid-column: 2 / -1; }
    .tcard > .status { grid-column: 2; justify-self: start; }
    .tcard > .due, .tcard > .stamp { grid-column: 3; }
    .tcard.done > .stamp { grid-column: 2; justify-self: start; }
    .toolbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
    .toolbar .right { margin-left: 0; }
    .row { grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 48px; }
    .row .prio { display: none; }
    .kanban { grid-template-columns: repeat(4, 248px); overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; scroll-snap-type: x proximity; }
    .kcol { scroll-snap-align: start; }
    .trow { grid-template-columns: minmax(0, 1fr) 48px 48px 40px; gap: 8px; }
    .trow .lg, #h-team .count { display: none; }
    .trow.th span { text-transform: capitalize; }
    .load .bar { display: none; }
    .load span { width: auto; flex: 1; }
    .pop { width: min(288px, calc(100vw - 32px)); }
    .scrim { padding-top: 16px; }
    .cmd-foot { display: none; }
  }


/* Reference refinement: preserve original proportions and component styles. */
[hidden]{display:none!important}.tcard>div{min-width:0}.tcard .t,.row .t{overflow-wrap:anywhere}.tcard .m{line-height:1.4}.tcard .status{max-width:136px}.days{height:128px;grid-template-rows:1fr}.day{grid-template-rows:80px auto auto}.day .col{max-height:80px}.week-say{min-width:0}.week-say b{line-height:1.4}.ring-num b{font-size:28px}.notice-small{font-size:12px;color:var(--text-3);line-height:1.5}.trow{grid-template-columns:minmax(140px,1.2fr) 88px 56px 48px minmax(0,1.4fr);gap:12px}.row{grid-template-columns:20px minmax(0,1fr) 76px 104px 112px}.task-detail{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;background:var(--card);color:var(--text);border:1px solid var(--line-strong);border-radius:16px;box-shadow:var(--pop-shadow)}.task-detail::backdrop{background:var(--scrim)}.detail-head{display:flex;justify-content:space-between;align-items:start;padding:20px 24px;border-bottom:1px solid var(--line);gap:16px}.detail-head h2{font:600 22px var(--display)}.detail-body{padding:24px;display:grid;gap:16px}.detail-body label{display:grid;gap:8px;font-size:13px;color:var(--text-2)}.detail-body textarea,.detail-body input,.detail-body select{width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--page);color:var(--text);font:inherit}.detail-body textarea{min-height:112px;resize:vertical}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px;border-top:1px solid var(--line)}.detail-row{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}.detail-row small{color:var(--text-3)}.tcard .status{color:var(--text-2);background:var(--card)}.btn{color:var(--text)}.btn.primary{color:var(--on-accent)}.team{overflow-x:auto}.team>.trow{min-width:620px}:focus-visible{outline:2px solid var(--mark);outline-offset:3px}.ring-fill{transition:none}.rise{animation:none}.foot{margin-top:32px}
@media(max-width:1100px){.cols{grid-template-columns:minmax(0,1fr) 300px;gap:24px}.tcard{grid-template-columns:20px minmax(0,1fr) auto}.tcard .status{display:none}.row{grid-template-columns:20px minmax(0,1fr) 88px}.row .prio,.row .from{display:none}}
@media(max-width:900px){.cols{grid-template-columns:1fr}.aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.aside>section:first-child{grid-column:1/-1}.tcard .status{display:inline-flex}.tcard{grid-template-columns:20px minmax(0,1fr) auto auto}.sidebar{z-index:30}.content{padding:24px}.head h1{font-size:32px}}
@media(max-width:600px){.aside{display:grid;grid-template-columns:1fr}.content{padding:20px 16px 32px}.head h1{font-size:30px}.tcard{grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:12px;min-height:72px}.tcard .status{display:none}.tcard .m{font-size:11px}.tcard .t{font-size:13px}.tcard .due{font-size:11px;max-width:68px;white-space:normal}.topbar{padding:0 16px}.toolbar{flex-wrap:wrap}.toolbar .right{margin-left:0}.seg{max-width:100%;overflow-x:auto}.seg button{font-size:12px;padding:0 8px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:16px 10px}.stat b{font-size:24px}.stat span{font-size:11px}.week-top{gap:20px}.detail-head,.detail-body{padding:20px}.team>.trow{min-width:600px}}
.sidebar .brand img{width:104px;height:auto}.top-logo{height:auto;width:88px}.sidebar .brand{padding:20px 12px 8px}.ai-mark{display:flex;align-items:center;justify-content:center;gap:5px;height:48px}.ai-mark i{display:block;width:6px;height:20px;border-radius:4px;background:var(--mark)}.ai-mark i:nth-child(2n){height:32px}.ai-mark i:nth-child(3){height:44px}.ai-prompts{display:flex;flex-wrap:wrap;gap:8px}#ai-chat{max-height:240px;overflow:auto;display:grid;gap:12px}.ai-message{background:var(--raised);padding:12px;border-radius:8px;font-size:14px}.ai-message b{font-size:12px;color:var(--text-3)}.ai-message p{margin-top:6px}#ai-question{min-height:80px}@media(max-width:600px){#assistant-open{font-size:12px;padding:0 8px}.top-logo{width:64px}} 
/* Slate glass: solid fallbacks, translucent chrome, opaque reading surfaces. */
:root{--glass:rgba(252,253,254,.84);--glass-line:rgba(93,111,129,.22);--glass-shadow:0 8px 28px -20px rgba(30,48,65,.30)}:root[data-theme=dark]{--glass:rgba(34,43,53,.90);--glass-line:rgba(210,224,238,.16);--glass-shadow:none}
.topbar,.pop,.task-detail{background:var(--card);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}.topbar{border-top:0;border-left:0;border-right:0}.pop{border-radius:14px}.task-detail{isolation:isolate}.tcard,.panel,.stats,.team,.group{border:1px solid var(--line);box-shadow:var(--card-shadow)}.form-wrap{padding:32px;border:1px solid var(--glass-line);border-radius:20px;background:var(--card);box-shadow:var(--glass-shadow);width:min(444px,100%)}.form-wrap h1{font-size:30px}.form-wrap form{margin-top:28px}.form-side{background:var(--page)}.form-wrap .help{font-size:12px}.brand-top .logo{width:104px}.login-brand{border-right:1px solid var(--glass-line)}
@supports(backdrop-filter:blur(16px)){.topbar,.pop,.task-detail,.form-wrap{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
@media(prefers-reduced-transparency:reduce){.topbar,.pop,.task-detail,.form-wrap{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:820px){.form-side{padding:28px 20px}.form-wrap{padding:24px;width:min(420px,100%)}.form-wrap h1{font-size:27px}.brand-top .logo{width:88px}}
@media(max-width:600px){.topbar{gap:4px}.top-logo{width:64px}.cmd-trigger{min-width:32px}#assistant-open{padding:0 6px;font-size:11px}.top-right{gap:2px}.icon-btn{width:32px;height:36px}.form-wrap{border-radius:16px}.detail-actions .btn{min-height:40px}.head{gap:16px}.head h1{overflow-wrap:anywhere}.form-top .icon-btn{width:36px}}
.performance-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:28px}.performance-main{padding:28px}.performance-score{display:flex;align-items:center;gap:24px;margin:32px 0}.performance-score strong{font:600 52px var(--display);color:var(--mark)}.performance-score span{font-size:15px}.performance-score small,.performance-breakdown small{display:block;font-size:12px;color:var(--text-3);margin-top:4px}.performance-months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin:24px 0}.performance-month{text-align:center;display:grid;gap:12px;font-size:13px;color:var(--text-3)}.performance-month b{font-weight:500}.performance-track{height:200px;display:flex;align-items:flex-end;background:var(--raised);border-radius:6px;overflow:hidden}.performance-track i{display:block;width:100%;background:var(--line-strong)}.performance-month.current{color:var(--mark)}.performance-month.current i{background:var(--mark)}.performance-breakdown .detail-row{padding:20px 0}.performance-breakdown>.notice-small{margin-top:24px}@media(max-width:1000px){.performance-page-grid{grid-template-columns:1fr}.performance-breakdown{max-width:none}}@media(max-width:600px){.performance-main{padding:20px}.performance-score strong{font-size:44px}.performance-months{gap:12px}.performance-track{height:160px}.performance-page-grid .panel-head{align-items:start;flex-direction:column}.performance-page-grid{gap:20px}.performance-month{font-size:12px}}
.floating-assistant{position:fixed;right:28px;bottom:28px;z-index:18;width:56px;height:56px;border-radius:50%;border:1px solid var(--line-strong);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 8px 24px -10px #0006;cursor:pointer;transition:transform .18s,background-color .18s}.floating-assistant:hover{transform:translateY(-2px);background:var(--accent-hover)}.floating-assistant svg{animation:assistant-arrive .5s ease-out 1}.floating-assistant:active{transform:scale(.96)}@keyframes assistant-arrive{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.entry-art{width:240px;max-width:100%;color:var(--board-text);margin:28px 0 0}.entry-art svg{display:block;width:100%;height:auto}.brand-message{padding:24px 0}.board .brand-message h2{font-size:44px}.page-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}.page-toolbar input{flex:1;min-width:180px;background:var(--card);color:var(--text);padding:12px;border:1px solid var(--line-strong);border-radius:10px;font:inherit}.notice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.notice-card{text-align:left;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:16px;cursor:pointer}.notice-card.important{grid-column:1/-1;border-left:4px solid var(--mark)}.notice-meta{display:flex;justify-content:space-between;gap:16px;color:var(--text-3);font-size:12px}.notice-card h2{font:600 23px/1.3 var(--display)}.notice-card p{color:var(--text-2);font-size:14px;line-height:1.65;max-width:680px}.notice-card footer{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3)}.notice-read{color:var(--mark)}.report-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:24px;margin-top:28px}.pdf-upload{display:grid;gap:20px}.pdf-upload label{display:grid;gap:8px;font-size:13px;color:var(--text-2)}.pdf-upload input,.pdf-upload textarea{padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--page);color:var(--text);font:inherit;width:100%}.pdf-drop{padding:28px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--page)}.pdf-drop strong{font:600 20px var(--display)}.pdf-drop input{margin-top:16px;max-width:100%;font-size:12px}.pdf-drop p{margin-top:8px;font-size:13px;color:var(--text-3)}.report-item{padding:16px 0;border-bottom:1px solid var(--line)}.report-item b{display:block;overflow-wrap:anywhere}.report-item small{display:block;color:var(--text-3);margin:8px 0}.report-item a{color:var(--mark)}.form-error{color:var(--danger);font-size:13px}.page-empty{padding:40px 20px;text-align:center;color:var(--text-3)}
@media(max-width:820px){.login-brand .brand-message{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;margin-top:20px}.brand-rule,.brand-message>p{display:none}.board .brand-message h2{font-size:25px}.entry-art{width:110px;flex:none;margin:0}.login-brand{padding-bottom:20px}.form-wrap{margin:0 auto}.form-side{justify-content:center}.report-layout{grid-template-columns:1fr}}
@media(max-width:600px){.floating-assistant{right:20px;bottom:84px;width:52px;height:52px}.notice-grid{grid-template-columns:1fr}.notice-card{padding:20px}.notice-card h2{font-size:20px}.notice-card.important{grid-column:auto}.pdf-drop{padding:20px}.report-layout{gap:20px}.entry-art{width:96px}.login-brand .brand-message{margin-top:16px}.board .brand-message h2{font-size:24px}.page-toolbar .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.floating-assistant,.floating-assistant svg{animation:none;transition:none}}

:root[data-theme=dark]{--line:rgba(246,237,240,.12);--line-strong:rgba(246,237,240,.24);--glass:color-mix(in srgb,var(--card) 94%,transparent);--glass-line:rgba(246,237,240,.17);--card-shadow:0 1px 0 rgba(255,255,255,.04);--scrim:rgba(8,6,8,.68)}[data-theme=dark] .tcard,[data-theme=dark] .panel,[data-theme=dark] .notice-card{border-color:var(--line)}[data-theme=dark] :is(input,textarea,select){color-scheme:dark}[data-theme=dark] :is(input,textarea)::placeholder{color:var(--text-3);opacity:1}[data-theme=dark] .topbar{background:color-mix(in srgb,var(--page) 92%,transparent)}[data-theme=dark] .form-wrap{background:color-mix(in srgb,var(--card) 95%,transparent)}[data-theme=dark] .notice-card.important{border-left-color:var(--mark)}.floating-assistant svg{width:24px;height:24px}.floating-assistant{border:1px solid color-mix(in srgb,var(--on-accent) 25%,transparent)}.assistant-panel{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}.assistant-panel .detail-head{align-items:center}.assistant-panel .detail-head h2{font-size:20px}.assistant-panel .detail-body{gap:20px}.assistant-context{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-3)}.assistant-context b{font-weight:500;color:var(--text-2)}.voice-stage{text-align:center;padding:12px 0 16px;display:grid;justify-items:center;gap:12px}.voice-start{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border:6px solid var(--raised);outline:1px solid var(--line-strong);cursor:pointer;transition:transform .18s,background-color .18s}.voice-start svg{width:32px;height:32px}.voice-start:hover{transform:translateY(-2px)}.voice-stage h3{font:500 23px var(--display);margin-top:8px}.voice-stage p{font-size:13px;color:var(--text-3)}.voice-feedback{display:flex;align-items:center;justify-content:center;gap:4px;height:20px}.voice-feedback i{display:block;width:3px;height:5px;border-radius:3px;background:var(--mark)}.voice-stage.preview-listening .voice-feedback i{animation:voice-meter .65s ease-in-out infinite alternate}.voice-feedback i:nth-child(2n){animation-delay:-.3s!important}.voice-feedback i:nth-child(3n){animation-delay:-.5s!important}@keyframes voice-meter{to{height:18px}}.assistant-panel #ai-chat:has(.ai-message){border-top:1px solid var(--line);padding-top:16px;max-height:220px}.assistant-panel .ai-message{background:var(--raised);border:1px solid var(--line);font-size:13px;line-height:1.6}.assistant-panel .ai-message:nth-child(odd){margin-left:36px;background:var(--page)}.assistant-panel .ai-prompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.assistant-panel .ai-prompts .btn{height:auto;min-height:40px;padding:8px;font-size:12px;white-space:normal}.assistant-panel #ai-question{min-height:64px;max-height:140px}.assistant-panel .detail-actions{justify-content:space-between}.assistant-note{font-size:11px;color:var(--text-3);line-height:1.5}.assistant-panel .detail-actions .primary{min-width:96px}@media(max-width:600px){.assistant-panel{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.assistant-panel .detail-head{padding:16px 20px}.assistant-panel .detail-body{padding:20px;gap:16px}.voice-stage{padding:8px 0}.voice-start{width:76px;height:76px}.voice-stage h3{font-size:22px}.assistant-panel .detail-actions{padding:16px 20px}.assistant-panel .ai-prompts .btn{font-size:11px}.assistant-panel #ai-chat:has(.ai-message){max-height:180px}}
@media(prefers-reduced-motion:reduce){.voice-start,.voice-feedback i{animation:none!important;transition:none!important}}