:root {
      --tint-1: #fafbfb; --tint-2: #f7faf8; --tint-3: #f4f7f6;
      font-family: "Aptos", "Segoe UI", sans-serif;
      color: #202124;
      background: #f4f7f6;
      --ink: #202124;
      --muted: #687078;
      --subtle: #8a929a;
      --line: #dfe3e7;
      --soft: #f1f5f3;
      --panel: #ffffff;
      --accent: #176b4d;
      --accent-soft: #e7f4ed;
      --danger: #b42318;
      --warn: #946200;
      --row-h: 48px;
      --sidebar-w: 224px;
      /* refactoring-ui: a consistent layered shadow scale for real depth (was mostly flat) */
      --shadow-sm: 0 1px 2px rgba(20,30,25,.05), 0 1px 3px rgba(20,30,25,.04);
      --shadow-md: 0 2px 4px rgba(20,30,25,.05), 0 8px 18px rgba(20,30,25,.07);
      --shadow-lg: 0 12px 34px rgba(20,30,25,.12);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body { background: #f4f7f6; font-size: 14px; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; }
    .hidden { display: none !important; }
    .icon { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 18px; }
    svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .icon svg, .btn > svg, .icon-btn > svg, .logout > svg { width: 18px; height: 18px; flex: 0 0 18px; }

    /* ── Login Page ── */
    .login { min-height:100svh; height:100svh; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr); background:#f7faf8; color:#14231d; }
    .login-hero { position:relative; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:clamp(12px,2.2vh,24px); padding:clamp(22px,3.2vw,48px); color:#f7fffb; background:radial-gradient(circle at 82% 16%,rgba(75,224,160,.22),transparent 30%),radial-gradient(circle at 8% 86%,rgba(67,171,210,.2),transparent 34%),linear-gradient(145deg,#071c17 0%,#0b3227 56%,#10523c 100%); }
    .login-hero::before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 86%); }
    .login-hero > * { position:relative; z-index:1; }
    .login-brandline { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.01em; }
    .login-brandline .brand-mark { background:var(--panel); box-shadow:0 10px 30px rgba(0,0,0,.22); }
    .login-brandline small { display:block; margin-top:2px; color:rgba(238,255,247,.62); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
    .login-hero-copy { max-width:680px; margin:auto 0; padding:clamp(6px,1.5vh,18px) 0; }
    .login-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:7px 11px; border:1px solid rgba(197,255,225,.2); border-radius:999px; color:#bdffdc; background:rgba(255,255,255,.06); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .login-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#58e59a; box-shadow:0 0 0 5px rgba(88,229,154,.12); }
    .login-hero h2 { max-width:12ch; font-size:clamp(38px,5vw,68px); line-height:.99; letter-spacing:-.055em; font-weight:780; }
    .login-hero-copy > p { max-width:560px; margin-top:20px; color:rgba(235,255,245,.7); font-size:clamp(14px,1.4vw,17px); line-height:1.65; }
    .login-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:clamp(12px,2.5vh,24px); max-width:610px; }
    .login-proof div { min-width:0; padding:13px 14px; border:1px solid rgba(220,255,237,.13); border-radius:13px; background:rgba(255,255,255,.055); backdrop-filter:blur(10px); }
    .login-proof strong { display:block; color:#fff; font-size:13px; }
    .login-proof span { display:block; margin-top:4px; color:rgba(232,255,243,.56); font-size:11.5px; line-height:1.35; }
    .login-pulse { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:610px; padding:14px 16px; border-radius:14px; background:#f5fff9; color:#183c2e; box-shadow:0 18px 45px rgba(0,0,0,.2); }
    .login-pulse-copy { min-width:0; }
    .login-pulse-copy strong,.login-pulse-copy span { display:block; }
    .login-pulse-copy strong { font-size:12px; }
    .login-pulse-copy span { margin-top:3px; color:#5d756b; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .login-pulse-metrics { display:flex; gap:16px; }
    .login-pulse-metrics span { color:#647a71; font-size:11px; text-transform:uppercase; letter-spacing:.06em; text-align:right; }
    .login-pulse-metrics b { display:block; margin-bottom:2px; color:#0d7650; font-size:17px; letter-spacing:-.04em; }
    .login-panel { display:grid; place-items:center; min-width:0; padding:clamp(22px,4vw,64px); overflow-y:auto; background:radial-gradient(circle at 100% 0,rgba(31,151,105,.09),transparent 32%),#f7faf8; }
    .login-form { width:min(100%,430px); padding:28px 30px; border:1px solid #dce7e1; border-radius:22px; background:rgba(255,255,255,.92); box-shadow:0 24px 70px rgba(18,58,43,.12); backdrop-filter:blur(16px); }
    .login-form-head { margin-bottom:22px; }
    .login-form-head h1 { font-size:30px; letter-spacing:-.035em; }
    .login-eyebrow { margin-bottom:8px; color:#177a56; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
    .brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 750; margin-bottom: 56px; }
    .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; overflow: hidden; }
    .sg-logo { display: block; }
    .sg-logo * { stroke: none; }
    h1, h2, h3, p { margin: 0; }
    .login h1 { font-size:30px; line-height:1.12; letter-spacing:-.035em; margin-bottom:8px; }
    .login-copy { color:#687a72; line-height:1.55; margin-bottom:20px; max-width:42ch; font-size:13px; }
    .powered { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
    .powered strong { color: var(--text); font-weight: 800; }
    .sg-mark { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; }
    label { display: grid; gap: 6px; font-size: 12px; font-weight: 650; color: #4d555c; }
    input, select, textarea { width: 100%; border: 1px solid #cfd5da; border-radius: 6px; background: var(--panel); padding: 9px 10px; outline: none; }
    input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,107,77,.12); }
    textarea { resize: vertical; line-height: 1.5; }
    .login-form label { margin-bottom:13px; color:#334b41; font-size:11px; letter-spacing:.015em; }
    .login-form input { min-height:44px; padding:10px 12px; border-color:#cddbd4; border-radius:9px; background:#fbfdfc; }
    .login-form input:hover { border-color:#aebfb7; }
    .password-wrap { position:relative; }
    .password-wrap input { padding-right:64px; }
    .password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); border:0; border-radius:7px; padding:6px 8px; background:transparent; color:#527064; font-size:11.5px; font-weight:800; }
    .password-toggle:hover { background:#edf5f1; color:#176b4d; }
    .btn { min-height: 36px; border: 1px solid transparent; border-radius: 6px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 650; background: var(--panel); color: var(--ink); white-space: nowrap; }
    .btn:hover { background: var(--soft); }
    .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-primary:hover { background: #125c41; }
    .btn-outline { border-color: var(--line); }
    .btn-quiet { color: var(--muted); }
    .btn-danger { color: var(--danger); }
    .login .btn { width:100%; min-height:44px; margin-top:4px; border-radius:9px; }
    .login .btn-primary { background:linear-gradient(135deg,#177452,#0d5d40); box-shadow:0 9px 20px rgba(18,105,74,.2); }
    .login .btn-primary:hover { background:linear-gradient(135deg,#126747,#094b34); transform:translateY(-1px); }
    .login .btn-primary:disabled { opacity:.62; cursor:wait; transform:none; }
    .auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:22px; border:1px solid #e0e9e4; border-radius:11px; background:#f0f5f2; }
    .auth-tab { height:36px; border:0; border-radius:8px; background:transparent; color:#718079; font-weight:750; font-size:12px; }
    .auth-tab.active { background:var(--panel); color:#143c2d; box-shadow:0 2px 8px rgba(20,48,37,.08); }
    .auth-help { margin-top:11px; color:#718079; font-size:11.5px; line-height:1.5; }
    .login-error { color:#9f241a; background:#fff3f1; border:1px solid #f2c1bc; border-radius:9px; padding:10px 11px; margin-bottom:12px; font-size:11px; }
    .login-error.success { color:#126343; background:#edf9f3; border-color:#bfe5d1; }
    .login-trust { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; padding-top:15px; border-top:1px solid #e5ece8; color:#77877f; font-size:11px; }
    .login-trust span { display:flex; align-items:center; gap:5px; }
    .login-trust span::before { content:""; width:6px; height:6px; border-radius:50%; background:#37b778; }
    @media (max-width:980px) {
      .login { grid-template-columns:minmax(0,.82fr) minmax(410px,1fr); }
      .login-hero { padding:34px; }
      .login-hero h2 { font-size:42px; }
      .login-proof { grid-template-columns:1fr; }
      .login-proof div:nth-child(n+3) { display:none; }
      .login-pulse-metrics span:nth-child(n+2) { display:none; }
    }
    @media (max-width:720px) {
      .login { display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; height:100svh; min-height:100svh; overflow:hidden; background:linear-gradient(160deg,#0a2d24 0,#0f513c 31%,#f4f8f6 31%); }
      .login-hero { min-height:0; padding:18px 20px 32px; background:transparent; overflow:hidden; }
      .login-hero-copy { margin:10px 0 0; padding:0; }
      .login-hero h2 { max-width:none; font-size:clamp(25px,7vw,34px); }
      .login-hero-copy > p { margin-top:8px; font-size:12px; line-height:1.45; }
      .login-proof,.login-pulse { display:none; }
      .login-panel { display:grid; place-items:start center; min-height:0; margin-top:-18px; padding:0 14px 12px; overflow:hidden; background:transparent; }
      .login-form { width:100%; margin:0 auto; padding:18px 20px; border-radius:18px; }
    }
    @media (max-height:760px) and (min-width:721px) {
      .login-hero h2{font-size:clamp(34px,4.2vw,52px)}.login-hero-copy>p{margin-top:12px;line-height:1.45}.login-proof{margin-top:14px}.login-proof div{padding:9px 10px}.login-pulse{padding:10px 12px}.login-form{padding:20px 24px}.login-form-head,.auth-tabs{margin-bottom:14px}.login-form label{margin-bottom:9px}
    }
    @media (max-height:650px) and (min-width:721px) {
      .login-proof,.login-pulse{display:none}.login-hero-copy>p{margin-top:8px;font-size:13px}.login-hero-copy{margin:auto 0}.login-form{padding:16px 24px}
    }
    

    .shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
    .sidebar { background: #fbfcfc; border-right: 1px solid #d9e1dd; padding: 16px 12px; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; transition:width .18s ease,padding .18s ease; }
    .sidebar::-webkit-scrollbar { width: 0; }
    .sidebar { scrollbar-width: none; }
    .sidebar .brand { margin: 0 4px 24px; min-height:34px; }
    .sidebar .brand [data-workspace-name] { flex:1;line-height:1.15;font-size:15px;min-width:0; }
    .brand-gig { color:#1486a8; }
    .sidebar-collapse { margin-left:auto; }
    .nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; flex: 0 0 auto; align-content: start; }
    .nav button { min-width: 0; }
    .nav button { min-height: 38px; border: 0; border-radius: 6px; background: transparent; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #596168; text-align: left; }
    .nav button:hover { background: var(--soft); color: var(--ink); }
    .nav button.active { background: var(--accent-soft); color: #125c41; font-weight: 700; }
    .nav-text { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:1; }
    .nav-count { color: var(--subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
    .nav-star { opacity: 0; color: var(--subtle); flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; }
    .nav-star svg { width: 14px; height: 14px; }
    .nav button:hover .nav-star { opacity: .55; }
    .nav-star:hover { opacity: 1 !important; background: rgba(0,0,0,.05); }
    .nav-star.on { opacity: 1; color: var(--accent); }
    .nav-star.on svg { fill: var(--accent); }
    .nav-label { position: relative; }
    .nav-gear { position: absolute; right: 2px; top: 8px; border: 0; background: none; color: var(--subtle); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; }
    .nav-gear:hover { background: rgba(0,0,0,.05); color: var(--ink); }
    .nav-gear svg { width: 14px; height: 14px; }
    .sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 8px 0; }
    .profile { display: flex; align-items: center; gap: 9px; }
    .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid !important; place-items: center; background: #e8ecea; color: #ffffff !important; font-size: 12px; font-weight: 800; }
    .profile-copy { min-width: 0; flex: 1; }
    .profile-copy strong, .profile-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .profile-copy span { color: var(--muted); font-size: 11px; margin-top: 2px; }
    .logout { border: 0; background: transparent; color: var(--muted); padding: 5px; border-radius: 4px; flex: 0 0 auto; }
    .logout:hover { background: var(--soft); color: var(--ink); }

    .main { min-width: 0; }
    .shell.sidebar-collapsed { --sidebar-w:72px; }
    .shell.sidebar-collapsed .sidebar { padding-inline:10px; }
    .shell.sidebar-collapsed .sidebar .brand [data-workspace-name],.shell.sidebar-collapsed .nav-text,.shell.sidebar-collapsed .nav-count,.shell.sidebar-collapsed .nav-label,.shell.sidebar-collapsed .profile-copy,.shell.sidebar-collapsed .avatar,.shell.sidebar-collapsed .nav-star,.shell.sidebar-collapsed .powered { display:none; }
    .shell.sidebar-collapsed .sidebar .brand { margin-inline:4px;justify-content:center; }
    .shell.sidebar-collapsed .sidebar-collapse { position:absolute;top:54px;margin:0; }
    .shell.sidebar-collapsed .nav { margin-top:24px; }
    .shell.sidebar-collapsed .nav button { justify-content:center;padding:0; }
    .shell.sidebar-collapsed .profile { justify-content:center; }
    .sidebar-collapse svg { transition: transform .18s ease; }
    .shell.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
    .avatar, .profile-copy { cursor: pointer; }
    .sidebar-backdrop { display: none; }
    .icon-btn:focus-visible, .logout:focus-visible, .nav button:focus-visible, .btn:focus-visible, .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .topbar { height: 64px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
    .mobile-menu { display: none; }
    .search { position: relative; width: min(460px, 45vw); }
    .search .icon { position: absolute; left: 10px; top: 9px; color: var(--subtle); pointer-events: none; }
    .search input { padding-left: 36px; background: var(--soft); border-color: transparent; }
    .search input:focus { background: var(--panel); border-color: var(--accent); }
    .global-results { position:absolute;left:0;right:0;top:44px;background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 14px 40px rgba(20,30,25,.16);max-height:430px;overflow:auto;z-index:30; }
    .search-result { width:100%;border:0;border-bottom:1px solid #edf0f1;background:var(--panel);padding:11px 12px;display:grid;grid-template-columns:28px 1fr auto;gap:9px;text-align:left;align-items:center; }
    .search-result:hover,.search-result.active { background:#f3f7f5; }.search-result:last-child { border-bottom:0; }
    .search-result strong,.search-result span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.search-result small { color:var(--muted); }
    .quick-create-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
    .quick-create { border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:14px;text-align:left;display:flex;gap:10px;align-items:center; }
    .quick-create:hover { background:#f5f8f6;border-color:#afbeb6; }.quick-create strong { display:block; }.quick-create small { display:block;color:var(--muted);margin-top:3px; }
    .top-spacer { flex: 1; }
    .account-menu-wrap { position: relative; flex: 0 0 auto; }
    .account-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; border-radius: 8px; padding: 4px 8px; transition: background 0.15s; }
    .account-btn:hover { background: var(--soft); }
    .account-name-tag { font-size: 13px; font-weight: 650; color: var(--ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media (max-width: 700px) { .account-name-tag { display: none; } }
    .account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 32px rgba(20,30,25,.14); min-width: 220px; z-index: 300; padding: 8px 0; }
    .account-dropdown-user { padding: 12px 16px; }
    .account-dropdown-divider { height: 1px; background: var(--line); margin: 4px 0; }
    .account-dropdown-item { width: 100%; text-align: left; border: 0; background: none; padding: 10px 16px; font-size: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 500; }
    .account-dropdown-item:hover { background: var(--soft); }
    .account-signout { color: var(--danger) !important; }
    .topbrand { display: flex; align-items: center; gap: 9px; cursor: pointer; flex: 0 0 auto; background: none; border: 0; color: var(--ink); padding: 0 4px 0 0; }
    .topbrand:hover .topbrand-name { color: var(--accent); }
    .topbrand-name { font-weight: 750; font-size: 15px; white-space: nowrap; }
    @media (max-width: 700px) { .topbrand-name { display: none; } }
    .metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
    .metric-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--panel); }
    .metric-card .mname { color: var(--muted); font-size: 12px; }
    .metric-card .mval { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .metric-card .mtarget { color: var(--subtle); font-size: 11px; margin-top: 2px; }
    .metric-delta { font-size: 12px; font-weight: 700; white-space: nowrap; }
    .metric-delta.up { color: #15803d; } .metric-delta.down { color: #c13e3e; } .metric-delta.flat { color: var(--muted); }
    .spark { display: block; margin-top: 10px; }
    .decision-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px 14px; margin-bottom: 8px; }
    .decision-row:hover { background: #fafcfb; }
    .decision-row.overdue { border-color: #f3b7b2; }
    .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; }
    .badge.open { background: #fdf1e3; color: #b45309; } .badge.decided { background: #e7f4ec; color: #15803d; }
    .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
    .metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
    .ns-metric { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 11px 13px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
    .ns-metric:hover { border-color: #afbeb6; }
    .ns-metric .ns-name { color: var(--muted); font-size: 11px; }
    .ns-metric .ns-val { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .perm-nocreate [data-new-record], .perm-nocreate #newTaskTop, .perm-nocreate #dashboardAdd, .perm-nocreate #newTodayTask, .perm-nocreate #addShift, .perm-nocreate #newDecision, .perm-nocreate #addMilestone, .perm-nocreate #addMember, .perm-nocreate #addQuicklist, .perm-nocreate #createInvite, .perm-nocreate #addColumn, .perm-nocreate #addMetric, .perm-nocreate #addSubtask, .perm-nocreate #newProjectForm, .perm-nocreate .quick-add, .perm-nocreate [data-quick-kind] { display: none !important; }
    .perm-nodelete .btn-danger, .perm-nodelete [data-remove-check], .perm-nodelete [data-st-remove], .perm-nodelete [data-st-promote], .perm-nodelete [data-delete-metric], .perm-nodelete [data-del-ms], .perm-nodelete [data-delete-column], .perm-nodelete [data-delete-routine], .perm-nodelete [data-fav-remove], .perm-nodelete [data-revoke-invite] { display: none !important; }
    .cmdk-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20,30,25,.28); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
    .cmdk { width: min(560px, 92vw); background: var(--panel); border-radius: 10px; box-shadow: 0 20px 60px rgba(20,30,25,.3); overflow: hidden; }
    .cmdk-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 16px; font-size: 15px; outline: none; }
    .cmdk-list { max-height: 52vh; overflow: auto; padding: 6px; }
    .cmdk-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 6px; text-align: left; color: var(--ink); font: inherit; }
    .cmdk-item:hover, .cmdk-item.active { background: var(--soft); }
    .cmdk-item .icon { color: var(--muted); flex: 0 0 auto; }
    .cmdk-empty { padding: 16px; color: var(--muted); font-size: 13px; }
    .review-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
    .review-line:first-child { border-top: 0; }
    .review-line .rl-main { min-width: 0; flex: 1; }
    .review-line .rl-main strong { font-size: 13px; display: block; }
    .review-line .rl-main small { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
    button.review-line { cursor: pointer; font: inherit; color: inherit; }
    button.review-line:hover .rl-main strong { color: var(--accent); }
    .sync-status { color:var(--muted);font-size:11px;white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--soft);font-weight:600; }
    .sync-status[data-tone="ok"] { color:#15803d;background:#e7f4ec; }
    .sync-status[data-tone="warn"] { color:#b45309;background:#fdf1e3; }
    .sync-status[data-tone="busy"] { color:#3730a3;background:#eceafd; }
    .content { padding: 24px 24px 104px; }
    .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
    .page-head h1 { font-size: 24px; line-height: 1.2; letter-spacing: 0; }
    .page-head p { color: var(--muted); margin-top: 5px; }
    .head-actions { display: flex; gap: 8px; }

    .summary { display: flex; gap: 24px; padding: 0 0 20px; }
    .summary-item { min-width: 100px; }
    .summary-item strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
    .summary-item span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
    .summary-item.alert strong { color: var(--danger); }
    button.summary-item { border:0;background:transparent;text-align:left;padding:0; }
    button.summary-item:hover strong { color:var(--accent); }

    .workspace { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
    .view-tabs { display: flex; align-items: center; gap: 2px; padding: 0 12px; height: 46px; border-bottom: 1px solid var(--line); overflow-x: auto; }
    .view-tab { border: 0; background: transparent; height: 46px; padding: 0 11px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
    .view-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
    .toolbar { min-height: 52px; padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-wrap:wrap; align-items: center; gap: 9px; }
    .quick-add { display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(150px,1fr) minmax(150px,1fr) minmax(220px,1.1fr); align-items:center; gap:8px; flex:1 0 100%; min-width:0; padding:10px;background:#f6faf8;border:1px solid #dce8e2;border-radius:10px; }
    .quick-add textarea { min-height:58px;max-height:140px;resize:vertical;background:var(--panel); }
    .quick-add select { height:38px; }
    .quick-add .icon { color: var(--accent); }
    .quick-add textarea{grid-column:span 2}.quick-task-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:220px}.quick-task-actions .btn{min-width:0;padding:0 10px}
    .filters { display: flex; gap: 6px; align-items: center; width:100%;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin; }
    .filter-select { width: auto; min-width: 108px; height: 34px; padding: 0 28px 0 9px; border-color: var(--line); color: #545c63; background-color: var(--panel); }
    .clear-filters { border: 0; background: transparent; color: var(--accent); padding: 8px; }
    .result-count { color: var(--muted); font-size: 12px; white-space: nowrap; margin-left: 4px; }

    .bulkbar { min-height: 48px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; background: #f0f7f3; border-bottom: 1px solid #cfe2d7; }
    .bulkbar strong { margin-right: 8px; color: #125c41; }
    .bulkbar select { width: auto; height: 34px; padding: 0 28px 0 9px; }
    .bulkbar .spacer { flex: 1; }

    .table-head { height: 38px; display: grid; grid-template-columns: 42px minmax(280px, 2.2fr) 118px 108px 118px 108px minmax(110px, 1fr) 38px; align-items: center; border-bottom: 1px solid var(--line); background: #fafbfb; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .table-head > div, .task-row > div { padding: 0 10px; min-width: 0; }
    .check-cell { display: grid; place-items: center; }
    input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
    .task-scroll { height: max(440px, calc(100vh - 330px)); min-height: 440px; overflow: scroll; position: relative; background: var(--panel); scrollbar-gutter:stable; }
    .task-spacer { position: relative; width: 100%; }
    .task-row { height: var(--row-h); display: grid; grid-template-columns: 42px minmax(280px, 2.2fr) 118px 108px 118px 108px minmax(110px, 1fr) 38px; align-items: center; border-bottom: 1px solid #edf0f1; position: absolute; left: 0; right: 0; background: var(--panel); }
    .task-row:hover { background: #fafcfb; }
    .task-row.selected { background: #edf7f1; }
    .task-row.done-row .task-title { color: var(--subtle); text-decoration: line-through; }
    .task-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .task-title:hover { color: var(--accent); }
    .cell-muted { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .task-row select { border: 0; background: transparent; padding: 5px 22px 5px 5px; box-shadow: none; font-size: 12px; }
    .task-row select:hover { background-color: #f1f3f4; }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; background: #a5adb4; }
    .row-menu { border: 0; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; }
    .row-menu:hover { background: #edf0f1; color: var(--ink); }
    .empty { min-height: 360px; display: grid; place-items: center; text-align: center; color: var(--muted); }
    .empty strong { color: var(--ink); display: block; margin-bottom: 5px; }

    .drawer-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(25,30,28,.18); }
    .drawer { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--panel); box-shadow: -12px 0 40px rgba(28,39,34,.14); display: flex; flex-direction: column; animation: slide .18s ease-out; }
    @keyframes slide { from { transform: translateX(20px); opacity: .7; } }
    .drawer-head { min-height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
    .drawer-head strong { font-size: 15px; }
    .icon-btn { border: 0; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 5px; display: grid; place-items: center; }
    .icon-btn:hover { background: var(--soft); color: var(--ink); }
    .top-action { position: relative; flex: 0 0 auto; }
    .attention-badge { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; background: #c13e3e; color: #fff; font-size: 11px; font-weight: 800; line-height: 13px; text-align: center; }
    .attention-list { display: grid; gap: 8px; margin-top: 16px; }
    .attention-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 12px; text-align: left; }
    .attention-item:hover { border-color: #9dada5; background: var(--soft); }
    .attention-item > .icon { width: 32px; height: 32px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
    .attention-item strong, .attention-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .attention-item small { color: var(--muted); margin-top: 3px; }
    .drawer-body { overflow: auto; padding: 24px; }
    .title-input { border: 0; border-radius: 0; padding: 0 0 14px; font-size: 22px; font-weight: 700; box-shadow: none; }
    .title-input:focus { box-shadow: none; border-bottom: 1px solid var(--accent); }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 24px; }
    .section-title { font-size: 12px; text-transform: uppercase; color: var(--muted); margin: 24px 0 10px; }
    .checklist { display: grid; gap: 4px; }
    .check-item { min-height: 38px; display: grid; grid-template-columns: 24px 1fr 30px; align-items: center; gap: 4px; border-bottom: 1px solid #f0f2f3; }
    .check-item input[type="text"] { border: 0; box-shadow: none; padding: 7px 2px; }
    .check-item.done input[type="text"] { color: var(--subtle); text-decoration: line-through; }
    .subtasks { display: grid; gap: 3px; }
    .subtask-row { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #f0f2f3; }
    .subtask-row input[type="text"] { flex: 1; min-width: 0; border: 0; box-shadow: none; padding: 7px 2px; background: none; }
    .subtask-row.done input[type="text"] { color: var(--subtle); text-decoration: line-through; }
    .subtask-row .icon-btn { width: 26px; height: 26px; flex: 0 0 auto; }
    .drawer-foot { border-top: 1px solid var(--line); padding: 12px 20px; display: flex; justify-content: space-between; }

    .section-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 16px; }
    .section-bar h2 { font-size: 15px; }
    .section-bar p { color: var(--muted); font-size: 12px; margin-top: 2px; }
    .dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; background: var(--panel); margin-bottom: 16px; }
    .metric { min-height: 116px; padding: 18px; border-right: 1px solid var(--line); }
    button.metric { border-top-width:3px;border-left:0;border-bottom:0;background:var(--panel);text-align:left;cursor:pointer; }
    button.metric:hover { filter:brightness(.98);box-shadow:inset 0 0 0 2px rgba(23,107,77,.12); }
    .data-actions { display:flex;gap:2px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px; }
    .data-actions input[type=file] { display:none; }
    .data-actions .btn-outline { border:0;background:transparent;padding:7px 11px;font-weight:600;color:var(--ink);border-radius:7px;gap:6px; }
    .data-actions .btn-outline:hover { background:var(--accent-soft);color:var(--accent); }
    .data-actions .btn-outline svg { color:var(--accent); }
    .data-actions .btn-primary { margin-left:4px; }
    @media (max-width:560px){ .data-actions { width:100%;flex-wrap:nowrap;overflow-x:auto; } .data-actions .btn { flex:0 0 auto; } }
    .column-chip { display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);font-size:11px; }
    .metric:last-child { border-right: 0; }
    .metric:nth-child(1) { background:#eff8f4; border-top:3px solid #1f8b62; }
    .metric:nth-child(2) { background:#fff3f1; border-top:3px solid #d45b50; }
    .metric:nth-child(3) { background:#eef5fb; border-top:3px solid #3b7fa4; }
    .metric:nth-child(4) { background:#fff8e8; border-top:3px solid #c38a24; }
    .metric-label { color: var(--muted); font-size: 12px; }
    .metric strong { display: block; font-size: 28px; line-height: 1.1; margin: 10px 0 5px; font-variant-numeric: tabular-nums; }
    .metric small { color: var(--muted); }
    .metric .good { color: var(--accent); }
    .metric .bad { color: var(--danger); }
    .dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
    .quick-links { display: grid; }
    .quick-link { min-height: 58px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 0 14px; text-align: left; }
    .quick-link:last-child { border-bottom: 0; }
    .quick-link:hover { background: #fafcfb; }
    .quick-link .icon { color: var(--accent); }
    .quick-link span span { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; }
    .arrow { color: var(--subtle); font-size: 18px; }
    .kanban { display: grid; grid-template-columns: repeat(4, minmax(175px, 1fr)); gap: 10px; padding: 12px; overflow-x: auto; }
    .kanban-column { background: #f6f7f8; border: 1px solid #e7eaec; border-radius: 6px; min-height: 330px; }
    .kanban-head { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 12px; font-weight: 700; }
    .kanban-head span { color: var(--muted); font-weight: 500; }
    .kanban-list { display: grid; gap: 7px; padding: 0 7px 8px; }
    .kanban-card { border: 1px solid #dfe3e5; border-radius: 5px; background: var(--panel); padding: 10px; text-align: left; box-shadow: 0 1px 2px rgba(20,30,25,.04); }
    .kanban-card:hover { border-color: #b8c5be; }
    .kanban-card.dragging { opacity: .45; }
    .kanban-column.drag-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
    .kanban-card strong { display: block; font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
    .card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
    .priority-mark { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; background: #a7afb4; }
    .priority-mark.high { background: #d4483b; }
    .priority-mark.medium { background: #d69a21; }

    .funnel-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 7px; background: var(--panel); margin-bottom: 16px; }
    .funnel-board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
    .funnel-column { background: #f2f4f5; border-radius: 6px; min-height: 520px; border-top: 3px solid #aab3b8; }
    .funnel-column[data-stage="Discovery"] { border-top-color: #4a7f9b; }
    .funnel-column[data-stage="Proposal"] { border-top-color: #b6852d; }
    .funnel-column[data-stage="Won"] { border-top-color: var(--accent); }
    .funnel-column[data-stage="Lost"] { border-top-color: #b95b54; }
    .funnel-column.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }
    .funnel-head { padding: 11px 10px 8px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
    .funnel-head span { color: var(--muted); font-weight: 500; }
    .deal-card { margin: 0 7px 7px; border: 1px solid #dce1e3; border-radius: 5px; background: var(--panel); padding: 11px; cursor: grab; }
    .deal-card:hover { border-color: #aebbb4; }
    .deal-card strong, .deal-card > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .deal-card > span { color: var(--muted); margin-top: 3px; font-size: 12px; }
    .deal-value { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; font-weight: 700; }
    .deal-value span { color: var(--muted); font-weight: 500; }

    .calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
    .calendar-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); }
    .calendar-toolbar h2 { font-size: 16px; }
    .calendar-actions { display: flex; align-items: center; gap: 6px; }
    .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: #fafbfb; border-bottom: 1px solid var(--line); }
    .calendar-weekdays span { padding: 8px 10px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); background: var(--panel); }
    .calendar-day { min-height: 126px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px; min-width: 0; }
    .calendar-day:nth-child(7n) { border-right: 0; }
    .calendar-day.outside { background: #fafbfb; color: #a1a7ac; }
    .calendar-day.today { background: #f1f7f4; }
    .day-label { height: 24px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; }
    .day-number { border:0; background:transparent; color:inherit; font-weight:700; padding:3px 6px; border-radius:50%; }
    .day-number:hover { background:#e8ecea; color:var(--ink); }
    .today .day-number { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
    .day-add { border: 0; background: transparent; color: var(--subtle); opacity: 0; padding: 2px 5px; }
    .calendar-day:hover .day-add { opacity: 1; }
    .calendar-task { display: block; width: 100%; border: 0; border-left: 3px solid var(--accent); border-radius: 3px; background: #f1f5f3; padding: 5px 6px; margin-top: 4px; text-align: left; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .calendar-task.followup { border-left-color: #b6852d; background: #fbf6e9; }
    .calendar-task small { color: var(--muted); margin-right: 4px; }
    .calendar-more { color: var(--muted); font-size: 11.5px; padding: 4px 3px; }
    .agenda-list { display: grid; }
    .agenda-item { border-bottom: 1px solid var(--line); padding: 11px 14px; }
    .agenda-item:last-child { border-bottom: 0; }
    .agenda-item strong { display: block; font-size: 12px; margin-bottom: 4px; }
    .agenda-item span { color: var(--muted); font-size: 11px; }
    .owner-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    .owner-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-right: 4px; }
    .day-meta { display:flex; align-items:center; gap:4px; }
    .day-count { font-size:11.5px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:8px; padding:0 5px; min-width:16px; text-align:center; }
    .calendar-day { cursor:default; }
    .calendar-day.drag-over { outline:2px dashed var(--accent); outline-offset:-3px; background:var(--accent-soft); }
    .calendar-task { cursor:pointer; }
    .calendar-task[draggable=true] { cursor:grab; }
    .calendar-task.done { opacity:.55; text-decoration:line-through; }
    .calendar-task.overdue { border-left-color:var(--danger)!important; }
    .cal-time { color:var(--accent); font-weight:800; }
    .cal-prod { display:inline-block; font-size:11px; font-weight:700; color:#1486a8; background:rgba(51,180,227,.14); border-radius:4px; padding:0 4px; margin-right:4px; vertical-align:middle; }
    .cal-quick { width:100%; margin-top:4px; font-size:11px; padding:5px 6px; border:1px solid var(--accent); border-radius:5px; }
    .time-content { cursor:text; min-height:30px; border-radius:6px; }
    .time-content:hover { background:#f6faf8; }
    .time-slot.drag-over .time-content { outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft); }
    .planned-task { cursor:grab; }
    .planned-task.done { opacity:.55; text-decoration:line-through; }
    .untimed-row { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--line); background:#fafbfb; }
    .untimed-label { font-size:11px; color:var(--muted); font-weight:700; flex:0 0 66px; padding-top:4px; }
    .untimed-tasks { display:flex; flex-direction:column; gap:5px; flex:1; }
    .unscheduled-tray { display:flex; flex-direction:column; gap:6px; padding:12px 14px; max-height:240px; overflow:auto; }
    .tray-task { border-left:3px solid var(--accent); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:grab; }
    .tray-task strong { display:block; font-size:12px; }
    .tray-task small { color:var(--danger); font-size:11.5px; }
    .tray-task.dragging, .calendar-task.dragging, .planned-task.dragging { opacity:.4; }

    .roadmap-board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; }
    .roadmap-column { min-height: 480px; border: 1px solid var(--line); border-radius: 7px; background: #f6f7f8; }
    .roadmap-head { height: 50px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 13px; }
    .roadmap-head strong { font-size: 13px; }
    .roadmap-head span { color: var(--muted); font-size: 12px; }
    .roadmap-card { margin: 8px; padding: 12px; background: var(--panel); border: 1px solid #dce1e3; border-radius: 5px; text-align: left; width: calc(100% - 16px); }
    .roadmap-card:hover { border-color: #aebbb4; }
    .roadmap-card strong { display: block; line-height: 1.4; }
    .roadmap-card p { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 7px 0 12px; }
    .source-link { color: var(--accent); text-decoration: none; font-weight: 650; }
    .source-link:hover { text-decoration: underline; }
    .advanced-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--line); background:#fafbfb; }
    .advanced-bar input, .advanced-bar select { width:auto; min-width:120px; height:34px; padding-top:0; padding-bottom:0; }
    .layout-switch { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel); }
    .layout-switch button { height:32px; border:0; border-right:1px solid var(--line); background:var(--panel); padding:0 10px; color:var(--muted); }
    .layout-switch button:last-child { border-right:0; }
    .layout-switch button.active { background:var(--accent-soft); color:var(--accent); font-weight:700; }
    .task-board { display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:10px; padding:12px; overflow-x:auto; min-height:500px; }
    .quicklist-grid { display:grid; grid-template-columns:repeat(3,minmax(240px,1fr)); gap:12px; }
    .quicklist-card { border:1px solid var(--line); border-radius:7px; background:var(--panel); padding:16px; }
    .quicklist-card:nth-child(3n+1) { border-top:3px solid #3b7fa4; }
    .quicklist-card:nth-child(3n+2) { border-top:3px solid #c38a24; }
    .quicklist-card:nth-child(3n) { border-top:3px solid #8b62a3; }
    .quicklist-card h3 { font-size:15px; }
    .quicklist-card p { color:var(--muted); line-height:1.5; margin:6px 0 14px; }
    .quicklist-items { display:grid; gap:7px; margin-bottom:16px; }
    .quicklist-items span { font-size:12px; color:#50585e; display:flex; gap:7px; }
    .quicklist-items span::before { content:""; width:6px; height:6px; border-radius:50%; background:#bdc5ca; margin-top:5px; flex:0 0 6px; }
    .quicklist-actions { display:flex; gap:7px; }
    .admin-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; }
    .admin-nav { display:grid; padding:8px; }
    .admin-nav button { min-height:40px; border:0; border-radius:5px; background:transparent; text-align:left; padding:0 10px; color:var(--muted); }
    .admin-nav button.active { background:var(--accent-soft); color:var(--accent); font-weight:700; }
    .admin-panel { background:var(--panel); border:1px solid var(--line); border-radius:7px; padding:20px; }
    .admin-panel h2 { font-size:18px; margin-bottom:4px; }
    .admin-panel > p { color:var(--muted); margin-bottom:20px; }
    .nav { overflow-y:auto; padding-right:2px; scrollbar-width:thin; min-height:0; align-content:start; }
    .nav-label { color:var(--subtle);font-size:11.5px;font-weight:800;text-transform:uppercase;padding:14px 10px 5px;letter-spacing:.06em; }
    .nav-label:first-child { padding-top:0; }
    .founder-brief { display:grid;grid-template-columns:1.5fr repeat(4,minmax(120px,1fr));background:#171c1a;color:#fff;border-radius:7px;overflow:hidden;margin:12px 0 16px; }
    .brief-focus { padding:18px 20px;background:#20372f; }
    .brief-focus span,.brief-stat span { display:block;color:#b8c6c0;font-size:11px;margin-bottom:7px; }
    .brief-focus strong { display:block;font-size:17px;line-height:1.35; }
    .brief-focus small { display:block;color:#d6e2dd;margin-top:7px; }
    .brief-stat { padding:18px;border-left:1px solid #35413c; }
    .brief-stat strong { display:block;font-size:20px; }
    .brief-stat small { display:block;color:#aebbb6;margin-top:6px;font-size:11px; }
    .entity-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
    .entity-card { border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:15px;text-align:left;min-width:0;transition:border-color .15s, box-shadow .15s; }
    .entity-card:hover { border-color:#aeb9b3;box-shadow:var(--shadow-md); }
    .entity-card h3 { font-size:14px;line-height:1.4;margin-bottom:7px; }
    .entity-card p { color:var(--muted);font-size:12px;line-height:1.5; }
    .progress-track { height:7px;background:#e9edef;border-radius:4px;overflow:hidden;margin:12px 0 8px; }
    .progress-fill { height:100%;background:var(--accent); }
    .health { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; }
    .health::before { content:"";width:7px;height:7px;border-radius:50%;background:#8a929a; }
    .health.on-track::before { background:#178254; }.health.at-risk::before { background:#d89819; }.health.off-track::before { background:#d54940; }
    .record-table { width:100%;border-collapse:collapse; }
    .record-table th { padding:10px 12px;text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;background:#fafbfb;border-bottom:1px solid var(--line); }
    .record-table td { padding:12px;border-bottom:1px solid #edf0f1;vertical-align:top; }
    .record-table tr[data-record] { cursor:pointer; }.record-table tr[data-record]:hover { background:#fafcfb; }
    .record-title { font-weight:700;display:block; }.record-sub { color:var(--muted);font-size:11px;margin-top:3px;display:block; }
    .founder-columns { display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:10px;overflow-x:auto;padding-bottom:5px; }
    .founder-column { background:#f2f4f5;border:1px solid var(--line);border-radius:7px;padding:8px;min-height:210px; }
    .founder-column-head { display:flex;justify-content:space-between;padding:4px 3px 10px;font-size:12px;font-weight:750; }
    .founder-column .entity-card { width:100%;display:block;margin-bottom:7px;padding:12px; }
    .resource-link { color:#126447;font-weight:700;text-decoration:none; }.resource-link:hover { text-decoration:underline; }
    .favorite { color:#b17600; }
    .finance-layout { display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr);gap:16px; }
    .finance-form { padding:18px; }.finance-form h2 { font-size:16px;margin-bottom:14px; }
    .empty-state { text-align:center;padding:44px 20px;color:var(--muted); }.empty-state strong { display:block;color:var(--ink);margin-bottom:5px; }
    .company-hero { background:#18372d;color:#fff;border-radius:7px;padding:24px;display:grid;grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(120px,.7fr));gap:20px;align-items:end; }
    .company-hero h2 { font-size:24px;margin-bottom:8px; }.company-hero p { color:#d6e4de;line-height:1.55;max-width:65ch; }
    .company-stat { border-left:1px solid #416157;padding-left:18px; }.company-stat span { display:block;color:#b9cbc4;font-size:11px;margin-bottom:6px; }.company-stat strong { font-size:17px;line-height:1.3;display:block; }
    .truth-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px; }.truth-block { border-top:3px solid var(--accent);background:var(--panel);padding:16px;border-radius:0 0 7px 7px; }.truth-block span { color:var(--muted);font-size:11px;display:block;margin-bottom:7px; }.truth-block strong { line-height:1.45; }
    .activity-list { display:grid; }.activity-item { display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #edf0f1; }.activity-item:last-child { border-bottom:0; }.activity-item small { color:var(--muted); }
    .settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:760px; }
    .settings-grid .wide { grid-column:1/-1; }
    .member-table { width:100%; border-collapse:collapse; }
    .member-table th,.member-table td { padding:10px; border-bottom:1px solid var(--line); text-align:left; }
    .member-table th { color:var(--muted); font-size:11px; text-transform:uppercase; }
    .member-table select { min-width:110px; }
    .day-planner-date { font-size:28px; font-weight:750; margin-bottom:4px; }
    .day-summary { color:var(--muted); margin-bottom:20px; }
    .time-plan { display:grid; gap:0; border-top:1px solid var(--line); max-height:600px; overflow-y:auto; }
    .time-slot { min-height:58px; display:grid; grid-template-columns:64px 1fr; border-bottom:1px solid var(--line); }
    .time-label { color:var(--muted); font-size:11px; padding:10px 8px; border-right:1px solid var(--line); }
    .time-content { padding:6px; }
    .planned-task { border-left:3px solid var(--accent); background:#f2f7f4; border-radius:3px; padding:7px 9px; font-size:12px; margin-bottom:4px; cursor:pointer; }
    .day-backlog { display:grid; gap:6px; margin-bottom:18px; }
    .day-backlog button { border:1px solid var(--line); background:var(--panel); border-radius:5px; padding:9px; text-align:left; }
    .bug-summary { display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));border:1px solid var(--line);border-radius:7px;background:var(--panel);overflow:hidden;margin-bottom:12px; }
    .bug-stat { padding:14px 16px;border-right:1px solid var(--line); }
    .bug-stat:last-child { border-right:0; }
    .bug-stat span { display:block;color:var(--muted);font-size:11px;margin-bottom:5px; }
    .bug-stat strong { display:block;font-size:22px; }
    .severity { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:750; }
    .severity::before { content:"";width:8px;height:8px;border-radius:50%;background:#8b9298; }
    .severity.critical::before { background:#b42318;box-shadow:0 0 0 3px #fee4e2; }
    .severity.high::before { background:#db6b2b; }
    .severity.medium::before { background:#d1a126; }
    .severity.low::before { background:#448a69; }
    .team-grid { display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:12px; }
    .team-card { border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:16px; }
    .team-card-head { display:flex;align-items:center;gap:10px;margin-bottom:15px; }
    .team-card-head .avatar { width:38px;height:38px; }
    .team-card-head strong,.team-card-head span { display:block; }
    .team-card-head span { color:var(--muted);font-size:11px;margin-top:2px; }
    .team-load { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
    .team-load span { background:#f5f7f6;border-radius:5px;padding:9px;color:var(--muted);font-size:11.5px; }
    .team-load strong { display:block;color:var(--ink);font-size:16px;margin-bottom:2px; }
    .today-ribbon { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;padding:20px 22px;background:#173d32;color:#fff;border-radius:7px;margin-bottom:14px; }
    .today-ribbon h1 { font-size:25px;margin-bottom:5px; }
    .today-ribbon p { color:#c8ddd5;font-size:13px; }
    .today-ribbon .pill { color:#173d32;background:#dff1e9;border:0; }
    .today-grid { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:14px;align-items:start; }
    .today-stack { display:grid;gap:14px; }
    .today-section { padding:18px; }
    .today-section-head { display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px; }
    .today-section-head h2 { font-size:15px;margin-bottom:3px; }
    .today-section-head p { color:var(--muted);font-size:11px; }
    .outcome-list,.daily-list,.signal-list { display:grid;gap:7px; }
    .outcome-row,.daily-row { display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:49px;border-top:1px solid var(--line);padding:8px 0; }
    .outcome-row:first-child,.daily-row:first-child { border-top:0; }
    .outcome-number { width:24px;height:24px;border-radius:5px;display:grid;place-items:center;background:#e7f2ed;color:var(--accent);font-size:11px;font-weight:800; }
    .daily-copy { min-width:0; }
    .daily-copy strong,.daily-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .daily-copy strong { font-size:12px; }
    .daily-copy small { color:var(--muted);font-size:11.5px;margin-top:3px; }
    .workstream { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750; }
    .workstream::before { content:"";width:7px;height:7px;border-radius:2px;background:#34789a; }
    .workstream.worker::before { background:#c17832; }
    .workstream.product::before { background:#8c5e9e; }
    .workstream.partner::before { background:#176b4d; }
    .signal-row { display:flex;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--line);padding:10px 0;font-size:12px;background:transparent;text-align:left;width:100%; }
    button.signal-row:hover { color:var(--accent); }
    .signal-row:last-child { border-bottom:0; }
    .signal-row span { color:var(--muted); }
    .signal-row strong { font-variant-numeric:tabular-nums; }
    .pulse-grid { display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px; }
    .pulse-card { text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:9px;transition:transform .12s ease,box-shadow .12s ease; }
    .pulse-card:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08); }
    .pulse-head { display:flex;align-items:center;gap:9px; }
    .pulse-head .avatar { width:34px;height:34px;font-size:12px;flex:0 0 auto; }
    .pulse-id { flex:1;min-width:0;display:flex;flex-direction:column; }
    .pulse-id strong { font-size:13px; } .pulse-id span { font-size:11px;color:var(--muted); }
    .pulse-dot { width:10px;height:10px;border-radius:50%;background:#cbd5cf;flex:0 0 auto; }
    .pulse-dot.on { background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); }
    .pulse-focus { font-size:12px;color:var(--ink);min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .pulse-progress { height:5px;border-radius:3px;background:var(--line);overflow:hidden; }
    .pulse-progress div { height:100%;background:var(--accent); }
    .pulse-metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:4px; }
    .pulse-metrics span { font-size:11.5px;color:var(--muted);text-align:center;display:flex;flex-direction:column; }
    .pulse-metrics strong { font-size:15px;color:var(--ink); }
    .pulse-metrics .bad strong { color:var(--danger); }
    .pulse-blocker { font-size:11px;color:var(--danger);background:rgba(193,62,62,.08);border-radius:7px;padding:6px 8px;display:flex;gap:5px;align-items:center; }
    .pulse-blocker svg { width:13px;height:13px;flex:0 0 auto; }
    .pulse-grid-legacy { display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:10px; }
    .pulse-item { border-left:3px solid var(--line);padding:4px 0 4px 12px;min-width:0; }
    .pulse-item.active { border-color:var(--accent); }
    .pulse-item strong,.pulse-item span { display:block; }
    .pulse-item span { color:var(--muted);font-size:11.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .eod-fields { display:grid;gap:10px; }
    .shift-desk { display:grid;gap:8px; }
    .shift-row { display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(120px,.8fr) 130px 92px;gap:14px;align-items:center;border-top:1px solid var(--line);padding:12px 0;text-align:left; }
    .shift-row:first-child { border-top:0; }
    .coverage { height:6px;background:#e8ecea;border-radius:3px;overflow:hidden;margin-top:7px; }
    .coverage span { display:block;height:100%;background:#34789a; }
    .coverage.complete span { background:#176b4d; }
    .shift-count { font-size:17px;font-weight:800;font-variant-numeric:tabular-nums; }

    .toast { position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:9px;background:#252a27;color:#fff;padding:9px 13px 9px 9px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2); }
    .toast .sg-logo{flex:0 0 auto;background:var(--panel)}
    .mobile-only { display: none; }
    @media (max-width: 900px) {
      .login { grid-template-columns: 1fr; }
      .login-hero { display: none; }
      .login-form { padding: 32px; }
      .shell { grid-template-columns: 1fr; }
      .sidebar { display: none; position: fixed; z-index: 40; width: 240px; }
      .sidebar.open { display: flex; }
      .mobile-menu { display: grid; }
      .sidebar-collapse { display: none; }
      .sidebar-backdrop.visible { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(25,30,28,.18); }
      .content { padding: 16px; }
      .topbar { padding: 0 16px; }
      .search { width: 100%; }
      .topbar .btn-primary span { display: none; }
      .topbar .btn-primary .icon { display:inline-grid; }
      .today-grid { grid-template-columns:1fr; }
      .pulse-grid { grid-template-columns:1fr 1fr; }
      .today-ribbon { grid-template-columns:1fr;align-items:start; }
      .shift-row { grid-template-columns:minmax(0,1fr) 90px; }
      .shift-row > :nth-child(2),.shift-row > :nth-child(3) { display:none; }
      .summary { overflow-x: auto; }
      .filters { overflow-x: auto; }
      .toolbar { align-items: stretch; flex-direction: column; }
      .task-scroll { overflow: auto; height: 58vh; }
      .quick-add { grid-template-columns:1fr 1fr; }
      .quick-add textarea { grid-column:1/-1; }
      .quick-task-actions { min-width:0; }
      .table-head, .task-row { width: 980px; }
      .dashboard-grid, .funnel-summary { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .dashboard-layout, .calendar-layout { grid-template-columns: 1fr; }
      .quicklist-grid { grid-template-columns:repeat(2,1fr); }
      .bug-summary,.team-grid { grid-template-columns:repeat(2,1fr); }
      .admin-layout { grid-template-columns:1fr; }
      .admin-nav { display:flex; overflow-x:auto; }
      .calendar-grid, .calendar-weekdays { min-width: 840px; }
      .calendar-month { overflow-x: auto; }
      .mobile-only { display: inline-flex; }
    }
    @media (max-width: 560px) {
      .login-form { padding: 24px; }
      .page-head { align-items: stretch; flex-direction:column; }
      .page-head p { display: none; }
      .head-actions { width:100%; }.head-actions .btn { flex:1; }
      .content { padding: 12px; }
      .quick-add { grid-template-columns:1fr; }
      .quick-add textarea { grid-column:auto; }
      .quick-task-actions { grid-template-columns:1fr 1fr; width:100%; }
      .summary { gap: 18px; }
      .pulse-grid { grid-template-columns:1fr; }
      .field-grid { grid-template-columns: 1fr; }
      .dashboard-grid, .funnel-summary { grid-template-columns: 1fr; }
      .quicklist-grid,.settings-grid { grid-template-columns:1fr; }
      .settings-grid .wide { grid-column:auto; }
      .metric { border-right: 0; border-bottom: 1px solid var(--line); }
      .metric:last-child { border-bottom: 0; }
      .founder-brief { grid-template-columns:1fr 1fr; }.brief-focus { grid-column:1/-1; }.brief-stat:nth-last-child(-n+2) { border-top:1px solid #35413c; }
      .entity-grid { grid-template-columns:1fr; }.finance-layout { grid-template-columns:1fr; }
      .quick-create-grid { grid-template-columns:1fr; }
      .company-hero { grid-template-columns:1fr; }.company-stat { border-left:0;border-top:1px solid #416157;padding:12px 0 0; }.truth-grid { grid-template-columns:1fr; }
      .bug-summary { grid-template-columns:1fr 1fr; }.team-grid { grid-template-columns:1fr; }.bug-stat { border-right:0;border-bottom:1px solid var(--line); }
      .calendar-grid, .calendar-weekdays { min-width:0 !important; grid-template-columns:repeat(7,1fr); }
      .calendar-month { overflow-x:visible; }
      .calendar-day { min-height:52px; padding:3px 2px; }
      .calendar-weekdays span { padding:5px 1px; font-size:8.5px; }
      .day-label { height:auto; font-size:11.5px; } .day-number { padding:1px 3px; font-size:11px; }
      .msg-thread { max-height:none; min-height:62vh; } .msg-channels { max-height:none; }
    }
    /* Mobile production shell: thumb-friendly controls, safe areas and no clipped workflows. */
    @media (max-width: 720px) {
      html,body{max-width:100%;overflow-x:hidden}
      body{padding-bottom:env(safe-area-inset-bottom)}
      .login{width:100%;max-width:100vw;grid-template-columns:minmax(0,1fr)}
      .login-panel{grid-column:1;width:100%;max-width:100vw;min-width:0;padding-inline:14px}
      .login-form{width:100%;max-width:calc(100vw - 28px);min-width:0;padding:20px}
      .login-form>*{min-width:0}
      .auth-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
      .auth-tab{min-width:0;padding-inline:5px}
      .login-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;font-size:7.5px}
      .login-trust span{min-width:0;justify-content:center;text-align:center;line-height:1.2}
      .topbar{height:58px;padding:0 max(10px,env(safe-area-inset-left));gap:7px}
      .topbar .search{min-width:0}.topbar .search input{font-size:16px}
      .top-action,.mobile-menu,.icon-btn{min-width:42px;min-height:42px}
      #newTaskTop{min-width:44px;padding:0 11px}
      .content{padding:12px 10px calc(80px + env(safe-area-inset-bottom))}
      .sidebar{width:min(86vw,310px);padding-top:max(16px,env(safe-area-inset-top));box-shadow:16px 0 50px rgba(8,30,22,.22)}
      .nav-item{min-height:46px}.sidebar-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}
      .page-head{gap:12px;margin-bottom:14px}.page-head h1{font-size:24px;line-height:1.12}
      .data-actions{width:100%;display:flex;overflow-x:auto;padding-bottom:3px;scroll-snap-type:x proximity}.data-actions>*{flex:0 0 auto;scroll-snap-align:start}
      .workspace,.os-card,.today-section{border-radius:12px}
      .view-tabs{height:auto;min-height:48px;padding:0 6px;gap:0;scrollbar-width:none}.view-tab{min-height:46px;padding:0 13px}
      .layout-switch{position:sticky;right:0;background:var(--panel);box-shadow:-10px 0 12px #fff}.layout-switch button{min-height:42px}
      .toolbar{padding:10px}.quick-add{padding:10px;gap:8px;border-radius:12px}.quick-add textarea{font-size:16px;min-height:72px}
      .quick-add select,.filters input,.filters select,.advanced-bar input,.advanced-bar select{height:44px;min-height:44px;font-size:16px}
      .quick-task-actions .btn{min-height:46px}
      .filters{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:8px}.filters>*{width:100%!important;min-width:0!important}.filters #taskSearch{grid-column:1/-1}.filters .result-count{grid-column:1/-1}
      .advanced-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.advanced-bar>*{width:100%!important;min-width:0!important}.advanced-bar input:first-child,.advanced-bar .result-count{grid-column:1/-1}
      .summary{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:8px;overflow:visible}.summary-item{min-width:0!important}
      .task-board{display:flex;gap:10px;padding:10px;overflow-x:auto;scroll-snap-type:x mandatory}.task-board .kanban-column{flex:0 0 86vw;scroll-snap-align:center}
      .task-card{padding:13px 12px}.tc-head{align-items:flex-start}.tc-meta{gap:7px;flex-wrap:wrap}.tc-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tc-actions .btn{width:100%;min-height:44px}
      .os-row{padding:12px 10px;align-items:flex-start}.os-row strong,.os-row small{white-space:normal}.os-card-head{align-items:flex-start;gap:8px}
      .shift-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.shift-row .health{align-self:start}
      .drawer{width:100vw;top:0;left:0;right:0;border-radius:0;padding-top:env(safe-area-inset-top)}
      .drawer-head{min-height:58px;padding:10px 14px}.drawer-body{padding:14px 12px 110px}.drawer-foot{position:absolute;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:0 -8px 24px rgba(18,35,28,.08)}
      .drawer-foot>div{flex:1}.drawer-foot .btn{min-height:46px}.field-grid{grid-template-columns:1fr}.field-grid .wide,.method-recommendation{grid-column:auto}
      .calendar-layout,.dashboard-layout,.today-grid,.os-grid{gap:10px}
      .notify-root{top:calc(66px + env(safe-area-inset-top));right:8px;left:8px}.notify-pop{width:100%}
      .toast{left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:auto}
    }
    @media (max-width: 390px) {
      .filters,.advanced-bar{grid-template-columns:1fr}
      .filters #taskSearch,.filters .result-count,.advanced-bar input:first-child,.advanced-bar .result-count{grid-column:auto}
      .quick-task-actions{grid-template-columns:1fr}.topbar{gap:4px}.account-name-tag,.topbrand-name{display:none}
      .os-health,.os-kpis,.summary{grid-template-columns:1fr 1fr}
    }
    .comments-block { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
    .comment-list { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
    .comment-item { display:flex; gap:10px; align-items:flex-start; }
    .comment-item .avatar { width:30px; height:30px; font-size:11px; flex:0 0 auto; }
    .comment-body { flex:1; min-width:0; }
    .comment-meta { display:flex; gap:8px; align-items:baseline; }
    .comment-meta strong { font-size:13px; }
    .comment-meta small { color:var(--muted); font-size:11px; }
    .comment-body p { margin:2px 0 0; font-size:13px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
    .comment-body .mention { color:var(--accent); font-weight:600; }
    .comment-compose textarea { width:100%; resize:vertical; }
    .comment-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
    .comment-actions small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mention-wrap { position:relative; }
    .mention-pop { position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.14); z-index:60; max-height:230px; overflow:auto; padding:4px; }
    .mention-pop.hidden { display:none; }
    .mention-opt { display:flex; gap:9px; align-items:center; width:100%; text-align:left; background:none; border:0; padding:7px 9px; border-radius:8px; cursor:pointer; font:inherit; color:var(--ink); }
    .mention-opt:hover, .mention-opt.active { background:var(--accent-soft); }
    .mention-opt .avatar { width:28px; height:28px; font-size:11.5px; flex:0 0 auto; }
    .mention-opt small { color:var(--muted); display:block; }
    .task-seq { display:inline-block; font-size:11.5px; font-weight:700; color:var(--accent); font-family:ui-monospace,Consolas,monospace; margin-right:7px; background:var(--accent-soft); padding:1px 5px; border-radius:5px; vertical-align:middle; letter-spacing:.02em; }
    .subtask-seq { flex:0 0 auto; color:var(--muted); background:transparent; padding:1px 2px; }
    .product-tag { display:inline-block; font-size:11.5px; font-weight:700; color:#1486a8; background:rgba(51,180,227,.14); padding:1px 6px; border-radius:5px; margin-right:7px; vertical-align:middle; }
    .link-ic { display:inline-flex; align-items:center; margin-left:5px; color:var(--muted); vertical-align:middle; }
    .link-ic svg { width:13px; height:13px; }
    .link-ic.meet { color:var(--accent); } .link-ic.doc { color:#1486a8; } .link-ic.call { color:#b8590a; } .link-ic.lnk { color:#7048c4; } .link-ic.rep { color:var(--muted); }
    .link-ic:hover { color:var(--ink); }
    /* #2 Task link editor + clickable chips */
    .links-editor { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
    .link-row { display:flex; gap:8px; align-items:center; }
    .link-row select { flex:0 0 118px; } .link-row input[data-link-url] { flex:2; min-width:0; } .link-row input[data-link-label] { flex:1; min-width:0; }
    .link-chips { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 2px; }
    .link-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--surface-2,#f1f3f5); border:1px solid var(--line); color:var(--ink); font-size:12px; font-weight:600; text-decoration:none; }
    .link-chip svg { width:13px; height:13px; }
    .link-chip:hover { border-color:var(--accent); color:var(--accent); }
    .link-chip.meet { color:var(--accent); } .link-chip.doc { color:#1486a8; } .link-chip.call { color:#b8590a; } .link-chip.lnk { color:#7048c4; }
    .outcome-links { display:inline-flex; align-items:center; gap:2px; }
    .outcome-linkchips { margin:-2px 0 10px 34px; }
    /* #6 Product catalog cards on the Projects page */
    .product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
    .product-card { text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--card,#fff); font:inherit; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
    .product-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(20,25,35,.05); }
    .product-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
    .product-card p { margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
    /* #3 Detailed task cards */
    .task-cards { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
    .task-card { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card,#fff); transition:border-color .15s, box-shadow .15s; }
    .task-card:hover { border-color:#c7ccd1; box-shadow:0 2px 10px rgba(20,25,35,.05); }
    .task-card.done { opacity:.72; }
    .task-card.open { border-color:var(--accent); }
    .tc-head { display:flex; align-items:center; gap:8px; }
    .tc-expand { border:0; background:none; cursor:pointer; color:var(--muted); display:inline-flex; padding:2px; transition:transform .15s; }
    .tc-expand svg { width:16px; height:16px; transform:rotate(-90deg); } .tc-expand.open svg { transform:rotate(0deg); }
    .tc-title { border:0; background:none; text-align:left; cursor:pointer; flex:1; min-width:0; padding:0; font:inherit; color:var(--ink); }
    .tc-title strong { font-size:14.5px; }
    .tc-icons { display:inline-flex; align-items:center; }
    .tc-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:9px 0 0 26px; font-size:12.5px; color:var(--muted); }
    .tc-meta .pill { display:inline-flex; align-items:center; gap:5px; }
    .tc-owner { font-weight:600; color:var(--ink); }
    .tc-overdue { color:var(--danger); font-weight:650; }
    .tc-actions { display:flex; gap:8px; margin:11px 0 0 26px; }
    /* Reschedule controls sit beside the status chip: push a day, or pick an exact date. */
    .tc-resched { display:inline-flex; align-items:center; gap:4px; }
    .chip-btn { border:1px solid var(--line); background:var(--panel); color:var(--muted); font:600 11.5px/1 inherit; padding:4px 8px; border-radius:999px; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
    .chip-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
    .chip-date { border:1px solid var(--line); background:var(--panel); color:var(--muted); font:600 11.5px/1 inherit; padding:3px 6px; border-radius:999px; cursor:pointer; width:34px; transition:width .18s ease,color .15s ease,border-color .15s ease; }
    .chip-date:hover, .chip-date:focus { width:132px; border-color:var(--accent); color:var(--ink); outline:none; }
    .chip-date::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }
    .chip-date:hover::-webkit-calendar-picker-indicator { opacity:1; }
    .tc-actions .btn { padding:5px 12px; font-size:12.5px; }
    .tc-detail { margin:12px 0 2px 26px; padding-top:11px; border-top:1px dashed var(--line); }
    .tc-notes { white-space:pre-wrap; font-size:13px; line-height:1.55; color:var(--ink); margin:2px 0; }
    .tc-subs { display:flex; flex-direction:column; gap:5px; margin:10px 0 2px; }
    .tc-sub { display:flex; align-items:center; gap:8px; font-size:13px; }
    .tc-sub.done span { text-decoration:line-through; color:var(--muted); }
    .tc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
    .tag-chip { font-size:11.5px; color:var(--muted); background:var(--surface-2,#f1f3f5); border-radius:999px; padding:2px 9px; }
    /* #7/#9 Team profile + activity feed */
    .link-btn { border:0; background:none; padding:0; font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
    .link-btn:hover strong { color:var(--accent); text-decoration:underline; }
    .skill-row { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; }
    .avatar.sm { width:26px; height:26px; font-size:11.5px; flex:0 0 auto; }
    .avatar.lg { width:56px; height:56px; font-size:19px; flex:0 0 auto; }
    .activity-feed { display:flex; flex-direction:column; }
    .activity-row { display:flex; align-items:center; gap:11px; padding:10px 4px; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; text-align:left; width:100%; }
    .activity-row:last-child { border-bottom:0; } .activity-row:hover { background:var(--surface-2,#f7f8fa); }
    .activity-copy { flex:1; min-width:0; font-size:13px; color:var(--muted); }
    .activity-copy strong { color:var(--ink); }
    .activity-label { color:var(--accent); }
    .activity-when { color:var(--muted); font-size:12px; white-space:nowrap; }
    .profile-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    .profile-kpi { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; }
    .profile-kpi strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--ink); }
    .profile-kpi span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }
    .profile-kpi.danger { background: #fff1f0; border-color: #f3b7b2; }
    .profile-kpi.warn { background: #fffbeb; border-color: #fcd34d; }
    .avatar.xl { width: 72px; height: 72px; font-size: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; flex-shrink: 0; }
    .profile-hero { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
    .profile-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
    .profile-actions .btn { padding:6px 12px; font-size:12.5px; text-decoration:none; }
    .profile-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:6px; }
    .profile-fact { background:var(--surface-2,#f7f8fa); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
    .profile-fact span { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
    .profile-fact strong { font-size:14px; }
    /* #1 Teams-style week / work-week time grid */
    .wk-grid { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
    .wk-head { display:grid; grid-template-columns:60px repeat(var(--wk-cols,7),minmax(0,1fr)); background:var(--surface-2,#f7f8fa); border-bottom:1px solid var(--line); }
    .wk-gutter { border-right:1px solid var(--line); }
    .wk-day-head { border:0; border-right:1px solid var(--line); background:none; cursor:pointer; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; }
    .wk-day-head:last-child { border-right:0; } .wk-day-head:hover { background:rgba(23,107,77,.06); }
    .wk-dow { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
    .wk-date { font-size:17px; font-weight:700; color:var(--ink); }
    .wk-day-head.today .wk-date { color:#fff; background:var(--accent); border-radius:999px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
    .wk-body { max-height:560px; overflow-y:auto; }
    .wk-row { display:grid; grid-template-columns:60px repeat(var(--wk-cols,7),minmax(0,1fr)); border-bottom:1px solid var(--line); min-height:52px; }
    .wk-row:last-child { border-bottom:0; }
    .wk-time { font-size:11px; color:var(--muted); padding:4px 6px; text-align:right; border-right:1px solid var(--line); }
    .wk-cell { border-right:1px solid var(--line); padding:2px; } .wk-cell:last-child { border-right:0; }
    .wk-cell.today { background:rgba(23,107,77,.04); }
    .wk-cell-inner { min-height:46px; height:100%; display:flex; flex-direction:column; gap:3px; cursor:pointer; border-radius:6px; }
    .wk-cell-inner:hover { background:rgba(23,107,77,.05); }
    .planned-task.cancelled, .calendar-task.cancelled { opacity:.62; text-decoration:line-through; }
    /* Mini month navigator in the calendar sidebar */
    .mini-cal { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:14px; }
    .mini-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
    .mini-head strong { font-size:13px; }
    .mini-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
    .mini-weekdays span { text-align:center; font-size:11.5px; color:var(--muted); }
    .mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .mini-day { border:0; background:none; cursor:pointer; font-size:11.5px; aspect-ratio:1; border-radius:6px; color:var(--ink); }
    .mini-day:hover { background:var(--surface-2,#eef1f4); }
    .mini-day.outside { color:var(--muted); opacity:.5; }
    .mini-day.today { color:var(--accent); font-weight:700; }
    .mini-day.focus { background:var(--accent); color:#fff; font-weight:700; }
    .top-action.on { color:var(--accent); }
    .calendar-task.meeting { background:#f3f0ff; }
    .planned-task.meeting { background:#f3f0ff; border-left-width:3px; }
    .meet-ic { display:inline-flex; vertical-align:middle; margin-right:3px; color:#6c5ce7; }
    .meet-ic svg { width:12px; height:12px; }
    .launch-hero { display:flex; gap:20px; align-items:center; background:linear-gradient(125deg,#173d32,#0f5d43); color:#fff; border-radius:16px; padding:22px 24px; box-shadow:0 12px 30px rgba(15,93,67,.22); }
    .launch-hero.go { background:linear-gradient(125deg,#1a8a63,#0f5d43); }
    .launch-hero-main { flex:1; } .launch-hero h2 { font-size:22px; margin:8px 0 4px; } .launch-hero p { color:#d6e2dd; } .launch-hero .pill { background:rgba(255,255,255,.18); color:#fff; }
    .launch-count { text-align:center; min-width:96px; } .launch-count strong { display:block; font-size:34px; line-height:1; } .launch-count span { font-size:11px; color:#d6e2dd; } .launch-count .good { color:#7ff0c0; } .launch-count .bad { color:#ffd7a8; }
    .phase-track { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
    .phase-step { flex:1; min-width:90px; border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:9px 10px; font:inherit; font-weight:600; font-size:12px; cursor:pointer; color:var(--muted); }
    .phase-step.passed { color:var(--accent); border-color:var(--accent); }
    .phase-step.active { background:var(--accent); color:#fff; border-color:var(--accent); }
    .metric.gate { border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:left; background:var(--panel); }
    .metric.gate.pass { border-left:4px solid var(--accent); } .metric.gate.fail { border-left:4px solid var(--danger); }
    .metric.gate.pass strong { color:var(--accent); } .metric.gate.fail strong { color:var(--danger); }
    .launch-list { display:flex; flex-direction:column; gap:2px; }
    .launch-row { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--line); }
    .launch-row:last-child { border-bottom:0; } .launch-row.done .launch-text { text-decoration:line-through; color:var(--muted); }
    .launch-text { flex:1; min-width:0; font-size:13px; } .launch-owner { font-size:11px; color:var(--muted); } .launch-due { font-size:11px; color:var(--muted); min-width:52px; text-align:right; } .launch-due.bad { color:var(--danger); font-weight:650; }
    @media (max-width:560px){ .launch-hero { flex-direction:column; align-items:flex-start; gap:12px; } .launch-owner { display:none; } }
    button.metric { font:inherit; cursor:pointer; text-align:left; color:var(--ink); background:var(--panel); border:0; border-right:1px solid var(--line); width:100%; transition:background .12s ease; }
    button.metric:hover { background:var(--accent-soft); }
    button.truth-block { font:inherit; cursor:pointer; text-align:left; color:var(--ink); width:100%; transition:transform .12s ease, box-shadow .12s ease; }
    button.truth-block:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
    .feature-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
    .feature-chip { border:1px solid var(--line); background:var(--panel); border-radius:20px; padding:6px 12px; cursor:pointer; font:inherit; font-size:12px; display:flex; align-items:center; gap:8px; color:var(--ink); }
    .feature-chip:hover { border-color:var(--accent); }
    .feature-chip small { color:var(--muted); font-size:11.5px; }
    .feature-chip.go { border-left:3px solid var(--accent); }
    .feature-chip.nogo { border-left:3px solid var(--danger); opacity:.72; }
    .linked-list { display:flex; flex-direction:column; gap:6px; }
    .linked-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:1px solid var(--line); border-radius:8px; padding:7px 9px; cursor:pointer; font:inherit; color:var(--ink); }
    .linked-item:hover { background:var(--accent-soft); }
    .linked-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
    .linked-item .health { flex:0 0 auto; }
    .linked-chip { display:inline-flex; align-items:center; gap:6px; margin:8px 0 4px; padding:6px 11px; background:var(--accent-soft); color:var(--accent); border:0; border-radius:8px; cursor:pointer; font:inherit; font-size:13px; }
    .linked-chip svg { width:15px; height:15px; }
    .roadmap-card { cursor: grab; }
    .roadmap-card:active { cursor: grabbing; }
    .roadmap-card.dragging { opacity: .45; }
    .roadmap-card-move { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 2px; }
    .roadmap-card-move .icon-btn { width: 22px; height: 22px; color: var(--muted); }
    .roadmap-column.drag-over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 10px; }
    .outcome-add { opacity:.7; }
    .outcome-add .outcome-number { background:var(--accent-soft); color:var(--accent); }
    /* ── Messages: modern iMessage/WhatsApp style ── */
    .msg-layout { display:grid; grid-template-columns:260px 1fr; gap:0; margin-top:14px; align-items:stretch; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 4px 20px rgba(0,0,0,.06); }
    .msg-channels { padding:12px 10px; display:flex; flex-direction:column; gap:2px; max-height:72vh; overflow:auto; background:#f8faf9; border-right:1px solid var(--line); }
    .msg-channel { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:10px 12px; border-radius:12px; cursor:pointer; font:inherit; color:var(--ink); transition:background .12s ease; position:relative; }
    .msg-channel:hover { background:rgba(23,107,77,.08); }
    .msg-channel.active { background:var(--accent); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(23,107,77,.2); }
    .msg-channel.active .avatar { box-shadow:0 0 0 2px rgba(255,255,255,.5); }
    .msg-channel.active .msg-channel-name strong { color:#fff; }
    .msg-channel.active .nav-count { background:var(--panel); color:var(--accent); }
    .msg-channel .avatar { width:36px; height:36px; font-size:12px; flex:0 0 auto; }
    .msg-channel-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .msg-channel .nav-count { background:#c13e3e; color:#fff; font-size:11.5px; font-weight:800; min-width:20px; height:20px; line-height:20px; text-align:center; border-radius:10px; padding:0 5px; }
    .msg-thread { display:flex; flex-direction:column; padding:0; max-height:72vh; }
    .msg-thread-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
    .msg-thread-head .avatar { width:34px; height:34px; font-size:12px; }
    .msg-thread-head strong { font-size:15px; }
    .msg-scroll { flex:1; overflow:auto; padding:20px 24px; display:flex; flex-direction:column; gap:3px; background:linear-gradient(180deg,#f4f7f6 0%,#eef2f0 100%); }
    .msg-date-sep { text-align:center; margin:16px 0 10px; font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.3px; }
    .msg-date-sep span { background:#e4e8e6; padding:3px 12px; border-radius:10px; }
    .msg-group { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
    .msg-group-head { display:flex; gap:8px; align-items:center; margin-bottom:2px; padding-left:42px; }
    .msg-group-head.mine { justify-content:flex-end; padding-left:0; padding-right:42px; }
    .msg-group-head strong { font-size:11px; font-weight:700; color:var(--ink); }
    .msg-group-head small { font-size:11.5px; color:var(--muted); }
    .msg-item { display:flex; gap:8px; align-items:flex-end; max-width:75%; position:relative; }
    .msg-item .avatar { width:32px; height:32px; font-size:11px; flex:0 0 auto; visibility:hidden; }
    .msg-item.show-avatar .avatar { visibility:visible; }
    .msg-item.mine { flex-direction:row-reverse; align-self:flex-end; }
    .msg-bubble { background:var(--panel); border-radius:18px; padding:9px 14px; box-shadow:0 1px 3px rgba(0,0,0,.06); position:relative; }
    .msg-item:not(.mine) .msg-bubble { border-bottom-left-radius:6px; }
    .msg-item:not(.mine).show-avatar .msg-bubble { border-bottom-left-radius:18px; }
    .msg-item.mine .msg-bubble { background:var(--accent); color:#fff; border-bottom-right-radius:6px; box-shadow:0 2px 8px rgba(23,107,77,.18); }
    .msg-item.mine.show-avatar .msg-bubble { border-bottom-right-radius:18px; }
    .msg-bubble p { margin:0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
    .msg-bubble .msg-quote { border-left:3px solid rgba(23,107,77,.4); margin:0 0 6px; padding:4px 10px; border-radius:0 6px 6px 0; background:rgba(23,107,77,.06); font-size:12px; color:var(--muted); line-height:1.4; }
    .msg-item.mine .msg-bubble .msg-quote { border-left-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }
    .msg-item.mine .mention { color:#fff; text-decoration:underline; }
    .msg-reply-btn { position:absolute; top:50%; right:-30px; transform:translateY(-50%); opacity:0; border:0; background:none; color:var(--muted); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:opacity .12s ease; }
    .msg-item.mine .msg-reply-btn { right:auto; left:-30px; }
    .msg-item:hover .msg-reply-btn { opacity:1; }
    .msg-reply-btn:hover { background:var(--accent-soft); color:var(--accent); }
    .msg-compose { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); align-items:flex-end; background:var(--panel); }
    .msg-compose-wrap { flex:1; display:flex; flex-direction:column; border:1.5px solid var(--line); border-radius:22px; background:#f8faf9; overflow:hidden; transition:border-color .15s ease; }
    .msg-compose-wrap:focus-within { border-color:var(--accent); background:var(--panel); }
    .msg-compose-reply { display:flex; align-items:center; gap:8px; padding:8px 14px 4px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); background:#f0f3f1; }
    .msg-compose-reply span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .msg-compose-reply button { border:0; background:none; color:var(--muted); cursor:pointer; padding:2px; }
    .msg-compose-reply button:hover { color:var(--danger); }
    .msg-compose textarea { flex:1; resize:none; border:0; background:transparent; padding:10px 16px; font:inherit; font-size:13.5px; outline:none; box-shadow:none; }
    .msg-send-btn { width:38px; height:38px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer; flex:0 0 auto; transition:transform .1s ease, box-shadow .1s ease; box-shadow:0 3px 10px rgba(23,107,77,.25); }
    .msg-send-btn:hover { transform:scale(1.06); box-shadow:0 5px 16px rgba(23,107,77,.3); }
    .msg-send-btn svg { width:18px; height:18px; }
    @media (max-width:720px){ .msg-layout { grid-template-columns:1fr; border-radius:10px; } .msg-channels { flex-direction:row; overflow-x:auto; max-height:none; border-right:0; border-bottom:1px solid var(--line); padding:8px; } .msg-channel { padding:8px 10px; min-width:max-content; } .msg-item { max-width:88%; } }
        /* Floating chat widget (#7) */
    #chatWidget { position: fixed; right: 20px; bottom: 20px; z-index: 90; }
    /* Never let the floating widget cover a drawer footer or the command palette. */
    #drawerRoot:has(*) ~ #chatWidget, #cmdkRoot:has(*) ~ #chatWidget { display: none !important; }
    .chat-bubble { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(15,93,67,.4); cursor: pointer; display: grid; place-items: center; transition: transform .12s ease; }
    .chat-bubble:hover { transform: scale(1.06); }
    .chat-bubble .icon svg { width: 24px; height: 24px; }
    .chat-bubble.has-unread { animation: chatpulse 1.8s ease-in-out infinite; }
    @keyframes chatpulse { 0%,100% { box-shadow: 0 10px 26px rgba(15,93,67,.4); } 50% { box-shadow: 0 10px 26px rgba(15,93,67,.4), 0 0 0 8px rgba(23,107,77,.15); } }
    .chat-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #c13e3e; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid #fff; }
    .chat-panel { width: 350px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 40px); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.24); display: flex; flex-direction: column; overflow: hidden; }
    .chat-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--accent); color: #fff; }
    .chat-panel-head select { flex: 1; min-width: 0; background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 7px; padding: 5px 8px; font: inherit; }
    .chat-panel-head select option { color: #202124; }
    .chat-head-actions { display: flex; gap: 2px; }
    .chat-head-actions .icon-btn { color: #fff; }
    .chat-scroll { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--bg, #f4f7f6); }
    .chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: center; }
    .chat-compose textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit; }
    .chat-compose .btn { padding: 8px 10px; }
    @media (max-width:520px){ .chat-panel { width: calc(100vw - 40px); height: calc(100vh - 100px); } }
    .chat-channel-list { padding: 6px; gap: 2px; }
    .chat-channel-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); }
    .chat-channel-row:hover { background: var(--accent-soft); }
    .chat-channel-row .avatar { width: 34px; height: 34px; font-size: 12px; flex: 0 0 auto; }
    .chat-channel-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .chat-channel-copy strong { font-size: 13px; }
    .chat-channel-copy span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #notifyRoot { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
    .notify-pop { pointer-events: auto; display: flex; gap: 10px; align-items: center; width: min(360px, 92vw); text-align: left; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; }
    .notify-pop.show { opacity: 1; transform: translateY(0); }
    .notify-mark { flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--panel);color:var(--accent);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 1px #dce7e1; }
    .notify-mark .sg-logo { width:34px!important;height:34px!important;border-radius:8px!important; }
    .notify-copy { min-width: 0; display: flex; flex-direction: column; }
    .notify-copy strong { font-size: 13px; }
    .notify-copy span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Tasteful pass (#10 Founder HQ, #11 Today): richer colour + interactivity */
    .today-ribbon { background: linear-gradient(125deg, #1a8a63 0%, #125540 100%) !important; box-shadow: 0 12px 30px rgba(15,93,67,.22); }
    .summary { gap: 12px; }
    button.summary-item { padding: 14px 16px !important; background: var(--panel) !important; border: 1px solid var(--line) !important; border-top: 3px solid var(--accent) !important; border-radius: 13px; transition: transform .12s ease, box-shadow .12s ease; }
    button.summary-item.alert { border-top-color: var(--danger) !important; }
    button.summary-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.09); }
    .summary-item strong { color: var(--accent); }
    .summary-item.alert strong { color: var(--danger); }
    .brief-stat, .brief-focus { transition: background .12s ease; }
    button.brief-stat:hover, button.brief-focus:hover { background: #22423a; cursor: pointer; }
    .signal-row, .pulse-item { transition: transform .1s ease, background .12s ease; border-radius: 8px; }
    button.signal-row:hover { transform: translateX(3px); }
    .pulse-item:hover { background: var(--accent-soft) !important; }
    .quicklist-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .quicklist-card-head h3 { margin: 0; }
    .quicklist-card { transition: transform .12s ease, box-shadow .12s ease; }
    .quicklist-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
    /* Founder-first operating system refresh */
    .content { max-width:1600px; margin:0 auto; }
    .page-head { padding:4px 0; align-items:center; }
    .page-head h1 { font-size:27px; letter-spacing:-.035em; }
    .page-head p { max-width:72ch; line-height:1.55; }
    .workspace,.metric,.entity-card,.founder-column,.decision-row { border-radius:12px; }
    .workspace { box-shadow:0 1px 2px rgba(16,42,32,.03); }
    .advanced-bar { padding:10px; border:1px solid var(--line); border-radius:11px; background:#f8faf9; }
    .advanced-bar input,.advanced-bar select { min-height:36px; background:var(--panel); }
    .os-command { display:grid; gap:14px; }
    .os-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:22px; padding:28px; color:#f3fff8; border-radius:18px; background:radial-gradient(circle at 85% 20%,rgba(67,224,151,.22),transparent 32%),linear-gradient(135deg,#082a21,#10563f); box-shadow:0 18px 45px rgba(14,71,52,.2); }
    .os-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:34px 34px; }
    .os-hero > * { position:relative; z-index:1; }
    .os-hero h1 { max-width:18ch; margin-top:6px; color:#fff; font-size:32px; line-height:1.08; letter-spacing:-.045em; }
    .os-hero p { margin-top:10px; color:rgba(240,255,247,.72); line-height:1.55; }
    .os-kicker { color:#84efb6; font-size:11.5px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
    .os-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
    .os-hero-actions .btn { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; }
    .os-hero-actions .btn:first-child { border-color:#fff; background:var(--panel); color:#10563f; }
    .os-health { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:center; }
    .os-health div { padding:13px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.075); backdrop-filter:blur(8px); }
    .os-health strong,.os-health span { display:block; }
    .os-health strong { color:#fff; font-size:22px; letter-spacing:-.04em; }
    .os-health span { margin-top:3px; color:rgba(238,255,246,.62); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }
    .os-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
    .os-span-12 { grid-column:span 12; }.os-span-8 { grid-column:span 8; }.os-span-7 { grid-column:span 7; }.os-span-6 { grid-column:span 6; }.os-span-5 { grid-column:span 5; }.os-span-4 { grid-column:span 4; }
    .os-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:var(--shadow-sm); }
    .os-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; }
    .os-card-head h2 { font-size:15px; }.os-card-head p { margin-top:3px; color:var(--muted); font-size:11px; }
    .os-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
    .os-kpi { padding:12px; border:1px solid #e4ebe7; border-radius:11px; background:#fafcfb; }
    .os-kpi strong,.os-kpi span { display:block; }.os-kpi strong { font-size:21px; letter-spacing:-.04em; }.os-kpi span { margin-top:3px; color:var(--muted); font-size:11.5px; }
    .os-kpi.bad strong { color:var(--danger); }.os-kpi.good strong { color:#14805a; }
    .os-list { display:grid; gap:7px; }
    .os-row { width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 11px; border:1px solid #e7ece9; border-radius:10px; background:var(--panel); text-align:left; }
    button.os-row:hover { border-color:#b9cdc3; background:#f7fbf9; }
    .os-row strong,.os-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .os-row small { margin-top:3px; color:var(--muted); font-size:11.5px; }
    .os-risk { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
    .os-risk.high { color:#9f241a; background:#fff0ed; }.os-risk.medium { color:#8a5a00; background:#fff7df; }.os-risk.low { color:#126343; background:#eaf8f1; }
    .record-id { display:inline-flex; padding:2px 6px; border-radius:5px; background:#eef3f0; color:#5d7067; font:700 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.03em; }
    /* Method chips were overflowing their grid cell (168px of text in a 54px box), which
       pushed the whole Today page 33px wide. Let them wrap and never exceed their column. */
    /* inline-flex items get min-width:auto, so the label could not shrink or wrap inside a
       narrow grid cell — it spilled and widened the document. Let it wrap instead. */
    .method-chip { max-width:100%; white-space:normal; line-height:1.35; text-align:left; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere; }
    .method-chips { min-width:0; }
    .quadrant-grid > *, .quadrant { min-width:0; }
    /* #13 Focus bar — turns the Eisenhower/method engine into something you act on. */
    .focus-bar { margin:14px 0 0; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
    .focus-quadrants { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); }
    .focus-cell { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; background:var(--panel); border:0; cursor:pointer; text-align:left; transition:background .15s ease, box-shadow .15s ease; position:relative; }
    .focus-cell strong { font-size:19px; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
    .focus-cell span { font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.01em; }
    .focus-cell::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .15s ease; }
    .focus-cell.q-do::before { background:#e2574c; }
    .focus-cell.q-plan::before { background:#176b4d; }
    .focus-cell.q-delegate::before { background:#d99a2b; }
    .focus-cell.q-drop::before { background:#98a5ad; }
    .focus-cell:hover { background:#f7faf9; }
    .focus-cell.active { background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent); }
    .focus-cell.active strong, .focus-cell.active span { color:var(--accent); }
    .focus-coach { display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--line); background:#fbfdfc; }
    .focus-coach p { margin:0; flex:1; font-size:12.5px; color:var(--muted); line-height:1.5; }
    .focus-coach p strong { color:var(--ink); font-weight:650; }
    .focus-coach .btn { flex:none; }
    @media (max-width:900px){
      .focus-quadrants { grid-template-columns:repeat(2,1fr); }
      .focus-coach { flex-wrap:wrap; }
      .focus-coach .btn { width:100%; }
    }
    /* #14 Per-field help text. De-emphasised so it explains without competing with the value. */
    .field-hint { display:block; margin-top:5px; font-size:11.5px; line-height:1.45; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none; }
    .drawer-body label { display:block; }
    .drawer-body .field-grid > label { align-content:start; }
    .drawer-body textarea { line-height:1.55; }
    /* Give the form room to breathe and keep long-form fields full width. */
    .drawer-body .field-grid { row-gap:16px; }
    .drawer-body .field-grid > label.wide { grid-column:1/-1; }
    /* Checkbox rows are flex; let their hint wrap onto its own full-width line. */
    .drawer-body label[style*="flex"] { flex-wrap:wrap; gap:0 8px; }
    .drawer-body label[style*="flex"] .field-hint { flex:0 0 100%; margin-top:4px; }
    .search-filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:8px; border-bottom:1px solid var(--line); background:#f7faf8; }
    .search-filter-bar select { min-width:0; height:32px; padding:5px 7px; border-radius:7px; font-size:11.5px; }
    .onboarding-strip { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #cce6d8; border-radius:12px; background:#f0faf5; color:#194a37; }
    .onboarding-strip strong { flex:1; }.onboarding-strip small { color:#537267; }
    /* Shared color language for board cards: red=urgent, amber=attention, blue=active, green=complete. */
    .kanban-card,.kanban-task,.deal-card,.roadmap-card,.entity-card { position:relative; overflow:hidden; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
    .kanban-card { overflow:visible; }
    .kanban-card::before,.kanban-task::before,.deal-card::before,.roadmap-card::before,.entity-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#8ca5b8; }
    .kanban-card:hover,.kanban-task:hover,.deal-card:hover,.roadmap-card:hover,.entity-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(25,48,40,.11); }
    .tone-red { background:linear-gradient(135deg,#fff 0%,#fff2f0 100%)!important; border-color:#efc3bc!important; }.tone-red::before{background:#e35d4f!important}
    .tone-amber { background:linear-gradient(135deg,#fff 0%,#fff8e7 100%)!important; border-color:#ead59e!important; }.tone-amber::before{background:#d99b22!important}
    .tone-blue { background:linear-gradient(135deg,#fff 0%,#eef7ff 100%)!important; border-color:#bed9ed!important; }.tone-blue::before{background:#3988c6!important}
    .tone-purple { background:linear-gradient(135deg,#fff 0%,#f7f0ff 100%)!important; border-color:#dac7ec!important; }.tone-purple::before{background:#8c62bd!important}
    .tone-green { background:linear-gradient(135deg,#fff 0%,#edf9f3 100%)!important; border-color:#bfe2cf!important; }.tone-green::before{background:#2f9d68!important}
    .entity-grid .entity-card:nth-child(5n+1)::before{background:#3988c6}.entity-grid .entity-card:nth-child(5n+2)::before{background:#8c62bd}.entity-grid .entity-card:nth-child(5n+3)::before{background:#2f9d68}.entity-grid .entity-card:nth-child(5n+4)::before{background:#d99b22}.entity-grid .entity-card:nth-child(5n)::before{background:#e35d4f}
    .focus-methods { display:grid; grid-template-columns:minmax(260px,1.25fr) repeat(2,minmax(150px,.75fr)); gap:10px; margin:14px 0; }
    .focus-method { min-width:0; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:var(--shadow-sm); }
    .focus-method.frog { color:#fff; background:linear-gradient(135deg,#173f33,#176b4d); border-color:transparent; }
    .focus-method h3 { margin-bottom:5px; font-size:14px; }.focus-method p { color:var(--muted); font-size:11px; line-height:1.45; }
    .focus-method.frog p { color:rgba(255,255,255,.72); }.focus-method strong { display:block; margin:12px 0 10px; font-size:15px; line-height:1.35; }
    .quadrant-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
    .quadrant { padding:8px; border-radius:8px; font-size:11.5px; font-weight:750; }.quadrant b{display:block;font-size:17px}
    .quadrant.do{background:#fff0ed;color:#a33126}.quadrant.plan{background:#eef7ff;color:#28658f}.quadrant.delegate{background:#fff7df;color:#825900}.quadrant.drop{background:#f1f3f2;color:#6b7470}
    .focus-timer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:10px; border-radius:9px; background:#f1f7f4; }
    .focus-timer b { font:800 21px/1 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--accent); }
    .method-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
    .method-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:0;border-radius:999px;background:#edf3f0;color:#526860;font-size:11px;font-weight:750}
    .method-help{position:relative;cursor:help;outline:none}
    /* The tooltip itself is drawn by showTip() into a single body-level .sg-tip element.
       It used to be a ::after on this badge, which the viewport edge and any overflow:hidden
       ancestor could clip. Do not reintroduce a pseudo-element tooltip here. */
    .sg-tip{position:fixed;left:0;top:0;z-index:400;max-width:min(300px,86vw);padding:9px 11px;border-radius:9px;
      background:#122b22;color:#f6fffa;box-shadow:0 10px 28px rgba(10,35,26,.28);
      font-size:11.5px;font-weight:550;line-height:1.45;letter-spacing:0;text-align:left;white-space:normal;
      opacity:0;pointer-events:none;transition:opacity .12s}
    .sg-tip.on{opacity:1}
    .sg-tip-arrow{position:absolute;bottom:-5px;width:0;height:0;border:5px solid transparent;border-top-color:#122b22;transform:translateX(-50%)}
    .sg-tip.below .sg-tip-arrow{bottom:auto;top:-5px;border-top-color:transparent;border-bottom-color:#122b22}

    /* The keyboard cursor. Has to be obvious without being loud, and must not shift layout,
       so it is an inset ring rather than a border. */
    .kb-cursor{position:relative;box-shadow:inset 0 0 0 2px var(--accent);border-radius:8px}
    tr.kb-cursor{box-shadow:inset 2px 0 0 0 var(--accent),inset -2px 0 0 0 var(--accent)}
    tr.kb-cursor td{background:var(--accent-soft)}
    .kb-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
    .kb-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center;
      padding:9px 12px;background:var(--panel);font-size:12.5px}
    .kb-row kbd{justify-self:start;padding:2px 8px;border:1px solid var(--line);border-radius:5px;
      background:var(--soft);font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
    .kb-row span{color:var(--ink)}
    .kb-note{padding:9px 12px;background:var(--soft);color:var(--muted);font-size:11.5px;font-weight:700}

    /* Progressive disclosure. Folded, not removed — everything is still one click away. */
    .more-fields{margin-top:14px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
    .more-fields > summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:12.5px;font-weight:700;
      color:var(--muted);display:flex;align-items:center;gap:8px;border-radius:9px}
    .more-fields > summary::-webkit-details-marker{display:none}
    .more-fields > summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:16px;line-height:1}
    .more-fields[open] > summary::before{transform:rotate(90deg)}
    .more-fields > summary:hover{color:var(--ink)}
    .more-fields > summary span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
      border-radius:999px;background:var(--soft);font-size:11px;font-weight:800}
    .more-fields > .field-grid{padding:0 14px 14px}
    .more-fields:focus-within > summary{color:var(--ink)}

    /* Weekly review: four questions, each one with something to act on. */
    .wr-step{padding:14px 0;border-top:1px solid var(--line)}
    .wr-step:first-of-type{border-top:0;padding-top:4px}
    .wr-step h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;color:var(--ink)}
    .wr-step h4 span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;
      border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:800}
    .wr-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:8px;overflow:hidden}
    .wr-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
      padding:8px 11px;background:var(--panel);font-size:12.5px}
    .wr-list li span{min-width:0;overflow-wrap:anywhere}
    .wr-list li small{flex:0 0 auto;color:var(--muted);font-size:11.5px}
    .wr-list li.muted{color:var(--muted);justify-content:flex-start}
    .wr-actions{display:flex;flex-wrap:wrap;gap:8px}
    .wr-goals{display:grid;gap:8px}
    .wr-goal{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px;align-items:center;font-size:12.5px}
    .wr-goal > span{min-width:0;overflow-wrap:anywhere}
    @media (max-width:560px){ .wr-goal{grid-template-columns:1fr;gap:4px} }

    /* Triage: one task, four choices, nothing else competing for the eye. */
    .tr-card{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--soft);margin-bottom:16px}
    .tr-card > strong{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
    .tr-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12px;color:var(--muted);align-items:center}
    .tr-notes{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
    .tr-choices{display:grid;gap:8px;margin-bottom:14px}
    .tr-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
      padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
      transition:border-color .12s,background .12s}
    .tr-choice:hover{border-color:var(--accent);background:var(--accent-soft)}
    .tr-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .tr-choice kbd{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;
      border:1px solid var(--line);background:var(--soft);font-size:12px;font-weight:800;color:var(--muted)}
    .tr-choice strong{display:block;font-size:13.5px}
    .tr-choice small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
    .drawer-body kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
      border:1px solid var(--line);border-radius:5px;background:var(--soft);font-size:11px;font-weight:700}

    /* What the one-line parser understood. Appears only when it understood something. */
    .quick-parse{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
      margin:-4px 0 2px;font-size:12px}
    .quick-parse.hidden{display:none}
    .qp-title{font-weight:700;color:var(--ink);margin-right:2px;overflow-wrap:anywhere}
    .qp-chip{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
      font-size:11px;font-weight:700;white-space:nowrap}

    /* The day's edges: one band at the top of My day that always states the next action.
       Tone carries the meaning, so it reads at a glance without being read. */
    .day-ritual{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
      margin:14px 0 4px;padding:14px 18px;border:1px solid var(--line);border-left-width:4px;
      border-radius:10px;background:var(--panel)}
    .day-ritual .dr-copy{min-width:0;flex:1 1 320px}
    .day-ritual strong{display:block;font-size:15px;line-height:1.25;color:var(--ink)}
    .day-ritual span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
    .day-ritual .dr-actions{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto}
    .day-ritual.start{border-left-color:var(--accent);background:var(--accent-soft)}
    .day-ritual.start strong{color:var(--accent)}
    .day-ritual.behind{border-left-color:var(--danger,#c0392b)}
    .day-ritual.ahead{border-left-color:var(--accent)}
    .day-ritual.done{border-left-color:var(--accent)}
    .day-ritual.closed{border-left-color:var(--line);opacity:.85}
    .day-ritual.running{border-left-color:var(--line)}
    @media (max-width:640px){ .day-ritual{flex-direction:column;align-items:stretch}
      .day-ritual .dr-actions .btn{flex:1 1 auto} }

    /* My Day's two modes. The switch is CSS only — one render stays mounted, so bindings,
       scroll position and half-typed fields all survive changing tabs. */
    .day-tabs{display:flex;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
    .day-tab{flex:1 1 220px;min-width:0;text-align:left;cursor:pointer;
      padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
      color:var(--muted);transition:border-color .15s,background .15s,color .15s}
    .day-tab:hover{border-color:var(--accent);color:var(--ink)}
    .day-tab .day-tab-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}
    .day-tab small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
    .day-tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
      border-radius:999px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:800;
      font-variant-numeric:tabular-nums}
    .day-tab.active{border-color:var(--accent);background:var(--accent-soft)}
    .day-tab.active .day-tab-label,.day-tab.active small{color:var(--accent)}
    /* White works on the light theme's deep-green accent, but night mode's accent is a
       bright mint (#3ddc97) where white measures 1.77:1. Dark ink on it instead. */
    .day-tab.active .day-tab-count{background:var(--accent);color:#fff}
    [data-theme="dark"] .day-tab.active .day-tab-count{color:#06231a}
    .day-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    /* display:contents so wrapping the right-hand column's blocks does not alter the stack. */
    .day-group{display:contents}
    [data-day-view="me"] [data-day-tab="gig"],
    [data-day-view="gig"] [data-day-tab="me"]{display:none !important}

    /* A toast you can act on — used when the day drifts and we offer to re-flow it. */
    .toast-action{margin-left:12px;flex:0 0 auto;border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.12);color:inherit;font:inherit;font-weight:700;font-size:12px;
      padding:6px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
    .toast-action:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
    .toast-action:focus-visible{outline:2px solid #fff;outline-offset:2px}

    /* Smart day report: the plan, and the reasoning behind it. */
    .sd-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:20px}
    .sd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
      padding:11px 13px;background:var(--panel)}
    .sd-slot{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--accent);white-space:nowrap}
    .sd-copy{min-width:0}
    .sd-copy strong{display:block;font-size:13.5px;overflow-wrap:anywhere}
    .sd-copy small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
    .sd-meta{text-align:right;font-size:12px;font-weight:650;color:var(--ink);white-space:nowrap}
    .sd-meta small{display:block;color:var(--subtle);font-weight:500;font-size:10.5px}
    .sd-notes{margin:0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.65}
    .sd-notes strong{color:var(--ink)}
    .sd-notes li{margin-bottom:5px}
    /* The one button that plans the day, reachable from the top bar on every page. */
    .smartday-btn{white-space:nowrap}
    @media (max-width:1100px){ .smartday-btn span:last-child{display:none} }
    @media (max-width:560px){ .sd-row{grid-template-columns:auto minmax(0,1fr);row-gap:4px} .sd-meta{grid-column:2;text-align:left} }

    /* Provenance: who made a record and when. Quiet by default — it is reference, not news. */
    .record-provenance{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
      color:var(--muted);font-size:11.5px;line-height:1.5}
    .record-provenance strong{color:var(--ink);font-weight:650}
    .tc-created{font-variant-numeric:tabular-nums;cursor:help}

    /* The full prioritisation picture for one record, inside its panel. */
    .task-methods{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
    /* --muted, not --subtle: --subtle on --soft measures 2.87:1, under the 3:1 floor. */
    .task-methods h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
    .tm-next{margin:0 0 10px;padding:7px 10px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
      font-size:12px;font-weight:700}
    .tm-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
    .tm-row{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:10px;
      padding:8px 11px;background:var(--panel);align-items:baseline}
    .tm-label{color:var(--subtle);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
    .tm-label.method-help{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
    .tm-value{color:var(--ink);font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
    .tm-chips{margin-top:10px}
    @media (max-width:560px){ .tm-row{grid-template-columns:1fr;gap:2px} }
    .method-recommendation{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #cfe2d8;border-radius:10px;background:#f1f8f4;color:#264b3d}
    .method-recommendation strong,.method-recommendation span{display:block}.method-recommendation strong{font-size:12px}.method-recommendation span{margin-top:3px;color:#62786e;font-size:11.5px;line-height:1.45}
    [data-go],[data-card-page],[data-task-detail],.metric { cursor:pointer; }
    @media(max-width:1050px){.os-span-8,.os-span-7,.os-span-6,.os-span-5,.os-span-4{grid-column:span 12}.os-hero{grid-template-columns:1fr}.os-health{grid-template-columns:repeat(4,1fr)}}
    @media(max-width:900px){.focus-methods{grid-template-columns:1fr 1fr}.focus-method.frog{grid-column:1/-1}}
    @media(max-width:680px){.content{padding:18px 14px 96px}.os-hero{padding:20px}.os-health,.os-kpis{grid-template-columns:1fr 1fr}.search-filter-bar{grid-template-columns:1fr 1fr}.onboarding-strip{align-items:flex-start;flex-wrap:wrap}.focus-methods{grid-template-columns:1fr}.focus-method.frog{grid-column:auto}}
    .boot-loader { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; min-height:100dvh; padding:24px; background:linear-gradient(145deg,#f6fbf8 0%,#edf6f1 52%,#f8faf9 100%); }
    .boot-loader-card { display:flex; align-items:center; gap:14px; padding:18px 22px; border:1px solid #d8e8df; border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 18px 55px rgba(21,68,50,.12); color:#183d30; }
    .boot-loader-copy strong,.boot-loader-copy span { display:block; }
    .boot-loader-copy strong { font-size:14px; }
    .boot-loader-copy span { margin-top:3px; color:#668078; font-size:11px; }
    .boot-spinner { width:22px; height:22px; border:3px solid #cce0d6; border-top-color:var(--accent); border-radius:50%; animation:bootSpin .75s linear infinite; }
    @keyframes bootSpin { to { transform:rotate(360deg); } }
    @media(prefers-reduced-motion:reduce){.boot-spinner{animation-duration:1.8s}}
  
    /* #21 Quick-add is now a planning row: title spans the top, then the pickers, then
       the three method switches. Everything wraps cleanly instead of squeezing. */
    .quick-add { grid-template-columns:repeat(4,minmax(140px,1fr)) !important; }
    .quick-add > textarea { grid-column:1/-1; }
    .quick-add .quick-due { height:38px; }
    .quick-methods { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .quick-switch { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; transition:all .15s ease; }
    .quick-switch:hover { border-color:var(--accent); color:var(--accent); }
    .quick-switch input { accent-color:var(--accent); margin:0; cursor:pointer; }
    .quick-switch:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
    .quick-switch.quick-frog:has(input:checked) { border-color:#c98a1f; background:#fdf5e6; color:#8a5d10; }
    .quick-task-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .quick-expand { margin-left:auto; }
    .quick-expand svg { width:16px; height:16px; }
    @media (max-width:820px){
      .quick-add { grid-template-columns:repeat(2,minmax(120px,1fr)) !important; }
      .quick-task-actions .btn { flex:1 1 auto; }
      .quick-expand { flex:0 0 auto; margin-left:0; }
    }
    /* #19 Collapsible sidebar sections. The heading is the control; the caret rotates. */
    .nav-group-toggle { display:flex; align-items:center; gap:6px; width:100%; border:0; background:transparent; cursor:pointer; text-align:left; font:inherit; color:var(--subtle); }
    .nav-group-toggle:hover { color:var(--ink); }
    .nav-group-toggle .nav-caret { display:inline-flex; line-height:0; transition:transform .16s ease; opacity:.65; }
    .nav-group-toggle .nav-caret svg { width:12px; height:12px; }
    .nav-group-toggle:not(.open) .nav-caret { transform:rotate(-90deg); }
    .nav-group-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
    .nav-group[hidden] { display:none; }
    /* #16 "Pick a day" control, styled to sit naturally beside the view tabs. */
    .view-date { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; margin-left:2px; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; transition:border-color .15s ease,color .15s ease,background .15s ease; }
    .view-date:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
    .view-date.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
    .view-date span { display:inline-flex; line-height:0; }
    .view-date span svg { width:14px; height:14px; }
    .view-date input { border:0; background:transparent; color:inherit; font:600 12px/1 inherit; padding:0; cursor:pointer; width:112px; }
    .view-date input:focus { outline:none; }
    /* ---- UI polish pass (#5/#8) ------------------------------------------------ */
    /* The old pseudo-element tooltip is gone (see .sg-tip). Keep these off unconditionally
       so nothing can resurrect a clipped, layout-affecting copy. */
    .method-help::after, .method-help::before { display:none !important; content:none !important; }
    /* An unclassed <small> inside an 11px parent computed to 9.2px. Hold the floor. */
    #content small:not([class]) { font-size:11.5px; }

    /* B4 keyboard-highlighted search result */
    [data-search-result].active { background:var(--accent-soft); outline:2px solid var(--accent); outline-offset:-2px; }
    /* B2 the quick-add block was taller than it needed to be */
    .quick-add { padding:8px !important; gap:6px !important; }
    .quick-add textarea { min-height:42px !important; }
    .quick-add select, .quick-add .quick-due { height:34px !important; }
    .quick-switch { padding:4px 9px; font-size:11.5px; }
    .quick-task-actions { margin-top:1px; }
    /* B6 section headings read as headings, and can be pinned open */
    .nav-group-toggle { font-weight:800 !important; letter-spacing:.04em; text-transform:uppercase; }
    .nav-pin { margin-left:auto; border:0; background:transparent; cursor:pointer; opacity:.35; line-height:0; padding:2px; border-radius:5px; color:inherit; }
    .nav-pin:hover { opacity:.9; background:rgba(0,0,0,.05); }
    .nav-pin.pinned { opacity:1; color:var(--accent); }
    .nav-pin svg { width:12px; height:12px; }

    /* #7 Daily commitment strip */
    .capacity-strip { padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel); }
    .capacity-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
    .capacity-head strong { font-size:12.5px; color:var(--ink); }
    .capacity-head span { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
    .capacity-track { position:relative; height:6px; margin:8px 0 7px; border-radius:999px; background:var(--soft); overflow:hidden; }
    .capacity-track span { display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .25s ease; }
    .capacity-strip.warn .capacity-track span { background:#d99a2b; }
    .capacity-strip.bad .capacity-track span { background:#e2574c; }
    .capacity-advice { margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
    .capacity-advice strong { color:var(--ink); font-weight:650; }

    /* #8 Sidebar headings: small, quiet, single line */
    .nav-group-toggle { font-weight:600 !important; font-size:10.5px !important; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; overflow:hidden; padding:9px 3px 3px; }
    .nav-group-toggle > span:not(.nav-caret) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ============ #9 Night mode: deep blacks, colourful accents, readable text ============ */
    [data-theme="dark"] {
      color-scheme: dark;
      --ink:#eef3f7; --muted:#a9b6c2; --subtle:#8794a1;
      --line:#242c35; --soft:#151b22; --panel:#111820;
      --accent:#3ddc97; --accent-soft:#102f24;
      --danger:#ff7a6b; --warn:#ffc45c;
      color:#eef3f7; background:#080b0f;
    }
    [data-theme="dark"] body, [data-theme="dark"] .shell { background:#080b0f; color:var(--ink); }
    /* Anything that hard-codes a light surface gets remapped, so no text lands on its own colour. */
    [data-theme="dark"] .sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .workspace,
    [data-theme="dark"] .os-card, [data-theme="dark"] .drawer, [data-theme="dark"] .task-card,
    [data-theme="dark"] .kanban-card, [data-theme="dark"] .kanban-column, [data-theme="dark"] .focus-bar,
    [data-theme="dark"] .focus-cell, [data-theme="dark"] .capacity-strip, [data-theme="dark"] .quick-add,
    [data-theme="dark"] .quick-switch, [data-theme="dark"] .chip-btn, [data-theme="dark"] .view-date,
    [data-theme="dark"] .record-table, [data-theme="dark"] .summary-item, [data-theme="dark"] .daily-row,
    [data-theme="dark"] .os-row, [data-theme="dark"] .linked-item, [data-theme="dark"] .decision-row,
    [data-theme="dark"] .global-results, [data-theme="dark"] .method-chip, [data-theme="dark"] .quadrant,
    [data-theme="dark"] .toast, [data-theme="dark"] .drawer-head, [data-theme="dark"] .drawer-foot {
      background:var(--panel); color:var(--ink); border-color:var(--line);
    }
    [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
      background:#0d141b; color:var(--ink); border-color:var(--line);
    }
    [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color:var(--subtle); }
    [data-theme="dark"] .focus-cell:hover, [data-theme="dark"] .os-row:hover { background:#16202a; }
    [data-theme="dark"] .focus-cell.active { background:var(--accent-soft); }
    [data-theme="dark"] .capacity-track { background:#1b232c; }
    [data-theme="dark"] .record-id { background:#16232c; color:#7fd7b4; }
    [data-theme="dark"] .btn-primary { background:var(--accent); color:#04140d; }
    [data-theme="dark"] .btn-outline, [data-theme="dark"] .btn-quiet { color:var(--ink); border-color:var(--line); background:transparent; }
    [data-theme="dark"] .sg-tip { background:#04120c; color:#eafff5; box-shadow:0 10px 28px rgba(0,0,0,.55); }
    [data-theme="dark"] .sg-tip-arrow { border-top-color:#04120c; }
    [data-theme="dark"] .sg-tip.below .sg-tip-arrow { border-top-color:transparent; border-bottom-color:#04120c; }
    [data-theme="dark"] .field-hint, [data-theme="dark"] small { color:var(--muted); }
    /* Colourful status tones that stay legible on black */
    [data-theme="dark"] .health.on-track, [data-theme="dark"] .badge.decided { background:#102f24; color:#5ce0a6; }
    [data-theme="dark"] .health.at-risk { background:#33280a; color:#ffc45c; }
    [data-theme="dark"] .health.off-track, [data-theme="dark"] .os-risk.high { background:#3a1512; color:#ff8f80; }
    [data-theme="dark"] .product-tag, [data-theme="dark"] .tag-chip { background:#132430; color:#7cc7f5; }
    [data-theme="dark"] .quadrant.do { background:#3a1512; color:#ff9c8f; }
    [data-theme="dark"] .quadrant.plan { background:#102f24; color:#5ce0a6; }
    /* Surfaces that hard-code a light background and were left with light text on them. */
    [data-theme="dark"] #nav .active, [data-theme="dark"] #nav .active .nav-text { color:#5ce0a6; }
    [data-theme="dark"] .avatar { background:#25313c; color:#eef3f7; }
    [data-theme="dark"] .account-dropdown, [data-theme="dark"] .pulse-card, [data-theme="dark"] .banner-metric,
    [data-theme="dark"] .mention-opt, [data-theme="dark"] .tray-task, [data-theme="dark"] .feature-chip,
    [data-theme="dark"] .msg-bubble, [data-theme="dark"] .onboarding-strip, [data-theme="dark"] .search-filter-bar {
      background:var(--panel); color:var(--ink); border-color:var(--line);
    }
    [data-theme="dark"] .account-dropdown-item { background:transparent; color:var(--ink); }
    [data-theme="dark"] .account-dropdown-item:hover { background:#16202a; }
    [data-theme="dark"] .btn { background:var(--panel); color:var(--ink); border-color:var(--line); }
    [data-theme="dark"] .btn-primary { background:var(--accent); color:#04140d; border-color:var(--accent); }
    [data-theme="dark"] .btn-danger { background:#3a1512; color:#ff9c8f; border-color:#5a2018; }
    [data-theme="dark"] .theme-toggle svg { width:17px; height:17px; }
    .theme-toggle svg { width:17px; height:17px; }

    /* Remaining light surfaces found by the contrast audit. */
    [data-theme="dark"] .summary, [data-theme="dark"] .summary-item, [data-theme="dark"] .focus-coach,
    [data-theme="dark"] .view-tabs, [data-theme="dark"] .layout-switch, [data-theme="dark"] .layout-switch button,
    [data-theme="dark"] .toolbar, [data-theme="dark"] .advanced-bar, [data-theme="dark"] .page-head,
    [data-theme="dark"] .section-bar, [data-theme="dark"] .empty-state, [data-theme="dark"] .drawer-body,
    [data-theme="dark"] .tc-detail, [data-theme="dark"] .today-section, [data-theme="dark"] .daily-list {
      background:var(--panel); color:var(--ink); border-color:var(--line);
    }
    [data-theme="dark"] .focus-coach { background:#0f151b; }
    [data-theme="dark"] .layout-switch button.active { background:var(--accent-soft); color:#5ce0a6; }
    [data-theme="dark"] .summary-item strong { color:var(--ink); }
    [data-theme="dark"] .summary-item span { color:var(--muted); }

    /* ---- Night mode: reset-then-reapply ------------------------------------------
       Dozens of components hard-code a light background (#fff, #f6faf8, ...). Rather
       than chase each one, neutralise generic containers so text falls back onto the
       dark canvas, then let the panel rules above (class selectors, higher specificity)
       paint the surfaces that genuinely are panels. Element selectors here are kept at
       low specificity on purpose so .panel rules keep winning. */
    [data-theme="dark"] div, [data-theme="dark"] section, [data-theme="dark"] aside,
    [data-theme="dark"] article, [data-theme="dark"] header, [data-theme="dark"] footer,
    [data-theme="dark"] table, [data-theme="dark"] thead, [data-theme="dark"] tbody,
    [data-theme="dark"] tr, [data-theme="dark"] td, [data-theme="dark"] th,
    [data-theme="dark"] ul, [data-theme="dark"] ol, [data-theme="dark"] li,
    [data-theme="dark"] label, [data-theme="dark"] p, [data-theme="dark"] h1,
    [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 {
      background-color: transparent;
    }
    /* Give tables their own quiet separation back. */
    [data-theme="dark"] .record-table thead th { background:#0f151b; color:var(--muted); border-color:var(--line); }
    [data-theme="dark"] .record-table tbody tr { border-color:var(--line); }
    [data-theme="dark"] .record-table tbody tr:hover { background:#141d25; }
    /* Text stays clearly legible on black: slightly lighter greys and a touch more weight
       (thin type loses perceived contrast on dark backgrounds). */
    [data-theme="dark"] { --muted:#b6c2cd; --subtle:#98a5b1; }
    [data-theme="dark"] body { -webkit-font-smoothing:antialiased; }
    [data-theme="dark"] small, [data-theme="dark"] .muted, [data-theme="dark"] .field-hint,
    [data-theme="dark"] .cell-muted, [data-theme="dark"] .capacity-advice, [data-theme="dark"] .auth-help,
    [data-theme="dark"] .metric-label, [data-theme="dark"] .daily-copy small { font-weight:500; }
    [data-theme="dark"] strong, [data-theme="dark"] b { font-weight:700; }
    [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { font-weight:700; color:var(--ink); }
    [data-theme="dark"] .nav-text, [data-theme="dark"] .view-tab, [data-theme="dark"] .btn { font-weight:600; }
    [data-theme="dark"] .outcome-number { color:#5ce0a6; }

    /* Colour-on-colour pairs flagged by the audit. */
    [data-theme="dark"] .phase-step.active, [data-theme="dark"] .mini-day.today,
    [data-theme="dark"] .mini-day.focus, [data-theme="dark"] .day-number.today { color:#04140d !important; }
    [data-theme="dark"] .resource-link, [data-theme="dark"] a { color:#5ce0a6; }
    [data-theme="dark"] .arrow, [data-theme="dark"] .quicklist-step span { color:var(--muted); }
    [data-theme="dark"] .execution-hero, [data-theme="dark"] .today-hero, [data-theme="dark"] .hero,
    [data-theme="dark"] .os-hero { background:linear-gradient(135deg,#0e2b20,#0a1a26) !important; color:#eafff5; }
    [data-theme="dark"] .execution-kicker, [data-theme="dark"] .os-kicker { color:#7fe8b8 !important; }
    [data-theme="dark"] .good { color:#5ce0a6; }
    [data-theme="dark"] .bad { color:#ff9c8f; }
    [data-theme="dark"] .warn { color:#ffc45c; }

    /* ---- Night mode: final foreground fixes (from the contrast audit) ---- */
    /* The Today hero paints itself with the danger colour; give it a dark surface. */
    [data-theme="dark"] .execution-hero, [data-theme="dark"] .execution-banner,
    [data-theme="dark"] .today-banner, [data-theme="dark"] .greeting-hero {
      background:linear-gradient(135deg,#0e2b20,#0a1a26) !important; color:#eafff5 !important;
    }
    [data-theme="dark"] .execution-kicker { color:#7fe8b8 !important; }
    /* Dark ink on bright mint chips, never white. */
    [data-theme="dark"] .day-number.today, [data-theme="dark"] .mini-day.today,
    [data-theme="dark"] .mini-day.focus, [data-theme="dark"] .day-cell.today .day-number { color:#04140d !important; }
    /* Sidebar and secondary labels were too dim against the panel. */
    [data-theme="dark"] .nav-text, [data-theme="dark"] .nav-label,
    [data-theme="dark"] .nav-group-toggle, [data-theme="dark"] #nav button { color:#c3cedb; }
    [data-theme="dark"] #nav .active, [data-theme="dark"] #nav .active .nav-text { color:#5ce0a6; }
    [data-theme="dark"] .sync-status { color:#9fb0c0 !important; background:transparent !important; }
    [data-theme="dark"] .calendar-more { color:#dbe4ec !important; }
    [data-theme="dark"] .quicklist-step span, [data-theme="dark"] .step-label { color:#b6c2cd !important; }
    /* Any button still carrying the light-theme accent as its text colour. */
    [data-theme="dark"] .btn, [data-theme="dark"] .btn-quiet, [data-theme="dark"] .btn-outline { color:#dbe4ec; }
    [data-theme="dark"] .btn-primary { color:#04140d; }

    /* ---- Quick add: readable again, and it uses the empty space ---- */
    /* 34px controls were clipping their own text. Give them real height and put the
       method switches beside the purpose pickers instead of on a lonely row. */
    .quick-add { padding:12px !important; gap:10px !important; grid-template-columns:repeat(4,minmax(150px,1fr)) !important; align-items:start; }
    .quick-add textarea { min-height:56px !important; padding:9px 11px; line-height:1.45; }
    .quick-add select, .quick-add input[type="date"], .quick-add .quick-due {
      height:40px !important; padding:8px 10px; line-height:1.35; }
    .quick-methods { grid-column:span 2; margin:0; align-self:center; }
    .quick-switch { padding:7px 11px; font-size:12px; }
    .quick-task-actions { grid-column:1/-1; }
    @media (max-width:900px){
      .quick-add { grid-template-columns:repeat(2,minmax(140px,1fr)) !important; }
      .quick-methods { grid-column:1/-1; }
    }

    /* Final three, located precisely by the audit. */
    [data-theme="dark"] .calendar-day.today .day-number { color:#04140d !important; }
    [data-theme="dark"] .os-hero-actions .btn { color:#04140d !important; background:#5ce0a6 !important; border-color:#5ce0a6 !important; }
    [data-theme="dark"] .quicklist-step, [data-theme="dark"] .quicklist-step * ,
    [data-theme="dark"] .step-name, [data-theme="dark"] .checklist-step span { color:#b6c2cd !important; }

    /* Avatar initials were white on a light grey disc in BOTH themes — unreadable. */
    .avatar { background:#2f3a45; color:#ffffff; }
    [data-theme="dark"] .avatar { background:#25313c; color:#eef3f7; }

    [data-theme="dark"] .quicklist-items span { color:#b6c2cd; }

    /* Sidebar count badge sat at 2.79:1 in day mode — nudge it over the line. */
    .nav-count { color:#5b6672; }

    /* Mobile: the global search grew over the top bar and buried the day/night toggle.
       Keep the toggle in its own space and let the search wrap to its own line. */
    .topbar .search { min-width:0; }
    .theme-toggle { flex:0 0 auto; position:relative; z-index:3; }
    @media (max-width:900px){
      .topbar { flex-wrap:wrap; row-gap:8px; }
      .topbar .search { flex:1 1 100%; order:5; }
      .theme-toggle { order:2; margin-left:auto; }
    }

    /* Last two, both count/label greys sitting just under 3:1. */
    .nav-label { color:#6a737c; }
    .nav-count { color:#5b6672; }
    [data-theme="dark"] .nav-count { color:#cfe8dc; }
    [data-theme="dark"] .nav-label { color:#c3cedb; }

    /* ---- Priority engine UI ---- */
    .wsjf-chip { display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px; background:#eef4f1; color:#3f6f5b; font:700 11px/1.5 ui-monospace,Consolas,monospace; cursor:help; }
    [data-theme="dark"] .wsjf-chip { background:#132a22; color:#7fd7b4; }
    .mix-row { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
    .mix-pill { padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:650; border:1px solid var(--line); color:var(--muted); background:var(--panel); }
    .mix-pill.over { border-color:#d99a2b; color:#8a5d10; background:#fdf5e6; }
    [data-theme="dark"] .mix-pill.over { border-color:#7a5a15; color:#ffc45c; background:#2a2109; }
    .ivy-panel { margin-top:14px; }
    .ivy-list { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:7px; counter-reset:ivy; }
    .ivy-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
    .ivy-rank { flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font:800 12px/1 inherit; }
    [data-theme="dark"] .ivy-rank { color:#04140d; }
    .ivy-title { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:2px; }
    .ivy-title small { font-weight:500; font-size:11.5px; color:var(--muted); }
    .ivy-actions { display:flex; gap:2px; flex:0 0 auto; }
    .ivy-suggestions { display:flex; flex-wrap:wrap; gap:7px; }
    .ivy-suggest { text-align:left; max-width:320px; padding:8px 11px; border:1px dashed var(--line); border-radius:10px; background:transparent; cursor:pointer; display:flex; flex-direction:column; gap:2px; transition:all .15s ease; }
    .ivy-suggest:hover { border-color:var(--accent); border-style:solid; background:var(--accent-soft); }
    .ivy-suggest strong { font-size:13px; color:var(--ink); font-weight:600; }
    .ivy-suggest small { font-size:11.5px; color:var(--muted); }

    /* ---- Do this next: the single recommendation ---- */
    .next-best { margin:14px 0 0; padding:16px 18px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; background:var(--panel); box-shadow:var(--shadow-sm); }
    .nb-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
    .nb-kicker { font:800 10.5px/1 inherit; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
    .nb-method { padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font:700 11.5px/1.5 inherit; cursor:help; }
    .nb-title { display:block; margin:9px 0 0; padding:0; border:0; background:transparent; text-align:left; font:700 19px/1.3 inherit; color:var(--ink); cursor:pointer; }
    .nb-title:hover { color:var(--accent); }
    .nb-why { margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted); }
    .nb-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px; }
    .nb-slot { padding:5px 11px; border-radius:999px; border:1px dashed var(--line); font:600 12px/1.4 inherit; color:var(--muted); }
    .nb-slot.none { border-style:solid; color:#8a5d10; background:#fdf5e6; border-color:#e2c98d; }
    [data-theme="dark"] .nb-slot.none { color:#ffc45c; background:#2a2109; border-color:#7a5a15; }
    @media (max-width:700px){ .nb-actions .btn { flex:1 1 auto; } .nb-title { font-size:17px; } }

    /* ---- Today’s blocked time: a real timeline, so timeboxing is visible ---- */
    .tl-wrap { margin-top:14px; }
    .tl-grid { display:grid; grid-template-columns:56px 1fr; gap:10px; }
    .tl-hours { display:flex; flex-direction:column; justify-content:space-between; font:600 11px/1 inherit; color:var(--muted); padding:2px 0; }
    .tl-track { position:relative; min-height:420px; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
    .tl-line { border-top:1px dashed var(--line); opacity:.7; height:0; }
    .tl-block { position:absolute; left:8px; right:8px; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:5px 10px; border:0; border-left:3px solid var(--accent); border-radius:8px; background:var(--accent-soft); text-align:left; cursor:pointer; overflow:hidden; transition:filter .15s ease; }
    .tl-block:hover { filter:brightness(.96); }
    .tl-block strong { font-size:12.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tl-block small { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tl-block.meeting { border-left-color:#7cc7f5; background:#eaf4fd; }
    [data-theme="dark"] .tl-block.meeting { background:#12222e; }
    .tl-block.done { opacity:.55; }
    .tl-block.done strong { text-decoration:line-through; }
    .tl-now { position:absolute; left:0; right:0; height:0; border-top:2px solid #e2574c; z-index:4; }
    .tl-now span { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#e2574c; }
    .tl-empty { margin:10px 0 0; font-size:12.5px; color:var(--muted); }
    .cal-time { font:700 10.5px/1.5 ui-monospace,Consolas,monospace; color:var(--accent); margin-right:5px; }
    @media (max-width:700px){ .tl-grid { grid-template-columns:44px 1fr; } .tl-track { min-height:340px; } }

    .next-best.q-delegate { border-left-color:#d99a2b; }
    .next-best.q-delegate .nb-kicker { color:#8a5d10; }
    [data-theme="dark"] .next-best.q-delegate .nb-kicker { color:#ffc45c; }
    .next-best.q-drop { border-left-color:#98a5ad; }
    .next-best.q-drop .nb-kicker { color:#5f6a72; }
    [data-theme="dark"] .next-best.q-drop .nb-kicker { color:#b6c2cd; }

    /* The recommended task is marked where the work actually lives. */
    .task-card.is-next { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, var(--shadow-sm); position:relative; }
    .next-flag { position:absolute; top:-9px; left:14px; padding:2px 9px; border-radius:999px; background:var(--accent); color:#fff; font:800 10px/1.6 inherit; letter-spacing:.05em; text-transform:uppercase; }
    [data-theme="dark"] .next-flag { color:#04140d; }

    /* ---- Workspace health ---- */
    .health-score { display:flex; align-items:baseline; gap:8px; margin:14px 0; padding:14px 18px; border-radius:12px; border:1px solid var(--line); background:var(--panel); width:fit-content; }
    .health-score strong { font-size:34px; line-height:1; font-variant-numeric:tabular-nums; }
    .health-score span { font-size:12px; color:var(--muted); }
    .health-score.good strong { color:#177d55; }
    .health-score.warn strong { color:#8a5d10; }
    .health-score.bad strong { color:#b42318; }
    [data-theme="dark"] .health-score.good strong { color:#5ce0a6; }
    [data-theme="dark"] .health-score.warn strong { color:#ffc45c; }
    [data-theme="dark"] .health-score.bad strong { color:#ff9c8f; }
    .health-list { display:flex; flex-direction:column; gap:8px; }
    .health-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; background:var(--panel); }
    .health-row.bad { border-left-color:#e2574c; }
    .health-row.warn { border-left-color:#d99a2b; }
    .health-row.good { border-left-color:#3ba776; }
    .health-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
    .health-copy strong { font-size:13px; color:var(--ink); }
    .health-copy small { font-size:11.5px; color:var(--muted); line-height:1.5; }
    .health-count { min-width:44px; text-align:right; font:800 17px/1 inherit; font-variant-numeric:tabular-nums; color:var(--ink); }
    .health-ok { font-size:11.5px; color:var(--muted); min-width:78px; text-align:right; }
    @media (max-width:700px){ .health-row { flex-wrap:wrap; } .health-count { min-width:0; } }

    /* Layered dark surfaces, so components no longer need a runtime repaint. */
    [data-theme="dark"] { --tint-1:#0f151b; --tint-2:#121922; --tint-3:#0c1218; }

    /* ---- Night mode: screens the #app-scoped audit never covered ---- */
    /* The login screen sits OUTSIDE #app, so it kept light surfaces while text went light. */
    [data-theme="dark"] .login { background:#080b0f; }
    [data-theme="dark"] .login-hero { background:linear-gradient(150deg,#0e2b20,#0a1a26); }
    [data-theme="dark"] .login-panel { background:#080b0f; }
    [data-theme="dark"] .login-form { background:var(--panel); border-color:var(--line); box-shadow:var(--shadow-lg); }
    [data-theme="dark"] .login-form h1, [data-theme="dark"] .login-form-head h1 { color:var(--ink); }
    [data-theme="dark"] .login-copy, [data-theme="dark"] .login-eyebrow, [data-theme="dark"] .auth-help { color:var(--muted); }
    [data-theme="dark"] .login-hero h2, [data-theme="dark"] .login-hero p,
    [data-theme="dark"] .login-brandline, [data-theme="dark"] .login-proof strong { color:#eafff5; }
    [data-theme="dark"] .login-proof span, [data-theme="dark"] .login-trust span { color:#a9c7ba; }
    [data-theme="dark"] .login-kicker { color:#7fe8b8; background:rgba(61,220,151,.12); }
    [data-theme="dark"] .login-pulse { background:rgba(255,255,255,.04); }
    [data-theme="dark"] .login-pulse-copy strong { color:#eafff5; }
    [data-theme="dark"] .login-pulse-copy span, [data-theme="dark"] .login-pulse-metrics span { color:#a9c7ba; }
    [data-theme="dark"] .auth-tabs { background:#0d141b; }
    [data-theme="dark"] .auth-tab { color:var(--muted); background:transparent; }
    [data-theme="dark"] .auth-tab.active { background:var(--accent-soft); color:#5ce0a6; }
    [data-theme="dark"] .password-toggle { color:#7fd7b4; }
    [data-theme="dark"] .login-error { background:#3a1512; color:#ff9c8f; border-color:#5a2018; }
    [data-theme="dark"] .login-error.success { background:#102f24; color:#5ce0a6; border-color:#1d5a41; }
    [data-theme="dark"] .boot-loader { background:#080b0f; }
    [data-theme="dark"] .boot-loader-card, [data-theme="dark"] .boot-loader-copy strong { color:var(--ink); }
    [data-theme="dark"] .boot-loader-copy span { color:var(--muted); }

    /* Chat / messages: bubbles and their hover state were still light. */
    [data-theme="dark"] .msg-bubble, [data-theme="dark"] .msg-row, [data-theme="dark"] .msg-thread,
    [data-theme="dark"] .msg-list, [data-theme="dark"] .msg-channel, [data-theme="dark"] .chat-widget,
    [data-theme="dark"] .chat-panel, [data-theme="dark"] .chat-msg, [data-theme="dark"] .msg-composer {
      background:var(--panel); color:var(--ink); border-color:var(--line);
    }
    [data-theme="dark"] .msg-bubble.mine, [data-theme="dark"] .chat-msg.mine { background:var(--accent-soft); color:#eafff5; }
    [data-theme="dark"] .msg-channel:hover, [data-theme="dark"] .msg-channel.active { background:#16202a; }

    /* Hover states that hard-coded white anywhere in the shell. */
    [data-theme="dark"] .os-row:hover, [data-theme="dark"] .daily-row:hover, [data-theme="dark"] .task-card:hover,
    [data-theme="dark"] .record-table tbody tr:hover, [data-theme="dark"] .kanban-card:hover,
    [data-theme="dark"] .linked-item:hover, [data-theme="dark"] .decision-row:hover, [data-theme="dark"] .quick-link:hover,
    [data-theme="dark"] .summary-item:hover, [data-theme="dark"] [data-search-result]:hover,
    [data-theme="dark"] .ivy-suggest:hover, [data-theme="dark"] .nav-group-toggle:hover {
      background:#16202a; color:var(--ink);
    }
    [data-theme="dark"] .btn:hover { background:#1a242e; }
    [data-theme="dark"] .btn-primary:hover { background:#4fd8a0; color:#04140d; }

    [data-theme="dark"] .login-pulse-metrics b { color:#eafff5; }

    [data-theme="dark"] .method-recommendation, [data-theme="dark"] .method-recommendation strong,
    [data-theme="dark"] .method-recommendation span { color:#7fd7b4; }
    [data-theme="dark"] .method-recommendation { background:var(--accent-soft); border-color:#1d5a41; }

    /* ---- Chat widget: it renders outside #app, so it needs explicit night styling ---- */
    [data-theme="dark"] .chat-panel { background:var(--panel); border-color:var(--line); color:var(--ink); }
    [data-theme="dark"] .chat-panel-head { background:#0e2b20; color:#eafff5; }
    [data-theme="dark"] .chat-panel-head select { background:rgba(255,255,255,.10); color:#eafff5; }
    [data-theme="dark"] .chat-channel-row { color:var(--ink); }
    [data-theme="dark"] .chat-channel-row strong,
    [data-theme="dark"] .chat-channel-row b { color:var(--ink); }
    [data-theme="dark"] .chat-channel-row small,
    [data-theme="dark"] .chat-channel-row span { color:var(--muted); }
    [data-theme="dark"] .chat-channel-row:hover { background:#16202a; }
    [data-theme="dark"] .chat-scroll, [data-theme="dark"] .chat-body-scroll,
    [data-theme="dark"] .chat-input-area { background:var(--panel); }
    [data-theme="dark"] .chat-input-box { background:#0d141b; color:var(--ink); border-color:var(--line); }
    [data-theme="dark"] .chat-bubble-btn { background:var(--accent); color:#04140d; }
    /* Day mode: the same rows had light names on white. Anchor both explicitly. */
    .chat-channel-row strong, .chat-channel-row b { color:var(--ink); }
    .chat-channel-row small, .chat-channel-row span:not(.avatar) { color:var(--muted); }

    /* ---- Global search results were clipped to "T…" / "Ta…" ---- */
    .global-results { min-width:420px; max-width:min(680px,90vw); }
    [data-search-result] { display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
    [data-search-result] > * { min-width:0; }
    [data-search-result] strong, [data-search-result] .search-title {
      flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    [data-search-result] small { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .search-filter-bar { flex-wrap:wrap; gap:6px; }
    .search-filter-bar select { min-width:112px; flex:0 1 auto; }
    @media (max-width:640px){ .global-results { min-width:0; width:100%; } }

    /* ---- The chat widget must not sit on the sign-in screen ---- */
    body:has(#app.hidden) #chatFull, body:has(#app.hidden) #chatBubble { display:none !important; }

    /* The real chat widget class is .modern-chat-panel, and its list sits on a hardcoded
       light div — which is why names went light-on-light in night mode. */
    [data-theme="dark"] #chatWidget, [data-theme="dark"] .modern-chat-panel,
    [data-theme="dark"] .modern-chat-panel > div { background:var(--panel); color:var(--ink); border-color:var(--line); }
    [data-theme="dark"] .modern-chat-panel strong, [data-theme="dark"] .chat-channel-row strong { color:var(--ink); }
    [data-theme="dark"] .modern-chat-panel small, [data-theme="dark"] .chat-channel-row small { color:var(--muted); }
    [data-theme="dark"] .modern-chat-panel input, [data-theme="dark"] .modern-chat-panel textarea { background:#0d141b; color:var(--ink); }

    /* Recovery gaps are protected time, so they read as a hatched pause, not a task. */
    .tl-block.buffer { border-left-style:dashed; border-left-color:#98a5ad; cursor:help;
      background:repeating-linear-gradient(45deg,rgba(152,165,173,.10) 0 6px,transparent 6px 12px); }
    .tl-block.buffer strong { font-weight:600; color:var(--muted); }
    [data-theme="dark"] .tl-block.buffer { background:repeating-linear-gradient(45deg,rgba(182,194,205,.10) 0 6px,transparent 6px 12px); }

    /* ---- 1. Ctrl+K palette was see-through ----
       My night-mode reset ([data-theme=dark] div{background:transparent}) outranks a single
       class selector, so it blanked .cmdk and every other one-class overlay. Restore them
       with two-class specificity so the reset cannot reach them. */
    [data-theme="dark"] .cmdk, [data-theme="dark"] .cmdk-list,
    [data-theme="dark"] .global-results, [data-theme="dark"] .toast,
    [data-theme="dark"] .drawer, [data-theme="dark"] .account-dropdown,
    [data-theme="dark"] .modern-chat-panel { background:var(--panel) !important; }
    [data-theme="dark"] .cmdk-backdrop { background:rgba(0,0,0,.55); }
    [data-theme="dark"] .cmdk-input { background:var(--panel); color:var(--ink); }
    [data-theme="dark"] .cmdk-item { color:var(--ink); }
    [data-theme="dark"] .cmdk-item.active, [data-theme="dark"] .cmdk-item:hover { background:#16202a; }
    .cmdk { background:var(--panel); }
    .cmdk-backdrop { backdrop-filter:blur(2px); }

    /* Reverted: two attempts to stop the left panel scrolling (a fixed-height
       overflow:hidden sidebar with an internally-scrolling nav, then a sticky variant)
       caused worse problems than the scroll itself. The sidebar and nav are back to their
       original base rules — do not re-add an override here without a repro. */

    /* ---- 4. Admin rows put a 2-child row into a 3-column grid, so the label was
       squeezed into a 28px slot ("Co...") and the button stretched. ---- */
    .admin-panel .daily-row { grid-template-columns:minmax(0,1fr) auto; gap:14px; }
    .admin-panel .daily-row .daily-copy { min-width:0; }
    .admin-panel .daily-row .daily-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .admin-panel .daily-row .daily-copy small { display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .admin-panel .daily-row .btn { white-space:nowrap; width:auto; flex:0 0 auto; }

    /* ---- 5. Quick create, where the work actually happens ---- */
    .quick-create { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; }
    .quick-create-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line);
      border-radius:999px; background:var(--panel); color:var(--muted); font:600 12px/1.4 inherit; cursor:pointer; transition:all .15s ease; }
    .quick-create-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
    .quick-create-label { align-self:center; font-size:11.5px; color:var(--subtle); margin-right:2px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

    /* 2. Hover states that hard-code a light fill go invisible in night mode. */
    [data-theme="dark"] .decision-row:hover, [data-theme="dark"] .task-row:hover,
    [data-theme="dark"] .quick-link:hover, [data-theme="dark"] .time-content:hover,
    [data-theme="dark"] .quick-create:hover, [data-theme="dark"] .calendar-day:hover,
    [data-theme="dark"] .cal-cell:hover, [data-theme="dark"] .day-cell:hover,
    [data-theme="dark"] .mini-day:hover, [data-theme="dark"] .agenda-row:hover,
    [data-theme="dark"] tr:hover, [data-theme="dark"] li:hover {
      background:#16202a !important; color:var(--ink);
    }
    [data-theme="dark"] .task-row select:hover { background-color:#16202a !important; color:var(--ink); }
    [data-theme="dark"] .task-row:hover *, [data-theme="dark"] .decision-row:hover *,
    [data-theme="dark"] .calendar-day:hover * { color:inherit; }

    /* Capture sits inside the quick-add action row, filling the empty space between
       "Add to focus" and the expand control. It must read as part of that row, so the
       card chrome inherited from the generic .quick-create rule is stripped here. */
    .quick-task-actions .quick-create {
      flex:1 1 auto; margin:0; padding:0; border:0; background:none; border-radius:0;
      justify-content:flex-start; gap:6px; row-gap:6px; min-width:0;
    }
    .quick-task-actions .quick-create:hover { background:none; border-color:transparent; }
    .quick-task-actions .quick-create-label { display:none; }
    .quick-task-actions .quick-create-btn { padding:5px 10px; font-size:12px; }
    /* Below 900px the row wraps; give capture its own full-width line instead of
       squeezing nine buttons next to two. */
    @media (max-width:900px){ .quick-task-actions .quick-create { flex:1 1 100%; margin:8px 0 0; } }

    /* The sticky/overflow-hidden sidebar lock that used to live here was reverted — it
       caused worse problems than the scroll it was trying to remove. The sidebar keeps the
       plain scrolling behaviour defined in its base rule. */


    /* ==================================================================
       PHASE 7 — MOBILE. Every rule below is inside a max-width media query.
       Produced by a six-way analysis + two adversarial reviews; 23 proposals
       were rejected (see PRODUCT_ROADMAP.md). Appended at the END of app.css
       deliberately: later sub-blocks are meant to win ties against earlier ones.
       ================================================================== */

    /* 1 · Shell — content padding + bleed token
       Replaces spec 3's three-breakpoint `--bleed` cascade (16/10/14 at 900/720/680) with one value. `padding-inline` overrides only the horizontal sides of the three existing `padding` shorthands (app.css:635, 710, 1312) while leaving their vertical values — including the `calc(80px + env(safe-area-inset-bottom))` at 720 — intact, because it is later in source order. One padding number across the whole mobile band means the bleed token can never drift out of sync with it, which was the stated failure mode of the three-declaration version. `--bleed` inherits to #content's children. */
@media (max-width: 900px) {
  .content { padding-inline: 14px; --bleed: 14px; }
}

    /* 2 · Topbar — the wrapped-header fix
       Cancels `flex-wrap:wrap;row-gap:8px` (app.css:1566-1568) and `height:58px` (app.css:706), which together laid 141px of header content out over three rows inside a 58px box with `overflow:visible` — rows 2 and 3 rendered on top of the page, producing the `globalSearch over <button>` overlap on nearly every page. Adopts reviewer 1's fix for the hard-coded dropdown offset: `--topbar-h` is declared on `.topbar` alongside `min-height`, so the fixed `.global-results` can never disagree with the bar's real height. Five controls leave because each has another route (topBrand→'My Day' nav item; smartDa */
@media (max-width: 900px) {
  .topbar {
    --topbar-h: 56px;
    flex-wrap: nowrap;
    row-gap: 0;
    height: auto;
    min-height: var(--topbar-h);
    gap: 4px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }
  #topBrand,
  #smartDayTop,
  #accountMenuWrap,
  .topbar .top-spacer,
  .topbar .sync-status { display: none; }

  .topbar .search { flex: 1 1 auto; order: 0; min-width: 44px; }
  .topbar .search #globalSearch { height: 44px; min-height: 44px; padding: 0 10px 0 36px; font-size: 16px; }
  .topbar .search .icon { top: 50%; transform: translateY(-50%); }

  .topbar .icon-btn,
  .topbar #newTaskTop {
    flex: 0 0 44px; width: 44px; min-width: 44px;
    height: 44px; min-height: 44px; padding: 0; border-radius: 8px;
  }
  .topbar .theme-toggle { order: 0; margin-left: 0; }

  .topbar .global-results {
    position: fixed; left: 8px; right: 8px; top: var(--topbar-h, 56px);
    width: auto; min-width: 0; max-width: none; max-height: 60vh;
  }
  .topbar .search:focus-within {
    position: absolute; left: 8px; right: 8px; width: auto; top: 0; height: 100%;
    display: flex; align-items: center; background: var(--panel); z-index: 12;
  }
  .topbar .search:focus-within #globalSearch { width: 100%; }

  .sidebar .profile .logout {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    display: grid; place-items: center; padding: 0; flex: 0 0 44px;
  }
}

    /* 3 · Type floor — 12px minimum
       One floor for all 392 TEXT findings. Three reviewer fixes are folded in. (a) Bare `.avatar` is REMOVED from the `!important` group — verified live that `.avatar{font-size:12px!important}` beat `.avatar.lg{19px}` (app.css:823) and `.avatar.xl{26px}` (app.css:837) on importance and collapsed 56px and 72px discs to 12px initials; `.avatar` already has `font-size:12px` at app.css:157 so it never needed a floor. Only the four genuinely-11/11.5px variants get a plain rule (each ties its app.css rule on specificity and wins on source order), and the single inline case gets an id-scoped `!important`.  */
@media (max-width: 900px) {
  small { font-size: max(12px, 0.8333em); }

  .badge, .sync-status, .column-chip, .card-meta, .health, .health-ok, .severity,
  .workstream, .record-sub, .record-provenance, .os-risk, .os-kicker, .os-health span,
  .os-card-head p, .os-kpi span, .method-chip, .method-recommendation span, .mix-pill,
  .tag-chip, .qp-chip, .quick-switch, .quick-create-label, .quadrant, .field-hint,
  .focus-cell span, .focus-method p, .capacity-head span, .tm-label, .day-tab-count,
  .day-tab small, .outcome-number, .today-section-head p, .metric-card .mtarget,
  .ns-metric .ns-name, .review-line .rl-main small, .profile-copy span, .profile-kpi span,
  .profile-fact span, .owner-legend, .bug-stat span, .company-stat span, .truth-block span,
  .brief-focus span, .brief-stat span, .brief-stat small, .team-card-head span,
  .team-load span, .daily-copy small, .pulse-id span, .pulse-metrics span, .pulse-blocker,
  .comment-meta small, .msg-date-sep, .msg-group-head strong, .msg-group-head small,
  .msg-channel .nav-count, .attention-badge, .chat-badge, .nav-label, .boot-loader-copy span,
  .sg-tip, .kb-row kbd, .kb-note, .drawer-body kbd, .more-fields > summary span,
  .wr-step h4 span, .wr-list li small, .tr-choice small, .sd-copy small, .sd-meta small,
  .ivy-title small, .ivy-suggest small, .nb-kicker, .nb-method, .next-flag,
  .feature-chip small, .launch-count span, .launch-owner, .launch-due, .health-copy small,
  .tl-hours, .agenda-item span, .untimed-label, .tray-task small, .cal-quick, .wk-dow,
  .wk-time, .time-label, .mini-weekdays span, .mini-day, .calendar-more, .day-count,
  .table-head, .record-table th, .member-table th, .login-eyebrow, .login-error,
  .login-form label, .login-kicker, .login-brandline small, .login-proof span,
  .login-pulse-copy span, .login-pulse-metrics span, .password-toggle, .auth-help,
  .powered, .login-trust, .search-filter-bar select,
  .record-id, .task-seq, .wsjf-chip, .chip-btn, .chip-date,
  .calendar-weekdays span, .calendar-task, .cal-time, .day-label, .day-number,
  .day-add { font-size: 12px; }

  .product-tag, .cal-prod { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .quick-link span span, .os-row small, .tl-block small, .pulse-item span,
  #content small:not([class]) { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }

  .avatar.sm, .comment-item .avatar, .mention-opt .avatar, .msg-item .avatar { font-size: 12px; }
  #accountAvatar { font-size: 12px !important; }

  #content .execution-kicker,
  #chatWidget .msg-time, #chatWidget .msg-author, #chatWidget .chat-badge-pulse { font-size: 12px; }

  #app [style*="font-size:11px"],   #app [style*="font-size: 11px"],
  #app [style*="font-size:11.5px"], #app [style*="font-size: 11.5px"],
  #app [style*="font-size:10.5px"], #app [style*="font-size: 10.5px"] { font-size: 12px !important; }

  .nav-group-toggle { font-size: 12px !important; }

  .attention-badge { height: auto; min-height: 18px; line-height: 1; padding: 2px 5px; }
  .chat-badge { height: auto; min-height: 20px; line-height: 1; padding: 3px 5px; }
}

    /* 3b · Login trust row (repairs app.css:704)
       app.css:704 crushes this to 7.5px — the worst type in the app — purely to keep three labels on one line. At 390px each grid cell is ~104px so 12px labels wrap to two lines; `align-items:start` keeps the ::before dots on the first line instead of centred in a two-line block. 720px because that is the breakpoint of the rule being repaired. */
@media (max-width: 720px) {
  .login-trust { font-size: 12px; gap: 6px 8px; align-items: start; }
  .login-trust span { line-height: 1.25; overflow-wrap: anywhere; }
}

    /* 4 · Widgets, cards, composer, drawers
       `.metric-grid` resolves the spec-3/spec-5 collision: ONE value everywhere (no hybrid where the Execution & Roadmap row renders 2 hard tracks while its neighbours auto-fill), the blanket rule carries NO `!important` (it beats app.css:207 on source order alone, so per-page overrides stay possible), and `!important` is spent only on the one attribute-scoped selector that must defeat the inline `grid-template-columns: repeat(4, 1fr)` at app.js:5295. `.quick-add` must sit after app.css:1542, which also uses `!important`; source order decides. `.tc-expand` 20x20→44x44 is the worst target in the app, */
@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
  .metric-grid[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)) !important; }

  .quick-add { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .quick-add select, .quick-add .quick-due, .quick-add input[type="date"] {
    height: 44px !important; min-height: 44px; font-size: 16px;
  }
  .quick-task-actions .btn { min-height: 44px; }
  .quick-create-btn, .quick-task-actions .quick-create-btn { min-height: 44px; padding: 0 12px; }

  .tc-expand { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .tc-meta, .tc-actions, .tc-detail { margin-left: 0; }
  .tc-resched { gap: 8px; }
  .chip-btn { min-height: 44px; padding: 0 14px; }
  .chip-date { min-height: 44px; width: 44px; padding: 0 4px; }
  .chip-date:hover, .chip-date:focus { width: 150px; }

  .drawer-body { overscroll-behavior: contain; }
  .drawer-head .icon-btn, .drawer-foot .icon-btn { min-width: 44px; min-height: 44px; }
  .drawer-body .btn { min-height: 44px; }
  .drawer-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.title-input),
  .drawer-body select, .drawer-body .title-input { min-height: 44px; }
  .drawer-body textarea { min-height: 96px; }
  .drawer-body kbd, .more-fields > summary span { height: 22px; min-width: 22px; }
  .more-fields > summary { min-height: 44px; }
}

    /* 4b · Drawer geometry + iOS zoom (720 only)
       Three reviewer fixes, all breakpoint corrections. (a) `.drawer{width:auto}` was proposed at ≤900, but base `.drawer` (app.css:303) has `right:0` and NO `left`; `left:0` first appears at app.css:728 inside ≤720. At ≤900 `width:auto` therefore shrink-to-fits the viewport — measured 520px→860px at an 860px window, turning the side panel into a full-screen sheet for any desktop user with a window between 721 and 900px. Moved to 720 where the premise holds; verified 390px→390w@left0, 660px→660w@left0, 860px→520w@left340 (unchanged). (b) 16px is split off to ≤720 because `.field-grid` only collapses */
@media (max-width: 720px) {
  .drawer { width: auto; max-width: 100vw; }
  .drawer-body input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.title-input),
  .drawer-body select, .drawer-body textarea { font-size: 16px; }
  .layout-switch { box-shadow: -10px 0 12px var(--panel); }
}

    /* 4c · Day ritual band (repairs app.css:1235)
       Invisible to the audit but the highest-value single fix in the set. app.css:1235 flips `.day-ritual` to `flex-direction: column` at ≤640 while `.dr-copy` keeps `flex: 1 1 320px` (app.css:1224) — in column direction the basis is the HEIGHT, so a ~90px block of copy renders 320px tall and the band renders 402px. `flex:0 1 auto` restores content height (measured 402px→140px) and is inert in the row layout above 640px. 640 matches the breakpoint of the rule being repaired. */
@media (max-width: 640px) {
  .day-ritual { padding: 14px; gap: 12px; }
  .day-ritual .dr-copy { flex: 0 1 auto; }
}

    /* 4d · Narrow-phone density (repairs app.css:665 block)
       A 190px floor gives one card per row at 360px, which wastes the screen on 'Overdue Tasks / 211'; 132px yields a clean 2-up at 360 and 3-up at 560. The inline `padding:20px` on weekly-review's `.workspace` (app.js:5285, 5293, 5316, 5342, 5357) eats 40 of 332 available px. `.kb-row`'s fixed 130px key column (app.css:1154) is 76px empty against a 54px widest kbd. */
@media (max-width: 560px) {
  .metric-grid { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); }
  .metric-grid[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)) !important; }
  #content .workspace[style*="padding:20px"] { padding: 14px !important; }
  .kb-row { grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
}

    /* 5 · Overflow — full-bleed bands, weekly-review shell, page-head actions
       Resolves three collisions. (a) The bleed keeps spec 3's PRESERVE treatment and spec 5's two neutralising rules (`margin:0!important; padding:0; background:none`) are deleted outright — they were (1,1,1) against (1,1,0) and would have won on specificity no matter the order, insetting the notes and messages `height:calc(100vh - 60px)` app shells by 14px on each side. One selector covers all three inline bands (app.js:1242, 3091, 4558) because `margin:-24px -24px 24px 24px` contains the substring; only the horizontal sides are overridden so the today banner keeps its intended top bleed. Verified  */
@media (max-width: 900px) {
  #content > [style*="margin:-24px"],
  #content > [style*="margin: -24px"] {
    margin-left: calc(-1 * var(--bleed, 14px)) !important;
    margin-right: calc(-1 * var(--bleed, 14px)) !important;
  }
  #content > div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important;
  }
  #content > div[style*="grid-template-columns: 2fr 1fr"] > * { min-width: 0; }

  .head-actions { flex-wrap: wrap; gap: 8px; }
  .page-head > :first-child { min-width: 0; }
  .page-head .head-actions .btn { flex: 1 1 150px; min-height: 44px; }
}

    /* 6 · Calendar — month grid becomes a day list
       A 7-column grid gives each cell ~48px at 360px, so the ~245 sub-44px controls per calendar page are set by the column count, not by padding — the grid has to stop being a grid. Placed AFTER block 3 so it wins every shared calendar selector on source order (its values are sized for the single-column list; block 3's flat 12px was a floor for the 7-column grid). Spec 2's `.day-add{display:none}` and its ≤560 `.calendar-day .cal-prod{display:none}` are BOTH deleted — the latter was (0,2,0) and would have beaten this block on specificity, silently hiding the product chip at exactly the two widths t */
@media (max-width: 720px) {
  .calendar-toolbar { flex-wrap: wrap; min-height: 0; gap: 8px; padding: 10px; }
  .calendar-toolbar h2 { order: -1; flex: 1 1 100%; font-size: 17px; line-height: 1.25; }
  .calendar-toolbar .calendar-actions { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .calendar-toolbar .calendar-actions:last-child { flex: 1 1 100%; flex-wrap: wrap; }
  .calendar-toolbar .calendar-actions .btn { min-height: 44px; min-width: 44px; padding: 0 14px; }
  .calendar-toolbar .layout-switch { position: static; flex: 1 1 auto; min-width: 0; box-shadow: none; }
  .calendar-toolbar .layout-switch button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 13px; }
  .calendar-toolbar .layout-switch button[data-calendar-view="week"],
  .calendar-toolbar .layout-switch button[data-calendar-view="workweek"] { display: none; }
  .calendar-toolbar #switchCalendar { flex: 0 0 auto; }

  .calendar-month { overflow-x: hidden; }
  .calendar-weekdays { display: none; }
  .calendar-grid { display: block; min-width: 0; }
  .calendar-day.outside { display: none; }
  .calendar-day { min-height: 0; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }

  .day-label { height: auto; min-height: 52px; align-items: center; gap: 10px; padding: 4px 12px; font-size: 14px; }
  .day-number {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 60px; padding: 0 12px; border-radius: 10px; font-size: 15px;
  }
  .calendar-day.today .day-number { width: auto; height: auto; min-height: 44px; padding: 0 12px; border-radius: 10px; }
  .calendar-day:nth-child(7n+1) .day-number::before { content: "Mon "; }
  .calendar-day:nth-child(7n+2) .day-number::before { content: "Tue "; }
  .calendar-day:nth-child(7n+3) .day-number::before { content: "Wed "; }
  .calendar-day:nth-child(7n+4) .day-number::before { content: "Thu "; }
  .calendar-day:nth-child(7n+5) .day-number::before { content: "Fri "; }
  .calendar-day:nth-child(7n+6) .day-number::before { content: "Sat "; }
  .calendar-day:nth-child(7n)   .day-number::before { content: "Sun "; }

  .day-count { min-width: 26px; padding: 3px 8px; font-size: 12.5px; border-radius: 999px; }
  .day-add {
    display: inline-flex; align-items: center; justify-content: center; opacity: 1;
    min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px;
    color: var(--muted); font-size: 20px; line-height: 1;
  }
  .calendar-task {
    width: auto; display: block; min-height: 44px; margin: 4px 12px 0; padding: 11px 12px;
    border-left-width: 4px; border-radius: 8px; font-size: 13px; line-height: 1.35;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  #content .calendar-task small, #content .tray-task small { font-size: 12.5px; }
  .cal-time { font-size: 13px; }
  .cal-prod { font-size: 12.5px; padding: 1px 6px; }
  .calendar-more {
    display: block; width: auto; min-height: 44px; margin: 4px 12px 0;
    padding: 12px; border-radius: 8px; text-align: left; font-size: 13px;
  }
  .cal-quick { display: block; width: calc(100% - 24px); min-height: 44px; margin: 6px 12px 0; font-size: 16px; }
  .owner-legend { font-size: 12.5px; }

  .mini-cal { padding: 8px; }
  .mini-head .icon-btn { min-width: 44px; min-height: 44px; }
  .mini-weekdays { gap: 1px; }
  .mini-weekdays span { font-size: 12.5px; }
  .mini-grid { gap: 1px; }
  .mini-day { aspect-ratio: auto; min-height: 44px; font-size: 13px; border-radius: 8px; }

  .time-plan { max-height: none; overflow-y: visible; }
  .time-slot { grid-template-columns: 56px minmax(0, 1fr); min-height: 52px; }
  .time-label { font-size: 12.5px; padding: 12px 8px; }
  .planned-task { min-height: 44px; padding: 11px 12px; font-size: 13px; }
  .day-planner-date { font-size: 22px; }
  .untimed-label { font-size: 12.5px; flex-basis: 60px; }
  .unscheduled-tray { max-height: none; overflow: visible; }
  .day-backlog .check-item > button { min-height: 44px; }
  .day-backlog .check-item input { min-height: 44px; font-size: 16px; }
}

    /* 7 · Global tap-target floor (last — deliberately overrides everything above)
       Not in any of the six input specs, and worth more than all their individual tap rules combined: with everything above applied the audit still had 397 tap findings, almost all of them `.btn` at its base `min-height:36px` (app.css:84) and page form controls at 36–42px. This one block took 397→20 and is exactly what hard rule 5 asks for — padding/min-height only, no font-size touched. Placed LAST so it is the deliberate final say on any element the blocks above also size (every value it sets is 44px, so it agrees with them rather than fighting). `.icon-btn` at (0,1,0) is beaten by `.topbar .icon- */
@media (max-width: 900px) {
  .btn { min-height: 44px; }
  #content input:not([type=checkbox]):not([type=radio]):not([type=range]),
  #content select,
  #content textarea { min-height: 44px; }

  .top-action, .mobile-menu, .icon-btn { min-width: 44px; min-height: 44px; }
  .layout-switch button, .view-tab, .auth-tab, .phase-step, .nb-chip, .nb-title { min-height: 44px; }
  .view-tab { min-width: 44px; }
  .password-toggle { min-height: 44px; min-width: 44px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  #forgotLink { min-height: 44px !important; }
  #content input[type=checkbox], #content input[type=radio] { width: 22px; height: 22px; }
}

    /* 8 · View tabs must scroll, not squash.
       .view-tabs is overflow-x:auto but every child inherits flex-shrink:1, so instead of
       scrolling the row compressed its children: .layout-switch measured 2px wide and
       .view-date (154px) overflowed past the 360px row, which is the "viewDate over BUTTON"
       overlap the audit reported on my-work and all-tasks. Children of a scrolling row must
       keep their intrinsic size. */
    @media (max-width: 900px) {
      .view-tabs > * { flex: 0 0 auto; }
      .view-tabs .view-date { margin-left: 6px; }
    }

    /* 9 · The layout switch should scroll with the tabs, not sit on top of them.
       It is sticky-pinned to the right of .view-tabs with a white box-shadow to fade the
       row behind it. On a phone that means a 169px control permanently covering a 360px
       row — measured overlapping three view tabs at once. Now that the row scrolls
       properly (block 8), it can simply travel with the row. The shadow goes too: it is a
       hard-coded #fff that was never right in dark mode. */
    @media (max-width: 900px) {
      .view-tabs .layout-switch { position: static; box-shadow: none; margin-left: 6px; }
    }

    /* 10 · The quick-add toggles: the label is the tap target, not the box.
       A 44px checkbox looks absurd, so the box stays 22px and the <label> that wraps it
       carries the hit area. Tapping a label activates its input natively, so this is a real
       44px target, not a cosmetic one. */
    @media (max-width: 900px) {
      .quick-methods { gap: 6px; }
      .quick-switch { min-height: 44px; padding: 0 10px 0 8px; align-items: center; }
    }

    /* 11 · Bare checkboxes and the row menu in the task table.
       A checkbox cannot be given a 44px hit area without drawing a 44px box, so the two
       bulk-select inputs are now wrapped in a <label class="cb-hit"> that carries the area
       — native label activation, so it is a genuine target. The row menu was 30px. */
    @media (max-width: 900px) {
      .cb-hit { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
      .row-menu { min-width: 44px; min-height: 44px; }
    }