/* App styles. Tokens follow DESIGN.md (frozen names and values): warm paper, white bordered cards, one violet accent.
   The shell overrides --accent (and --brand-2, --font) from the tenant brand at boot, so agencies can theme the app.
   Older names (--brand, --line, --r-md...) stay as aliases so module styles keep working. */

/* ---------- fonts (self-hosted; the CSP only allows 'self' styles) ---------- */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/dm-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/caveat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/caveat-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  /* Frozen tokens (DESIGN.md) */
  --bg:#FAF8F5;
  --surface:#FFFFFF;
  --surface-2:#F3F0EA;
  --border:#E9E4DC;
  --border-strong:#D9D2C7;
  --ink:#1C1B1A;
  --text:#3A3835;
  --muted:#7A746C;
  --accent:#5B47E8;
  --accent-hover:#4A37D6;
  --accent-ink:#FFFFFF;
  --accent-soft:#EEEBFE;
  --highlight:#FFF0A6;
  --good:#15803D;--good-soft:#E7F6EC;
  --warn:#B45309;--warn-soft:#FDF3E1;
  --bad:#C2410C;--bad-soft:#FDECE4;
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow:0 1px 2px rgba(28,27,26,.04),0 1px 1px rgba(28,27,26,.03);
  --shadow-pop:0 12px 32px -12px rgba(28,27,26,.18);
  --font:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Caveat","Comic Sans MS",cursive;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* App extras (not in the frozen set) */
  --surface-3:#EAE5DC;
  --faint:#A29B91;
  --info:#3B5BA9;--info-soft:#EAF0FB;
  --brand-2:#E8B04A;
  --rank-1:#16a34a;--rank-2:#65a30d;--rank-3:#ca8a04;--rank-4:#ea580c;--rank-5:#dc2626;--rank-none:#9ca3af;
  --sidebar:240px;
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);

  /* Aliases for older names used by module styles */
  --brand:var(--accent);--brand-ink:var(--accent-ink);--brand-text:var(--accent);
  --line:var(--border);--line-strong:var(--border-strong);
  --good-bg:var(--good-soft);--warn-bg:var(--warn-soft);--bad-bg:var(--bad-soft);--info-bg:var(--info-soft);
  --r-sm:var(--radius-sm);--r-md:10px;--r-lg:var(--radius);
  --shadow-1:var(--shadow);--shadow-2:var(--shadow-pop);
  --mono:var(--font-mono);--focus:var(--accent);
}
/* Warm dark theme: same token names, night values. */
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#161513;--surface:#1E1D1A;--surface-2:#272522;--surface-3:#312E2A;--border:#34312C;--border-strong:#454039;
  --ink:#F4F1EC;--text:#D9D4CC;--muted:#A39C92;--faint:#7D776E;
  --accent-soft:color-mix(in srgb,var(--accent) 22%,#1E1D1A);--brand-text:color-mix(in srgb,var(--accent) 60%,white);
  --good:#4ADE80;--good-soft:#14301F;--warn:#FBBF24;--warn-soft:#33270F;--bad:#FB923C;--bad-soft:#3A1E12;--info:#93B4F5;--info-soft:#1A2540;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-pop:0 16px 40px -12px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){:root[data-theme=auto]{
  color-scheme:dark;
  --bg:#161513;--surface:#1E1D1A;--surface-2:#272522;--surface-3:#312E2A;--border:#34312C;--border-strong:#454039;
  --ink:#F4F1EC;--text:#D9D4CC;--muted:#A39C92;--faint:#7D776E;
  --accent-soft:color-mix(in srgb,var(--accent) 22%,#1E1D1A);--brand-text:color-mix(in srgb,var(--accent) 60%,white);
  --good:#4ADE80;--good-soft:#14301F;--warn:#FBBF24;--warn-soft:#33270F;--bad:#FB923C;--bad-soft:#3A1E12;--info:#93B4F5;--info-soft:#1A2540;
  --shadow:0 1px 2px rgba(0,0,0,.4);--shadow-pop:0 16px 40px -12px rgba(0,0,0,.6);
}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.2;font-weight:700;letter-spacing:-.015em}
h1{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
h2{font-size:18px}h3{font-size:16px}h4{font-size:14px}
p{margin:0}
a{color:var(--brand-text);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent-soft);color:var(--ink)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.mono{font-family:var(--font-mono)}.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hand{font-family:var(--font-hand);font-weight:700}
mark,.marker{background:linear-gradient(transparent 55%,var(--highlight) 55%);color:inherit;padding:0 2px}
code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border-radius:5px;padding:1px 5px}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 12px 14px;scrollbar-width:thin}
.brandmark{display:flex;align-items:center;gap:10px;padding:2px 10px 18px;text-decoration:none;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-.02em;min-width:0}
.brandmark:hover{color:var(--ink)}
.brandmark img{max-height:30px;max-width:160px}
.brandmark .logo-dot,.logo-dot{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:15px;font-weight:800;flex:none;letter-spacing:0}
.loc-switch{min-width:0}
.loc-switch select,.loc-switch .input,.loc-switch input[type=search]{width:100%}
.nav{display:flex;flex-direction:column;gap:1px}
.nav-section{font-size:12px;color:var(--faint);font-weight:600;padding:16px 12px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:0 12px;height:36px;border-radius:var(--radius-sm);color:var(--text);text-decoration:none;font-weight:500;font-size:14.5px;min-width:0}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current=page]{background:var(--accent-soft);color:var(--brand-text);font-weight:600}
.nav a .count{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;padding:0 7px;line-height:19px;min-width:19px;text-align:center}
.nav a.soon{color:var(--faint)}
.nav svg,.icon{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav svg{color:var(--muted)}
.nav a[aria-current=page] svg,.nav a:hover svg{color:inherit}
.nav-help{margin-top:auto;padding-top:10px}.nav-help+.sidebar-foot{margin-top:8px}
.nav-backdrop{display:none}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding:12px 4px 0;display:flex;align-items:center;gap:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--brand-text);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.sidebar-foot .who{min-width:0;flex:1;font-size:12.5px;line-height:1.3}.sidebar-foot .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-foot .who b{display:block;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;display:flex;align-items:center;gap:12px;padding:0 32px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:5}
.topbar .crumb{color:var(--muted);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .crumb b{color:var(--ink);font-weight:600}
.topbar .spacer{flex:1}
.topbar .loc-switch{display:flex;align-items:center;gap:10px;flex:0 1 280px}
.topbar .loc-switch select,.topbar .loc-switch input{height:38px;min-height:38px;background-color:var(--surface);font-weight:600;color:var(--ink)}
.topbar .loc-switch a{white-space:nowrap;font-weight:600;text-decoration:none}
.topbar-brand{display:none}
.btn.menu-btn{display:none}
.content{padding:32px 32px 72px;max-width:1240px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head>div:first-child{min-width:0}
.page-head p{color:var(--muted);margin-top:6px;font-size:15.5px;max-width:68ch}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.span-2{grid-column:span 2}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 22px 0}
.card-head h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.card-head .sub{color:var(--muted);font-size:13px;margin-top:2px}
.card-head>.row{flex-wrap:wrap;justify-content:flex-end}
.card-body{padding:16px 22px 22px}
.card-body:first-child{padding-top:22px}
.card-body.flush{padding:0}
.card-head+.card-body.flush{margin-top:16px;border-top:1px solid var(--border)}
.card-body.flush{border-radius:0 0 var(--radius) var(--radius)}
.card-body.flush:first-child{overflow:hidden;border-radius:var(--radius)}
.card-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:color-mix(in srgb,var(--surface-2) 40%,var(--surface));border-radius:0 0 var(--radius) var(--radius)}
.stat{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.stat .label{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.3}
.stat .value{font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.stat .hint{font-size:12.5px;color:var(--muted);line-height:1.4}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;letter-spacing:0;border-radius:var(--radius-pill);padding:2px 8px;line-height:1.35;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .delta{margin-left:0}
.delta.up{color:var(--good);background:var(--good-soft)}.delta.down{color:var(--bad);background:var(--bad-soft)}
.delta.up::before{content:"↑"}.delta.down::before{content:"↓"}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:600 14px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;box-shadow:0 1px 1px rgba(28,27,26,.04)}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}
.btn .icon{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px rgba(28,27,26,.12),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
.btn.danger:hover{background:var(--bad-soft)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{height:32px;padding:0 11px;font-size:13px;gap:5px}
.btn.sm .icon{width:15px;height:15px}
.btn.lg{height:46px;padding:0 22px;font-size:15px}
.btn:disabled,.btn[aria-busy=true]{opacity:.55;cursor:default}
.btn[aria-busy=true]::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
input,select,textarea{font:inherit;font-size:14.5px;color:var(--ink);background-color:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;min-height:40px;width:100%;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--border-strong) 70%,var(--muted))}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A746C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
select[multiple],select[size]{background-image:none;padding-right:12px}
textarea{min-height:96px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--surface-2);color:var(--muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:17px;height:17px;min-height:0;padding:0;accent-color:var(--accent);box-shadow:none;cursor:pointer;flex:none}
input[type=color]{padding:3px;cursor:pointer}
input[type=range]{padding:0;min-height:0;border:0;accent-color:var(--accent);box-shadow:none}
input[type=file]{padding:6px;min-height:0}
input[type=file]::file-selector-button{font:600 13px var(--font);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--ink);border-radius:6px;padding:6px 10px;margin-right:10px;cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field .hint{font-size:13px;color:var(--muted)}
.field .error{font-size:13px;color:var(--bad)}
.form{display:flex;flex-direction:column;gap:18px}
.form .row-2,.row-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.check{display:flex;align-items:center;gap:9px;font-weight:500;cursor:pointer}
.toggle{position:relative;width:38px;height:22px;flex:none}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle span{position:absolute;inset:0;background:var(--surface-3);border-radius:var(--radius-pill);transition:.15s;cursor:pointer;border:1px solid var(--border-strong)}
.toggle span::after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(28,27,26,.2)}
.toggle input:checked+span{background:var(--accent);border-color:var(--accent)}
.toggle input:checked+span::after{transform:translateX(16px)}
.toggle input:focus-visible+span{box-shadow:var(--focus-ring)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);min-height:40px;align-items:center}
.chips:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring)}
.chips input{border:0;outline:0;flex:1;min-width:120px;padding:2px 6px;min-height:26px;box-shadow:none!important}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);color:var(--brand-text);border-radius:var(--radius-pill);padding:2px 4px 2px 10px;font-size:13px;font-weight:600}
.chip button{border:0;background:none;color:inherit;opacity:.7;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;border-radius:50%}
.chip button:hover{opacity:1}
/* Pill switchers in a soft track (DataFast style). */
.segmented,.tabs{display:inline-flex;align-items:center;gap:2px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);max-width:100%;overflow-x:auto;scrollbar-width:none;vertical-align:middle}
.segmented::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.tabs{display:flex;width:max-content;margin-bottom:22px}
.segmented button,.tabs button{flex:none;border:0;background:transparent;height:32px;padding:0 14px;border-radius:var(--radius-pill);font:600 13.5px var(--font);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.segmented button:hover,.tabs button:hover{color:var(--ink)}
.segmented button[aria-pressed=true],.tabs button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(28,27,26,.08),0 0 0 1px var(--border)}
.segmented button:focus-visible,.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:2px 9px;font-size:12px;font-weight:600;line-height:18px;background:var(--surface-2);color:var(--muted);white-space:nowrap;vertical-align:middle}
.badge.good{background:var(--good-soft);color:var(--good)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.brand{background:var(--accent-soft);color:var(--brand-text)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;max-width:100%}
table.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.table th{position:sticky;top:0;z-index:1;text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}
.table th:first-child,.table td:first-child{padding-left:20px}
.table th:last-child,.table td:last-child{padding-right:20px}
.table th.sortable{cursor:pointer;user-select:none}.table th.sortable:hover{color:var(--ink)}
.table th[aria-sort]{color:var(--ink)}
.table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table td b,.table td strong{color:var(--ink);font-weight:600}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.table tr.clickable{cursor:pointer}.table tr.clickable:hover td{background:color-mix(in srgb,var(--surface-2) 75%,var(--surface))}
.table .right{text-align:right}.table .center{text-align:center}
.table td.right,.table td.center{font-variant-numeric:tabular-nums}
.table td.wrap{white-space:normal;max-width:420px}
.card-body:not(.flush)>.table-wrap{border:1px solid var(--border);border-radius:var(--radius-sm)}

/* ---------- empty, loading, notice ---------- */
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty .empty-icon{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 16px;color:var(--brand-text)}
.empty .empty-icon .icon{width:24px;height:24px}
.empty h3{margin-bottom:6px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.empty p{max-width:46ch;margin:0 auto 18px;font-size:14.5px}
.empty p:last-child{margin-bottom:0}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:28px 4px}
.spinner{width:17px;height:17px;border:2px solid var(--border-strong);border-right-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex:none}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius-sm);min-height:14px}
@keyframes sk{to{background-position:-200% 0}}
.notice{border-radius:10px;padding:12px 14px;background:var(--info-soft);color:var(--info);font-size:14px;display:flex;gap:10px;align-items:flex-start;border:1px solid color-mix(in srgb,currentColor 14%,transparent);line-height:1.5}
.notice>.icon{margin-top:2px}
.notice>div{min-width:0;flex:1}
.notice.warn{background:var(--warn-soft);color:var(--warn)}.notice.bad{background:var(--bad-soft);color:var(--bad)}.notice.good{background:var(--good-soft);color:var(--good)}
.notice b{color:inherit}
.notice a{color:inherit;font-weight:600}

/* ---------- copy-ready (manual GBP mode) ---------- */
.copy-ready{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:16px;background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
.copy-field{margin-top:12px}
.copy-field .label{font-size:12.5px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.copy-field pre{margin:0;white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font:14px/1.55 var(--font);color:var(--ink)}
.copy-ready ol{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:14px}

/* ---------- modal & toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(28,27,26,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;z-index:50;animation:fade .14s}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop),0 0 0 1px var(--border);width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:pop .16s ease-out}
.modal.wide{width:min(900px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px 6px}
.modal-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.modal-body{padding:14px 24px 22px;overflow:auto}
.modal-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:color-mix(in srgb,var(--surface-2) 40%,var(--surface));border-radius:0 0 16px 16px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.985)}}
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:calc(100vw - 32px)}
.toast{background:var(--ink);color:var(--surface);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow-pop);font-weight:500;font-size:14px;max-width:400px;animation:pop .18s ease-out;display:flex;align-items:center;gap:9px}
.toast.good::before,.toast.bad::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.toast.good::before{background:#4ADE80}
.toast.bad{background:var(--bad);color:#fff}.toast.bad::before{background:#fff}

/* ---------- charts ---------- */
.chart{width:100%;display:block;overflow:visible}
.chart text{fill:var(--muted);font:500 11.5px var(--font);font-variant-numeric:tabular-nums}
.chart .gridline{stroke:var(--border);stroke-dasharray:3 4}
.chart .baseline{stroke:var(--border-strong)}
.chart .bar{transition:opacity .12s}
.chart .bar:hover{opacity:.8}
.legend{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text);font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 10px 3px 7px;white-space:nowrap}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.heatmap-wrap{position:relative;display:inline-block;max-width:100%;padding:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.heatmap-wrap canvas{max-width:100%;height:auto;border-radius:10px;background:var(--surface);display:block}
.score-ring{position:relative;display:inline-grid;place-items:center}
.score-ring b{position:absolute;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- auth & public pages ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 500px at 50% -10%,var(--accent-soft),transparent 70%),var(--bg)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-pop);padding:32px}
.auth-card .brandmark{padding:0}
.auth-card h1{margin:22px 0 6px;font-size:30px}
.auth-card .form .btn.primary{width:100%}
body.public{background:var(--bg)}
.public-head{display:flex;align-items:center;gap:10px;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);font-weight:800;letter-spacing:-.02em;font-size:16px;color:var(--ink)}
.public-logo{max-height:32px}
.public-main{max-width:680px;margin:0 auto;padding:40px 20px 72px}
.public-main h1{margin-bottom:12px;font-size:32px}
.public-main h2{margin:24px 0 8px}
.public-main>p{font-size:16px}
.public-main .btn{margin-top:10px}
.public-main form .btn,.public-main .row .btn{margin-top:0}
.approve-image{max-width:100%;border-radius:var(--radius);margin:14px 0;border:1px solid var(--border)}
.approve-text{white-space:pre-wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:14px 0}
.approve-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
body.embed{background:transparent}
body.embed .public-main{padding:12px;max-width:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){.content{padding:28px 24px 64px}.topbar{padding:0 24px}}
@media (max-width:1000px){.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  h1{font-size:24px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .topbar{height:56px;padding:0 12px;gap:8px}
  .topbar .crumb{display:none}
  .topbar-brand{display:flex;align-items:center;min-width:0;flex:none;text-decoration:none}
  .topbar-brand img{max-height:26px;max-width:110px}
  .topbar-brand .logo-dot{width:28px;height:28px;font-size:14px}
  .topbar .loc-switch{flex:1 1 auto;min-width:0}
  .topbar .loc-switch a{display:none}
  .topbar>.badge{min-width:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(280px,85vw);z-index:40;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-pop)}
  .shell.nav-open .sidebar{transform:none}
  .shell.nav-open .nav-backdrop{display:block;position:fixed;inset:0;z-index:39;background:rgba(28,27,26,.35)}
  .btn.menu-btn{display:inline-flex;flex:none;width:38px;height:38px;padding:0;color:var(--ink)}
  .btn.menu-btn .icon{width:20px;height:20px}
  .content{padding:20px 16px 64px}
  .page-head{margin-bottom:18px;align-items:flex-start}
  .grid.c2,.grid.c3,.form .row-2,.row-2{grid-template-columns:minmax(0,1fr)}
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.c4 .stat{padding:14px 14px 16px}
  .grid.c4 .stat .value{font-size:24px}
  .span-2{grid-column:auto}
  .card-head{padding:16px 16px 0;flex-wrap:wrap}
  .card-body{padding:14px 16px 18px}
  .card-body:first-child{padding-top:18px}
  .card-foot{padding:12px 16px}
  .table th:first-child,.table td:first-child{padding-left:16px}
  .table th:last-child,.table td:last-child{padding-right:16px}
  .modal-backdrop{padding:10px}
  .modal{max-height:calc(100vh - 20px)}
  .modal-head{padding:18px 18px 4px}.modal-body{padding:12px 18px 18px}.modal-foot{padding:12px 18px}
  .toasts{left:16px;right:16px;bottom:16px}
  .public-main{padding:28px 16px 56px}
  .public-main h1{font-size:26px}
}
@media (max-width:420px){.topbar>.badge{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.sidebar,.topbar,.toasts{display:none!important}.shell{display:block}.content{padding:0;max-width:none}.card{box-shadow:none;break-inside:avoid}body{background:#fff}}
.topbar .loc-switch+.crumb{border-left:1px solid var(--border-strong);padding-left:12px}
.chart .pt{transition:opacity .12s}
.chart .pt.quiet{opacity:0}
.chart .pt.quiet:hover{opacity:1}
.chart-wrap{min-width:0}
.delta.has-arrow::before{content:none}
.dash-row{flex-wrap:nowrap;align-items:baseline;gap:12px}
.dash-row>span{flex:1;min-width:0}
.dash-row>b{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:760px){.table td:first-child{min-width:150px}}
.row>.segmented,.row>.tabs{min-width:0}

/* =====================================================================================================
   Round 2: module hues, icon chips, Home hero and bento, live maps, bottom tab bar.
   Hue tokens are documented in DESIGN.md. Motion: 120-150ms hover, 200-250ms enter, 150-200ms exit.
   ===================================================================================================== */
:root{
  --hue-violet:#5B47E8;--hue-violet-soft:#EEEBFE;
  --hue-blue:#2F6FEB;--hue-blue-soft:#E8F0FE;
  --hue-teal:#0F8A7E;--hue-teal-soft:#E0F3F0;
  --hue-amber:#B7791F;--hue-amber-soft:#FCF1DC;
  --hue-rose:#D2416E;--hue-rose-soft:#FCE8EF;
  --hue-sky:#0E86C2;--hue-sky-soft:#E1F2FA;
  --hue-green:#2F8F46;--hue-green-soft:#E5F4E9;
  --hue-orange:#D2602A;--hue-orange-soft:#FDEBE1;
  --hue-slate:#6B6560;--hue-slate-soft:#F0EDE8;
  --star:#F5A524;
  --tint:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--bg)) 0%,var(--bg) 55%,color-mix(in srgb,var(--hue-amber) 8%,var(--bg)) 100%);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --tabbar-h:64px;
}
:root[data-theme=dark]{--hue-violet-soft:#2A2550;--hue-blue-soft:#1B2A47;--hue-teal-soft:#14302C;--hue-amber-soft:#33280F;--hue-rose-soft:#3A1A26;--hue-sky-soft:#13303F;--hue-green-soft:#163020;--hue-orange-soft:#3A2015;--hue-slate-soft:#2C2A27;
  --hue-violet:#A99CFF;--hue-blue:#86A9F6;--hue-teal:#5CCDBF;--hue-amber:#F2C064;--hue-rose:#F08AA8;--hue-sky:#6CC3EC;--hue-green:#7AD08F;--hue-orange:#F29A6B;--hue-slate:#B5AEA5}
@media (prefers-color-scheme:dark){:root[data-theme=auto]{--hue-violet-soft:#2A2550;--hue-blue-soft:#1B2A47;--hue-teal-soft:#14302C;--hue-amber-soft:#33280F;--hue-rose-soft:#3A1A26;--hue-sky-soft:#13303F;--hue-green-soft:#163020;--hue-orange-soft:#3A2015;--hue-slate-soft:#2C2A27;
  --hue-violet:#A99CFF;--hue-blue:#86A9F6;--hue-teal:#5CCDBF;--hue-amber:#F2C064;--hue-rose:#F08AA8;--hue-sky:#6CC3EC;--hue-green:#7AD08F;--hue-orange:#F29A6B;--hue-slate:#B5AEA5}}
.hue-violet{--h:var(--hue-violet);--hs:var(--hue-violet-soft)}.hue-blue{--h:var(--hue-blue);--hs:var(--hue-blue-soft)}.hue-teal{--h:var(--hue-teal);--hs:var(--hue-teal-soft)}
.hue-amber{--h:var(--hue-amber);--hs:var(--hue-amber-soft)}.hue-rose{--h:var(--hue-rose);--hs:var(--hue-rose-soft)}.hue-sky{--h:var(--hue-sky);--hs:var(--hue-sky-soft)}
.hue-green{--h:var(--hue-green);--hs:var(--hue-green-soft)}.hue-orange{--h:var(--hue-orange);--hs:var(--hue-orange-soft)}.hue-slate{--h:var(--hue-slate);--hs:var(--hue-slate-soft)}

/* ---------- icon chips, avatars, stars ---------- */
.ichip{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--hs);color:var(--h)}
.ichip .icon{width:17px;height:17px;stroke-width:2}
.ichip.sm{width:26px;height:26px;border-radius:7px}.ichip.sm .icon{width:14px;height:14px}
.ichip.lg{width:40px;height:40px;border-radius:11px}.ichip.lg .icon{width:20px;height:20px}
.avatar-i{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--hs);color:var(--h);font-weight:700;font-size:13px;letter-spacing:.01em}
.avatar-i.sm{width:28px;height:28px;font-size:11.5px}.avatar-i.lg{width:44px;height:44px;font-size:15px}
.stars{position:relative;display:inline-block;line-height:1;letter-spacing:1px;white-space:nowrap;vertical-align:middle}
.stars-bg{color:var(--border-strong)}.stars-fg{position:absolute;left:0;top:0;width:var(--w);overflow:hidden;color:var(--star)}

/* ---------- link cards: the whole card is the link ---------- */
.card.lc{display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;text-decoration:none;cursor:pointer;padding:20px 22px;gap:14px;border-color:transparent;box-shadow:0 0 0 1px var(--border),var(--shadow);
  transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out)}
.card.lc:hover{color:inherit;transform:translateY(-2px);box-shadow:0 0 0 1px var(--border-strong),0 10px 24px -14px rgba(28,27,26,.28)}
.card.lc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lc-head{display:flex;align-items:center;gap:12px;min-width:0}
.lc-title{min-width:0;flex:1}.lc-title h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em}.lc-title .sub{color:var(--muted);font-size:13px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-go{color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity .14s,transform .14s var(--ease-out)}
.lc-go .icon{width:18px;height:18px}
.card.lc:hover .lc-go,.card.lc:focus-visible .lc-go{opacity:1;transform:none;color:var(--accent)}
.lc-body{min-width:0}.lc-foot{margin-top:auto;font-size:13px;color:var(--muted)}
.big{font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
.big small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px}
.minibars{display:flex;align-items:flex-end;gap:4px}
.minibars span{flex:1;min-width:4px;border-radius:4px 4px 2px 2px;background:var(--h);opacity:.85;transform-origin:bottom;animation:grow .4s var(--ease-out) both}
.minibars span:nth-child(odd){opacity:.55}
@keyframes grow{from{transform:scaleY(.1);opacity:0}}
.distbars{display:flex;flex-direction:column;gap:5px}
.distbars .r{display:grid;grid-template-columns:22px 1fr 32px;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.distbars .t{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}.distbars .t i{display:block;height:100%;border-radius:999px;background:var(--star)}
.distbars .r b{text-align:right;color:var(--text);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--text);white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.rank{color:#fff;min-width:28px;justify-content:center}

/* ---------- page header like the landing ---------- */
.page-head h1{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em}
.hand-note{font-family:var(--font-hand);font-weight:700;font-size:22px;color:var(--ink);line-height:1;transform:rotate(-3deg);display:inline-block}

/* ---------- Home hero ---------- */
.home{display:flex;flex-direction:column;gap:28px}
.hero-band{position:relative;border-radius:20px;background:var(--tint);padding:28px 30px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,var(--border))}
.hero-band::after{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 10%,transparent),transparent);pointer-events:none}
.hero-hi{color:var(--muted);font-weight:600;font-size:14.5px}
.hero-band h1{font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;margin-top:4px}
.hero-sub{color:var(--muted);margin-top:6px;font-size:14.5px}
.hero-score{display:flex;align-items:center;gap:22px;margin-top:22px;flex-wrap:wrap}
.hero-score .meta{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 220px}
.hero-band.solo{grid-template-columns:minmax(0,1fr) auto}
.hero-band.solo .hero-score{margin-top:0}
.hero-score .meta .lbl{font-size:13px;font-weight:600;color:var(--muted)}
.hero-score .meta .plain{font-size:15px;color:var(--text);max-width:34ch}
.hero-score .meta .plain b{color:var(--ink)}
.hero-map{position:relative;justify-self:end;width:100%;max-width:340px}
.hero-map>a{display:block;border-radius:16px;text-decoration:none;color:inherit}
.hero-map .cap{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);margin-top:8px}
.hero-map .cap b{color:var(--ink)}
.hero-map .hand-note{position:absolute;right:6px;top:-30px;font-size:21px;z-index:2}
.gauge{position:relative;display:inline-grid;place-items:center;flex:none}
.gauge svg{display:block}
.gauge .g-track{fill:none;stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-linecap:round}
.gauge .g-fill{fill:none;stroke-linecap:round;stroke:var(--accent)}
.gauge .g-fill.good{stroke:var(--good)}.gauge .g-fill.warn{stroke:#D99A1E}.gauge .g-fill.bad{stroke:var(--bad)}
.gauge .g-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.gauge .g-num b{font-size:46px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.gauge .g-num span{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
@media (prefers-reduced-motion:no-preference){.gauge .g-fill{animation:gfill .9s var(--ease-out) both}}
@keyframes gfill{from{stroke-dasharray:0 var(--c)}}
.chg{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums;width:max-content}
.chg .icon{width:14px;height:14px;stroke-width:2.4}
.chg.good{background:var(--good-soft);color:var(--good)}.chg.bad{background:var(--bad-soft);color:var(--bad)}.chg.flat{background:var(--surface-2);color:var(--muted)}

/* ---------- This week ---------- */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-title h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.sec-title .aside{color:var(--muted);font-size:13px}
.week{background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px var(--border),var(--shadow);overflow:hidden}
.week-prog{display:flex;align-items:center;gap:12px;padding:14px 20px;background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));font-size:13px;color:var(--muted)}
.week-prog .bar{flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}.week-prog .bar i{display:block;height:100%;background:var(--good);border-radius:999px;transition:width .25s var(--ease-out)}
.task{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 20px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);animation:enter .22s var(--ease-out) both}
.task:first-of-type{border-top:0}
.task .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0;color:transparent;transition:background .12s,border-color .12s,color .12s}
.task .tick:hover{border-color:var(--good);color:var(--good)}
.task .tick .icon{width:14px;height:14px;stroke-width:3}
.task.done .tick{background:var(--good);border-color:var(--good);color:#fff}
.task .t-title{font-weight:650;color:var(--ink);font-size:15px;line-height:1.35}
.task .t-detail{color:var(--muted);font-size:13px;margin-top:2px;max-width:68ch}
.task .t-src{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:6px}
.task .t-act{display:flex;align-items:center;gap:6px}
.task.done .t-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.task.done .t-detail,.task.done .t-act .btn.primary{display:none}
.task .impact{display:inline-flex;gap:2px}.task .impact i{width:4px;height:10px;border-radius:2px;background:var(--border-strong)}.task .impact i.on{background:var(--accent)}
@keyframes enter{from{opacity:0;transform:translateY(4px)}}

/* ---------- changes since last visit ---------- */
.changes{display:flex;flex-direction:column;gap:2px}
.change{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:10px;text-decoration:none;color:var(--text)}
a.change:hover{background:var(--surface-2);color:var(--ink)}
.change .txt{flex:1;min-width:0;font-size:14.5px}.change .when{color:var(--faint);font-size:12.5px;white-space:nowrap}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento>.w2{grid-column:span 2}.bento>.w3{grid-column:span 3}.bento>.w4{grid-column:span 4}.bento>.w6{grid-column:span 6}
.bento .tall{grid-row:span 2}
.secondary-stats{display:flex;gap:10px;flex-wrap:wrap}
.sstat{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:12px;padding:10px 14px 10px 10px;box-shadow:0 0 0 1px var(--border);text-decoration:none;color:var(--text);font-size:13.5px;transition:box-shadow .14s}
a.sstat:hover{box-shadow:0 0 0 1px var(--border-strong),0 6px 16px -10px rgba(28,27,26,.25);color:var(--ink)}
.sstat b{font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.krow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;min-width:0}
.krow>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.krow b{font-variant-numeric:tabular-nums;color:var(--ink);min-width:0;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- activity feed ---------- */
.feed h4{font-size:12px;color:var(--faint);font-weight:700;margin:14px 0 4px;letter-spacing:.01em}
.feed h4:first-child{margin-top:0}
.feed .ev{display:flex;align-items:center;gap:10px;padding:7px 0;min-width:0}
.feed .ev .m{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .ev time{font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- agency client list ---------- */
.clients{background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px var(--border),var(--shadow);overflow:hidden}
.crow{display:grid;grid-template-columns:minmax(0,1.6fr) 120px 110px minmax(0,1.6fr) 20px;gap:16px;align-items:center;padding:14px 20px;text-decoration:none;color:var(--text);border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);transition:background .12s}
.crow:first-child{border-top:0}
.crow:hover{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));color:var(--ink)}
.crow .nm{display:flex;align-items:center;gap:12px;min-width:0}.crow .nm b{color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .nm small{color:var(--muted);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .sc{display:flex;align-items:baseline;gap:8px}.crow .sc b{font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.crow .todo{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .go{color:var(--faint)}.crow:hover .go{color:var(--accent)}
.hdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--good)}.hdot.warn{background:#D99A1E}.hdot.bad{background:var(--bad)}

/* ---------- street-map heatmap ---------- */
.tmap{position:relative;width:100%;overflow:hidden;border-radius:14px;background-color:#EEF0E8;
  background-image:linear-gradient(115deg,transparent 47%,#fff 47%,#fff 50%,transparent 50%),linear-gradient(20deg,transparent 63%,#fff 63%,#fff 65%,transparent 65%),linear-gradient(#E3E6DC 1px,transparent 1px),linear-gradient(90deg,#E3E6DC 1px,transparent 1px);
  background-size:100% 100%,100% 100%,28px 28px,28px 28px;box-shadow:0 0 0 1px var(--border);min-height:120px;user-select:none;-webkit-user-select:none}
.tmap-tiles{position:absolute;inset:0}
.tmap-tiles img{position:absolute;max-width:none;image-rendering:auto;pointer-events:none;filter:grayscale(.55) saturate(.8) brightness(1.06) contrast(.88)}
.tmap::after{content:"";position:absolute;inset:0;pointer-events:none;background:color-mix(in srgb,var(--bg) 22%,transparent)}
.tmap-pins,.tmap-attr,.tmap-tip{z-index:1}
.tmap.offline .tmap-tiles{display:none}
.tmap-pins{position:absolute;inset:0}
.tmap .pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;padding:0;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(28,27,26,.28);background:var(--rank-none);cursor:default;font-family:var(--font);transition:transform .12s var(--ease-out)}
button.pin{cursor:pointer}button.pin:hover,button.pin:focus-visible{transform:translate(-50%,-50%) scale(1.14);z-index:3;outline:none;box-shadow:0 0 0 3px var(--accent),0 4px 10px rgba(28,27,26,.3)}
.tmap .pin.b2,.tmap .pin.b3{color:#1C1B1A}
.tmap .pin.pending{background:rgba(255,255,255,.75)!important;border:2px dashed color-mix(in srgb,var(--ink) 28%,transparent);box-shadow:none;width:12px!important;height:12px!important}
.tmap .pin.you{box-shadow:0 0 0 3px var(--ink),0 3px 8px rgba(28,27,26,.35);z-index:2}
.tmap .pin.pop{animation:pinpop .22s var(--ease-out) both}
@keyframes pinpop{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.tmap.compact{border-radius:16px}.tmap.compact .pin{border-width:1.5px}
.tmap-attr{position:absolute;right:0;bottom:0;font-size:10px;line-height:1;padding:3px 6px;background:rgba(255,255,255,.8);color:#555;border-top-left-radius:6px}
.tmap-you{position:absolute;transform:translate(-50%,-150%);background:var(--ink);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 6px;pointer-events:none;white-space:nowrap}
.tmap-tip{position:absolute;z-index:5;width:220px;background:var(--surface);color:var(--text);border-radius:12px;box-shadow:var(--shadow-pop),0 0 0 1px var(--border);padding:10px 12px;font-size:13px;animation:enter .16s var(--ease-out)}
.tmap-tip ol{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.tmap-tip li{display:flex;gap:8px;align-items:center;min-width:0}.tmap-tip li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmap-tip li.me{font-weight:700;color:var(--ink)}
.tmap-tip .rk{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}

/* ---------- sidebar polish ---------- */
.nav-section{font-size:11.5px;padding:14px 12px 4px}
.nav a{height:34px}
.nav a[aria-current=page] .navchip{background:var(--hs);color:var(--h)}
.navchip{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;flex:none;color:var(--muted);transition:background .12s,color .12s}
.navchip .icon{width:15px;height:15px}
.nav a:hover .navchip{color:var(--ink)}
.nav a[aria-current=page]{background:var(--surface-2);color:var(--ink)}
.nav-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--faint);font-weight:600;padding:14px 12px 4px}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary .icon{width:14px;height:14px;transition:transform .15s}
.nav-group[open] summary .icon{transform:rotate(180deg)}
.nav-group summary:hover{color:var(--ink)}

/* ---------- phone bottom tab bar ---------- */
.tabbar,.sheet,.sheet-backdrop{display:none}
@media (max-width:760px){
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
    border-top:1px solid var(--border);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:none;color:var(--muted);font:600 11px var(--font);text-decoration:none;border-radius:10px;cursor:pointer;padding:4px 2px}
  .tabbar .icon{width:22px;height:22px;stroke-width:1.9}
  .tabbar [aria-current=page],.tabbar button[aria-expanded=true]{color:var(--accent)}
  .tabbar [aria-current=page]::before{content:"";position:absolute;top:-4px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .tabbar .count{position:absolute;top:3px;left:calc(50% + 6px);background:var(--bad);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:0 5px;line-height:16px;min-width:16px;text-align:center}
  .btn.menu-btn{display:none}
  .content{padding-bottom:calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom))}
  .topbar .crumb{display:block;flex:0 1 auto;font-size:14px}
  .topbar .loc-switch{flex:1 1 auto}
  .topbar .loc-switch+.crumb{display:none}
  .sheet-backdrop.open{display:block;position:fixed;inset:0;z-index:40;background:rgba(28,27,26,.35);animation:fade .2s}
  .sheet.open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow-pop);max-height:82vh;overflow:auto;
    padding:8px 12px calc(16px + env(safe-area-inset-bottom));animation:sheetin .24s var(--ease-out)}
  .sheet .grab{width:40px;height:4px;border-radius:999px;background:var(--border-strong);margin:4px auto 10px}
  .sheet .nav a{height:46px;font-size:15px}
  .toasts{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom))}
  .hero-band{grid-template-columns:minmax(0,1fr);padding:22px 18px;gap:20px;border-radius:18px}
  .hero-map{justify-self:stretch;max-width:none}
  .hero-map .hand-note{display:none}
  .hero-score{gap:16px;margin-top:16px}
  .gauge .g-num b{font-size:34px}
  .hero-score .meta{flex:1 1 140px}
  .hero-band.solo{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento>.w2,.bento>.w3,.bento>.w4,.bento>.w6{grid-column:auto}
  .task{grid-template-columns:28px minmax(0,1fr);padding:14px 16px}
  .task .t-act{grid-column:2;flex-wrap:wrap}
  .task .t-act .btn{min-height:40px}
  .crow{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px}
  .crow .spark,.crow .go{display:none}.crow .todo{grid-column:1 / -1}
  .home{gap:24px}
}
@keyframes sheetin{from{transform:translateY(30%);opacity:.4}}
.skel-hero{height:260px;border-radius:20px}