/* Every block below is generated by scripts/gen-themes.mjs from the matching kittyconf in cli-Productivity-Suite: background, foreground, cursor, selection and all sixteen ANSI slots verbatim, so `cps theme <name>` and this dropdown paint the same terminal. The panel tones and status roles have no kitty counterpart and are derived from those, not chosen. */

:root,
:root[data-theme="mocha"] {
  color-scheme: dark;
  --bg: #1e1e2e; --surface: #181825; --inset: #11111b; --raised: #333344;
  --border: #6c7086; --fg: #cdd6f4; --fg-muted: #9399b2;
  --accent: #cba6f7; --accent-soft: #b4befe; --on-accent: #11111b; --scrim: rgba(17, 17, 27, .85);
  --ok: #a6e3a1; --warn: #f9e2af; --alert: #fab387; --err: #f38ba8; --info: #89b4fa;
  --cursor: #f5e0dc; --selection: #f5e0dc; --on-selection: #1e1e2e;
  --black: #45475a; --red: #f38ba8; --green: #a6e3a1; --yellow: #f9e2af; --blue: #89b4fa; --magenta: #f5c2e7; --cyan: #94e2d5; --white: #a6adc8;
  --bright-black: #585b70; --bright-red: #eba0ac; --bright-green: #89d88b; --bright-yellow: #fab387; --bright-blue: #74c7ec; --bright-magenta: #cba6f7; --bright-cyan: #89dceb; --bright-white: #bac2de;
}

:root[data-theme="latte"] {
  color-scheme: light;
  --bg: #eff1f5; --surface: #e5e7eb; --inset: #dbdde1; --raised: #d3d5d9;
  --border: #9ca0b0; --fg: #4c4f69; --fg-muted: #7c7f93;
  --accent: #8839ef; --accent-soft: #179299; --on-accent: #eff1f5; --scrim: rgba(219, 221, 225, .86);
  --ok: #40a02b; --warn: #fe640b; --alert: #df8e1d; --err: #d20f39; --info: #1e66f5;
  --cursor: #dc8a78; --selection: #dc8a78; --on-selection: #eff1f5;
  --black: #bcc0cc; --red: #d20f39; --green: #40a02b; --yellow: #df8e1d; --blue: #1e66f5; --magenta: #ea76cb; --cyan: #179299; --white: #6c6f85;
  --bright-black: #acb0be; --bright-red: #e64553; --bright-green: #49af3d; --bright-yellow: #fe640b; --bright-blue: #209fb5; --bright-magenta: #8839ef; --bright-cyan: #04a5e5; --bright-white: #5c5f77;
}

:root[data-theme="gruvbox-dark"] {
  color-scheme: dark;
  --bg: #282828; --surface: #212121; --inset: #1a1a1a; --raised: #3d3d3d;
  --border: #504945; --fg: #ebdbb2; --fg-muted: #8e8e8e;
  --accent: #b16286; --accent-soft: #458588; --on-accent: #282828; --scrim: rgba(26, 26, 26, .85);
  --ok: #98971a; --warn: #d79921; --alert: #cc241d; --err: #fb4934; --info: #458588;
  --cursor: #ebdbb2; --selection: #ebdbb2; --on-selection: #665c54;
  --black: #1d2021; --red: #cc241d; --green: #98971a; --yellow: #d79921; --blue: #458588; --magenta: #b16286; --cyan: #689d6a; --white: #a89984;
  --bright-black: #928374; --bright-red: #fb4934; --bright-green: #b8bb26; --bright-yellow: #fabd2f; --bright-blue: #83a598; --bright-magenta: #d3869b; --bright-cyan: #8ec07c; --bright-white: #ebdbb2;
}

:root[data-theme="gruvbox-light"] {
  color-scheme: light;
  --bg: #fbf1c7; --surface: #f2e5bc; --inset: #ebdbb2; --raised: #dfd5ac;
  --border: #ada47c; --fg: #3c3836; --fg-muted: #857c56;
  --accent: #8f3f71; --accent-soft: #076678; --on-accent: #fbf1c7; --scrim: rgba(235, 219, 178, .86);
  --ok: #79740e; --warn: #b57614; --alert: #d79921; --err: #cc241d; --info: #076678;
  --cursor: #3c3836; --selection: #3c3836; --on-selection: #bdae93;
  --black: #d5c4a1; --red: #cc241d; --green: #98971a; --yellow: #d79921; --blue: #458588; --magenta: #b16286; --cyan: #689d6a; --white: #928374;
  --bright-black: #a89984; --bright-red: #9d0006; --bright-green: #79740e; --bright-yellow: #b57614; --bright-blue: #076678; --bright-magenta: #8f3f71; --bright-cyan: #427b58; --bright-white: #3c3836;
}

:root[data-theme="dracula-dark"] {
  color-scheme: dark;
  --bg: #282a36; --surface: #21232e; --inset: #1a1c27; --raised: #3d404c;
  --border: #6272a4; --fg: #f8f8f2; --fg-muted: #6272a4;
  --accent: #d6acff; --accent-soft: #8be9fd; --on-accent: #282a36; --scrim: rgba(26, 28, 39, .85);
  --ok: #50fa7b; --warn: #f1fa8c; --alert: #ff6e6e; --err: #ff5555; --info: #8be9fd;
  --cursor: #f8f8f2; --selection: #44475a; --on-selection: #ffffff;
  --black: #21222c; --red: #ff5555; --green: #50fa7b; --yellow: #f1fa8c; --blue: #bd93f9; --magenta: #ff79c6; --cyan: #8be9fd; --white: #f8f8f2;
  --bright-black: #6272a4; --bright-red: #ff6e6e; --bright-green: #69ff94; --bright-yellow: #ffffa5; --bright-blue: #d6acff; --bright-magenta: #ff92df; --bright-cyan: #a4ffff; --bright-white: #ffffff;
}

:root[data-theme="dracula-light"] {
  color-scheme: light;
  --bg: #fffbeb; --surface: #f5f1e1; --inset: #ebe7d7; --raised: #e3dfcf;
  --border: #6c664b; --fg: #1f1f1f; --fg-muted: #6c664b;
  --accent: #7862d0; --accent-soft: #036a96; --on-accent: #fffbeb; --scrim: rgba(235, 231, 215, .86);
  --ok: #14710a; --warn: #846e15; --alert: #d74c3d; --err: #cb3a2a; --info: #047fb4;
  --cursor: #1f1f1f; --selection: #cfcfde; --on-selection: #1f1f1f;
  --black: #ceccc0; --red: #cb3a2a; --green: #14710a; --yellow: #846e15; --blue: #644ac9; --magenta: #a3144d; --cyan: #036a96; --white: #6c664b;
  --bright-black: #bcbab3; --bright-red: #d74c3d; --bright-green: #198d0c; --bright-yellow: #9e841a; --bright-blue: #7862d0; --bright-magenta: #bf185a; --bright-cyan: #047fb4; --bright-white: #2c2b31;
}

:root[data-theme="tokyonight-dark"] {
  color-scheme: dark;
  --bg: #1a1b26; --surface: #13141f; --inset: #0d0e18; --raised: #2e303b;
  --border: #575966; --fg: #c0caf5; --fg-muted: #545c7e;
  --accent: #7aa2f7; --accent-soft: #7aa2f7; --on-accent: #16161e; --scrim: rgba(13, 14, 24, .85);
  --ok: #9ece6a; --warn: #e0af68; --alert: #faba4a; --err: #f7768e; --info: #a4daff;
  --cursor: #c0caf5; --selection: #283457; --on-selection: #c0caf5;
  --black: #15161e; --red: #f7768e; --green: #9ece6a; --yellow: #e0af68; --blue: #7aa2f7; --magenta: #bb9af7; --cyan: #7dcfff; --white: #a9b1d6;
  --bright-black: #414868; --bright-red: #ff899d; --bright-green: #9fe044; --bright-yellow: #faba4a; --bright-blue: #8db0ff; --bright-magenta: #c7a9ff; --bright-cyan: #a4daff; --bright-white: #c0caf5;
}

:root[data-theme="tokyonight-light"] {
  color-scheme: light;
  --bg: #e1e2e7; --surface: #d7d8dd; --inset: #cdced3; --raised: #c5c6cb;
  --border: #95969b; --fg: #3760bf; --fg-muted: #6e6f74;
  --accent: #9854f1; --accent-soft: #007197; --on-accent: #e1e2e7; --scrim: rgba(205, 206, 211, .86);
  --ok: #587539; --warn: #8c6c3e; --alert: #a27629; --err: #f52a65; --info: #007ea8;
  --cursor: #3760bf; --selection: #b7c1e3; --on-selection: #3760bf;
  --black: #c4c8da; --red: #f52a65; --green: #587539; --yellow: #8c6c3e; --blue: #2e7de9; --magenta: #9854f1; --cyan: #007197; --white: #6172b0;
  --bright-black: #a1a6c5; --bright-red: #ff4774; --bright-green: #5c8524; --bright-yellow: #a27629; --bright-blue: #358aff; --bright-magenta: #a463ff; --bright-cyan: #007ea8; --bright-white: #3760bf;
}

:root[data-theme="monokai-dark"] {
  color-scheme: dark;
  --bg: #2d2a2e; --surface: #221f22; --inset: #19181a; --raised: #434044;
  --border: #6e6a6f; --fg: #fcfcfa; --fg-muted: #727072;
  --accent: #ab9df2; --accent-soft: #78dce8; --on-accent: #19181a; --scrim: rgba(25, 24, 26, .85);
  --ok: #a9dc76; --warn: #ffd866; --alert: #ffd866; --err: #ff6188; --info: #78dce8;
  --cursor: #c1c0c0; --selection: #fcfcfa; --on-selection: #2d2a2e;
  --black: #403e41; --red: #ff6188; --green: #a9dc76; --yellow: #ffd866; --blue: #fc9867; --magenta: #ab9df2; --cyan: #78dce8; --white: #c1c0c0;
  --bright-black: #727072; --bright-red: #ff6188; --bright-green: #a9dc76; --bright-yellow: #ffd866; --bright-blue: #fc9867; --bright-magenta: #ab9df2; --bright-cyan: #78dce8; --bright-white: #fcfcfa;
}

:root[data-theme="monokai-light"] {
  color-scheme: light;
  --bg: #faf4f2; --surface: #f0eae8; --inset: #e6e0de; --raised: #ded8d6;
  --border: #aca7a5; --fg: #29242a; --fg-muted: #847f7d;
  --accent: #7058be; --accent-soft: #1c8ca8; --on-accent: #faf4f2; --scrim: rgba(230, 224, 222, .86);
  --ok: #269d69; --warn: #cc7a0a; --alert: #cc7a0a; --err: #e14775; --info: #1c8ca8;
  --cursor: #706b6e; --selection: #29242a; --on-selection: #faf4f2;
  --black: #d3cdcc; --red: #e14775; --green: #269d69; --yellow: #cc7a0a; --blue: #e16032; --magenta: #7058be; --cyan: #1c8ca8; --white: #706b6e;
  --bright-black: #a59fa0; --bright-red: #e14775; --bright-green: #269d69; --bright-yellow: #cc7a0a; --bright-blue: #e16032; --bright-magenta: #7058be; --bright-cyan: #1c8ca8; --bright-white: #29242a;
}

:root[data-theme="atom-one-dark"] {
  color-scheme: dark;
  --bg: #282c34; --surface: #21252b; --inset: #181a1f; --raised: #3d424a;
  --border: #686d76; --fg: #abb2bf; --fg-muted: #8e939d;
  --accent: #c678dd; --accent-soft: #528bff; --on-accent: #282c34; --scrim: rgba(24, 26, 31, .85);
  --ok: #98c379; --warn: #e5c07b; --alert: #d19a66; --err: #e06c75; --info: #61afef;
  --cursor: #528bff; --selection: #3e4451; --on-selection: #abb2bf;
  --black: #21252b; --red: #e06c75; --green: #98c379; --yellow: #e5c07b; --blue: #61afef; --magenta: #c678dd; --cyan: #56b6c2; --white: #828997;
  --bright-black: #5c6370; --bright-red: #be5046; --bright-green: #73c990; --bright-yellow: #d19a66; --bright-blue: #528bff; --bright-magenta: #c678dd; --bright-cyan: #56b6c2; --bright-white: #abb2bf;
}

:root[data-theme="atom-one-light"] {
  color-scheme: light;
  --bg: #fafafa; --surface: #eaebeb; --inset: #dbdbdc; --raised: #dedede;
  --border: #acacac; --fg: #383a42; --fg-muted: #858585;
  --accent: #a626a4; --accent-soft: #526fff; --on-accent: #fafafa; --scrim: rgba(219, 219, 220, .86);
  --ok: #50a14f; --warn: #986801; --alert: #c18401; --err: #e45649; --info: #0184bc;
  --cursor: #526fff; --selection: #e5e5e6; --on-selection: #383a42;
  --black: #dbdbdc; --red: #e45649; --green: #50a14f; --yellow: #c18401; --blue: #4078f2; --magenta: #a626a4; --cyan: #0184bc; --white: #696c77;
  --bright-black: #a0a1a7; --bright-red: #ca1243; --bright-green: #2db448; --bright-yellow: #986801; --bright-blue: #526fff; --bright-magenta: #a626a4; --bright-cyan: #0184bc; --bright-white: #383a42;
}

:root[data-theme="everforest-dark"] {
  color-scheme: dark;
  --bg: #2d353b; --surface: #262d33; --inset: #1e262c; --raised: #434b52;
  --border: #56635f; --fg: #d3c6aa; --fg-muted: #7a8478;
  --accent: #d699b6; --accent-soft: #a7c080; --on-accent: #2d353b; --scrim: rgba(30, 38, 44, .85);
  --ok: #a7c080; --warn: #dbbc7f; --alert: #e69875; --err: #e67e80; --info: #7fbbb3;
  --cursor: #d3c6aa; --selection: #505a60; --on-selection: #9da9a0;
  --black: #343f44; --red: #e67e80; --green: #a7c080; --yellow: #dbbc7f; --blue: #7fbbb3; --magenta: #d699b6; --cyan: #83c092; --white: #859289;
  --bright-black: #56635f; --bright-red: #e67e80; --bright-green: #a7c080; --bright-yellow: #e69875; --bright-blue: #7fbbb3; --bright-magenta: #d699b6; --bright-cyan: #83c092; --bright-white: #9da9a0;
}

:root[data-theme="everforest-light"] {
  color-scheme: light;
  --bg: #fdf6e3; --surface: #efebd4; --inset: #e6e2cc; --raised: #e1dac7;
  --border: #afa897; --fg: #5c6a72; --fg-muted: #878170;
  --accent: #df69ba; --accent-soft: #3a94c5; --on-accent: #fdf6e3; --scrim: rgba(230, 226, 204, .86);
  --ok: #8da101; --warn: #f57d26; --alert: #dfa000; --err: #f85552; --info: #3a94c5;
  --cursor: #5c6a72; --selection: #eaedc8; --on-selection: #829181;
  --black: #bdc3af; --red: #f85552; --green: #8da101; --yellow: #dfa000; --blue: #3a94c5; --magenta: #df69ba; --cyan: #35a77c; --white: #829181;
  --bright-black: #939f91; --bright-red: #e66868; --bright-green: #93b259; --bright-yellow: #f57d26; --bright-blue: #3a94c5; --bright-magenta: #df69ba; --bright-cyan: #35a77c; --bright-white: #5c6a72;
}

:root[data-theme="nord-dark"] {
  color-scheme: dark;
  --bg: #2e3440; --surface: #272c38; --inset: #1f2530; --raised: #444a57;
  --border: #4c566a; --fg: #d8dee9; --fg-muted: #969dab;
  --accent: #88c0d0; --accent-soft: #81a1c1; --on-accent: #3b4252; --scrim: rgba(31, 37, 48, .85);
  --ok: #a3be8c; --warn: #ebcb8b; --alert: #d08770; --err: #bf616a; --info: #81a1c1;
  --cursor: #d8dee9; --selection: #4c566a; --on-selection: #d8dee9;
  --black: #3b4252; --red: #bf616a; --green: #a3be8c; --yellow: #ebcb8b; --blue: #81a1c1; --magenta: #b48ead; --cyan: #88c0d0; --white: #e5e9f0;
  --bright-black: #4c566a; --bright-red: #d08770; --bright-green: #a3be8c; --bright-yellow: #ebcb8b; --bright-blue: #5e81ac; --bright-magenta: #b48ead; --bright-cyan: #8fbcbb; --bright-white: #eceff4;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.45 'Inter', system-ui, sans-serif;
}
code, pre, kbd, samp { font-family: 'JetBrains Mono', monospace; }
[hidden] { display: none !important; }

button, select, input { font: inherit; }
button {
  background: var(--raised);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--accent-soft); }
button.danger { color: var(--err); border-color: var(--err); }

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px; /* keep computeNatural's avail = clientWidth/Height - 4 in sync */
  /* seamless: same color as terminal bg so the sub-grid remainder reads as padding, not a letterbox border */
  background: var(--bg);
}
/* xterm.css hardcodes the viewport to #000; repoint it at the terminal bg so the scroll area and sub-cell remainder don't frame the terminal in black against the gutter */
.xterm .xterm-viewport { background-color: var(--bg); }

#probe {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  white-space: pre;
  font: 400 16px 'JetBrains Mono', monospace;
}

#control-toggle {
  position: fixed;
  top: 6px;
  right: 6px;
  z-index: 30;
  background: var(--inset);
  padding: 5px;
  border-radius: 5px;
  opacity: .35; /* unobtrusive over the terminal until needed */
  transition: opacity .15s ease;
}
#control-toggle svg { display: block; }
#control-toggle:hover,
#control-toggle:focus-visible,
#control-toggle[aria-expanded="true"] { opacity: 1; }
#control-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

#panel {
  position: fixed;
  top: 40px;
  right: 6px;
  z-index: 29;
  width: 320px;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: none;
}
#panel.open { display: block; }
#panel section {
  margin-top: 14px;
  border-top: 1px solid var(--raised);
  padding-top: 10px;
}
#panel h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-muted);
}

.facts { margin: 0; display: grid; gap: 4px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; }
.facts dt { color: var(--fg-muted); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
#p-status[data-state="connected"] { color: var(--ok); }
#p-status[data-state="connecting"],
#p-status[data-state="reconnecting"] { color: var(--warn); }
#p-status[data-state="stale"] { color: var(--alert); }

.row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
label.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

#panel .hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}

#download-path {
  flex: 1;
  min-width: 0;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--fg);
  font: 400 12px 'JetBrains Mono', monospace;
}
#download-path:focus { outline: none; border-color: var(--accent-soft); }

#theme {
  width: 100%;
  background: var(--inset);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
#theme:focus { outline: none; border-color: var(--accent-soft); }

#logout-form {
  margin: 14px 0 0;
  border-top: 1px solid var(--raised);
  padding-top: 12px;
}
#logout-form button { width: 100%; color: var(--info); }

/* exit-card z-index: below #panel and the upload modal, above the terminal */
#exit-card {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}
.exit-card h1 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--accent);
}
#exit-msg { margin: 0 0 12px; }
#exit-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--warn);
}
.chooser-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chooser-buttons button { padding: 10px 18px; }
.overlay-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  text-align: center;
}
/* upload modal: above the panel and the exit card */
#upload-modal {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
}
#upload-modal .overlay-card { max-width: min(360px, 92vw); }
#upload-modal h1 { margin: 0 0 12px; font-size: 18px; color: var(--accent); }
.upload-hint { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--fg-muted); }
#upload-modal .upload-cancel { margin-top: 16px; }
.upload-error { margin: 12px 0 0; font-size: 12px; color: var(--err); }
.upload-bar {
  height: 6px;
  background: var(--raised);
  border-radius: 3px;
  overflow: hidden;
}
#upload-bar-fill { height: 100%; width: 0; background: var(--accent); }
#upload-stats { margin: 10px 0 16px; }
/* user-select: all — one click grabs the whole path when navigator.clipboard is absent (plain HTTP) */
.upload-path {
  display: block;
  background: var(--inset);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--fg);
  user-select: all;
  overflow-wrap: anywhere;
  text-align: left;
}
#upload-result-path { margin-bottom: 16px; }
#panel code, .upload-hint code {
  background: var(--inset);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--fg);
}
#panel kbd {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}

/* transfer indicator/notice: never coexist, so they share one slot stacked above #toast */
#transfer-indicator {
  position: fixed;
  right: 16px;
  bottom: 60px;
  z-index: 49;
  background: var(--inset);
  border-color: var(--accent);
  color: var(--accent);
  font-size: 12px;
}
#transfer-notice {
  position: fixed;
  right: 16px;
  bottom: 60px;
  z-index: 49;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  background: var(--raised);
  border-left: 3px solid var(--ok);
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 60vw;
}
#transfer-notice.err { border-left-color: var(--err); }
#transfer-notice-text { overflow-wrap: anywhere; }
#transfer-notice-path { flex-basis: 100%; }
#transfer-notice-close {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0 2px;
  /* --fg-muted is calibrated against --surface; this sits on --raised, the lightest neutral, where it drops under 2:1 in the darker themes. */
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
}

#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  background: var(--raised);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 60vw;
  overflow-wrap: anywhere;
}

body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--raised);
  border-radius: 10px;
  padding: 28px;
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
}
.login-logo {
  width: 60px;
  height: 60px;
}
.login-wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent);
}
.login-card label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--fg-muted);
}
.login-card input {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--inset);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.login-card input:focus { outline: none; border-color: var(--accent-soft); }
.login-card button {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
.login-card .error { margin: 0 0 12px; color: var(--err); }