/* Hallmark · genre: modern-minimal · system: Nexlyr Portal (studied-DNA from nexlyr.solutions repo)
 * paper dark oklch(14% 0.014 250) / light oklch(98.6% 0.004 230) · accent cyan oklch(76% 0.14 222) / azure oklch(52% 0.13 245)
 * display Bricolage Grotesque · body Instrument Sans · mono JetBrains Mono (IDs only)
 * shared by index.html (client portal) and admin.html — pages share the system, they do not rotate
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 */
:root {
  --brand-1: oklch(75% 0.15 225);
  --brand-2: oklch(69% 0.14 230);
  --brand-3: oklch(62% 0.14 238);
  --brand-4: oklch(52% 0.13 248);

  --color-paper: oklch(98.6% 0.004 230);
  --color-surface: oklch(99.6% 0.002 230);
  --color-sunken: oklch(96.2% 0.007 235);
  --color-ink: oklch(16% 0.015 255);
  --color-ink-2: oklch(32% 0.018 255);
  --color-muted: oklch(50% 0.022 255);
  --color-faint: oklch(68% 0.018 255);
  --color-rule: oklch(91% 0.008 240);
  --color-rule-2: oklch(84% 0.012 240);
  --color-accent: oklch(52% 0.13 245);
  --color-accent-hover: oklch(45% 0.12 245);
  --color-accent-ink: oklch(99% 0.003 230);
  --color-accent-soft: oklch(94.5% 0.035 230);
  --color-band: oklch(16% 0.018 252);
  --color-band-2: oklch(25% 0.025 248);
  --color-band-rule: oklch(32% 0.028 245);
  --color-on-band: oklch(96% 0.008 230);
  --color-on-band-muted: oklch(72% 0.02 245);
  --color-track-done: oklch(62% 0.08 230);
  --color-track-active: oklch(76% 0.14 222);
  --color-success: oklch(48% 0.11 160);
  --color-success-soft: oklch(95% 0.035 160);
  --color-warn: oklch(52% 0.12 65);
  --color-warn-soft: oklch(95.5% 0.045 80);
  --color-danger: oklch(52% 0.17 27);
  --color-danger-soft: oklch(95.5% 0.03 27);
  --color-backdrop: oklch(14% 0.02 252 / 0.5);
  --color-placeholder: oklch(93% 0.008 240);
  --color-focus: oklch(55% 0.14 240);

  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-full: 999px;
  --tabbar-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-med: 240ms; --dur-slow: 420ms;
  --shadow-float: 0 12px 32px oklch(16% 0.015 255 / 0.16);
  --rail-w: 256px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: oklch(14% 0.014 250);
    --color-surface: oklch(17.5% 0.016 250);
    --color-sunken: oklch(12% 0.012 250);
    --color-ink: oklch(96% 0.008 230);
    --color-ink-2: oklch(85% 0.014 240);
    --color-muted: oklch(66% 0.025 250);
    --color-faint: oklch(50% 0.02 250);
    --color-rule: oklch(25% 0.02 245);
    --color-rule-2: oklch(32% 0.024 245);
    --color-accent: oklch(76% 0.14 222);
    --color-accent-hover: oklch(82% 0.12 222);
    --color-accent-ink: oklch(14% 0.02 250);
    --color-accent-soft: oklch(28% 0.06 228);
    --color-band: oklch(21% 0.035 242);
    --color-band-2: oklch(29% 0.04 240);
    --color-band-rule: oklch(35% 0.04 240);
    --color-success: oklch(76% 0.13 160);
    --color-success-soft: oklch(27% 0.045 160);
    --color-warn: oklch(80% 0.12 75);
    --color-warn-soft: oklch(28% 0.05 75);
    --color-danger: oklch(74% 0.14 27);
    --color-danger-soft: oklch(28% 0.05 27);
    --color-backdrop: oklch(6% 0.01 250 / 0.66);
    --color-placeholder: oklch(22% 0.018 248);
    --color-focus: oklch(78% 0.13 222);
    --shadow-float: 0 12px 32px oklch(4% 0.01 250 / 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper: oklch(14% 0.014 250);
  --color-surface: oklch(17.5% 0.016 250);
  --color-sunken: oklch(12% 0.012 250);
  --color-ink: oklch(96% 0.008 230);
  --color-ink-2: oklch(85% 0.014 240);
  --color-muted: oklch(66% 0.025 250);
  --color-faint: oklch(50% 0.02 250);
  --color-rule: oklch(25% 0.02 245);
  --color-rule-2: oklch(32% 0.024 245);
  --color-accent: oklch(76% 0.14 222);
  --color-accent-hover: oklch(82% 0.12 222);
  --color-accent-ink: oklch(14% 0.02 250);
  --color-accent-soft: oklch(28% 0.06 228);
  --color-band: oklch(21% 0.035 242);
  --color-band-2: oklch(29% 0.04 240);
  --color-band-rule: oklch(35% 0.04 240);
  --color-success: oklch(76% 0.13 160);
  --color-success-soft: oklch(27% 0.045 160);
  --color-warn: oklch(80% 0.12 75);
  --color-warn-soft: oklch(28% 0.05 75);
  --color-danger: oklch(74% 0.14 27);
  --color-danger-soft: oklch(28% 0.05 27);
  --color-backdrop: oklch(6% 0.01 250 / 0.66);
  --color-placeholder: oklch(22% 0.018 248);
  --color-focus: oklch(78% 0.13 222);
  --shadow-float: 0 12px 32px oklch(4% 0.01 250 / 0.55);
  color-scheme: dark;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100%; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); font-weight: 650; font-style: normal; letter-spacing: -0.02em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.01em; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 15px; height: 15px; }
.logo { display: block; height: 40px; width: auto; flex: none; }
.brandline { display: flex; align-items: center; gap: 12px; }
.brandline b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: var(--text-md); letter-spacing: -0.01em; line-height: 1.1; }
.brandline span { display: block; font-size: var(--text-xs); color: var(--color-muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 38px; padding: 0 var(--space-md); white-space: nowrap; border-radius: var(--radius-sm); border: 1px solid var(--color-rule-2); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-sunken); border-color: var(--color-faint); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--danger { color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--wide { min-width: 220px; height: 42px; }
.btn--danger-solid { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-accent-ink); }
.btn--danger-solid:hover { background: color-mix(in oklch, var(--color-danger) 86%, black); border-color: transparent; }
.btn--ghost:hover { background: var(--color-sunken); border-color: transparent; }
.btn--on-band { background: transparent; border-color: var(--color-band-rule); color: var(--color-on-band); }
.btn--on-band:hover { background: var(--color-band-2); border-color: var(--color-band-rule); }
.btn--band-primary { background: var(--color-track-active); border-color: var(--color-track-active); color: var(--color-band); }
.btn--band-primary:hover { background: var(--color-on-band); border-color: var(--color-on-band); }
.btn--sm { height: 32px; padding: 0 var(--space-sm); }
.btn--icon { width: 38px; padding: 0; }
.btn--sm.btn--icon { width: 32px; }
.btn[data-state="loading"] { pointer-events: none; opacity: 0.75; }
.btn[data-state="loading"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nx-spin 700ms linear infinite; }
@keyframes nx-spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; padding: 0; color: var(--color-accent); cursor: pointer; font-weight: 500; font-size: inherit; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; border: 1px solid var(--color-rule-2); color: var(--color-ink-2); background: var(--color-surface); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: currentColor; opacity: 0.85; }
.chip--ok { color: var(--color-success); background: var(--color-success-soft); border-color: transparent; }
.chip--warn { color: var(--color-warn); background: var(--color-warn-soft); border-color: transparent; }
.chip--danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: transparent; }
.chip--accent { color: var(--color-accent); background: var(--color-accent-soft); border-color: transparent; }
.chip--muted { color: var(--color-muted); }

/* forms */
.field { display: grid; gap: 6px; margin-top: var(--space-md); min-width: 0; }
.field:first-child { margin-top: 0; }
.field label, .field .label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.input, .textarea, .select { width: 100%; height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--color-rule-2); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease-out); min-width: 0; }
.textarea { height: auto; min-height: 104px; padding: var(--space-sm); resize: vertical; line-height: 1.5; }
.select { appearance: auto; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-faint); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-accent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.input:disabled { opacity: 0.6; }
.input--file { height: auto; padding: 7px var(--space-xs); cursor: pointer; }
.input--file::file-selector-button { margin-right: var(--space-sm); height: 28px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-xs); background: var(--color-sunken); color: var(--color-ink); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.input--code { font-size: 1.25rem; letter-spacing: 0.3em; height: 48px; max-width: 220px; }
.input--code::placeholder { letter-spacing: normal; font-family: var(--font-body); font-size: var(--text-sm); }
.affix { display: flex; align-items: stretch; }
.affix__pre { display: grid; place-items: center; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--color-sunken); color: var(--color-muted); font-size: var(--text-sm); }
.affix .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; text-transform: uppercase; letter-spacing: 0.06em; }
.field__error { color: var(--color-danger); font-size: var(--text-sm); }
.field__hint { color: var(--color-muted); font-size: var(--text-sm); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-md); }
.grid2 > .field, .grid3 > .field { margin-top: var(--space-md); }
.check-row { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-sm); background: var(--color-sunken); border: 1px solid var(--color-rule); }
.seg button { height: 30px; padding: 0 var(--space-sm); border: 0; border-radius: 4px; background: transparent; font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--color-ink); }
.seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 2px oklch(16% 0.015 255 / 0.08); }

/* login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login__form { display: flex; flex-direction: column; justify-content: center; padding: var(--space-3xl) clamp(var(--space-lg), 6vw, 6rem); max-width: 580px; }
.login__form h1 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-sm); }
.login__form > p { color: var(--color-muted); max-width: 42ch; }
.login__side { background: var(--color-band); color: var(--color-on-band-muted); padding: var(--space-3xl) clamp(var(--space-lg), 5vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); }
.login__side .logo { height: 120px; }
.login__side h2 { color: var(--color-on-band); font-size: var(--text-xl); max-width: 18ch; }
.login__steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-sm); max-width: 36ch; }
.login__steps li { display: flex; gap: var(--space-sm); align-items: center; }
.login__steps .dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-band-rule); display: grid; place-items: center; flex: none; color: var(--color-band); }
.login__steps .dot--done { background: var(--color-track-active); border-color: transparent; }
.login__steps .dot--now { border: 2px solid var(--color-track-active); }
.login__alt { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* shell */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg) var(--space-md); border-right: 1px solid var(--color-rule); background: var(--color-paper); overflow-y: auto; }
.rail__brand { padding: 0 var(--space-xs); }
.switcher { position: relative; }
.switcher__btn { width: 100%; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); border: 1px solid var(--color-rule-2); background: var(--color-surface); cursor: pointer; text-align: left; transition: border-color var(--dur-fast) var(--ease-out); }
.switcher__btn:hover { border-color: var(--color-faint); }
.switcher__btn .meta, .menu__item .meta, .account .meta { min-width: 0; flex: 1; }
.switcher__btn strong, .menu__item strong, .account strong { display: block; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switcher__btn span, .menu__item span, .account span { display: block; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--color-surface); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-2xs); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); max-height: 60vh; overflow-y: auto; }
.menu.is-open, .popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
.menu__item { width: 100%; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); border: 0; background: none; text-align: left; cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--color-sunken); }
.menu__item[aria-current="true"] strong { color: var(--color-accent); }
.nav { display: grid; gap: 2px; }
.nav__label { font-size: var(--text-xs); color: var(--color-faint); padding: var(--space-sm) var(--space-sm) var(--space-2xs); }
.nav__item { position: relative; display: flex; align-items: center; gap: var(--space-sm); height: 38px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); border: 0; background: none; color: var(--color-ink-2); font-weight: 500; font-size: var(--text-sm); cursor: pointer; text-align: left; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav__item:hover { background: var(--color-sunken); color: var(--color-ink); }
.nav__item[aria-current="page"] { background: var(--color-sunken); color: var(--color-ink); }
.nav__item[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
.nav__item .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-xs); background: var(--color-accent); color: var(--color-accent-ink); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.rail__foot { margin-top: auto; display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.helpline { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); padding: var(--space-xs); color: var(--color-ink-2); }
.helpline:hover { text-decoration: none; color: var(--color-ink); }
.helpline p { color: var(--color-muted); font-size: var(--text-xs); }
.helpline strong { color: var(--color-ink); font-weight: 500; }
.account { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm); flex: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-sm); height: 60px; padding: 0 var(--space-xl); background: color-mix(in oklch, var(--color-paper) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule); }
.topbar__crumb { min-width: 0; flex: 1; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__crumb strong { color: var(--color-ink); font-weight: 500; }
.topbar__menu { display: none; }
.bell { position: relative; }
.bell__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-paper); }
.popover { position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 40; }
.popover__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.popover__head h3 { font-size: var(--text-md); }
.notif { display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.notif:last-child { border-bottom: 0; }
.notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.notif.is-unread .notif__dot { background: var(--color-accent); }
.notif p { font-size: var(--text-sm); color: var(--color-ink-2); }
.notif time { font-size: var(--text-xs); color: var(--color-muted); }

.view { width: 100%; max-width: 1160px; padding: var(--space-xl) var(--space-xl) var(--space-3xl); }
.view:focus { outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head p { color: var(--color-muted); margin-top: var(--space-xs); max-width: 62ch; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.page-head__actions .select { width: auto; height: 38px; font-size: var(--text-sm); }
.idrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.ticket { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: var(--radius-sm); border: 1px solid var(--color-rule-2); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.ticket button { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; border-radius: 4px; color: var(--color-muted); cursor: pointer; }
.ticket button:hover { background: var(--color-sunken); color: var(--color-ink); }

/* now band (signature) */
.now { background: var(--color-band); color: var(--color-on-band-muted); border-radius: var(--radius-md); padding: var(--space-xl); display: grid; gap: var(--space-xl); }
.now__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: start; }
.now__step { font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.now h2 { color: var(--color-on-band); font-size: var(--text-xl); max-width: 28ch; }
.now__desc { margin-top: var(--space-sm); max-width: 58ch; }
.now__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.now__days { text-align: right; }
.now__days strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--color-on-band); letter-spacing: -0.03em; }
.now__days span { font-size: var(--text-sm); }
.track { display: grid; gap: var(--space-sm); }
.track__bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.track__seg { position: relative; height: 8px; border-radius: 2px; background: var(--color-band-2); }
.track__seg--done { background: var(--color-track-done); }
.track__seg--active { background: var(--color-track-active); }
.track__seg--active::after { content: ""; position: absolute; inset: -4px 0; border-radius: 4px; outline: 1px solid var(--color-track-active); opacity: 0.45; }
.track__labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font-size: var(--text-xs); }
.track__labels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
.track__labels .is-active { color: var(--color-on-band); font-weight: 500; }
.track__ends { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-band-rule); }
.track__ends strong { color: var(--color-on-band); font-weight: 500; }

/* panels */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); align-items: start; }
.stack { display: grid; gap: var(--space-xl); min-width: 0; align-content: start; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.section-title h3 { font-size: var(--text-lg); }
.panel { border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); min-width: 0; }
.panel__pad { padding: var(--space-md); }
.panel__foot { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; padding: var(--space-md); border-top: 1px solid var(--color-rule); }
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist > li { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.rowlist > li:last-child { border-bottom: 0; }
.ico { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-sunken); color: var(--color-ink-2); flex: none; }
.ico--accent { background: var(--color-accent-soft); color: var(--color-accent); }
.ico--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.ico--ok { background: var(--color-success-soft); color: var(--color-success); }
.rowlist .body { min-width: 0; flex: 1; }
.rowlist .body strong { display: block; color: var(--color-ink); font-weight: 500; }
.rowlist .body span { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.rowlist .actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; }
.kv { display: grid; padding: var(--space-xs) var(--space-md); margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px dashed var(--color-rule); font-size: var(--text-sm); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--color-muted); }
.kv dd { margin: 0; color: var(--color-ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv .total dd { font-family: var(--font-display); font-size: var(--text-lg); }
.paybar { height: 6px; border-radius: 3px; background: var(--color-sunken); overflow: hidden; margin: var(--space-sm) var(--space-md) 0; }
.paybar i { display: block; height: 100%; background: var(--color-success); border-radius: 3px; }
.update-mini { padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.update-mini:last-child { border-bottom: 0; }
.update-mini time { font-size: var(--text-xs); color: var(--color-muted); }
.update-mini strong { display: block; color: var(--color-ink); font-weight: 500; margin: 2px 0 4px; }
.update-mini p { font-size: var(--text-sm); }
.team { display: flex; gap: var(--space-sm); align-items: center; }
.team .meta strong { display: block; color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); }
.team .meta span { font-size: var(--text-xs); color: var(--color-muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-xl); }
.stats > div { padding: var(--space-md) var(--space-lg); border-left: 1px solid var(--color-rule); min-width: 0; }
.stats > div:first-child { border-left: 0; }
.stats span { font-size: var(--text-sm); color: var(--color-muted); }
.stats strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* steps */
.progress-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: end; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-xl); }
.progress-head .pct { font-family: var(--font-display); font-size: 2.25rem; color: var(--color-ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.meter { height: 8px; border-radius: 4px; background: var(--color-sunken); overflow: hidden; margin-top: var(--space-sm); }
.meter i { display: block; height: 100%; background: var(--color-accent); border-radius: 4px; }
.meter--sm { height: 5px; margin-top: 6px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-lg); }
.step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--color-rule); border-radius: 1px; }
.step--done:not(:last-child)::before { background: var(--color-accent); opacity: 0.45; }
.step__mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--color-rule-2); background: var(--color-paper); color: var(--color-muted); font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
button.step__mark { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
button.step__mark:hover { border-color: var(--color-accent); color: var(--color-accent); }
.step--done .step__mark { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.step--active .step__mark, .step--review .step__mark { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.step__card { min-width: 0; padding: var(--space-sm) var(--space-md) var(--space-md); border-radius: var(--radius-md); border: 1px solid transparent; }
.step--active .step__card, .step--review .step__card { border-color: var(--color-rule-2); background: var(--color-surface); }
.step__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.step__top h3 { font-size: var(--text-md); }
.step--pending .step__top h3 { color: var(--color-ink-2); }
.step__desc { margin-top: 4px; font-size: var(--text-sm); color: var(--color-muted); max-width: 66ch; }
.step__dates { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); }
.step__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }

/* updates */
.tl-day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); }
.tl-day:first-child { border-top: 0; padding-top: 0; }
.tl-day__date strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-weight: 650; font-size: var(--text-md); }
.tl-day__date span { font-size: var(--text-xs); color: var(--color-muted); }
.tl-entry h3 { font-size: var(--text-md); margin-bottom: 4px; }
.tl-entry p { max-width: 68ch; white-space: pre-line; }
.tl-entry .by { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.shot { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); border: 1px solid var(--color-rule); background: repeating-linear-gradient(135deg, var(--color-placeholder) 0 10px, var(--color-sunken) 10px 20px) center / cover; display: flex; align-items: flex-end; padding: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); cursor: zoom-in; text-align: left; overflow: hidden; }
.shot span { background: var(--color-surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--color-rule); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* table-ish rows */
.trow { display: grid; gap: var(--space-md); align-items: center; padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.trow:last-child { border-bottom: 0; }
.trow--head { padding-top: var(--space-sm); padding-bottom: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.trow--click { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.trow--click:hover { background: var(--color-sunken); }
.trow--click:focus-visible { outline-offset: -2px; }
.trow strong { display: block; color: var(--color-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .sub { display: block; font-size: var(--text-xs); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .amt { font-variant-numeric: tabular-nums; color: var(--color-ink); font-weight: 500; text-align: right; white-space: nowrap; }
.trow .end { justify-self: end; display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cols-inv { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; }
.cols-proj { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; }
.cols-client { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr); }
.cols-ainv { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-xl); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; height: 42px; padding: 0 var(--space-md); border: 0; background: none; color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--color-ink); }
.tab[aria-selected="true"] { color: var(--color-ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: -1px; height: 2px; background: var(--color-accent); border-radius: 2px 2px 0 0; }
.tab .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--color-accent); color: var(--color-accent-ink); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }

/* overlays */
.backdrop { position: fixed; inset: 0; background: var(--color-backdrop); z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out); }
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--color-paper); border-left: 1px solid var(--color-rule-2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); visibility: hidden; }
.drawer.is-open { transform: none; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.drawer__head h2 { font-size: var(--text-lg); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-lg); }
.drawer__foot { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); }
.modal { position: fixed; z-index: 60; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--color-paper); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); box-shadow: var(--shadow-float); opacity: 0; transform: translate(-50%, -48%); pointer-events: none; visibility: hidden; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.modal--wide { width: min(760px, calc(100vw - 32px)); }
.modal { z-index: 65; }
html.has-modal-over-drawer .drawer::after { content: ""; position: absolute; inset: 0; background: var(--color-backdrop); pointer-events: none; }
.modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; visibility: visible; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md); }
.modal__head h2 { font-size: var(--text-lg); }
.modal__head p { color: var(--color-muted); font-size: var(--text-sm); margin-top: 4px; }
.modal__body { padding: 0 var(--space-lg) var(--space-lg); }
.modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); position: sticky; bottom: 0; background: var(--color-paper); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-band); color: var(--color-on-band); font-size: var(--text-sm); box-shadow: var(--shadow-float); max-width: calc(100vw - 32px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .linkbtn { color: var(--color-track-active); }
.toast--error { background: var(--color-danger); color: var(--color-accent-ink); }

/* invoice doc in drawer */
.invdoc__top { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; align-items: flex-start; }
.invdoc__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; font-size: var(--text-sm); }
.invdoc__meta span { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.invdoc__meta strong { color: var(--color-ink); font-weight: 500; }
.lines { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lines th { text-align: left; font-weight: 500; color: var(--color-muted); font-size: var(--text-xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule-2); }
.lines td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; color: var(--color-ink-2); }
.lines td:last-child, .lines th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--space-md); }
.lines .tag { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--color-accent); }
.lines tfoot td { border-bottom: 0; padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.lines tfoot tr:last-child td { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); font-weight: 650; }
.paybox { margin-top: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-sunken); font-size: var(--text-sm); }
.paybox h4 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.paybox dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-md); margin: 0; }
.paybox dt { color: var(--color-muted); }
.paybox dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.paybox--accent { background: var(--color-accent-soft); }
.drop { position: relative; margin-top: var(--space-md); display: grid; place-items: center; gap: 6px; text-align: center; padding: var(--space-lg); border: 1.5px dashed var(--color-rule-2); border-radius: var(--radius-md); color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.drop:hover, .drop:focus-within { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop strong { color: var(--color-ink); font-weight: 500; }

/* files, needs, addons, messages */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-md); }
.file { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); min-width: 0; }
.file .meta { min-width: 0; flex: 1; }
.file strong { display: block; color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file span { font-size: var(--text-xs); color: var(--color-muted); }
.file--locked { background: var(--color-sunken); }
.check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-rule-2); display: grid; place-items: center; flex: none; color: transparent; background: none; padding: 0; }
.check.is-on { background: var(--color-success); border-color: var(--color-success); color: var(--color-paper); }
button.check { cursor: pointer; }
.suggest { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.suggest button { height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--color-rule-2); background: var(--color-surface); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out); }
.suggest button:hover { border-color: var(--color-accent); }
.suggest button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.addon:last-child { border-bottom: 0; }
.addon strong { color: var(--color-ink); font-weight: 500; }
.addon p { font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
.addon__right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-xs); }
.price { font-family: var(--font-display); font-weight: 650; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thread { display: grid; gap: var(--space-md); padding: var(--space-lg); max-height: min(60vh, 560px); overflow-y: auto; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-sm); max-width: 74ch; }
.msg__bubble { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-sunken); white-space: pre-line; overflow-wrap: anywhere; }
.msg--me { justify-self: end; grid-template-columns: minmax(0, 1fr) 32px; }
.msg--me .avatar { order: 2; }
.msg--me .msg__bubble { background: var(--color-accent-soft); }
.msg__by { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: 2px; }
.msg__by strong { color: var(--color-ink); font-weight: 500; }
.composer { display: flex; gap: var(--space-xs); padding: var(--space-md); border-top: 1px solid var(--color-rule); align-items: flex-end; }
.composer .textarea { min-height: 42px; height: 42px; }
.empty { padding: var(--space-2xl) var(--space-lg); text-align: center; display: grid; justify-items: center; gap: var(--space-xs); }
.empty h3 { font-size: var(--text-md); }
.empty p { color: var(--color-muted); max-width: 46ch; font-size: var(--text-sm); }
.stars { display: flex; gap: 4px; margin-top: var(--space-sm); }
.stars button { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--color-rule-2); border-radius: var(--radius-sm); display: grid; place-items: center; }
.stars button:hover, .stars button.is-on { color: var(--color-warn); }
.stars svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.toggle:last-child { border-bottom: 0; }
.toggle strong { display: block; color: var(--color-ink); font-weight: 500; }
.toggle span { font-size: var(--text-sm); color: var(--color-muted); }
.switch { position: relative; width: 40px; height: 24px; flex: none; border-radius: var(--radius-full); border: 0; background: var(--color-rule-2); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-paper); transition: transform var(--dur-med) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--color-accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.banner { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-warn-soft); color: var(--color-ink-2); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.banner .icon { color: var(--color-warn); margin-top: 2px; }
.banner--info { background: var(--color-accent-soft); }
.banner--info .icon { color: var(--color-accent); }
.search { position: relative; }
.search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.search .input { padding-left: 34px; width: min(280px, 100%); }
.toolbar-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.line-editor { display: grid; gap: var(--space-xs); }
.line-editor__row { display: grid; grid-template-columns: minmax(0, 2.4fr) 70px minmax(0, 1fr) auto auto; gap: var(--space-xs); align-items: center; }
.line-editor__row .input { height: 36px; }
.creds { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-sunken); font-size: var(--text-sm); white-space: pre-line; color: var(--color-ink); overflow-wrap: anywhere; }
.loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); padding: var(--space-lg); text-align: center; }
.loading-screen--inline { min-height: 180px; }
.loader { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-rule-2); border-top-color: var(--color-accent); animation: nx-spin 800ms linear infinite; }

/* small utilities */
.ink { color: var(--color-ink); }
.on-band { color: var(--color-on-band); }
html.has-overlay, html.has-overlay body { overflow: hidden; }
.login__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.banner--danger { background: var(--color-danger-soft); }
.banner--danger .icon { color: var(--color-danger); }
.login__form .banner { margin: var(--space-lg) 0 0; }
.confirm__body { color: var(--color-ink-2); max-width: 52ch; }
.modal__body:has(> .confirm__body) { padding-bottom: var(--space-lg); }

/* two-step sign-in */
.mfa-steps { margin: var(--space-lg) 0 0; padding-left: 1.2rem; display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.mfa-steps li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mfa-qr { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }
.mfa-qr img { width: 160px; height: 160px; padding: 8px; background: #fff; border-radius: var(--radius-sm); flex: none; }
.mfa-qr > div { display: grid; gap: var(--space-xs); justify-items: start; min-width: 0; flex: 1 1 180px; }
.mfa-secret { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink); background: var(--color-sunken); padding: 6px 8px; border-radius: var(--radius-xs); overflow-wrap: anywhere; user-select: all; }

/* drop zones */
[data-drop].is-drag { outline: 2px dashed var(--color-accent); outline-offset: -4px; background: var(--color-accent-soft); }
.drop.is-drag { outline: 0; border-color: var(--color-accent); }
.is-busy { opacity: 0.6; pointer-events: none; }
.drop-hint { display: none !important; }
@media (hover: hover) and (pointer: fine) { .need--drop .drop-hint { display: block !important; font-size: var(--text-xs) !important; color: var(--color-faint) !important; margin-top: 2px; } }
.shot.has-img span { background: color-mix(in oklch, var(--color-surface) 88%, transparent); }

/* phone bottom bar (client portal) */
.tabbar { display: none; }

/* receipt check page */
.verify { min-height: 100vh; display: grid; place-items: center; padding: var(--space-xl) var(--space-md); }
.verify__card { width: min(480px, 100%); }
.verify__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.verify__state { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); font-weight: 600; }
.verify__state .icon { margin-top: 2px; }
.verify__state--ok { background: var(--color-success-soft); color: var(--color-success); }
.verify__state--bad { background: var(--color-danger-soft); color: var(--color-danger); }
.verify__amt { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; padding: var(--space-md) var(--space-md) 0; }

/* responsive */
@media (max-width: 1080px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--3 > div:nth-child(3) { border-left: 1px solid var(--color-rule); border-top: 0; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; z-index: 55; left: 0; top: 0; bottom: 0; height: 100%; width: min(300px, 86vw); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out); padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px)); visibility: hidden; }
  .rail.is-open { transform: none; box-shadow: var(--shadow-float); visibility: visible; }
  .topbar { padding: 0 var(--space-md); top: env(safe-area-inset-top, 0px); }
  .topbar__menu { display: inline-flex; }
  .view { padding: var(--space-lg) var(--space-md) var(--space-3xl); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__side { display: none; }
  .tabbar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in oklch, var(--color-paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--color-rule); }
  .tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--color-muted); font-size: 11px; font-weight: 500; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
  .tabbar__item .icon { width: 22px; height: 22px; }
  .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item[aria-current="page"] { color: var(--color-accent); }
  .tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--color-accent); }
  .tabbar__dot { position: absolute; top: 9px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 2px; background: var(--color-warn); box-shadow: 0 0 0 2px var(--color-paper); }
  .shell:has(.tabbar) .view { padding-bottom: calc(var(--tabbar-h) + var(--space-2xl) + env(safe-area-inset-bottom, 0px)); }
  body:has(.tabbar) .toast { bottom: calc(var(--tabbar-h) + var(--space-sm) + env(safe-area-inset-bottom, 0px)); }
  .cols-proj { grid-template-columns: minmax(0, 1fr) auto; }
  .cols-proj > :nth-child(2), .cols-proj > :nth-child(3), .cols-proj > :nth-child(4) { display: none; }
  .cols-ainv { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cols-ainv > :nth-child(2), .cols-ainv > :nth-child(3) { display: none; }
  .cols-client { grid-template-columns: minmax(0, 1fr) auto; }
  .cols-client > :nth-child(2), .cols-client > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .now { padding: var(--space-lg); }
  .now__top { grid-template-columns: minmax(0, 1fr); }
  .now__days { text-align: left; display: flex; align-items: baseline; gap: var(--space-xs); }
  .now__days strong { font-size: 2rem; }
  .track__labels { display: none; }
  .trow--head { display: none; }
  .cols-inv { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); }
  .cols-inv > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .cols-inv > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .cols-inv > :nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  .stats, .stats--3 { grid-template-columns: minmax(0, 1fr); }
  .stats > div, .stats--3 > div { border-left: 0 !important; border-top: 1px solid var(--color-rule); }
  .stats > div:first-child { border-top: 0; }
  .tl-day { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .progress-head { grid-template-columns: minmax(0, 1fr); }
  .addon { grid-template-columns: minmax(0, 1fr); }
  .addon__right { justify-content: flex-start; }
  .invdoc__meta, .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .rowlist > li { flex-wrap: wrap; row-gap: var(--space-sm); }
  .rowlist > li .body { flex: 1 1 calc(100% - 52px); }
  .rowlist > li > .btn, .rowlist > li > .chip, .rowlist > li > .actions { margin-left: 52px; }
  .page-head h1 { font-size: var(--text-xl); }
  .line-editor__row { grid-template-columns: minmax(0, 1fr) 60px; }
  .line-editor__row > :nth-child(3) { grid-column: 1; }
  .btn--wide { width: 100%; }
  .modal { top: auto; bottom: 0; left: 0; width: 100%; max-height: calc(100vh - 40px); border-radius: var(--radius-md) var(--radius-md) 0 0; transform: translateY(16px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal--wide { width: 100%; }
  .modal.is-open { transform: none; }
  .modal__foot .btn { flex: 1 1 auto; }
  .composer .btn { padding: 0 var(--space-sm); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 120ms !important; animation: none !important; }
  .drawer, .rail, .modal, .toast, .menu, .popover { transition-property: opacity, visibility !important; }
}

/* ---------- payment plan editor (new project) ---------- */
.plan-ed { margin-top: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-sm) var(--space-md) var(--space-md); }
.plan-ed__head, .plan-ed__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(88px, .7fr) minmax(130px, 1fr) 36px; gap: var(--space-sm); align-items: center; }
.plan-ed__head { padding: 4px 0 6px; font-size: var(--text-xs); color: var(--color-muted); border-bottom: 1px solid var(--color-rule); }
.plan-ed__row { padding: 8px 0; border-bottom: 1px solid var(--color-rule); }
.plan-ed__name strong { display: block; font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; }
.plan-ed__name small { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: 1px; }
.plan-ed .input { height: 36px; font-variant-numeric: tabular-nums; }
.affix--suf .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); text-transform: none; letter-spacing: 0; }
.affix__suf { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--color-rule-2); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-sunken); color: var(--color-muted); font-size: var(--text-sm); }
.plan-ed .affix .input { text-transform: none; letter-spacing: 0; }
.plan-ed__foot { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-sm); }
.plan-ed__check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.plan-ed__check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.plan-ed__sum { margin-top: var(--space-sm); padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
.plan-ed__sum.is-ok { background: var(--color-success-soft); color: var(--color-success); }
.plan-ed__sum.is-bad { background: var(--color-danger-soft); color: var(--color-danger); }
@media (max-width: 640px) {
  .plan-ed__head { display: none; }
  .plan-ed__row { grid-template-columns: 92px minmax(0, 1fr) 36px; }
  .plan-ed__name { grid-column: 1 / -1; }
}

/* ---------- payment plan card (admin Invoices tab + client Invoices page) ---------- */
.plancard { padding: var(--space-md) var(--space-lg) var(--space-sm); margin-bottom: var(--space-lg); }
.plancard__head { display: flex; justify-content: space-between; gap: var(--space-md); align-items: flex-end; }
.plancard__head h3 { font-size: var(--text-md); }
.plancard__head p { font-size: var(--text-sm); color: var(--color-muted); margin-top: 2px; }
.plancard__pct { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plancard__meter i { background: var(--color-success); }
.plancard__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.plancard__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: var(--space-sm); align-items: center; padding: 10px 0; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.plancard__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--color-sunken); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.plancard__nm { color: var(--color-ink); font-weight: 600; min-width: 0; }
.plancard__nm small { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.plancard__sh { color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.plancard__am { color: var(--color-ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 96px; }
.plancard__list li.is-paid .plancard__n { background: var(--color-success-soft); color: var(--color-success); }
.plancard__list li.is-paid .plancard__nm small { color: var(--color-success); }
.plancard__list li.is-due .plancard__n, .plancard__list li.is-proof .plancard__n { background: var(--color-warn-soft); color: var(--color-warn); }
.plancard__list li.is-later { opacity: .78; }
.stats__pc { display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-success); letter-spacing: 0; }
@media (max-width: 480px) { .plancard__list li { grid-template-columns: 26px minmax(0, 1fr) auto; } .plancard__sh { display: none; } }

/* ---------- record-payment preview ---------- */
.pf-impact { display: grid; gap: 4px; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.pf-impact:empty { display: none; }
.pf-impact b { color: var(--color-ink); }
.pf-impact__warn { color: var(--color-warn); font-weight: 600; }
.pf-impact .meter { display: flex; margin-top: 6px; }
.pf-impact .meter i { background: var(--color-success); }
.pf-impact .meter b { display: block; height: 100%; background: var(--color-accent); }

/* ---------- signature setting ---------- */
.sigset__box { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 104px; margin-top: var(--space-sm); padding: var(--space-md); border: 1px dashed var(--color-rule-2); border-radius: var(--radius-md); background: #fff; }
.sigset__box img { max-height: 80px; max-width: 100%; width: auto; }
.sigset__box .muted { color: oklch(52% .022 255); }
.sigset__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); }

/* ---------- password field with show/hide ---------- */
.pw { position: relative; display: flex; }
.pw .input { padding-right: 44px; }
.pw__eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; color: var(--color-muted); }
.pw__eye:hover { color: var(--color-ink); }

/* ---------- step comments ---------- */
.cmts { margin-top: var(--space-sm); }
.cmts__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-xs); margin-left: calc(-1 * var(--space-xs)); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.cmts__toggle:hover { color: var(--color-ink); background: var(--color-sunken); }
.cmts__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.cmts__chev { transition: transform var(--dur-fast) var(--ease-out); }
.cmts__toggle[aria-expanded="true"] .cmts__chev { transform: rotate(180deg); }
.cmts__new { margin-left: 2px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; }
.cmts__body { margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.cmts__list { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); }
.cmt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-xs); }
.cmt .avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
.cmt--me .avatar { background: var(--color-sunken); color: var(--color-ink-2); }
.cmt__main { min-width: 0; }
.cmt__main .tag { display: inline-block; padding: 0 5px; border-radius: var(--radius-xs); background: var(--color-accent-soft); color: var(--color-accent); font-size: 11px; font-weight: 600; }
.cmt__text { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-sunken); color: var(--color-ink); font-size: var(--text-sm); white-space: pre-line; overflow-wrap: anywhere; }
.cmt--me .cmt__text { background: var(--color-accent-soft); }
.cmt__att, .cmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cmt-chips:empty { display: none; }
.att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 0 var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: var(--text-xs); text-decoration: none; cursor: pointer; }
.att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.att .icon { color: var(--color-accent); flex: none; }
a.att:hover, button.att:hover { border-color: var(--color-accent); }
.att--draft { cursor: default; background: var(--color-sunken); }
.att--draft button { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-muted); cursor: pointer; }
.att--draft button:hover { color: var(--color-danger); }
.cmt-compose { display: grid; gap: var(--space-xs); }
.cmt-compose .textarea { min-height: 64px; }
.cmt-note { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-warn-soft); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.5; }
.cmt-note .icon { color: var(--color-warn); margin-top: 1px; flex: none; }
.cmt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.cmt-link { display: flex; gap: 6px; flex: 1 1 240px; min-width: 0; }
.cmt-link .input { height: 32px; font-size: var(--text-sm); }
.cmt-send { margin-left: auto; }
@media (max-width: 640px) { .cmt-send { flex: 1 1 100%; } }

/* ---------- admin: client login panel ---------- */
.login-box { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.login-box__id { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.login-box__id .mono { color: var(--color-ink); font-size: var(--text-md); letter-spacing: 0.04em; }
.login-box__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xs); }
.creds__secret { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--color-surface); font-family: var(--font-mono, monospace); letter-spacing: 0.06em; }

/* ---------- light / dark switch ---------- */
.theme-switch { position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex: none; width: 62px; height: 32px; padding: 0 7px; border-radius: var(--radius-full); border: 1px solid var(--color-rule-2); background: var(--color-sunken); cursor: pointer; transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.theme-switch:hover { border-color: var(--color-faint); }
.theme-switch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-switch__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 2px oklch(10% 0.02 250 / 0.2), 0 3px 10px oklch(10% 0.02 250 / 0.12); transition: transform 420ms cubic-bezier(0.34, 1.45, 0.5, 1), background-color var(--dur-med) var(--ease-out); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(30px); }
.theme-switch__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; color: var(--color-faint); transition: color var(--dur-med) var(--ease-out), transform 480ms cubic-bezier(0.34, 1.45, 0.5, 1); }
.theme-switch[aria-checked="false"] .theme-switch__icon--sun { color: var(--color-warn); }
.theme-switch[aria-checked="true"] .theme-switch__icon--moon { color: var(--color-accent); }
.theme-switch[aria-checked="true"] .theme-switch__icon--sun { transform: rotate(-90deg) scale(0.8); }
.theme-switch[aria-checked="false"] .theme-switch__icon--moon { transform: rotate(30deg) scale(0.8); }
.theme-switch:active .theme-switch__thumb { width: 28px; }
.theme-switch[aria-checked="true"]:active .theme-switch__thumb { transform: translateX(26px); }
.theme-switch--corner { position: absolute; top: var(--space-lg); right: var(--space-lg); z-index: 5; background: color-mix(in oklch, var(--color-surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.login { position: relative; }
/* colours glide when the theme changes (the class is added for ~0.4s by NX.ui.theme) */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 380ms ease, border-color 380ms ease, color 380ms ease, fill 380ms ease, stroke 380ms ease, box-shadow 380ms ease !important; }
.theme-fade .theme-switch__thumb { transition: transform 420ms cubic-bezier(0.34, 1.45, 0.5, 1), background-color 380ms ease !important; }
.theme-fade .theme-switch__icon { transition: color 380ms ease, transform 480ms cubic-bezier(0.34, 1.45, 0.5, 1) !important; }

/* ---------- motion ---------- */
html { scroll-behavior: smooth; }
@keyframes nx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-grow { from { transform: scaleX(0); } }
/* page change: sections rise in one after another */
.view--enter > * { animation: nx-rise 460ms var(--ease-out) both; }
.view--enter > :nth-child(2) { animation-delay: 50ms; }
.view--enter > :nth-child(3) { animation-delay: 100ms; }
.view--enter > :nth-child(4) { animation-delay: 150ms; }
.view--enter > :nth-child(5) { animation-delay: 200ms; }
.view--enter > :nth-child(n+6) { animation-delay: 240ms; }
.view--enter .meter i, .view--enter .paybar i, .view--enter .track__seg--done, .view--enter .track__seg--active { transform-origin: left center; animation: nx-grow 900ms var(--ease-out) 180ms both; }
.login--enter .login__form > * { animation: nx-rise 520ms var(--ease-out) both; }
.login--enter .login__form > :nth-child(2) { animation-delay: 60ms; }
.login--enter .login__form > :nth-child(3) { animation-delay: 110ms; }
.login--enter .login__form > :nth-child(n+4) { animation-delay: 160ms; }
.login--enter .login__side { animation: nx-fade 700ms var(--ease-out) both; }
.cmts__body.is-entering { animation: nx-rise 320ms var(--ease-out) both; }
/* everything you can touch eases instead of snapping */
.nav__item, .tabbar__item, .tab, .menu__item, .switcher__btn, .linkbtn, .att, .cmts__toggle, .suggest button, .check, .trow--click, .file, .addon, .notif { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.nav__item:active, .tabbar__item:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .view--enter > *, .view--enter .meter i, .view--enter .paybar i, .view--enter .track__seg--done, .view--enter .track__seg--active, .login--enter .login__form > *, .login--enter .login__side, .cmts__body.is-entering { animation: none !important; }
  .theme-switch__thumb, .theme-switch__icon { transition-duration: 1ms !important; }
}

/* ---------- more services (Add-ons page + Overview) ---------- */
.catalog { margin-top: var(--space-2xl); }
.catalog__group { margin: var(--space-lg) 0 var(--space-sm); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-sm); }
.svc { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.svc:hover { border-color: var(--color-rule-2); box-shadow: 0 10px 24px -16px oklch(20% 0.03 250 / 0.45); transform: translateY(-2px); }
.svc__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); }
.svc__ico--sm { width: 32px; height: 32px; }
.svc__body h5 { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; color: var(--color-ink); }
.svc__body p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.svc__cta { grid-column: 2; justify-self: start; }
.catalog__more { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.catalog__more strong { color: var(--color-ink); font-weight: 600; }
.grow__row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.grow__row:last-child { border-bottom: 0; }
.grow__txt { flex: 1; min-width: 0; }
.grow__txt strong { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.grow__txt span { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { background: var(--color-accent-soft); box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-accent) 35%, transparent), 0 3px 12px oklch(5% 0.02 250 / 0.5); }

/* ---------- phone polish ---------- */
.step__tools { display: inline-flex; flex-wrap: nowrap; gap: 2px; margin-left: auto; }
.crumb-short { display: none; }
.topbar__back { display: none; }
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  button, a, label, .trow--click { touch-action: manipulation; }
  /* 16px stops iPhone Safari zooming in when you tap a field */
  .input, .textarea, .select { font-size: 16px; }
  .topbar__crumb { font-size: var(--text-md); }
  .topbar__crumb .crumb-ctx { display: none; }
  .topbar__crumb strong { font-weight: 600; }
  .topbar__back { display: inline-flex; margin-left: calc(-1 * var(--space-xs)); }
  .topbar__back + .topbar__menu { display: none; }
  /* project tabs stay reachable while you scroll, and swipe sideways */
  .tabs { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 15; margin: 0 calc(-1 * var(--space-md)) var(--space-lg); padding: 0 var(--space-md); background: color-mix(in oklch, var(--color-paper) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scroll-padding-inline: var(--space-md); }
  .tab { height: 46px; }
  .tabbar__item--new .icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--color-accent) 70%, transparent); }
  .tabbar__item--new { color: var(--color-ink); gap: 1px; }
  .tabbar__item--new span { display: none; }
}
@media (max-width: 640px) {
  .page-head { margin-bottom: var(--space-lg); gap: var(--space-sm); }
  .page-head p { font-size: var(--text-sm); }
  .page-head__actions { width: 100%; }
  .page-head__actions > * { flex: 1 1 auto; }
  .page-head__actions .select { flex-basis: 100%; width: 100%; height: 44px; }
  .page-head > div:last-child > .btn--primary:only-child { width: 100%; }
  /* number tiles: two per row instead of one */
  .stats, .stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-lg); }
  .stats > div, .stats--3 > div { padding: var(--space-sm) var(--space-md); border-top: 0; }
  .stats > div:nth-child(even) { border-left: 1px solid var(--color-rule) !important; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats span { font-size: var(--text-xs); }
  .stats strong { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; }
  /* list rows keep their button on the right instead of dropping under the text */
  .rowlist > li { flex-wrap: nowrap; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
  .rowlist > li .body { flex: 1 1 auto; }
  .rowlist > li > .btn, .rowlist > li > .chip, .rowlist > li > .actions, .rowlist > li > label.btn { margin-left: 0; flex: none; }
  .rowlist > li > .actions { flex-direction: column; align-items: flex-end; }
  .section-title { flex-wrap: wrap; row-gap: 2px; }
  .section-title > .muted { flex: 1 1 100%; }
  .section-title h3 { font-size: var(--text-md); }
  .step { gap: var(--space-sm); grid-template-columns: 30px minmax(0, 1fr); }
  .step__mark { width: 30px; height: 30px; }
  .step:not(:last-child)::before { left: 14px; top: 32px; }
  .step__card { padding: var(--space-xs) var(--space-sm) var(--space-sm); }
  .step__actions { gap: 6px; }
  .step__actions > .btn:not(.btn--icon) { flex: 1 1 auto; }
  .step__tools { flex: 1 1 100%; justify-content: flex-end; }
  .composer { padding: var(--space-sm); position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .thread { max-height: none; padding: var(--space-md); }
  .msg { max-width: 92%; }
  /* services: swipe sideways through each group */
  .catalog__grid { display: flex; overflow-x: auto; gap: var(--space-sm); margin: 0 calc(-1 * var(--space-md)); padding: 2px var(--space-md) var(--space-sm); scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-md); scrollbar-width: none; overscroll-behavior-x: contain; }
  .catalog__grid::-webkit-scrollbar { display: none; }
  .catalog__grid > .svc { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
  .catalog__group { display: flex; justify-content: space-between; align-items: baseline; }
  .catalog__group::after { content: "Swipe"; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--color-faint); }
  .svc:hover { transform: none; box-shadow: none; }
  .catalog__more .btn { width: 100%; }
  .grow__row { padding: var(--space-sm); }
  .cmt-tools .btn--ghost { padding: 0 var(--space-xs); }
  .drawer { width: 100vw; border-left: 0; }
  .drawer__foot { padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .modal__foot { padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); }
  .theme-switch--corner { top: calc(var(--space-md) + env(safe-area-inset-top, 0px)); right: var(--space-md); }
  .login__form { padding-top: calc(var(--space-3xl) + env(safe-area-inset-top, 0px)); }
}

/* ---------- install as an app ---------- */
.install-card { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-band); color: var(--color-on-band-muted); }
.install-card__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: oklch(10% 0.02 250); }
.install-card__ico .logo { height: 26px; }
.install-card__txt { flex: 1; min-width: 0; }
.install-card__txt strong { display: block; color: var(--color-on-band); font-size: var(--text-sm); font-weight: 600; }
.install-card__txt span { display: block; font-size: var(--text-xs); }
.install-card .btn--ghost { color: var(--color-on-band-muted); }
.install-card .btn--ghost:hover { background: oklch(100% 0 0 / 0.08); color: var(--color-on-band); }
.install-steps { margin: 0; padding-left: 20px; display: grid; gap: var(--space-sm); color: var(--color-ink-2); }
.install-steps .icon { vertical-align: -3px; color: var(--color-accent); }
.pw-set { display: flex; gap: var(--space-xs); }
.pw-set .input { flex: 1; letter-spacing: 0.04em; }