@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.ttf') format('truetype'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-500.ttf') format('truetype'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-600.ttf') format('truetype'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.ttf') format('truetype'); }
:root {
  font-family: Montserrat, Arial, sans-serif;
  font-synthesis: none;
  color-scheme: dark;
  --text: #f1f0eb;
  --muted: #aaa9a3;
  --accent: #f1f0eb;
  --accent-strong: #fff;
  --accent-soft: #29292b;
  --text-on-accent: #111112;
  --border: #333336;
  --border-strong: #555559;
  --surface: #19191c;
  --surface-strong: #232326;
  --input-surface: #121214;
  --page: linear-gradient(135deg, #0b0b0d, #161618 70%, #1c1c1e);
  --brand-surface: #f1f0eb;
  --logo-filter: brightness(0);
  --shadow: 0 16px 48px #0002;
  --visual-stage: #111;
  --visual-overlay: #000b;
  --visual-favorite: #f1f0eb;
  --backdrop-standard: #000a;
  --radius-card: 5px;
  --radius-dialog: 5px;
  --radius-control-comfortable: 4px;
  --radius-control-compact: 4px;
  --radius-pill: 4px;
  --radius-step-90: 4px;
  --radius-round: 999px;
  --type-step-68: .75rem;
  --type-step-120: 1.15rem;
  --weight-readable: 500;
}
:root[data-theme="light"] {
  color-scheme: light;
  --text: #161617;
  --muted: #676761;
  --accent: #171719;
  --accent-strong: #080809;
  --accent-soft: #e5e4de;
  --text-on-accent: #f8f7f2;
  --border: #d6d5cf;
  --border-strong: #b0afa9;
  --surface: #faf9f5;
  --surface-strong: #eae9e3;
  --input-surface: #f5f4ef;
  --page: linear-gradient(130deg, #f8f7f2, #efeee8 68%, #e6e5df);
  --brand-surface: #171719;
  --logo-filter: brightness(0) invert(1);
  --shadow: 0 16px 48px #17171908;
  --visual-favorite: #171719;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--page); min-height: 100vh; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.pb-plaque { display: grid; place-items: center; width: 138px; height: 60px; background: var(--brand-surface); border-radius: 8px; flex-shrink: 0; }
.pb-logo { width: 112px; height: auto; filter: var(--logo-filter); }
.brand-divider { height: 30px; width: 1px; background: var(--border-strong); }
.wordmark { font-size: 34px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.eyebrow { font-size: 10px; letter-spacing: 1.4px; font-weight: 500; color: var(--muted); margin: 0 0 12px; }
.login-appearance { position: absolute; top: 24px; right: 32px; }
.appearance { display: flex; align-items: center; gap: 12px; }
.theme-switch { display: flex; gap: 1px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.theme-switch button { border: 0; background: transparent; color: var(--muted); padding: 9px 12px; font-size: 11px; }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--text-on-accent); }
.header-actions { display: flex; align-items: center; gap: 18px; }