/* ================================================================ Laskutus - five themes
   Grafiitti (dark), Paperi (light), Verstas (big tiles), Lasi (macOS spirit), Fluent (Windows 11 spirit).
   The same page; the theme changes the colours, shapes and where the menu sits. */

:root, [data-theme="grafiitti"] {
  color-scheme: dark;
  --bg: #0D0E10; --nav-bg: #0D0E10; --main-bg: #0D0E10; --surface: #141619; --surface-2: #1B1D21; --hover: #1F2125;
  --border: #23262B; --border-2: #2E3238; --text: #ECECEE; --muted: #9EA1A8; --accent: #FFC233; --on-accent: #0D0E10;
  --accent-soft: #2A2410; --accent-text: #FFC233; --danger: #FF7A6B; --ok: #8FE0B5; --input: #101215;
  --font: 'Inter', system-ui, sans-serif; --font-head: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs: 14px; --r: 14px; --r-sm: 9px; --r-btn: 10px; --h: 40px; --shadow: none; --head-size: 26px; --head-w: 600; --head-ls: -0.02em;
  --st-open-bg: #1B2440; --st-open-fg: #A9BBFF; --st-overdue-bg: #3A2B0C; --st-overdue-fg: #FFC233;
  --st-paid-bg: #12301F; --st-paid-fg: #8FE0B5; --st-draft-bg: #23252A; --st-draft-fg: #C9CBD1;
  --st-credited-bg: #2E1F3A; --st-credited-fg: #D4B3FF; --st-issued-bg: #1B2440; --st-issued-fg: #A9BBFF;
  --m-card: #FFC233; --m-invoice: #6E8BFF; --m-cash: #7FD1A8; --m-mobilepay: #B9A3FF; --m-credit: #8A8D95;
  --t-receipt-bg: #ECECEE; --t-receipt-fg: #0D0E10; --t-receipt-chip: #4E5159; --t-invoice-bg: #FFC233; --t-invoice-fg: #0D0E10;
  --t-over-bg: #2A2410; --t-over-fg: #FFD873; --t-over-btn: #FFC233; --t-over-btn-fg: #0D0E10; --dark-btn: #ECECEE; --dark-btn-fg: #0D0E10;
  --sel: #1F2433; --sel-fg: var(--text);
}

[data-theme="paperi"] {
  color-scheme: light;
  --bg: #F6F6F3; --nav-bg: #FFFFFF; --main-bg: #F6F6F3; --surface: #FFFFFF; --surface-2: #F1F1EC; --hover: #F1F1EC;
  --border: #E6E6E1; --border-2: #D6D6CF; --text: #16171A; --muted: #5E6068; --accent: #2B45E6; --on-accent: #FFFFFF;
  --accent-soft: #E9ECFD; --accent-text: #2B45E6; --danger: #C42B1C; --ok: #0F7B5F; --input: #FFFFFF;
  --font: 'Geist', 'Inter', system-ui, sans-serif; --font-head: 'Geist', 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 16px; --r-sm: 10px; --r-btn: 999px; --h: 40px; --shadow: 0 1px 2px rgba(0,0,0,.04); --head-size: 34px; --head-w: 600; --head-ls: -0.035em;
  --st-open-bg: #E9ECFD; --st-open-fg: #2337B8; --st-overdue-bg: #FDEBDD; --st-overdue-fg: #9A3F07;
  --st-paid-bg: #DFF3EA; --st-paid-fg: #0B5E48; --st-draft-bg: #EEEEE9; --st-draft-fg: #4A4C52;
  --st-credited-bg: #F0E8FB; --st-credited-fg: #5B2E9E; --st-issued-bg: #E9ECFD; --st-issued-fg: #2337B8;
  --m-card: #2B45E6; --m-invoice: #16171A; --m-cash: #0F7B5F; --m-mobilepay: #8A63D2; --m-credit: #9A9AA0;
  --t-receipt-bg: #16171A; --t-receipt-fg: #FFFFFF; --t-receipt-chip: #C8C9CE; --t-invoice-bg: #2B45E6; --t-invoice-fg: #FFFFFF;
  --t-over-bg: #FDEBDD; --t-over-fg: #6B2A07; --t-over-btn: #6B2A07; --t-over-btn-fg: #FFFFFF; --dark-btn: #16171A; --dark-btn-fg: #FFFFFF;
  --sel: #FFFFFF; --sel-fg: var(--text);
}

[data-theme="verstas"] {
  color-scheme: light;
  --bg: #EFEBE3; --nav-bg: #EFEBE3; --main-bg: #EFEBE3; --surface: #FBF9F4; --surface-2: #F3EFE6; --hover: #EDE8DE;
  --border: #DDD7CB; --border-2: #CFC8BA; --text: #1A1916; --muted: #5F5A50; --accent: #C2410C; --on-accent: #FFFFFF;
  --accent-soft: #F7D9C4; --accent-text: #B03A08; --danger: #B42318; --ok: #1F6F4A; --input: #FFFFFF;
  --font: 'Inter', system-ui, sans-serif; --font-head: 'Bricolage Grotesque', 'Inter', sans-serif; --mono: 'Inter', system-ui, sans-serif;
  --fs: 15px; --r: 24px; --r-sm: 14px; --r-btn: 14px; --h: 48px; --shadow: none; --head-size: 42px; --head-w: 800; --head-ls: -0.03em;
  --st-open-bg: #E3DED3; --st-open-fg: #3A362F; --st-overdue-bg: #F7D9C4; --st-overdue-fg: #6B2A07;
  --st-paid-bg: #D7EBDD; --st-paid-fg: #1F5135; --st-draft-bg: #E8E3D8; --st-draft-fg: #5F5A50;
  --st-credited-bg: #E7DDF0; --st-credited-fg: #553A72; --st-issued-bg: #E3DED3; --st-issued-fg: #3A362F;
  --m-card: #C2410C; --m-invoice: #1A1916; --m-cash: #8C8576; --m-mobilepay: #6E5C9E; --m-credit: #B9B3A6;
  --t-receipt-bg: #1A1916; --t-receipt-fg: #F6F3EC; --t-receipt-chip: #B9B3A6; --t-invoice-bg: #C2410C; --t-invoice-fg: #FFFFFF;
  --t-over-bg: #F7D9C4; --t-over-fg: #4A1D05; --t-over-btn: #4A1D05; --t-over-btn-fg: #FBEDE3; --dark-btn: #1A1916; --dark-btn-fg: #F6F3EC;
  --sel: #FFFFFF; --sel-fg: var(--text);
}

[data-theme="lasi"] {
  color-scheme: light;
  --bg: #E9EEF6; --nav-bg: rgba(255,255,255,.55); --main-bg: transparent; --surface: rgba(255,255,255,.86); --surface-2: rgba(120,120,128,.10);
  --hover: rgba(120,120,128,.10); --border: rgba(0,0,0,.08); --border-2: rgba(0,0,0,.14); --text: #1D1D1F; --muted: #636369;
  --accent: #0A66D8; --on-accent: #FFFFFF; --accent-soft: rgba(10,102,216,.12); --accent-text: #0A5CC2; --danger: #C4271B; --ok: #1E7A4C; --input: #FFFFFF;
  --font: 'Inter', -apple-system, system-ui, sans-serif; --font-head: 'Inter', -apple-system, system-ui, sans-serif; --mono: 'Inter', system-ui, sans-serif;
  --fs: 13.5px; --r: 18px; --r-sm: 9px; --r-btn: 999px; --h: 36px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(30,45,80,.06);
  --head-size: 24px; --head-w: 700; --head-ls: -0.01em;
  --st-open-bg: rgba(10,102,216,.12); --st-open-fg: #0A4FA8; --st-overdue-bg: rgba(212,90,10,.13); --st-overdue-fg: #9C3F06;
  --st-paid-bg: rgba(30,142,90,.13); --st-paid-fg: #17643F; --st-draft-bg: rgba(120,120,128,.14); --st-draft-fg: #48484D;
  --st-credited-bg: rgba(142,68,201,.13); --st-credited-fg: #6A2D9C; --st-issued-bg: rgba(10,102,216,.12); --st-issued-fg: #0A4FA8;
  --m-card: #0A66D8; --m-invoice: #AF52DE; --m-cash: #30A46C; --m-mobilepay: #E5852B; --m-credit: #8E8E93;
  --t-receipt-bg: #0A66D8; --t-receipt-fg: #FFFFFF; --t-receipt-chip: rgba(255,255,255,.75); --t-invoice-bg: #FFFFFF; --t-invoice-fg: #1D1D1F;
  --t-over-bg: rgba(255,236,224,.92); --t-over-fg: #7A2E04; --t-over-btn: #C4520A; --t-over-btn-fg: #FFFFFF; --dark-btn: #1D1D1F; --dark-btn-fg: #FFFFFF;
  --sel: #0A66D8; --sel-fg: #FFFFFF;
}

[data-theme="fluent"] {
  color-scheme: light;
  --bg: #EEF1F5; --nav-bg: transparent; --main-bg: #F9FAFB; --surface: #FFFFFF; --surface-2: #F5F6F8; --hover: rgba(0,0,0,.045);
  --border: #E5E7EB; --border-2: #D1D4D9; --text: #1B1B1B; --muted: #5F6368; --accent: #005FB8; --on-accent: #FFFFFF;
  --accent-soft: #E6F0FA; --accent-text: #005FB8; --danger: #C42B1C; --ok: #0F7B0F; --input: #FFFFFF;
  --font: 'Segoe UI Variable Text', 'Segoe UI', 'Inter', system-ui, sans-serif; --font-head: 'Segoe UI Variable Display', 'Segoe UI', 'Inter', system-ui, sans-serif;
  --mono: 'Segoe UI', 'Inter', system-ui, sans-serif;
  --fs: 14px; --r: 8px; --r-sm: 4px; --r-btn: 4px; --h: 32px; --shadow: 0 1px 2px rgba(0,0,0,.04); --head-size: 28px; --head-w: 600; --head-ls: 0;
  --st-open-bg: transparent; --st-open-fg: #005FB8; --st-overdue-bg: transparent; --st-overdue-fg: #C42B1C;
  --st-paid-bg: transparent; --st-paid-fg: #0F7B0F; --st-draft-bg: transparent; --st-draft-fg: #5F6368;
  --st-credited-bg: transparent; --st-credited-fg: #8764B8; --st-issued-bg: transparent; --st-issued-fg: #005FB8;
  --m-card: #005FB8; --m-invoice: #8764B8; --m-cash: #0F7B0F; --m-mobilepay: #CA5010; --m-credit: #8A8A8A;
  --t-receipt-bg: #FFFFFF; --t-receipt-fg: #1B1B1B; --t-receipt-chip: #5F6368; --t-invoice-bg: #005FB8; --t-invoice-fg: #FFFFFF;
  --t-over-bg: #FFF4CE; --t-over-fg: #5C4400; --t-over-btn: #FFFFFF; --t-over-btn-fg: #1B1B1B; --dark-btn: #FFFFFF; --dark-btn-fg: #1B1B1B;
  --sel: #EAF2FB; --sel-fg: var(--text);
}

/* ================================================================ base */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 var(--fs, 14px)/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
a { color: var(--accent-text); }
.muted { color: var(--muted); }
.small { font-size: .88em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pre { white-space: pre-line; }
.grow { flex: 1 1 auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { flex-shrink: 0; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.loading { padding: 40px; color: var(--muted); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 16px; border-radius: var(--r-btn);
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.primary.danger { background: var(--danger); color: #fff; }
.btn.dark { background: var(--dark-btn); color: var(--dark-btn-fg); border-color: transparent; font-weight: 600; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.small { height: calc(var(--h) - 6px); padding: 0 12px; font-size: .92em; }
.btn.small.ghost { padding: 0 8px; }
.btn.big { height: calc(var(--h) + 6px); padding: 0 22px; }
.btn.wide { width: 100%; }
.danger-t { color: var(--danger); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.inp { width: 100%; height: var(--h); padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--input); color: var(--text); outline: none; }
textarea.inp { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp.num { text-align: right; font-family: var(--mono); }
.inp.big { height: 54px; font-size: 1.15em; border: 0; background: transparent; box-shadow: none; }
.inp.date { width: 130px; }
select.inp { padding-right: 28px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f-label { font-size: .85em; color: var(--muted); font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.form-grid.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span2 { grid-column: 1 / -1; }
.form-msg { color: var(--danger); margin: 0; min-height: 0; font-weight: 500; white-space: pre-line; }
.form-msg:empty { display: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: calc(var(--r-sm) + 4px); background: var(--surface-2); }
.seg-i { position: relative; cursor: pointer; }
.seg-i input { position: absolute; opacity: 0; pointer-events: none; }
.seg-i span { display: inline-flex; align-items: center; height: calc(var(--h) - 4px); padding: 0 16px; border-radius: var(--r-sm); font-weight: 500; color: var(--muted); }
.seg-i input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); font-weight: 600; }
.seg-i input:focus-visible + span { outline: 2px solid var(--accent); }
.seg.small .seg-i span { height: calc(var(--h) - 10px); padding: 0 12px; font-size: .92em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-b { height: calc(var(--h) - 6px); padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; font-weight: 500; }
.chip-b.on { background: var(--text); color: var(--bg); border-color: transparent; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st-open, .st-issued { background: var(--st-open-bg); color: var(--st-open-fg); }
.st-overdue { background: var(--st-overdue-bg); color: var(--st-overdue-fg); }
.st-paid { background: var(--st-paid-bg); color: var(--st-paid-fg); }
.st-draft { background: var(--st-draft-bg); color: var(--st-draft-fg); }
.st-credited { background: var(--st-credited-bg); color: var(--st-credited-fg); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.sec-t { font-size: .78em; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: 10px; display: block; }
.link { font-weight: 600; text-decoration: none; }
.pad { padding: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ================================================================ the frame (menu on the left by default) */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100vh; }
.nav { background: var(--nav-bg); border-right: 1px solid var(--border); padding: 20px 12px 14px; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-family: var(--font-head); }
.brand-t { display: flex; flex-direction: column; min-width: 0; }
.b1 { font-weight: 700; font-size: 15px; font-family: var(--font-head); }
.b2 { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-i { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 500; }
.nav-i:hover { background: var(--hover); color: var(--text); }
.nav-i.on { background: var(--surface-2); color: var(--text); }
.nav-fill { flex: 1; }
.me { display: flex; align-items: center; gap: 10px; padding: 14px 6px 0; border-top: 1px solid var(--border); margin-top: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.me-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.me-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-r { font-size: 12px; color: var(--muted); }
.lock-btn { border-color: var(--border-2); }
.main { background: var(--main-bg); display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 24px 32px 20px; gap: 16px; }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kicker { font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }
.kicker:empty { display: none; }
.head h1 { font-family: var(--font-head); font-size: var(--head-size); font-weight: var(--head-w); letter-spacing: var(--head-ls); line-height: 1.1; }
.head-tools { display: flex; gap: 8px; align-items: center; }
.page { flex: 1; min-height: 0; overflow: auto; margin: 0 -8px; padding: 2px 8px 8px; }
#banners { display: flex; flex-direction: column; gap: 8px; }
#banners:empty { display: none; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 500; text-align: left; border: 1px solid transparent; width: 100%; }
.banner.warn { background: var(--st-overdue-bg); color: var(--st-overdue-fg); border-color: var(--border); }
.banner.bad { background: var(--danger); color: #fff; cursor: pointer; }
.shell[data-page="editor"] .head-tools { display: none; }

/* ================================================================ home (tiles) */
.home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(180px, auto) minmax(250px, 1fr) minmax(220px, 1fr); gap: 16px; min-height: 100%; }
.tile { border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); min-height: 0; min-width: 0; }
a.tile { cursor: pointer; transition: transform .12s ease; }
a.tile:hover { transform: translateY(-1px); }
.t-receipt { grid-column: span 2; background: var(--t-receipt-bg); color: var(--t-receipt-fg); border-color: transparent; justify-content: space-between; }
.t-invoice { background: var(--t-invoice-bg); color: var(--t-invoice-fg); border-color: transparent; justify-content: space-between; }
.t-paid { justify-content: space-between; }
.no-issue .t-paid { grid-column: 1 / -1; }
.t-today { grid-column: 1; grid-row: 2 / span 2; }
.t-open { grid-column: 2 / span 2; grid-row: 2 / span 2; overflow: hidden; }
.t-over { grid-column: 4; grid-row: 2; background: var(--t-over-bg); color: var(--t-over-fg); border-color: transparent; }
.t-over.calm { background: var(--surface); color: var(--text); border-color: var(--border); }
.t-over .btn.dark { background: var(--t-over-btn); color: var(--t-over-btn-fg); }
.t-month { grid-column: 4; grid-row: 3; }
.no-sales .t-open { grid-column: 1 / span 3; }
.no-sales .t-over { grid-row: 2 / span 2; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tile-big { font-family: var(--font-head); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.t-invoice .tile-big { font-size: 32px; }
.tile-mid { font-family: var(--font-head); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.tile-plus { width: 52px; height: 52px; border-radius: 50%; background: var(--t-receipt-fg); color: var(--t-receipt-bg); display: grid; place-items: center; flex-shrink: 0; }
.chip { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid currentColor; display: inline-flex; align-items: center; font-size: 13px; opacity: .9; }
.t-receipt .tile-sub { color: var(--t-receipt-chip); margin-left: 6px; }
.tile-sub { font-size: 13.5px; opacity: .85; }
.tile-sub.up { color: var(--ok); opacity: 1; font-weight: 600; }
.tile-label { font-weight: 600; color: var(--muted); }
.t-over .tile-label { color: inherit; opacity: .8; }
.tile-num { white-space: nowrap; font-family: var(--font-head); font-size: clamp(22px, 2.1vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tile-head h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.meth { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.meth-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.bar { height: 9px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.bar-f { height: 100%; border-radius: 5px; }
.m-card { background: var(--m-card); } .m-invoice { background: var(--m-invoice); } .m-cash { background: var(--m-cash); }
.m-mobilepay { background: var(--m-mobilepay); } .m-credit { background: var(--m-credit); }
.share { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; margin-top: 4px; }
.share-l { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.olist { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.orow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-height: 56px; padding: 6px 16px;
  border-radius: calc(var(--r) - 8px); background: var(--surface-2); text-decoration: none; color: var(--text); }
.orow:hover { background: var(--hover); }
.o-no { font-weight: 600; color: var(--muted); font-family: var(--mono); }
.o-main { display: flex; flex-direction: column; min-width: 0; }
.o-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-main span { font-size: 13px; }
.o-sum { font-size: 16px; font-family: var(--mono); }

/* ================================================================ lists, tables, detail panel */
.docs { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; height: 100%; min-height: 480px; }
.list-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.docs .list-card { height: 100%; }
.list-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.list-bar input[type=search] { width: auto; flex: 0 1 260px; min-width: 160px; }
.list-title { font-weight: 600; padding: 0 6px; }
.list-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { height: 34px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--muted); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.tab:hover { background: var(--hover); }
.tab.on { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.cnt { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.tbl-wrap { overflow: auto; flex: 1; min-height: 0; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; background: var(--surface); z-index: 1; text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 0 14px; height: 50px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl .num { text-align: right; }
.tbl tbody tr { cursor: default; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr.sel { background: var(--sel); color: var(--sel-fg); }
.tbl tbody tr.sel .muted { color: inherit; opacity: .8; }
.tbl tbody tr.off { opacity: .55; }
.tbl tr.empty td { color: var(--muted); height: 80px; text-align: center; }
.tbl td.cust { min-width: 190px; max-width: 340px; }
.tbl td.cust b, .tbl td.cust span { display: block; overflow: hidden; text-overflow: ellipsis; }
.tbl td.cust span { font-size: 12px; font-weight: 400; }
.row-acts { text-align: right; width: 1%; }
.row-acts .btn { height: 32px; }
.detail { display: flex; flex-direction: column; gap: 16px; padding: 22px; min-height: 0; overflow: auto; }
.d-top { display: flex; flex-direction: column; gap: 8px; }
.d-id h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; margin: 2px 0; }
.d-id { display: flex; flex-direction: column; }
.d-total { font-family: var(--font-head); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.d-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.f-l { font-size: 11.5px; color: var(--muted); }
.f-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact .pill { align-self: flex-start; }
.d-lines { display: flex; flex-direction: column; }
.d-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.d-line > div { display: flex; flex-direction: column; min-width: 0; }
.d-line b { overflow-wrap: anywhere; }
.d-sum { padding-top: 10px; }
.d-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- search, reports */
.search-bar { display: flex; align-items: center; gap: 12px; padding: 4px 18px; color: var(--muted); }
.search-bar .inp { color: var(--text); }
.rep-bar { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.rep-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rep-row > .f-label { align-self: center; min-width: 120px; }
.rep-row .field { width: 140px; }
.sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 6px; }
.rep-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rep-sum, .rep-vat { padding: 18px 20px; }
.mini { width: 100%; border-collapse: collapse; }
.mini th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px 8px; }
.mini td { padding: 7px 8px; border-top: 1px solid var(--border); }
.mini .num { text-align: right; }
.mini tr.tot td { font-weight: 700; border-top: 2px solid var(--border-2); }
.stack > .list-card { min-height: 320px; }

/* ---- editor */
.editor { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; padding-bottom: 6px; }
.ed-method { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.ed-method .sec-t { margin: 0; }
.ed-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.ed-sec { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ed-sec .sec-t { margin-bottom: 0; }
.pick-row { display: flex; gap: 8px; }
.pick-row select { flex: 1; }
.lines { display: flex; flex-direction: column; gap: 6px; }
.line { display: grid; grid-template-columns: var(--lcols, minmax(0, 1fr) 72px 70px 110px 64px 72px 110px 34px); gap: 6px; align-items: center; }
.line.head span { font-size: 12px; color: var(--muted); font-weight: 500; }
.line.head span.r { text-align: right; }
.line-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.l-code { text-transform: lowercase; }
.col-pick { display: flex; flex-direction: column; gap: 10px; }
.modal.finder { width: 620px; }
.finder-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 50vh; overflow: auto; min-height: 60px; }
.finder-i { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.finder-i:hover { background: var(--hover, rgba(127,127,127,.12)); }
.finder-i.on { background: var(--accent); color: var(--on-accent, #000); }
.finder-i.on .muted { color: inherit; opacity: .8; }
.l-tot { text-align: right; font-weight: 600; }
.totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.tot-rows { text-align: right; }
.grand { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.ed-bar { position: sticky; bottom: -8px; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: 0 -6px 24px rgba(0,0,0,.12); flex-wrap: wrap; z-index: 2; }

/* ---- settings */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.span-all { grid-column: 1 / -1; }
.set-col { display: flex; flex-direction: column; gap: 16px; }
.set-sec { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.set-save { display: flex; align-items: center; gap: 14px; position: sticky; bottom: -8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 -6px 24px rgba(0,0,0,.10); z-index: 2; }
.themes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.theme-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--r-sm); border: 2px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.th-prev { display: flex; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(128,128,128,.25); }
.th-side { width: 28%; }
.th-body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; }
.th-line { height: 7px; border-radius: 4px; width: 80%; }
.th-line.s { width: 55%; }
.th-btn { margin-top: auto; width: 44%; height: 14px; border-radius: 7px; }
.th-name { font-weight: 700; }

/* ---- dialogs, toasts, login, lock */
.m-back { position: fixed; inset: 0; background: rgba(10,12,16,.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; animation: fade .12s ease; }
.modal { width: 520px; max-width: 100%; max-height: calc(100vh - 24px); min-height: 0; display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 24px 64px rgba(0,0,0,.35); }
[data-theme="lasi"] .modal { background: #FFFFFF; }
.modal.wide { width: 760px; }
.m-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px 22px; }
.m-head h2 { font-size: 18px; font-weight: 700; font-family: var(--font-head); }
.m-body { padding: 8px 22px 6px; overflow: auto; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.m-head, .m-foot { flex-shrink: 0; }
.form-grid .chk { grid-column: auto; }
.form-grid:not(.cols) .chk { grid-column: 1 / -1; }
.m-body p { margin: 0; }
.m-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 460px; }
.toast { padding: 12px 16px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.25); white-space: pre-line; transition: opacity .4s; }
.toast.bad { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; }
.auth, .lock-layer { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 20px; z-index: 40; }
.lock-layer { z-index: 70; }
.auth-card { width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 30px; box-shadow: 0 20px 60px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 12px; }
.auth-card .brand { padding: 0 0 6px; }
.auth-card h1 { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.auth-card p { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================ Grafiitti details */
[data-theme="grafiitti"] .nav-i.on { background: #1C1E22; }
[data-theme="grafiitti"] .t-paid { background: var(--surface); }
[data-theme="grafiitti"] .tile-big { font-family: var(--font); font-weight: 700; letter-spacing: -0.03em; }
[data-theme="grafiitti"] .tile-num, [data-theme="grafiitti"] .d-total, [data-theme="grafiitti"] .grand { font-weight: 600; }
[data-theme="grafiitti"] .chip-b.on { background: var(--accent); color: var(--on-accent); }

/* ================================================================ Paperi: menu on top, light and airy */
[data-theme="paperi"] .shell, [data-theme="verstas"] .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
[data-theme="paperi"] .nav, [data-theme="verstas"] .nav { flex-direction: row; align-items: center; gap: 18px; border-right: 0; overflow: visible; }
[data-theme="paperi"] .nav { height: 64px; padding: 0 28px; border-bottom: 1px solid var(--border); background: #FFFFFF; }
[data-theme="paperi"] .nav .brand, [data-theme="verstas"] .nav .brand { padding: 0; }
[data-theme="paperi"] .nav-links, [data-theme="verstas"] .nav-links { flex-direction: row; gap: 2px; flex-wrap: wrap; }
[data-theme="paperi"] .nav-i { height: 36px; padding: 0 14px; border-radius: 18px; }
[data-theme="paperi"] .nav-i .ic, [data-theme="verstas"] .nav-i .ic { display: none; }
[data-theme="paperi"] .nav-i.on { background: var(--surface-2); color: var(--text); }
[data-theme="paperi"] .me, [data-theme="verstas"] .me { border-top: 0; margin: 0; padding: 0; }
[data-theme="paperi"] .me-t, [data-theme="verstas"] .me-t { display: none; }
[data-theme="paperi"] .avatar { background: var(--text); color: #fff; }
[data-theme="paperi"] .mark { border-radius: 50%; background: var(--text); color: #fff; }
[data-theme="paperi"] .main { padding: 28px 32px 20px; }
[data-theme="paperi"] .card { border-color: transparent; }
[data-theme="paperi"] .tbl th { background: #FFFFFF; }
[data-theme="paperi"] .tbl td { border-bottom-color: #F0F0EB; }
[data-theme="paperi"] .tbl tbody tr.sel { box-shadow: inset 3px 0 0 var(--accent); background: #F7F8FE; }
[data-theme="paperi"] .docs { grid-template-columns: minmax(0, 1fr) 480px; }
[data-theme="paperi"] .detail { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.07); border-radius: 6px; padding: 32px 34px; }
[data-theme="paperi"] .fact { background: transparent; border-top: 1px solid var(--border); border-radius: 0; padding: 10px 0 0; }
[data-theme="paperi"] .d-total { font-size: 36px; letter-spacing: -0.03em; }
[data-theme="paperi"] .tab { border-radius: 16px; }
[data-theme="paperi"] .tab.on { background: var(--text); color: #fff; border-color: transparent; }
[data-theme="paperi"] .tab.on .cnt { color: rgba(255,255,255,.7); }
[data-theme="paperi"] .tile-big, [data-theme="paperi"] .tile-num { font-weight: 600; letter-spacing: -0.04em; }
[data-theme="paperi"] .t-paid, [data-theme="paperi"] .t-today, [data-theme="paperi"] .t-open, [data-theme="paperi"] .t-month { background: #FFFFFF; }
[data-theme="paperi"] .inp { border-color: #DCDCD6; }
[data-theme="paperi"] .list-bar input[type=search] { border-radius: 20px; background: var(--surface-2); border-color: transparent; }

/* ================================================================ Verstas: big tiles, big buttons */
[data-theme="verstas"] .nav { padding: 18px 32px 0; background: transparent; }
[data-theme="verstas"] .nav-links { background: #E3DED3; padding: 5px; border-radius: 16px; margin-left: auto; }
[data-theme="verstas"] .nav-i { height: 42px; padding: 0 16px; border-radius: 12px; color: #4A463E; font-weight: 600; font-size: 14px; }
[data-theme="verstas"] .nav-i.on { background: #FBF9F4; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme="verstas"] .nav-fill { display: none; }
[data-theme="verstas"] .mark { border-radius: 12px; width: 38px; height: 38px; font-size: 18px; background: var(--text); color: #F6F3EC; }
[data-theme="verstas"] .b1 { font-size: 17px; }
[data-theme="verstas"] .avatar { width: 48px; height: 48px; border-radius: 14px; background: #E3DED3; }
[data-theme="verstas"] .lock-btn { width: 48px; height: 48px; border-radius: 14px; background: var(--text); color: #EFEBE3; border: 0; }
[data-theme="verstas"] .main { padding: 18px 32px 24px; gap: 18px; }
[data-theme="verstas"] .t-paid, [data-theme="verstas"] .t-today, [data-theme="verstas"] .t-open, [data-theme="verstas"] .t-month { background: #FBF9F4; }
[data-theme="verstas"] .tile-big { font-size: 48px; }
[data-theme="verstas"] .t-invoice .tile-big { font-size: 36px; }
[data-theme="verstas"] .tile-num { font-size: clamp(24px, 2.4vw, 46px); letter-spacing: -0.04em; }
[data-theme="verstas"] .t-receipt .chip { border-color: #4A463E; }
[data-theme="verstas"] .orow { border-radius: 16px; background: #F3EFE6; }
[data-theme="verstas"] .tbl td { height: 58px; }
[data-theme="verstas"] .tbl th { background: #FBF9F4; font-size: 13px; }
[data-theme="verstas"] .tab { height: 40px; border-radius: 12px; font-weight: 600; }
[data-theme="verstas"] .tab.on { background: var(--text); color: #F6F3EC; border-color: transparent; }
[data-theme="verstas"] .tab.on .cnt { color: #B9B3A6; }
[data-theme="verstas"] .pill { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; }
[data-theme="verstas"] .inp { border-width: 2px; border-color: #CFC8BA; }
[data-theme="verstas"] .inp:focus { border-color: var(--text); box-shadow: none; }
[data-theme="verstas"] .btn { font-weight: 600; }
[data-theme="verstas"] .d-total, [data-theme="verstas"] .grand, [data-theme="verstas"] .d-id h2 { font-weight: 800; }
[data-theme="verstas"] .fact { background: #F3EFE6; border-radius: 14px; }
[data-theme="verstas"] .seg { background: #E3DED3; }
[data-theme="verstas"] .chip-b.on { background: var(--text); color: #F6F3EC; }

/* ================================================================ Lasi: in the spirit of the new macOS */
[data-theme="lasi"] body, [data-theme="lasi"] .auth, [data-theme="lasi"] .lock-layer {
  background: radial-gradient(1200px 700px at 10% -10%, #D6E4FA 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #F0E2F7 0%, transparent 55%), #EEF1F6; }
[data-theme="lasi"] .nav { margin: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.8); background: rgba(246,248,252,.62);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 12px 40px rgba(40,60,100,.10); padding: 16px 10px 12px; }
[data-theme="lasi"] .shell { grid-template-columns: 252px minmax(0, 1fr); }
[data-theme="lasi"] .nav-i { height: 34px; border-radius: 9px; color: var(--text); }
[data-theme="lasi"] .nav-i .ic { color: var(--accent); }
[data-theme="lasi"] .nav-i.on { background: var(--accent); color: #fff; }
[data-theme="lasi"] .nav-i.on .ic { color: #fff; }
[data-theme="lasi"] .me { border-top: 0; background: rgba(255,255,255,.7); border-radius: 12px; padding: 8px; }
[data-theme="lasi"] .avatar { background: var(--accent); color: #fff; }
[data-theme="lasi"] .mark { border-radius: 8px; }
[data-theme="lasi"] .main { padding: 18px 22px 16px 12px; }
[data-theme="lasi"] .card { border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
[data-theme="lasi"] .tbl th { background: rgba(255,255,255,.95); }
[data-theme="lasi"] .tbl td { border-bottom: 0; height: 44px; }
[data-theme="lasi"] .tbl tbody tr td:first-child { border-radius: 10px 0 0 10px; }
[data-theme="lasi"] .tbl tbody tr td:last-child { border-radius: 0 10px 10px 0; }
[data-theme="lasi"] .tbl tbody tr.sel .pill { background: rgba(255,255,255,.22); color: #fff; }
[data-theme="lasi"] .tbl { border-collapse: separate; border-spacing: 0 2px; padding: 0 6px; }
[data-theme="lasi"] .tab { border-radius: 15px; height: 30px; }
[data-theme="lasi"] .tabs { background: rgba(120,120,128,.12); border-radius: 18px; padding: 3px; }
[data-theme="lasi"] .tab.on { background: #fff; border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-theme="lasi"] .list-bar input[type=search] { border-radius: 18px; background: rgba(120,120,128,.12); border-color: transparent; }
[data-theme="lasi"] .btn { border-color: transparent; background: rgba(120,120,128,.14); }
[data-theme="lasi"] .btn.primary { background: var(--accent); box-shadow: 0 2px 8px rgba(10,102,216,.3); }
[data-theme="lasi"] .btn.ghost { background: transparent; }
[data-theme="lasi"] .btn.dark { background: var(--dark-btn); color: var(--dark-btn-fg); }
[data-theme="lasi"] .t-over .btn.dark { background: var(--t-over-btn); color: var(--t-over-btn-fg); }
[data-theme="lasi"] .detail { background: rgba(255,255,255,.9); }
[data-theme="lasi"] .fact { background: #F5F5F7; border-radius: 12px; }
[data-theme="lasi"] .tile { border-radius: 20px; }
[data-theme="lasi"] .t-invoice { border: 1px solid rgba(255,255,255,.9); }
[data-theme="lasi"] .tile-big, [data-theme="lasi"] .tile-num { font-weight: 700; }
[data-theme="lasi"] .orow { background: rgba(120,120,128,.08); border-radius: 12px; }
[data-theme="lasi"] .seg { background: rgba(120,120,128,.14); border-radius: 18px; }
[data-theme="lasi"] .seg-i span { border-radius: 15px; }
[data-theme="lasi"] .inp { border-color: rgba(0,0,0,.12); }
[data-theme="lasi"] .head h1 { font-size: 22px; }
[data-theme="lasi"] .ed-bar { background: rgba(255,255,255,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ================================================================ Fluent: in the spirit of Windows 11 */
[data-theme="fluent"] .nav { border-right: 0; padding: 12px 6px 10px; }
[data-theme="fluent"] .shell { grid-template-columns: 248px minmax(0, 1fr); }
[data-theme="fluent"] .brand { padding: 4px 12px 18px; }
[data-theme="fluent"] .mark { width: 22px; height: 22px; border-radius: 5px; font-size: 12px; }
[data-theme="fluent"] .b1 { font-size: 13px; font-weight: 600; }
[data-theme="fluent"] .nav-i { height: 38px; color: var(--text); border-radius: 4px; gap: 14px; padding: 0 12px; }
[data-theme="fluent"] .nav-i.on { background: rgba(0,0,0,.055); font-weight: 600; }
[data-theme="fluent"] .nav-i.on::before { content: ''; position: absolute; left: 0; top: 11px; width: 3px; height: 16px; border-radius: 2px; background: var(--accent); }
[data-theme="fluent"] .me { border-top: 0; }
[data-theme="fluent"] .avatar { background: #1B1B1B; color: #fff; width: 28px; height: 28px; font-size: 12px; }
[data-theme="fluent"] .main { border-top-left-radius: 8px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); margin-top: 8px; padding: 24px 32px 18px; }
[data-theme="fluent"] .btn { border-bottom-color: #C8CBD0; font-weight: 400; }
[data-theme="fluent"] .btn.primary { border: 1px solid rgba(0,0,0,.1); font-weight: 600; }
[data-theme="fluent"] .inp { border-bottom: 1px solid #8A8A8A; }
[data-theme="fluent"] .inp:focus { border-bottom: 2px solid var(--accent); box-shadow: none; }
[data-theme="fluent"] .tab { border: 0; border-radius: 4px; position: relative; color: var(--text); }
[data-theme="fluent"] .tab.on { background: transparent; font-weight: 600; }
[data-theme="fluent"] .tab.on::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 16px; margin-left: -8px; height: 3px; border-radius: 2px; background: var(--accent); }
[data-theme="fluent"] .tbl td { height: 44px; border-bottom-color: #F1F3F5; }
[data-theme="fluent"] .tbl th { background: #FFFFFF; }
[data-theme="fluent"] .pill { padding: 0; font-weight: 400; font-size: 13.5px; color: var(--text); }
[data-theme="fluent"] .pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: currentColor; }
[data-theme="fluent"] .st-open::before, [data-theme="fluent"] .st-issued::before { background: var(--st-open-fg); }
[data-theme="fluent"] .st-overdue::before { background: var(--st-overdue-fg); }
[data-theme="fluent"] .st-paid::before { background: var(--st-paid-fg); }
[data-theme="fluent"] .st-draft::before { background: #8A8A8A; }
[data-theme="fluent"] .st-credited::before { background: var(--st-credited-fg); }
[data-theme="fluent"] .pill { color: var(--text) !important; }
[data-theme="fluent"] .tile { padding: 18px 20px; }
[data-theme="fluent"] .t-receipt { border: 1px solid var(--border); }
[data-theme="fluent"] .t-receipt .tile-plus { background: var(--accent); color: #fff; }
[data-theme="fluent"] .tile-big { font-family: var(--font-head); font-weight: 600; font-size: 32px; letter-spacing: 0; }
[data-theme="fluent"] .t-invoice .tile-big { font-size: 28px; }
[data-theme="fluent"] .tile-num { font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: 0; }
[data-theme="fluent"] .tile-mid { font-weight: 600; font-size: 22px; letter-spacing: 0; }
[data-theme="fluent"] .t-over { border: 1px solid #F1DFA0; }
[data-theme="fluent"] .btn.dark { border: 1px solid #E0E3E8; border-bottom-color: #C8CBD0; font-weight: 400; }
[data-theme="fluent"] .orow { border-radius: 4px; background: #FFFFFF; border: 1px solid #EDEFF2; }
[data-theme="fluent"] .fact { border-radius: 4px; background: #F5F6F8; }
[data-theme="fluent"] .d-total, [data-theme="fluent"] .grand { font-weight: 600; letter-spacing: 0; }
[data-theme="fluent"] .seg { border-radius: 4px; }
[data-theme="fluent"] .chip-b { border-radius: 4px; }
[data-theme="fluent"] .chip-b.on { background: var(--accent); color: #fff; }
[data-theme="fluent"] .banner.warn { background: #FFF4CE; color: #5C4400; border-color: #F1DFA0; }
[data-theme="fluent"] .modal { border-radius: 8px; }
[data-theme="fluent"] .m-foot { background: #F3F3F3; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }

/* narrower windows */
@media (max-width: 1250px) {
  .docs, [data-theme="paperi"] .docs { grid-template-columns: minmax(0, 1fr) 340px; }
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .t-receipt, .t-open { grid-column: 1 / -1; grid-row: auto; }
  .t-invoice, .t-paid, .t-today, .t-over, .t-month { grid-column: auto; grid-row: auto; }
  .docs .tbl th:nth-child(4), .docs .tbl td:nth-child(4) { display: none; }
  .tbl td.cust { min-width: 130px; }
  .tbl td, .tbl th { padding-left: 10px; padding-right: 10px; }
  [data-theme="paperi"] .brand-t, [data-theme="verstas"] .brand-t { display: none; }
  [data-theme="verstas"] .nav-i { padding: 0 11px; }
  [data-theme="paperi"] .nav-i { padding: 0 10px; }
  .main { padding-left: 22px; padding-right: 22px; }
  .shell, [data-theme="lasi"] .shell, [data-theme="fluent"] .shell { grid-template-columns: 204px minmax(0, 1fr); }
  [data-theme="paperi"] .shell, [data-theme="verstas"] .shell { grid-template-columns: minmax(0, 1fr); }
  .docs, [data-theme="paperi"] .docs { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ---- the test environment */
.test-stripe { position: fixed; top: 0; left: 0; right: 0; height: 24px; z-index: 80; display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font); letter-spacing: .04em; color: #4A1D05;
  background: repeating-linear-gradient(135deg, #FFB547 0 18px, #FFC970 18px 36px); }
body.is-test #app { padding-top: 24px; }
body.is-test .shell { height: calc(100vh - 24px); }
body.is-test .auth, body.is-test .lock-layer { top: 24px; }

.bad-t { color: var(--bad, #d9534f); font-weight: 600; }
.autobk .pick-row .inp { flex: 1; }

/* ===================================================================== Oil & Fluids */
.mark { font-size: 11px; letter-spacing: -0.02em; }
.nav-i .nav-ext { margin-left: auto; opacity: .55; display: inline-flex; }
.nav-i.classic .nav-t::after { content: ''; }
.nav-look { margin-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pad-l { padding: 26px 28px; }
.ok-t { color: var(--ok, #22A65A); font-weight: 600; }

/* Today */
.stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { display: flex; flex-direction: column; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); min-width: 120px; }
.stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.stat span { color: var(--muted); font-size: 12.5px; }
.today { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.tcard { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tc-head .sec-t { margin: 0; }
.tc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); flex-wrap: wrap; }
.trow .lead { color: var(--accent); font-weight: 700; font-size: 15px; min-width: 48px; }
.tmain { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; text-align: left; }
.tmain b { font-weight: 600; overflow-wrap: anywhere; }
.tmain span { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.tacts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.grp { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 2px; }
.grp.st-in_progress { color: var(--accent); } .grp.st-parts { color: #E8930C; } .grp.st-ready { color: #22A65A; }
.todo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.todo:hover { border-color: var(--accent); }
.todo-n { display: inline-grid; place-items: center; min-width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-soft, rgba(242,140,40,.15)); color: var(--accent); font-weight: 700; font-size: 17px; }
.upd { margin-top: 8px; }

/* Bikes: list | details */
.bikes { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; height: 100%; min-height: 0; }
.bside { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.bside-top { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 8px; border-bottom: 1px solid var(--border); }
.blist { overflow: auto; flex: 1; min-height: 0; padding: 6px; }
.mk-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; border-radius: var(--r-sm); text-align: left; }
.mk-h:hover, .mk-h:focus-visible { background: var(--surface-2); }
.mk-h .ic { transition: transform .15s; color: var(--muted); }
.mk.open > .mk-h .ic { transform: rotate(90deg); }
.mk-h b { flex: 1; }
.mk-b { display: none; padding: 0 0 4px 18px; }
.mk.open > .mk-b { display: block; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bk:hover, .bk:focus-visible { background: var(--surface-2); }
.bk.on { background: var(--accent); color: var(--on-accent, #1A1206); }
.bk.on .bk-y, .bk.on .bk-c { color: inherit; opacity: .8; }
.bk.missing .bk-m { color: var(--muted); }
.bk-m { overflow-wrap: anywhere; }
.bk-y, .bk-c { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bdetail { overflow: auto; min-height: 0; min-width: 0; padding-right: 4px; }
.bhead { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.bhead > .btn.ghost:first-child { align-self: flex-start; margin: -6px 0 2px -8px; }
.bh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bh-make { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.bh-small { display: flex; gap: 6px; flex-wrap: wrap; }
.bh-model { margin: 0; font-size: 26px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.bh-acts { margin-top: 6px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.otile { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ot-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ot-val b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ot-val.long b { font-size: 16px; }
.ot-val span { color: var(--muted); font-size: 14px; }
.ot-val.none b { color: var(--muted); }
.secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.sec { padding: 14px 16px; min-width: 0; }
.sec .sec-t { margin: 0 0 8px; }
.kv { display: grid; grid-template-columns: fit-content(52%) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.tips .tip { margin: 6px 0; padding: 7px 10px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tips .tip.warn { border-left-color: #E0A100; background: rgba(224,161,0,.12); }
.src { margin: 0 4px 12px; }

/* bike form */
.modal.wide { width: min(1040px, calc(100vw - 32px)); }
.bform { display: flex; flex-direction: column; gap: 14px; }
.bf-g { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px 14px; margin: 0; min-width: 0; }
.bf-g legend { padding: 0 6px; margin: 0; }
.bf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; }
.bf-wide { grid-column: 1 / -1; }
.bf-grid .inp:disabled { opacity: .45; }

/* tools and look */
.tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.tool { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tool:hover { border-color: var(--accent); }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.look { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.look.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sw { width: 34px; height: 24px; border-radius: 6px; border: 1px solid rgba(127,127,127,.4); flex: none; }
.sw-grafiitti { background: linear-gradient(135deg, #0D0E10 50%, #F28C28 50%); }
.sw-paperi { background: linear-gradient(135deg, #FAFAF7 50%, #3B5BDB 50%); }
.sw-verstas { background: linear-gradient(135deg, #1B2430 50%, #FFB000 50%); }
.sw-lasi { background: linear-gradient(135deg, #EEF1F6 50%, #007AFF 50%); }
.sw-fluent { background: linear-gradient(135deg, #F3F3F3 50%, #0067C0 50%); }

/* ---------- smaller windows: everything stays visible, things move under each other */
@media (max-width: 1100px) {
  [data-theme="grafiitti"] .shell, [data-theme="lasi"] .shell, [data-theme="fluent"] .shell { grid-template-columns: 68px minmax(0, 1fr); }
  [data-theme="grafiitti"] .nav .brand-t, [data-theme="lasi"] .nav .brand-t, [data-theme="fluent"] .nav .brand-t,
  [data-theme="grafiitti"] .nav .nav-t, [data-theme="lasi"] .nav .nav-t, [data-theme="fluent"] .nav .nav-t,
  .nav .nav-ext { display: none; }
  [data-theme="grafiitti"] .nav, [data-theme="lasi"] .nav, [data-theme="fluent"] .nav { padding-left: 8px; padding-right: 8px; align-items: stretch; }
  [data-theme="grafiitti"] .nav-i, [data-theme="lasi"] .nav-i, [data-theme="fluent"] .nav-i { justify-content: center; padding: 0; }
  .main { padding: 18px 18px 14px; }
}
@media (max-width: 980px) {
  [data-theme="paperi"] .nav .nav-t, [data-theme="verstas"] .nav .nav-t { display: none; }
  [data-theme="paperi"] .nav-i .ic, [data-theme="verstas"] .nav-i .ic { display: inline-block; }
}
@media (max-width: 900px) {
  .bikes { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bikes .bdetail { display: none; overflow: visible; }
  .bikes.show-detail .bside { display: none; }
  .bikes.show-detail .bdetail { display: block; }
  .bside { max-height: none; }
  .blist { max-height: none; overflow: visible; }
  .page { overflow: auto; }
}
@media (max-width: 640px) {
  .shell, [data-theme] .shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; }
  .nav, [data-theme] .nav { flex-direction: row !important; align-items: center; height: auto !important; padding: 6px 8px !important; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); gap: 4px; }
  .nav .brand { display: none; }
  .nav-links { flex-direction: row !important; gap: 2px; flex-wrap: nowrap !important; }
  .nav-fill { display: none; }
  .nav-i { width: 44px; height: 40px; flex: none; }
  .main { padding: 12px 10px; gap: 10px; }
  .head h1 { font-size: 22px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .kv dt { margin-top: 6px; font-size: 12px; }
  .secs, .today { grid-template-columns: minmax(0, 1fr); }
  .bh-model { font-size: 21px; }
  .modal.wide, .modal { width: calc(100vw - 16px); }
}
[data-theme="paperi"] .nav-ext, [data-theme="verstas"] .nav-ext { display: none; }

/* service schedule and jobs */
.sv-top, .sv-job, .sv-ctl, .sv-list, .sv-est, .sv-full { padding: 14px 16px; min-width: 0; }
.sv-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sv-row.wrap { flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; }
.sv-row .field { min-width: 150px; flex: 0 1 200px; }
.sv-bike { font-size: 17px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sv-top p { margin: 6px 0 0; }
.sv-tip { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(224,161,0,.14); border-left: 3px solid #E0A100; font-weight: 600; white-space: pre-wrap; }
.sv-job { display: flex; flex-direction: column; gap: 10px; border-color: var(--accent); }
.sv-clock .btn { white-space: nowrap; }
.sv-parts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(232,147,12,.13); }
.sv-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.sv-hist summary { cursor: pointer; color: var(--muted); }
.sv-point { display: flex; flex-direction: column; gap: 2px; }
.sv-pl { font-size: 22px; color: var(--accent); letter-spacing: -0.01em; }
.sv-pts { margin-top: 10px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.sv-list .sec-t, .sv-est .sec-t, .sv-full .sec-t { margin: 0; }
.sv-sub { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ck { display: grid; grid-template-columns: auto 82px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 6px; border-bottom: 1px solid var(--border); cursor: default; }
div.ck { grid-template-columns: 82px minmax(0, 1fr); }
label.ck { cursor: pointer; }
.ck input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.ck-a { font-size: 12.5px; color: var(--muted); padding-top: 2px; }
.ck.a-R .ck-a, .ck.a-R .ck-t b { color: var(--accent); }
.ck-t { display: flex; flex-direction: column; min-width: 0; }
.ck-t b { font-weight: 600; overflow-wrap: anywhere; }
.ck-t span { font-size: 12.5px; overflow-wrap: anywhere; }
.ck.done .ck-t b, .ck.done .ck-a { color: var(--muted); text-decoration: line-through; }
.est-tot { font-size: 22px; color: var(--accent); }
.tbl.est td { padding: 6px 8px; vertical-align: top; }
.tbl.est td:first-child { overflow-wrap: anywhere; }
.xlist { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sv-est select.inp { margin-top: 8px; max-width: 320px; }
.mx-wrap { overflow-x: auto; margin-top: 8px; }
.tbl.mx { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.tbl.mx th, .tbl.mx td { padding: 5px 6px; white-space: nowrap; }
.tbl.mx th:first-child, .tbl.mx td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 180px; white-space: normal; }
.tbl.mx td.c, .tbl.mx th.c { text-align: center; min-width: 46px; font-family: var(--mono, monospace); }
.tbl.mx .on { background: var(--accent-soft); }
.tbl.mx td.a-R { color: var(--accent); font-weight: 700; }
.mx-h { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mx-h:hover { background: var(--surface-2); }
@media (max-width: 640px) {
  .sv-grid { grid-template-columns: minmax(0, 1fr); }
  .ck { grid-template-columns: auto minmax(0, 1fr); }
  .ck .ck-a { grid-column: 2; padding: 0; }
  .ck .ck-t { grid-column: 2; }
  div.ck { grid-template-columns: minmax(0, 1fr); }
  div.ck .ck-a, div.ck .ck-t { grid-column: 1; }
}

.head-tools { flex-wrap: wrap; }
.est-lines { display: flex; flex-direction: column; margin-top: 6px; }
.el { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); }
.el-t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.el-q { font-size: 12px; white-space: nowrap; }
.el-s { white-space: nowrap; font-weight: 600; }
@media (max-width: 640px) { .el { grid-template-columns: minmax(0, 1fr) auto; } .el-q { grid-column: 1; grid-row: 2; } }

/* ------------------------------------------------------------------ calendar */
.icon-btn.flip .ic { transform: scaleX(-1); }
.cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.cal-card { padding: 10px 12px 12px; overflow: hidden; }
.cal { --gut: 54px; display: flex; flex-direction: column; }
.cal-heads { display: grid; grid-template-columns: var(--gut) repeat(var(--n), minmax(0, 1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cal-dh { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; padding: 2px 8px; min-width: 0; }
.cal-wd { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.cal-num { font-family: var(--font-head); font-size: 22px; line-height: 1.25; font-weight: 700; grid-row: 2 / 4; align-self: center; }
.cal-dh.today .cal-wd { color: var(--accent-text); }
.cal-dh.today .cal-num { background: var(--accent); color: var(--on-accent); border-radius: 999px; min-width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; }
.cal-dh.past .cal-num { color: var(--muted); }
.cal-load { justify-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; align-self: center; }
.cal-bar i { display: block; height: 100%; border-radius: 3px; background: #22A65A; }
.cal-bar i.high { background: #E8930C; } .cal-bar i.over { background: #E5484D; }
.cal-body { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); overflow-y: auto; max-height: calc(100vh - 330px); padding-top: 8px; position: relative; }
.cal-gut { position: relative; }
.cal-gut span { position: absolute; right: 10px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-family: var(--mono); }
.cal-gut span:first-child { transform: none; }
.cal-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hh), 100% var(--hh); background-position: 0 0, 0 calc(var(--hh) / 2); border-bottom: 1px solid var(--border); }
.cal-col { position: relative; border-left: 1px solid var(--border); touch-action: none; }
.cal-col:last-child { border-right: 1px solid var(--border); }
.cal-col.today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cal-col.past { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #E5484D; z-index: 3; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; }
.bkc { --k: var(--accent); position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 4px 10px; overflow: hidden; cursor: grab; user-select: none;
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--k) 55%, var(--surface)); background: color-mix(in srgb, var(--k) 20%, var(--surface)); z-index: 1; line-height: 1.25; }
.bkc::before { content: ''; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 4px; border-radius: 3px; background: var(--k); }
.bkc:hover, .bkc:focus-visible { border-color: var(--text); outline: none; z-index: 2; }
.bkc.drag { cursor: grabbing; opacity: .85; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 5; }
.bkc > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bkc-t { font-size: 11px; color: color-mix(in srgb, var(--text) 60%, var(--k)); }
.bkc-b { font-size: 13px; }
.bkc-w, .bkc-r { font-size: 12px; }
.bkc.flat { position: relative; cursor: pointer; padding: 8px 10px 8px 14px; }
.k-service, .k-annual { --k: var(--accent); } .k-basic { --k: #E8930C; } .k-tyres { --k: #2F7DE1; } .k-repair { --k: #8B5CF6; }
.k-winter_in, .k-winter_out { --k: #0EA5B7; } .k-other { --k: #7C8796; } .k-started { --k: #22A65A; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg i { width: 11px; height: 11px; border-radius: 50%; background: var(--k); }
.cal-help { margin-left: auto; }
.cal-day.today { border-color: var(--accent); }
.cal-day .tc-head { gap: 10px; }
.cal-day .tc-body { display: flex; flex-direction: column; gap: 8px; }
.ctx { position: fixed; z-index: 60; min-width: 220px; padding: 6px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 10px 30px rgba(0,0,0,.28); display: flex; flex-direction: column; }
.ctx-i { text-align: left; padding: 8px 10px; border: 0; background: transparent; color: var(--text); border-radius: 7px; cursor: pointer; font: inherit; }
.ctx-i:hover, .ctx-i:focus-visible { background: var(--hover); outline: none; }
.ctx-i.danger-t { color: var(--danger); }
.ctx hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
/* booking form */
.modal.booking { max-width: 760px; }
.bform-b { display: flex; flex-direction: column; gap: 12px; }
.bf-bikerow { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.bf-bike { font-size: 1.1em; }
.bf-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bf-grid4 .span-2 { grid-column: span 2; }
.bf-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 22px; }
.bf-ptrow { display: inline-flex; align-items: center; gap: 4px; }
.bf-ptrow[hidden] { display: none; }
.bf-pt { min-width: 100px; text-align: center; color: var(--accent-text); font-size: 1.1em; }
.bf-est { margin-left: auto; }
.bf-cust { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px 14px; }
.bf-cust .form-grid { margin-top: 8px; }
.bf-load { font-weight: 600; color: var(--accent-text); }
.pick-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 50vh; overflow-y: auto; min-height: 60px; }
.pick-i { text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.pick-i:hover, .pick-i:focus-visible { background: var(--hover); outline: none; }
@media (max-width: 640px) {
  .bf-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-est { margin-left: 0; }
  .cal-help { margin-left: 0; }
}
.bkc { line-height: 1.22; padding-top: 3px; padding-bottom: 3px; }
.bkc.short .bkc-r { display: none; }
.bkc.tiny { flex-direction: row; gap: 6px; align-items: center; }
.bkc.tiny .bkc-w, .bkc.tiny .bkc-r { display: none; }

/* ------------------------------------------------------------------ winter storage */
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td, .tbl tr.click:focus-visible td { background: var(--hover); }
.tbl tr.click:focus-visible { outline: none; }
.tbl tr.out td { color: var(--muted); }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td.wrap-t { white-space: normal; min-width: 180px; }
.wl { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wl-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.wl-top .inp { max-width: 340px; }
.inp.bad { border-color: var(--danger); }
.wgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.wside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.btn-col { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-col > .btn { width: 100%; justify-content: center; }
.btn-col .btn-row > .btn { flex: 1; justify-content: center; }
.sec .sec-t + .wr, .sec .wr + .sec-t, .sec .xlist + .sec-t { margin-top: 2px; }
.sec .wr { margin-bottom: 16px; }
.wr { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wr-i { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--border-2); border-radius: var(--r-sm); cursor: pointer; background: var(--surface); }
.wr-i input { grid-row: 1 / 3; width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.wr-i.on { border-color: var(--accent); background: var(--accent-soft); }
.wr-t { font-weight: 500; }
.wr-p { font-size: 12px; color: var(--muted); }
.wr-p:empty { display: none; }
.wopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.check.off { opacity: .55; cursor: default; }
.wx { display: flex; flex-direction: column; margin-bottom: 10px; }
.wxl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.wxl .el-t { display: flex; flex-direction: column; }
.wxl .qty { display: inline-flex; gap: 2px; }
.wxl .qty .icon-btn { font-size: 17px; font-weight: 600; color: var(--text); border-color: var(--border-2); width: 30px; height: 30px; }
.linkish { border: 0; background: transparent; color: var(--text); font: inherit; font-family: var(--mono); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.linkish:hover { background: var(--hover); }
/* ------------------------------------------------------------------ month overview */
.ov-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ov-t { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ov-v { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-mid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.ov-bars { display: flex; align-items: stretch; gap: 10px; height: 220px; padding: 4px 0 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.ov-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; position: relative; padding-bottom: 22px; }
.ov-b:hover .ov-bar { filter: brightness(1.12); }
.ov-bv { margin-bottom: 4px; white-space: nowrap; }
.ov-bar { width: min(56px, 70%); background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; }
.ov-bar.zero { height: 0 !important; }
.ov-bx { position: absolute; bottom: 2px; }
.ov-sbar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; }
.ov-sbar i { display: block; height: 100%; }
.ov-sbar .lab, .dot.lab { background: var(--accent); } .ov-sbar .par, .dot.par { background: var(--muted); }
.ov-sl { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.ov-sl span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ov-c { margin-bottom: 9px; }
.ov-cr { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ov-cb { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ov-cb i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ov-mid .sec .sec-t:not(:first-child) { margin-top: 14px; }
.tbl tr.slow td { color: var(--danger); }
@media (max-width: 1250px) { .ov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .wgrid { grid-template-columns: minmax(0, 1fr); } .wside { position: static; } }
@media (max-width: 900px) { .ov-mid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-bars { gap: 4px; } .ov-bv { font-size: 10px; } .wr { grid-template-columns: minmax(0, 1fr); } }
.wside { max-height: calc(100vh - 150px); }
.wside .est-lines { overflow-y: auto; min-height: 60px; flex: 1 1 auto; }
@media (max-width: 1100px) { .wside { max-height: none; } }

/* ------------------------------------------------------------------ job: own lines, work order, signing, photos */
.sv-acts { margin-top: 12px; }
.own { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.own-l { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: left;
  padding: 7px 8px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; border-radius: 6px; }
.own-l:hover, .own-l:focus-visible { background: var(--hover); outline: none; }
.own .btn { margin-top: 6px; }
.wo-prev { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.wo-items { margin: 0 0 6px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.modal.sign { max-width: 820px; }
.sg-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 4px; }
.sg-h { width: 92px; height: 34px; }
.sg-sum { margin: 10px 0 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); max-height: 230px; overflow-y: auto; }
.sg-tot { font-weight: 700; margin-top: 8px; text-align: right; }
.sg-cust { margin-bottom: 4px; }
.sg-box { flex-shrink: 0; margin-top: 6px; border-radius: var(--r-sm); border: 1px solid #9aa1a9; background: #FFFFFF; height: 190px; overflow: hidden; }
.sg-pad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sig-svg { width: 100%; height: 100%; display: block; }
.sg-status { margin-top: 8px; font-weight: 600; color: var(--accent-text); min-height: 1.2em; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.ph { margin: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.ph img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ph figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px; }
.ph figcaption .muted { grid-column: 1 / -1; }
.ph figcaption .inp { height: 34px; }
.ph-big { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: var(--r-sm); }
.m-body > * { flex-shrink: 0; }
/* parts to order, schedule editor, tyre picker, misc */
.po-b { padding: 12px 16px; }
.po-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.po-h .btn-row { margin-left: auto; }
.po-t td { height: 44px; }
.po-t tr.need td { color: var(--accent-text); }
.po-t .inp.sm, .inp.sm { height: 32px; width: 150px; }
.inline-f { display: inline-flex; align-items: center; gap: 8px; }
.inline-f .inp { width: 130px; height: 34px; }
.stale { padding: 8px 10px; border-radius: var(--r-sm); background: var(--accent-soft); display: flex; flex-direction: column; gap: 4px; }
.stale-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modal.xwide { max-width: 1100px; width: calc(100vw - 32px); }
.se-wrap { max-height: 50vh; }
.se td { padding: 4px 4px; height: auto; }
.se .inp { height: 34px; padding: 0 8px; }
.se td:nth-child(1) { min-width: 180px; } .se td:nth-child(2) { width: 120px; } .se td:nth-child(3), .se td:nth-child(4), .se td:nth-child(5) { width: 86px; }
.se td:nth-child(6) { min-width: 200px; }
.se-b { white-space: nowrap; }
.modal.tyre { max-width: 820px; }
.tyre-list { max-height: 34vh; }
.pick-i.on { background: var(--accent-soft); outline: 1px solid var(--accent); }
.pick-i.cat { color: var(--muted); }
.tyre-pr { display: flex; align-items: flex-end; gap: 6px; }
.pc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.pc-big { font-size: 1.3em; font-weight: 700; color: var(--accent-text); }
.big-n { font-size: 1.2em; height: 48px; }
.rem { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.rem.off { opacity: .7; }

/* ------------------------------------------------------------------ tools */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.tool-t { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.tool-t:hover, .tool-t:focus-visible { background: var(--hover); border-color: var(--border-2); outline: none; }
.tool-t .tmain { display: flex; flex-direction: column; min-width: 0; }
.tool-t .tmain span { font-size: 12.5px; color: var(--muted); }
.tool-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); flex-shrink: 0; }
.pad-s { padding: 12px 16px; }
.vin-row { display: flex; gap: 8px; align-items: center; }
.vin-row .inp, .vin-row select { flex: 1; min-width: 0; }
.vin-res { font-weight: 600; white-space: pre-line; }
.ai-page .ai-chat { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 360px); min-height: 160px; overflow-y: auto; padding: 4px 2px; }
.ai-m { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; max-width: 88%; line-height: 1.45; }
.ai-m.me { align-self: flex-end; background: var(--accent-soft); }
.ai-m.err { color: var(--danger); }
.ai-m.muted { color: var(--muted); background: transparent; padding: 2px 4px; font-size: 13px; }
.ai-sug { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ai-sug:empty { display: none; }
.ai-in { display: flex; flex-direction: column; gap: 10px; }
.shim-top { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 12px; }
.shim-top .field { min-width: 140px; }
.rng { display: inline-flex; align-items: center; gap: 4px; height: var(--h); font-family: var(--mono); font-weight: 600; }
.phone-on { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 12px; }
.phone-on svg { width: 220px; height: 220px; background: #fff; padding: 10px; border-radius: 12px; }
.pc-big { font-family: var(--mono); font-size: 1.3em; font-weight: 700; word-break: break-all; }
.po-o { display: flex; flex-direction: column; gap: 8px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pr-t td { height: 44px; }
.tyre-new { margin-top: 10px; }
.wp-r { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.tbl tr.jk-delete td { color: var(--danger); }
@media (max-width: 640px) { .phone-on { grid-template-columns: minmax(0, 1fr); } .wp-r { grid-template-columns: minmax(0, 1fr) 90px; } }
/* job: who + details, delete */
.sv-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.sv-who-t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.sv-who-t b { font-size: 1.15em; }
.sv-acts .fill { flex: 1; }
.job-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.job-r .job-del { opacity: .55; }
.job-r:hover .job-del, .job-r .job-del:focus-visible { opacity: 1; }
.tacts { align-items: center; }
.trow.done { background: color-mix(in srgb, var(--st-paid-bg) 55%, var(--surface-2)); }
.trow.done .lead { color: var(--st-paid-fg); }
.trow.done .tmain b { opacity: .8; }
/* the job's clock */
.sv-clock { align-self: stretch; }
.clk { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface-2); }
.clk-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.clk-t { font-size: 1.25em; }
.clk-t.on { color: var(--accent-text); }
.clk-tot { font-weight: 700; text-align: right; }

/* ================================================================ two more looks: Studio (dark sidebar, light page) and Midnight */
[data-theme="studio"] {
  color-scheme: light;
  --bg: #F2F5F4; --nav-bg: #0F2A2E; --main-bg: #F2F5F4; --surface: #FFFFFF; --surface-2: #F0F4F3; --hover: #E8EEEC;
  --border: #E1E7E5; --border-2: #CBD5D2; --text: #13211F; --muted: #566865; --accent: #0B7A75; --on-accent: #FFFFFF;
  --accent-soft: #DCEFEC; --accent-text: #08635F; --danger: #C0392B; --ok: #17794F; --input: #FFFFFF;
  --font: 'Geist', 'Inter', system-ui, sans-serif; --font-head: 'Geist', 'Inter', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --fs: 14px; --r: 12px; --r-sm: 8px; --r-btn: 8px; --h: 38px; --shadow: 0 1px 2px rgba(16,42,46,.05), 0 6px 18px rgba(16,42,46,.05);
  --head-size: 27px; --head-w: 650; --head-ls: -0.025em;
  --st-open-bg: #DDEBFA; --st-open-fg: #1B4F8F; --st-overdue-bg: #FCE9CF; --st-overdue-fg: #8A4B06;
  --st-paid-bg: #D9F0E4; --st-paid-fg: #125C3C; --st-draft-bg: #E9EEEC; --st-draft-fg: #47554F;
  --st-credited-bg: #ECE4F8; --st-credited-fg: #5B3596; --st-issued-bg: #DDEBFA; --st-issued-fg: #1B4F8F;
  --m-card: #0B7A75; --m-invoice: #1B4F8F; --m-cash: #17794F; --m-mobilepay: #8A63D2; --m-credit: #8A9694;
  --t-receipt-bg: #0F2A2E; --t-receipt-fg: #FFFFFF; --t-receipt-chip: #A9C2BF; --t-invoice-bg: #0B7A75; --t-invoice-fg: #FFFFFF;
  --t-over-bg: #FCE9CF; --t-over-fg: #6B3A05; --t-over-btn: #6B3A05; --t-over-btn-fg: #FFFFFF; --dark-btn: #0F2A2E; --dark-btn-fg: #FFFFFF;
  --sel: #DCEFEC; --sel-fg: var(--text);
}
/* the sidebar is its own dark surface: it gets its own ink */
[data-theme="studio"] .nav { --text: #F1F7F6; --muted: #9DB7B4; --hover: rgba(255,255,255,.07); --surface-2: rgba(255,255,255,.11); --border: transparent;
  --accent: #5FD6C8; --on-accent: #0F2A2E; padding: 20px 12px 14px; }
[data-theme="studio"] .nav-i.on { font-weight: 600; }
[data-theme="studio"] .nav-i.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
[data-theme="studio"] .nav-i.on .ic { color: var(--accent); }
[data-theme="studio"] .main { padding: 26px 34px 20px; }
[data-theme="studio"] .card { border-color: transparent; }
[data-theme="studio"] .btn { font-weight: 550; }
[data-theme="studio"] .kicker { letter-spacing: .02em; text-transform: none; font-size: 13px; }
[data-theme="studio"] .sec-t { text-transform: none; letter-spacing: 0; font-size: .92em; color: var(--text); font-weight: 650; }
[data-theme="studio"] .stat { border-color: transparent; box-shadow: var(--shadow); }
[data-theme="studio"] .stat b { font-family: var(--mono); font-weight: 600; letter-spacing: -0.04em; }
[data-theme="studio"] .trow .lead { color: var(--accent-text); font-family: var(--mono); }
[data-theme="studio"] .todo-n { color: var(--accent-text); }
[data-theme="studio"] .tbl th { background: #FFFFFF; }
[data-theme="studio"] .modal { box-shadow: 0 24px 70px rgba(15,42,46,.28); }

[data-theme="yo"] {
  color-scheme: dark;
  --bg: #090E1C; --nav-bg: transparent; --main-bg: transparent; --surface: #111830; --surface-2: #19213F; --hover: #1D2648;
  --border: #212A4F; --border-2: #313C6C; --text: #E9ECFB; --muted: #9AA3CB; --accent: #8E9DFF; --on-accent: #0B1024;
  --accent-soft: #1F2859; --accent-text: #A9B5FF; --danger: #FF8E8E; --ok: #6FE0B0; --input: #0D1328;
  --font: 'Inter', system-ui, sans-serif; --font-head: 'Bricolage Grotesque', 'Inter', sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --fs: 14px; --r: 16px; --r-sm: 10px; --r-btn: 10px; --h: 40px; --shadow: none; --head-size: 30px; --head-w: 700; --head-ls: -0.02em;
  --st-open-bg: #1F2859; --st-open-fg: #B4BEFF; --st-overdue-bg: #3B2A12; --st-overdue-fg: #FFC56B;
  --st-paid-bg: #11332A; --st-paid-fg: #7FE6BA; --st-draft-bg: #1D2544; --st-draft-fg: #C2C8E6;
  --st-credited-bg: #2D1F4D; --st-credited-fg: #D5B8FF; --st-issued-bg: #1F2859; --st-issued-fg: #B4BEFF;
  --m-card: #8E9DFF; --m-invoice: #6FE0B0; --m-cash: #FFC56B; --m-mobilepay: #D5B8FF; --m-credit: #7A83AB;
  --t-receipt-bg: #E9ECFB; --t-receipt-fg: #0B1024; --t-receipt-chip: #4C5580; --t-invoice-bg: #8E9DFF; --t-invoice-fg: #0B1024;
  --t-over-bg: #3B2A12; --t-over-fg: #FFD58F; --t-over-btn: #FFC56B; --t-over-btn-fg: #0B1024; --dark-btn: #E9ECFB; --dark-btn-fg: #0B1024;
  --sel: #1F2859; --sel-fg: var(--text);
}
/* one soft light in the corner; everything else stays quiet */
[data-theme="yo"] body { background: radial-gradient(900px 520px at 88% -8%, rgba(110,125,255,.22), transparent 62%), radial-gradient(700px 480px at -6% 104%, rgba(74,205,170,.10), transparent 60%), #090E1C; }
[data-theme="yo"] .nav { border-right-color: rgba(255,255,255,.05); }
[data-theme="yo"] .nav-i.on { background: var(--accent-soft); color: #fff; }
[data-theme="yo"] .nav-i.on .ic { color: var(--accent); }
[data-theme="yo"] .card { background: linear-gradient(180deg, rgba(23,31,62,.92), rgba(15,21,44,.92)); border-color: rgba(255,255,255,.06); }
[data-theme="yo"] .modal { background: #121A36; border: 1px solid var(--border-2); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
[data-theme="yo"] .btn.primary { background: linear-gradient(180deg, #A2AEFF, #7D8DFA); border-color: transparent; }
[data-theme="yo"] .mark { background: linear-gradient(135deg, #A2AEFF, #6FE0B0); }
[data-theme="yo"] .stat { background: rgba(23,31,62,.7); border-color: rgba(255,255,255,.06); }
[data-theme="yo"] .stat b { font-family: var(--font-head); font-size: 26px; }
[data-theme="yo"] .tbl th { background: #131A37; }
[data-theme="yo"] .sv-tip, [data-theme="yo"] .wo-prev, [data-theme="yo"] .sg-sum { background: rgba(255,255,255,.04); }
[data-theme="yo"] .ctx { background: #141C3A; }

.sw-studio { background: linear-gradient(135deg, #0F2A2E 50%, #0B7A75 50%); }
.sw-yo { background: linear-gradient(135deg, #0B1024 50%, #8E9DFF 50%); }
@media (max-width: 1100px) {
  [data-theme="studio"] .shell, [data-theme="yo"] .shell { grid-template-columns: 68px minmax(0, 1fr); }
  [data-theme="studio"] .nav .brand-t, [data-theme="yo"] .nav .brand-t, [data-theme="studio"] .nav .nav-t, [data-theme="yo"] .nav .nav-t { display: none; }
  [data-theme="studio"] .nav, [data-theme="yo"] .nav { padding-left: 8px; padding-right: 8px; align-items: stretch; }
  [data-theme="studio"] .nav-i, [data-theme="yo"] .nav-i { justify-content: center; padding: 0; }
  [data-theme="studio"] .nav-i.on::before { left: -8px; }
  [data-theme="studio"] .main { padding: 18px 18px 14px; }
}
@media (max-width: 640px) {
  [data-theme="studio"] .main { padding: 12px 10px; }
  [data-theme="studio"] .nav-i.on::before { display: none; }
}
[data-theme="studio"] .nav { color: var(--text); }
/* recommendations, bike history */
.recs { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.recs-old { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--st-overdue-bg); color: var(--st-overdue-fg); }
.recs-old .muted { color: inherit; opacity: .75; }
.rec-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-r.closed .rec-t > span:first-child { text-decoration: line-through; opacity: .7; }
.rec-t { flex: 1; min-width: 160px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rec-add { display: flex; gap: 8px; }
.rec-add .inp { flex: 1; min-width: 0; }
.fill { flex: 1; }
.hj { display: flex; flex-direction: column; gap: 6px; }
.hj p { margin: 0; }
.hj-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hj-d { min-width: 92px; color: var(--accent-text); }
.hj details summary { cursor: pointer; color: var(--muted); font-size: .92em; padding: 2px 0; }
.reg-hits { margin-top: 6px; min-height: 0; max-height: 260px; }
.reg-hits:empty { display: none; }
/* check-in */
.ci-what { font-size: 1.08em; }
.ci-sign { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }
.ci-sign[open] { display: flex; }
.ci-sign summary { cursor: pointer; font-weight: 600; }
.ci-sign > * + * { margin-top: 10px; }
.recs-old .check { color: inherit; }