/* CPS Design System: tokens and the shared app shell. Values come from the approved Paper designs
   (Town Case Management: sign-in 1-0 / L-0 / 13-0, sidebar 1W-0, top bar 4M-0).
   Rules: burgundy only for the one main action per card; every button is a pill; status colours always with a word;
   no coloured left borders on cards; pop-ups use .cps-overlay + .cps-modal; full content width. */
@font-face { font-family: "Jost"; src: url(/fonts/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --cps-ground: #F4F2EB; --cps-surface: #FCFBF8; --cps-ink: #16201F; --cps-muted: #4A5654; --cps-text-soft: #545958;
  --cps-line: #DDD8CC; --cps-card-line: #DEDFDD; --cps-border: #C9CFCD;
  --cps-brand: #6B1317; --cps-brand-dark: #4A0D10; --cps-on-brand: #F5F2EB; --cps-on-brand-soft: #E8C9C6; --cps-pink: #F1DEDC;
  --cps-status-available: #2F6B4F; --cps-status-available-tint: #E6EFEA;
  --cps-status-hold: #A16B18; --cps-status-hold-ink: #8A5A10; --cps-status-hold-tint: #FFFAF2;
  --cps-status-reserved: #34557A; --cps-status-reserved-tint: #E3E9F0; --cps-status-sold: #9AA09E;
  --cps-danger: #B42318; --cps-danger-tint: #FBE9E7;
  --cps-font: "Jost", system-ui, sans-serif;
  /* Hover and pressed colours */
  --cps-hover: #E6E8E6; --cps-pressed: #D9DCD9; --cps-row-hover: #F2F3F1; --cps-border-strong: #A9B1AF;
  --cps-brand-pressed: #340A0C; --cps-ink-hover: #2A3533; --cps-ink-pressed: #0B1211;
  --cps-overlay: #16201F1A; /* ink at 10% */
  /* One shared timing for every hover, press and focus change */
  --cps-transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 999px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--cps-font); background: var(--cps-ground); color: var(--cps-ink); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
a { color: var(--cps-brand); }
a:hover { color: var(--cps-brand-dark); }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cps-ink); outline-offset: 2px; }
kbd { font-family: inherit; font-size: 12px; line-height: 16px; color: var(--cps-muted); }

/* Motion: one shared timing, switched off for people who ask for less motion */
a, button, input, select, textarea, tr, td, summary { transition: var(--cps-transition); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Buttons: always pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; width: 100%; border-radius: var(--radius-full);
  font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid var(--cps-border); background: #fff; color: var(--cps-ink); }
.btn:hover { background: var(--cps-hover); border-color: var(--cps-border-strong); color: var(--cps-ink); }
.btn:active { background: var(--cps-pressed); }
.btn-main { background: var(--cps-brand); border-color: var(--cps-brand); color: var(--cps-on-brand); }
.btn-main:hover { background: var(--cps-brand-dark); border-color: var(--cps-brand-dark); color: var(--cps-on-brand); }
.btn-main:active { background: var(--cps-brand-pressed); border-color: var(--cps-brand-pressed); }
.btn-ink { background: var(--cps-ink); border-color: var(--cps-ink); color: var(--cps-on-brand); }
.btn-ink:hover { background: var(--cps-ink-hover); border-color: var(--cps-ink-hover); color: var(--cps-on-brand); }
.btn-ink:active { background: var(--cps-ink-pressed); border-color: var(--cps-ink-pressed); }
.btn-danger { background: var(--cps-danger); border-color: var(--cps-danger); color: #fff; }
.btn-danger:hover { background: #8F1B12; border-color: #8F1B12; color: #fff; }
.btn-sm { height: 36px; width: auto; padding: 0 16px; font-size: 14px; line-height: 20px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cps-border); background: var(--cps-surface); color: var(--cps-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.icon-btn:hover { background: var(--cps-hover); border-color: var(--cps-border-strong); }
.icon-btn:active { background: var(--cps-pressed); }

/* Sign-in pages (Paper 1-0, L-0, 13-0): card 541 wide, 64/60 padding, 36 gap, 16 radius, --cps-border */
.login-page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px; background: var(--cps-ground); }
.login-card { width: 541px; max-width: 100%; background: var(--cps-surface); border: 1px solid var(--cps-border); border-radius: 16px;
  padding: 64px 60px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.login-head { width: 420px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login-mark { display: block; flex: none; }
.login-app { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cps-text-soft); }
.login-text { padding-top: 8px; }
.login-text h1 { font-size: 23px; line-height: 30px; font-weight: 500; color: var(--cps-ink); }
.login-text p { font-size: 16px; line-height: 25px; color: var(--cps-muted); }
.login-text h1 + p { margin-top: 25px; }
.login-actions, .login-notice { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.login-foot { width: 420px; max-width: 100%; border-top: 1px solid var(--cps-line); padding-top: 24px; display: flex; justify-content: center; gap: 4px;
  font-size: 14px; line-height: 21px; color: var(--cps-muted); }
.login-foot a { color: var(--cps-brand); text-decoration: underline 1px; text-underline-position: from-font; }
.login-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cps-ground); border-radius: var(--radius-full); padding: 12px 12px 12px 16px; text-align: left; }
.login-who-me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.login-who form { margin: 0; }
.login-who .btn-sm { background: var(--cps-surface); }

/* App shell: sidebar (Paper 1W-0: 264 wide, padding 28/20/24, sections 24 apart, items 40 high, 14 side padding, 2 px gap) */
.shell { display: flex; min-height: 100%; }
.side { width: 264px; flex: none; background: var(--cps-ground); border-right: 1px solid var(--cps-line); padding: 28px 20px 24px;
  display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 0; height: 100vh; transition: width .22s ease, padding .22s ease; }
.side-top { display: flex; flex-direction: column; gap: 24px; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.brand-mark { display: block; flex: none; }
.brand span { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cps-ink); }

/* Business unit switcher (Paper 22-0): 52 high pill, pink code circle */
.unit-switch { position: relative; }
.unit-switch summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 8px; border-radius: var(--radius-full);
  background: var(--cps-surface); border: 1px solid var(--cps-card-line); cursor: pointer; }
.unit-switch summary::-webkit-details-marker { display: none; }
.unit-switch summary:hover { border-color: var(--cps-border-strong); }
.unit-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--cps-pink); color: var(--cps-brand); font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .04em; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.unit-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.unit-text small { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-muted); }
.unit-text b { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--cps-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-chev { color: var(--cps-muted); flex: none; transition: transform .15s ease; }
.unit-switch[open] .unit-chev { transform: rotate(180deg); }
.unit-menu, .me-pop { position: absolute; z-index: 50; background: var(--cps-surface); border: 1px solid var(--cps-card-line); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(22, 32, 31, .14); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 100%; }
.unit-menu { top: calc(100% + 6px); left: 0; }
.unit-menu a, .me-pop button { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-full); font-size: 14px; line-height: 20px;
  font-weight: 500; color: var(--cps-ink); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.unit-menu a:hover, .me-pop button:hover { background: var(--cps-hover); color: var(--cps-ink); }
.unit-menu a[aria-current] { background: var(--cps-ground); }

/* Menu */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav .later { display: flex; align-items: center; gap: 12px; height: 40px; width: 100%; padding: 0 14px; border-radius: var(--radius-full); color: var(--cps-ink);
  text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 500; overflow: hidden; white-space: nowrap; flex: none;
  transition: width .22s ease, margin .22s ease, padding .22s ease, gap .22s ease, background-color .15s ease, color .15s ease; }
.nav .sm { height: 36px; font-size: 15px; }
.nav .nico { color: var(--cps-muted); flex: none; }
.nav a:hover { background: var(--cps-hover); color: var(--cps-ink); }
.nav a:active { background: var(--cps-pressed); }
.nav a[aria-current="page"] { background: var(--cps-brand); color: var(--cps-on-brand); }
.nav a[aria-current="page"] .nico { color: var(--cps-on-brand); }
.nav a.ext .lbl { flex: 1; }
.nav .ext-ic { color: var(--cps-muted); flex: none; }
.nav-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px; font-size: 11px; line-height: 14px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cps-muted); background: none; border: 0; text-align: left; width: 100%; overflow: hidden; white-space: nowrap; }
button.nav-label { cursor: pointer; border-radius: var(--radius-md); }
button.nav-label:hover { color: var(--cps-ink); }
.later-chev { flex: none; transition: transform .15s ease; }
.nav-later[aria-expanded="true"] .later-chev { transform: rotate(90deg); }
.later-list { display: flex; flex-direction: column; gap: 2px; }
.nav .later { color: var(--cps-muted); cursor: default; opacity: .6; }

.side-foot { border-top: 1px solid var(--cps-line); padding: 12px; display: flex; align-items: center; gap: 12px; flex: none; }
.me-menu { position: relative; flex: 1; min-width: 0; }
.me-menu summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: var(--radius-full); }
.me-menu summary::-webkit-details-marker { display: none; }
.me-pop { bottom: calc(100% + 10px); left: -6px; min-width: 200px; }
.me-pop form { margin: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--cps-ink); color: var(--cps-on-brand); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  line-height: 16px; display: flex; align-items: center; justify-content: center; flex: none; }
.me { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.me b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cps-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { display: block; font-size: 12px; line-height: 16px; color: var(--cps-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .icon-btn { border-color: var(--cps-card-line); color: var(--cps-muted); }

/* Collapsed sidebar: 80 px wide, labels fade, icons become 40 px circles with a tooltip (app.js) */
.brand span, .nav .lbl, .me, .unit-text, .unit-chev, .ext-ic { max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width .22s ease, opacity .15s ease; }
.collapsed .side { width: 80px; padding-inline: 12px; }
.collapsed .brand { justify-content: center; padding-left: 0; gap: 0; }
.collapsed .brand span, .collapsed .nav .lbl, .collapsed .me, .collapsed .unit-text, .collapsed .unit-chev, .collapsed .ext-ic { max-width: 0; opacity: 0; }
.collapsed .unit-switch summary { width: 40px; height: 40px; margin-left: 8px; padding: 0; gap: 0; border: 0; background: none; justify-content: center; }
.collapsed .nav a, .collapsed .nav .later { width: 40px; height: 40px; margin-left: 8px; padding: 0; gap: 0; justify-content: center; }
.collapsed .nav-label { font-size: 0; padding: 0; margin: 4px 15px 4px 16px; height: 1px; background: var(--cps-border); }
.collapsed .nav-label .later-chev, .collapsed .later-list { display: none !important; }
.collapsed .side-foot { flex-direction: column; padding: 12px 0 0; align-items: center; }
.collapsed .me-menu { flex: none; }
@media (prefers-reduced-motion: reduce) { .side, .nav a, .brand span, .nav .lbl, .me, .unit-text { transition: none; } }
.nav-tip { position: fixed; z-index: 70; transform: translateY(-50%); height: 36px; padding: 0 12px; display: flex; align-items: center; border-radius: var(--radius-md);
  background: var(--cps-ink); color: var(--cps-on-brand); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(22, 32, 31, .2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; }
.nav-tip.show { opacity: 1; visibility: visible; }
.nav-tip::before { content: ""; position: absolute; left: -5px; top: 12px; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent var(--cps-ink) transparent transparent; }

/* Top bar (Paper 4M-0: 72 high, 40 side padding; no page title here) */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { height: 72px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 40px; border-bottom: 1px solid var(--cps-line); background: var(--cps-ground); }
.top-search { display: flex; align-items: center; gap: 10px; width: 440px; max-width: 100%; height: 44px; padding: 0 8px 0 16px; border-radius: var(--radius-full);
  background: var(--cps-surface); border: 1px solid var(--cps-card-line); color: var(--cps-muted); margin: 0; }
.top-search svg { flex: none; }
.top-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--cps-ink); outline: none; padding: 0; }
.top-search input::placeholder { color: var(--cps-text-soft); opacity: 1; }
.top-search:focus-within { border-color: var(--cps-ink); }
.top-search kbd { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cps-card-line); display: flex; align-items: center; justify-content: center; flex: none; }
.top-right { display: flex; align-items: center; gap: 12px; }
.synced { font-size: 14px; line-height: 20px; color: var(--cps-muted); display: flex; align-items: center; gap: 8px; padding-right: 4px; white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cps-status-available); flex: none; }
.sync-dot.off { background: var(--cps-border-strong); }
.sync-dot.bad { background: var(--cps-danger); }
.top-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cps-border); background: var(--cps-surface); color: var(--cps-ink); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; font-size: 15px; line-height: 20px; font-weight: 500; }
.top-btn:hover { background: var(--cps-hover); border-color: var(--cps-border-strong); }
.top-btn:active { background: var(--cps-pressed); }
.btn-top { height: 36px; width: auto; padding: 0 18px; gap: 8px; font-size: 14px; line-height: 20px; }
.content { padding: 32px 40px 56px; width: 100%; } /* full width: no max-width cap */

/* View as: read-only bar above the page title */
.view-as-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 12px 12px 12px 20px; border-radius: var(--radius-full);
  background: var(--cps-status-reserved-tint); color: var(--cps-status-reserved); font-size: 14px; line-height: 20px; }
.view-as-bar b { font-weight: 600; }

/* Page header: title 34/40 weight 500, -0.01em, ink; subtitle 16/24 muted */
.page-head { margin-bottom: 24px; display: flex; flex-direction: column; gap: 4px; }
.page-title { font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -0.01em; color: var(--cps-ink); }
.page-sub { font-size: 16px; line-height: 24px; color: var(--cps-muted); }

/* Cards (no coloured left borders) */
.card { background: var(--cps-surface); border: 1px solid var(--cps-card-line); border-radius: var(--radius-lg); }
.card-head { display: flex; align-items: center; gap: 16px; padding: 24px; }
.card-head .grow { flex: 1; min-width: 0; }
.card-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--cps-ground); color: var(--cps-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.card-head h2 { font-size: 20px; line-height: 28px; font-weight: 500; }
.card-head p { font-size: 14px; line-height: 20px; color: var(--cps-muted); }
.card-body { padding: 0 24px 24px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.empty { text-align: center; padding: 56px 24px; color: var(--cps-muted); }
.empty h2 { color: var(--cps-ink); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 8px; }

/* AI help: robot icon + "AI tip / AI suggests / AI draft". Never the assistant's product name. */
.ai-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-lg); background: var(--cps-ground); border: 1px solid var(--cps-card-line); }
.ai-note .ai-ic { color: var(--cps-ink); flex: none; }
.ai-note b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.ai-note p { font-size: 14px; line-height: 20px; color: var(--cps-muted); }

/* Tables: column width follows the content */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--cps-muted); background: var(--cps-ground); padding: 10px 16px; border-bottom: 1px solid var(--cps-line); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--cps-line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--cps-row-hover); }
.table-wrap { overflow-x: auto; }

/* Status pills: always with a word */
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.pill-ok { background: var(--cps-status-available-tint); color: var(--cps-status-available); }
.pill-warn { background: var(--cps-status-hold-tint); color: var(--cps-status-hold-ink); border: 1px solid #ecd9b8; }
.pill-info { background: var(--cps-status-reserved-tint); color: var(--cps-status-reserved); }
.pill-off { background: #ebeceb; color: var(--cps-muted); }
.pill-bad { background: var(--cps-danger-tint); color: var(--cps-danger); }
.muted { color: var(--cps-muted); }
.small { font-size: 14px; line-height: 20px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; border: 0; padding: 0; margin: 0; }
.field input[type=text], .field input[type=email], .field select { height: 40px; min-width: 240px; padding: 0 12px; border: 1px solid var(--cps-border); border-radius: var(--radius-md); background: #fff; font: inherit; color: var(--cps-ink); }
.field input[type=text]:hover, .field input[type=email]:hover, .field select:hover { border-color: var(--cps-border-strong); }
.field input[type=text]:focus-visible, .field input[type=email]:focus-visible, .field select:focus-visible { border-color: var(--cps-ink); outline-offset: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.checks label, .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid var(--cps-border-strong); background: #fff; cursor: pointer; display: inline-grid; place-content: center; vertical-align: middle; }
input[type=checkbox] { border-radius: 5px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--cps-ink); }
input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--cps-ink); border-color: var(--cps-ink); }
input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23F5F2EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100% 100%; }
input[type=radio]:checked { background-image: radial-gradient(circle, #F5F2EB 0 28%, transparent 32%); }
input:disabled { opacity: .5; cursor: not-allowed; }
.notice { padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 20px; }
.notice-ok { background: var(--cps-status-available-tint); color: var(--cps-status-available); }
.notice-bad { background: var(--cps-danger-tint); color: var(--cps-danger); }
.notice-info { background: var(--cps-status-reserved-tint); color: var(--cps-status-reserved); }
.notice:empty, [role=status]:empty { display: none; }

/* View switches and chips: pills too */
.tabs { display: flex; gap: 8px; }
.tabs button { height: 36px; padding: 0 16px; border-radius: var(--radius-full); border: 1px solid var(--cps-border); background: transparent; cursor: pointer; font-size: 14px; color: var(--cps-ink); }
.tabs button:hover { background: var(--cps-hover); }
.tabs button:active { background: var(--cps-pressed); }
.tabs button[aria-pressed="true"] { background: var(--cps-ink); color: var(--cps-on-brand); border-color: var(--cps-ink); }

/* Shared pop-up: one overlay and one modal size for every dialog and side panel. Never a one-off modal style. */
.cps-overlay { position: fixed; inset: 0; z-index: 60; background: var(--cps-overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cps-modal { background: var(--cps-surface); border: 1px solid var(--cps-card-line); border-radius: var(--radius-lg); width: min(720px, 100%); max-height: min(700px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(22, 32, 31, 0.18); }
.cps-modal > :last-child { overflow: auto; min-height: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--cps-card-line); }
.modal-head h2 { font-size: 20px; line-height: 28px; font-weight: 500; }
.modal-body { padding: 24px; }

/* Health */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.health-grid .card { padding: 20px; }
.health-grid b { display: block; font-weight: 500; margin-bottom: 8px; }

@media (max-width: 800px) {
  .side { display: none; } .content, .top { padding-inline: 16px; } .top-search { width: auto; flex: 1; } .synced { display: none; }
  .login-page { padding: 16px; } .login-card { padding: 40px 24px; }
}
.collapsed #side-toggle svg { transform: rotate(180deg); }
.collapsed .me-menu summary { gap: 0; }