:root { color-scheme: light; }
[hidden] { display: none !important; }
body { margin: 0; }

/* Layout: Kopfzeile mit Wochenwahl und Kennzahlen; links Wochenraster (Personal x Tage, darunter Besetzung je Schicht) und Tageseinsatz nach Wohngruppen; rechts Mindestbesetzung, Regelverstöße und Legende. */
:root {
  --bg: #eef3f4;
  --surface: #ffffff;
  --surface-2: #f5f8f9;
  --fg: #12262b;
  --muted: #587076;
  --line: #d5e0e3;
  --accent: #0e6b70;
  --accent-fg: #ffffff;
  --accent-soft: #d9eeef;
  --f-bg: #fcebc2; --f-fg: #6a4300;
  --s-bg: #d4e6fa; --s-fg: #123f70;
  --n-bg: #dad7f4; --n-fg: #2e2972;
  --u-bg: #d5eddb; --u-fg: #1d5a2d;
  --k-bg: #f6d8d8; --k-fg: #7b1c1c;
  --x-bg: #e6ecee; --x-fg: #4b6268;
  --r-bg: #f0dcf0; --r-fg: #5a1f5a;
  --ok: #1b7a43; --ok-bg: #dcf1e3;
  --bad: #b3261e; --bad-bg: #fbe0dd;
  --warn: #8a5300; --warn-bg: #fdeccb; --warn-line: #d08a1a;
  --shadow: 0 8px 28px rgba(18, 38, 43, .18);
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1a1d; --surface: #142428; --surface-2: #182b30; --fg: #e4eff1; --muted: #93acb2; --line: #274045;
    --accent: #4fc1c6; --accent-fg: #06282a; --accent-soft: #17383b;
    --f-bg: #4a3a12; --f-fg: #f6d98a; --s-bg: #1b3752; --s-fg: #a9d0f5; --n-bg: #2b2a58; --n-fg: #c3c0f3;
    --u-bg: #1b4128; --u-fg: #a5deb3; --k-bg: #532121; --k-fg: #f4b4b4; --x-bg: #223439; --x-fg: #9fb5ba;
    --r-bg: #43264a; --r-fg: #e8c3ef;
    --ok: #5fd08a; --ok-bg: #173a26; --bad: #ff8f86; --bad-bg: #4a1e1b;
    --warn: #f2c26b; --warn-bg: #4a3512; --warn-line: #d9a23c; --shadow: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1a1d; --surface: #142428; --surface-2: #182b30; --fg: #e4eff1; --muted: #93acb2; --line: #274045;
  --accent: #4fc1c6; --accent-fg: #06282a; --accent-soft: #17383b;
  --f-bg: #4a3a12; --f-fg: #f6d98a; --s-bg: #1b3752; --s-fg: #a9d0f5; --n-bg: #2b2a58; --n-fg: #c3c0f3;
  --u-bg: #1b4128; --u-fg: #a5deb3; --k-bg: #532121; --k-fg: #f4b4b4; --x-bg: #223439; --x-fg: #9fb5ba;
  --r-bg: #43264a; --r-fg: #e8c3ef;
  --ok: #5fd08a; --ok-bg: #173a26; --bad: #ff8f86; --bad-bg: #4a1e1b;
  --warn: #f2c26b; --warn-bg: #4a3512; --warn-line: #d9a23c; --shadow: 0 8px 28px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 40px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* Kopf */
header { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.sub { color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; vertical-align: 2px; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.sync.live::before { background: var(--ok); }
.sync.ro::before { background: var(--warn-line); }
.sync.err::before { background: var(--bad); }
.weeknav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weeknav .label { min-width: 190px; text-align: center; }
.weeknav .label b { display: block; font-size: 16px; }
.weeknav .label span { color: var(--muted); font-size: 12.5px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 12px; font-weight: 500; min-height: 38px; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.icon { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.armed { border-color: var(--bad); color: var(--bad); font-weight: 600; }

#banner[hidden] { display: none; }
#banner { background: var(--accent-soft); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.kpi .n { font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1; min-width: 2ch; font-variant-numeric: tabular-nums; }
.kpi .t { color: var(--muted); font-size: 12.5px; min-width: 0; }
.kpi .t b { display: block; color: var(--fg); font-size: 14px; }
.kpi.bad .n { color: var(--bad); }
.kpi.ok .n { color: var(--ok); }
.kpi.warn .n { color: var(--warn); }

/* Layout */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.panel h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toolbar .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scroll { overflow-x: auto; }

/* Raster */
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 780px; }
th, td { padding: 4px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; padding: 8px 4px; border-bottom: 2px solid var(--line); z-index: 2; }
thead th small { display: block; font-weight: 400; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
thead th .ft { display: block; font-size: 10.5px; font-weight: 600; color: var(--r-fg); background: var(--r-bg); border-radius: 4px; margin: 2px 4px 0; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
th.today { box-shadow: inset 0 -3px 0 var(--accent); }
th.today small { color: var(--accent); font-weight: 500; }
.we { background: var(--surface-2); }
thead th.we { background: var(--surface-2); }
td:first-child, th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 170px; padding-left: 14px; }
thead th:first-child { z-index: 3; }
tr.group td { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; }
tr.group td:first-child { background: var(--surface-2); }
.person { display: flex; flex-direction: column; line-height: 1.25; }
.person b { font-weight: 600; }
.person span { color: var(--muted); font-size: 12px; }
td.hrs { font-family: var(--font-mono); font-size: 12.5px; min-width: 76px; font-variant-numeric: tabular-nums; }
td.hrs.over { color: var(--bad); font-weight: 600; }
td.hrs small { display: block; color: var(--muted); font-size: 11px; line-height: 1.25; }

.cell { position: relative; width: 100%; min-width: 72px; height: 46px; border-radius: 7px; border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; font-weight: 600; font-size: 13px; }
.cell small { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; opacity: .85; }
.cell.empty { color: var(--muted); font-weight: 400; opacity: .55; }
.cell.empty:hover:not(:disabled) { border: 1px dashed var(--accent); opacity: 1; }
.cell.wishonly { opacity: 1; color: var(--accent); font-weight: 500; font-size: 11.5px; border: 1px dashed var(--accent); background: var(--accent-soft); }
.cell:hover:not(:disabled) { filter: brightness(.97); }
.cell:disabled { cursor: default; opacity: 1; }
.cell.empty:disabled, .cell.wishonly:disabled { opacity: .55; }
.cell.wishonly:disabled { opacity: 1; }
.cell.c-F { background: var(--f-bg); color: var(--f-fg); }
.cell.c-S { background: var(--s-bg); color: var(--s-fg); }
.cell.c-N { background: var(--n-bg); color: var(--n-fg); }
.cell.c-U { background: var(--u-bg); color: var(--u-fg); }
.cell.c-K { background: var(--k-bg); color: var(--k-fg); }
.cell.c-X { background: var(--x-bg); color: var(--x-fg); font-weight: 500; }
.cell.c-R { background: var(--r-bg); color: var(--r-fg); }
.cell.bad { box-shadow: 0 0 0 2px var(--bad); }
.cell.bad::after { content: "!"; position: absolute; top: -6px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bad); color: var(--surface); font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.cell.unmet:not(.bad) { box-shadow: 0 0 0 2px var(--warn-line); }
.cell.unmet::before { content: "W"; position: absolute; top: -6px; left: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--warn-line); color: #1d1300; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.cell.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Besetzung */
tr.cov td:first-child { font-weight: 600; }
tr.cov td:first-child i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; display: block; font-family: var(--font-mono); }
.cv { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 4px 6px; border-radius: 7px; line-height: 1.2; }
.cv b { font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.cv small { font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; }
.cv.ok { background: var(--ok-bg); color: var(--ok); }
.cv.bad { background: var(--bad-bg); color: var(--bad); }
tr.covhead td { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; text-align: left; border-top: 2px solid var(--line); }
tr.covhead td:first-child { background: var(--surface-2); }

/* Tageseinsatz */
.daytabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.daytab { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-weight: 500; font-size: 13px; }
.daytab[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.daytab .ftd { color: var(--r-fg); }
.daytab[aria-pressed="true"] .ftd { color: inherit; }
.dayinfo { padding: 10px 14px 0; color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dayinfo b { color: var(--fg); font-weight: 600; }
.shifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 12px 14px 14px; }
.sc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.sc > .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 12px; font-weight: 600; }
.sc > .hd span { font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; opacity: .85; }
.sc.s-F > .hd { background: var(--f-bg); color: var(--f-fg); }
.sc.s-S > .hd { background: var(--s-bg); color: var(--s-fg); }
.sc.s-N > .hd { background: var(--n-bg); color: var(--n-fg); }
.grp { padding: 9px 12px; border-top: 1px solid var(--line); }
.grp:first-of-type { border-top: 0; }
.grp .gh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.grp .gh b { font-weight: 600; }
.grp .gh span { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); }
.grp .ratio { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.grp.empty .ratio { color: var(--bad); font-weight: 600; }
.grp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.grp li { display: flex; gap: 8px; align-items: center; }
.rl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; border-radius: 4px; padding: 0 5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); flex: none; }
.rl.FK { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sc .none { color: var(--bad); font-size: 12.5px; }
.pgrid { color: var(--muted); font-size: 11.5px; padding-top: 2px; }

/* Seitenleiste */
aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.box { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.minrow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.minrow .nm { font-weight: 600; }
.minrow .nm span { display: block; font-weight: 400; color: var(--muted); font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
.step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.step button { width: 28px; height: 32px; border: 0; background: var(--surface-2); font-size: 16px; line-height: 1; }
.step button:hover:not(:disabled) { background: var(--accent-soft); }
.step output { min-width: 34px; text-align: center; font-family: var(--font-mono); font-size: 13px; padding: 0 2px; }
.colhead { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; color: var(--muted); font-size: 11.5px; }
.colhead span:nth-child(2), .colhead span:nth-child(3) { width: 84px; text-align: center; }
.minrow .step { width: 84px; justify-content: space-between; }
.gt { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 2px; }
.rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12.5px; }
.rules li { display: flex; gap: 8px; }
.rules li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.issues button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.issues li.bad button { border-left: 4px solid var(--bad); }
.issues li.warn button { border-left: 4px solid var(--warn-line); }
.issues button:hover { border-color: var(--accent); }
.issues b { font-weight: 600; }
.issues span { color: var(--muted); font-size: 12.5px; }
.issues .kind { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.issues li.bad .kind { color: var(--bad); }
.issues li.warn .kind { color: var(--warn); }
.empty-ok { color: var(--ok); background: var(--ok-bg); border-radius: 8px; padding: 9px 11px; font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.chip.c-F { background: var(--f-bg); color: var(--f-fg); }
.chip.c-S { background: var(--s-bg); color: var(--s-fg); }
.chip.c-N { background: var(--n-bg); color: var(--n-fg); }
.chip.c-U { background: var(--u-bg); color: var(--u-fg); }
.chip.c-K { background: var(--k-bg); color: var(--k-fg); }
.chip.c-X { background: var(--x-bg); color: var(--x-fg); }
.chip.c-R { background: var(--r-bg); color: var(--r-fg); }
.note { color: var(--muted); font-size: 12.5px; margin: 0; }

/* Menü */
#menu { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; width: 232px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
#menu .hd { font-size: 11.5px; color: var(--muted); padding: 4px 8px 6px; }
#menu > button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 7px 8px; border-radius: 6px; text-align: left; }
#menu > button:hover, #menu > button:focus-visible { background: var(--accent-soft); outline: none; }
#menu .sw { width: 34px; flex: none; text-align: center; border-radius: 5px; font-size: 11px; font-weight: 700; padding: 2px 0; justify-content: center; }
#menu .tm { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
#menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
#menu .wl { font-size: 11.5px; color: var(--muted); padding: 2px 8px 4px; }
#menu .wrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 4px 4px; }
#menu .wrow button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 5px 0; font-size: 11px; font-weight: 600; min-width: 0; }
#menu .wrow button:hover, #menu .wrow button:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
#menu .wrow button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 500; box-shadow: var(--shadow); z-index: 60; max-width: calc(100vw - 32px); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cell.off { opacity: .4; cursor: default; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); }
.dlg { position: fixed; inset: 0; z-index: 70; background: rgba(10, 20, 22, .55); display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.dlg[hidden] { display: none; }
.dlgbox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); width: min(880px, 100%); margin-top: 3vh; display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.dlghd { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dlghd h2 { margin: 0; font-size: 18px; font-weight: 700; }
.dlghd .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sdform { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); }
.sdform[hidden] { display: none; }
.sdform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 0; }
.sdform input, .sdform select { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-height: 36px; min-width: 0; }
.sdform input:focus-visible, .sdform select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sdform .full { grid-column: 1 / -1; }
.sdform .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sdform h3 { margin: 0; font-size: 14px; }
.err { color: var(--bad); font-size: 12.5px; font-weight: 500; }
.stt { min-width: 560px; }
.stt th { position: static; text-align: left; font-size: 12px; color: var(--muted); padding: 6px 10px; border-bottom: 2px solid var(--line); }
.stt td, .stt th { text-align: left; padding: 7px 10px; }
.stt td:first-child, .stt th:first-child { min-width: 150px; }
.stt tr.gone td { color: var(--muted); }
.stt .st { font-size: 12px; font-weight: 600; }
.stt .st.ok { color: var(--ok); }
.stt .st.warn { color: var(--warn); }
@media (max-width: 1040px) { .main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  h1 { font-size: 22px; }
  td:first-child, th:first-child { min-width: 128px; padding-left: 10px; }
  .weeknav .label { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cell.flash { animation: none; } }

#who { font-size: 12px; font-weight: 600; }
.linkbtn { background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 0; font-weight: 500; font-size: 12.5px; }
.login { max-width: 380px; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 14px; }
.login form { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.login input { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; min-height: 40px; }
.login input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login .note { margin: 0; }