:root {
    --jet: #0B0C10;
    --onyx: #111319;
    --panel: #151822;
    --charcoal: #1E222C;
    --gold: #F5C542;
    --red: #E74C3C;
    --green: #2ECC71;
    --cream: #EDEFF4;
    --tan: #C2A878;
}

* { box-sizing: border-box; }

body {
    background: var(--onyx);
    color: var(--cream);
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
}

.app-header {
    background: var(--onyx);
    padding: 16px 0;
    border-bottom: 1px solid var(--charcoal);
}

.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.app-header h1 {
    color: var(--gold);
    margin: 0 0 4px 0;
    font-size: 24px;
}

.app-header .subtitle {
    color: var(--tan);
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
}

.disclaimer {
    color: var(--red);
    font-weight: bold;
    font-size: 12px;
    margin: 4px 0;
}

nav { margin-top: 10px; }
nav a, nav .link-btn {
    color: var(--cream);
    text-decoration: none;
    margin-right: 16px;
    background: var(--panel);
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}
nav a:hover, nav .link-btn:hover { background: var(--charcoal); }
/* Inline links with padding overlap once they wrap onto a second row (a
   phone-width header now that the nav has five links) - block-ify them. */
nav a { display: inline-block; margin-bottom: 6px; }

main { padding: 24px; max-width: 1100px; margin: 0 auto; }

.app-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.sidebar {
    flex: 0 0 260px;
    background: var(--panel);
    border-radius: 10px;
    padding: 14px 10px;
    position: sticky;
    top: 16px;
    /* No internal scrollbar here on purpose - the page's own scrollbar
       (on the right edge of the browser window) is enough to reach every
       nav item. A second, separate scrollbar just for this panel was
       confusing and unnecessary. */
    box-sizing: border-box;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--cream);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 3px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease, color 0.15s ease;
}
.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--tan);
    padding-left: 18px;
}
.sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(245, 197, 66, 0.18), rgba(245, 197, 66, 0.05));
    border-left-color: var(--gold);
    color: var(--gold);
    font-weight: bold;
}

.main-content {
    flex: 1;
    min-width: 0;

    /* Same custom slim scrollbar treatment applied to the page as a
       whole, so the native browser scrollbar (visible on the right edge
       of the window whenever page content is taller than the viewport)
       matches the sidebar's, not just the sidebar's own internal one. */
}

/* Page-wide scrollbar - Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--tan) var(--onyx); }
/* Page-wide scrollbar - WebKit/Chromium/Edge/Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--onyx); }
::-webkit-scrollbar-thumb {
    background-color: rgba(194, 168, 120, 0.45);
    border-radius: 999px;
    border: 2px solid var(--onyx);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(194, 168, 120, 0.75); }

html { scroll-behavior: smooth; }

.card {
    background: var(--panel);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    overflow-x: auto;  /* lets a wide table (e.g. Scanner's ~24 columns) scroll
                          within its own card instead of breaking out past the
                          page's boundary and misaligning with every other section */
    box-sizing: border-box;
}

h2 { color: var(--gold); margin-top: 0; }

input, select {
    background: var(--charcoal);
    color: var(--cream);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    margin: 4px 0;
}

button.primary {
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}
button.primary:hover { opacity: 0.9; }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

.error-msg { color: var(--red); font-size: 14px; margin-top: 8px; }
.status-msg { color: var(--tan); font-size: 14px; margin-top: 8px; }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--charcoal); }
th { color: var(--gold); }

.row-strong { background: rgba(46, 204, 113, 0.15); }
.row-watch { background: rgba(245, 197, 66, 0.15); }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 4px; color: var(--tan); font-size: 13px; }

.job-list-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--charcoal);
    cursor: pointer;
}
.job-list-item:hover { color: var(--gold); }

.calendar-day-cell {
    background: var(--charcoal);
    border-radius: 4px;
    padding: 8px 4px;
    text-align: center;
    font-size: 13px;
    cursor: default;
    min-height: 36px;
}
.calendar-day-cell.calendar-has-entries {
    background: var(--gold);
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.calendar-day-cell.calendar-has-entries:hover { opacity: 0.85; }
.calendar-day-cell.calendar-empty { background: transparent; }
.calendar-day-header {
    text-align: center;
    font-size: 12px;
    color: var(--tan);
    padding-bottom: 4px;
}

/* CRT terminal - pitch-black screen, faint scanlines, glowing phosphor
   text cycling through program attributes with a typewriter effect.
   Green phosphor by default (the classic terminal look) - swap
   --phosphor to an amber value (e.g. #ffb000) for an amber CRT instead. */
.crt-terminal {
    --phosphor: #33ff66;
    position: relative;
    background: #000;
    border-radius: 10px;
    padding: 28px 24px;
    min-height: 90px;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.12), inset 0 0 50px rgba(0, 0, 0, 0.9);
    border: 2px solid #111;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
}
.crt-scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px,
        transparent 1px, transparent 3px
    );
    pointer-events: none;
    z-index: 2;
}
.crt-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(51, 255, 102, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.crt-text {
    position: relative;
    z-index: 3;
    color: var(--phosphor);
    text-shadow: 0 0 4px var(--phosphor), 0 0 10px var(--phosphor), 0 0 18px rgba(51, 255, 102, 0.4);
    font-size: 22px;
    letter-spacing: 1px;
    white-space: pre;
}
.crt-cursor {
    position: relative;
    z-index: 3;
    color: var(--phosphor);
    text-shadow: 0 0 4px var(--phosphor), 0 0 10px var(--phosphor);
    font-size: 20px;
    margin-left: 2px;
    animation: crt-blink 0.9s steps(1) infinite;
}
@keyframes crt-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ===================================================== plans & pricing == */
/* Reuses the existing --jet/--onyx/--panel/--gold palette rather than
   introducing new colours, so the pricing page and admin panel look like
   the rest of the app instead of a bolted-on marketing site. */

.billing-btn {
    background: var(--panel);
    color: var(--cream);
    border: 1px solid var(--charcoal);
    padding: 7px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.billing-btn.active { background: var(--gold); color: var(--jet); font-weight: bold; }

.admin-tab-btn {
    background: transparent;
    color: var(--tan);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: -1px;
}
.admin-tab-btn.active { color: var(--gold); font-weight: bold; border-bottom-color: var(--gold); }

.promo-banner {
    background: rgba(245, 197, 66, 0.14);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 18px;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.plan-card {
    background: var(--panel);
    border: 1px solid var(--charcoal);
    border-radius: 6px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}
.plan-name { color: var(--gold); font-size: 19px; font-weight: bold; }
.plan-tagline { color: var(--tan); font-size: 12.5px; min-height: 32px; margin-top: 2px; }
.plan-price { font-size: 26px; font-weight: bold; color: var(--cream); margin: 8px 0 0 0; }
.plan-per { font-size: 13px; color: var(--tan); font-weight: normal; margin-left: 4px; }
.plan-was { font-size: 13px; color: var(--tan); text-decoration: line-through; margin-bottom: 6px; }
.plan-features { list-style: none; padding: 0; margin: 14px 0 0 0; font-size: 13px; flex-grow: 1; }
.plan-features li { padding: 4px 0 4px 16px; position: relative; }
.plan-features li::before { content: "\2713"; color: var(--green); position: absolute; left: 0; }
.plan-limits {
    list-style: none; padding: 8px 0 0 0; margin: 8px 0 0 0;
    font-size: 12px; color: var(--tan); border-top: 1px solid var(--charcoal);
}
.plan-cta {
    display: block; text-align: center; margin-top: 16px; padding: 9px;
    background: var(--gold); color: var(--jet); font-weight: bold;
    border-radius: 4px; text-decoration: none; font-size: 14px;
}
.plan-cta:hover { opacity: 0.9; }

/* Signup form's tier picker - a compact radio-card row, not the full
   marketing grid above. */
.tier-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.tier-option {
    background: var(--panel); border: 1px solid var(--charcoal); border-radius: 4px;
    padding: 9px 6px; text-align: center; cursor: pointer; font-size: 13px;
}
.tier-option.selected { border-color: var(--gold); background: rgba(245, 197, 66, 0.12); }
.tier-option .tier-name { color: var(--gold); font-weight: bold; display: block; }
.tier-option .tier-price { color: var(--tan); font-size: 12px; }

/* Admin panel */
.admin-section { margin-bottom: 26px; }
.admin-section h3 { color: var(--gold); font-size: 16px; margin-bottom: 6px; }
.admin-hint { color: var(--tan); font-size: 12.5px; margin-top: 0; }
table.admin-table input, table.admin-table select { width: 100%; min-width: 70px; }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: bold; }
.pill-live { background: rgba(46, 204, 113, 0.2); color: var(--green); }
.pill-off { background: rgba(231, 76, 60, 0.2); color: var(--red); }
.pill-pending { background: rgba(245, 197, 66, 0.2); color: var(--gold); }

/* ============================================== CRT sweep marquee ======== */
/* The attribute line sweeps in from the RIGHT, exits LEFT, then reverses
   and sweeps back the other way - forever. That bounce is what
   `animation-direction: alternate` gives for free, so there is no JS
   timer driving it and no drift over a long session.

   The keyframes animate `left` and `transform` together on purpose:
   at 0%   left:100% translateX(0)    -> text sits just past the right edge
   at 100% left:0    translateX(-100%) -> text sits just past the left edge
   Both endpoints are expressed relative to the container and the text's
   OWN width, so this works for any screen size and any length of text
   without measuring anything in JavaScript. */

.crt-marquee {
    position: relative;
    overflow: hidden;
    height: 26px;
    width: 100%;
}
.crt-marquee-text {
    position: absolute;
    top: 0;
    white-space: nowrap;
    color: #33FF66;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 15px;
    text-shadow: 0 0 6px rgba(51, 255, 102, 0.85), 0 0 18px rgba(51, 255, 102, 0.35);
    animation: crt-sweep 26s linear infinite alternate;
}
@keyframes crt-sweep {
    from { left: 100%; transform: translateX(0); }
    to   { left: 0;    transform: translateX(-100%); }
}
/* Respect an explicit OS-level "reduce motion" preference - a continuously
   moving element is a genuine accessibility problem for some people, and a
   decorative ticker is not worth overriding that for. Parked mid-sweep so
   the text is still readable rather than hidden off-screen. */
@media (prefers-reduced-motion: reduce) {
    .crt-marquee-text { animation: none; left: 12px; transform: none; }
}

/* ================================================== landing page ======== */
.landing-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 46px 16px 10px 16px;
    text-align: center;
}
.landing-hero h1 {
    color: var(--gold);
    font-size: 46px;
    letter-spacing: 5px;
    margin: 0;
}
.landing-hero .landing-sub {
    color: var(--tan);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 2px;
    margin: 4px 0 20px 0;
}
.landing-blurb {
    color: var(--cream);
    font-size: 17px;
    line-height: 1.6;
    max-width: 760px;
    margin: 0 auto 26px auto;
}
.landing-cta-row { margin: 26px 0 8px 0; }
.landing-cta {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    margin: 0 6px;
}
.landing-cta-primary { background: var(--gold); color: var(--jet); }
.landing-cta-secondary { background: var(--panel); color: var(--cream); border: 1px solid var(--charcoal); }
.landing-cta:hover { opacity: 0.9; }
.landing-section { max-width: 1180px; margin: 0 auto; padding: 10px 16px 30px 16px; }
.landing-section h2 { color: var(--gold); font-size: 24px; text-align: center; margin-bottom: 4px; }
.landing-section .landing-section-sub {
    color: var(--tan); font-size: 14px; text-align: center; margin-top: 0; margin-bottom: 20px;
}
.landing-footer {
    border-top: 1px solid var(--charcoal);
    padding: 20px 16px 40px 16px;
    text-align: center;
    color: var(--tan);
    font-size: 12.5px;
}

/* Pick Price & Plans matrix */
.page-access-table th, .page-access-table td { padding: 5px 10px; }
.page-access-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.page-access-table input[type="checkbox"] { width: auto; min-width: 0; cursor: pointer; }
.page-access-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }

/* ==================================== scanner toolbar & results ========= */
/* Deliberately dense. The desktop app puts ~14 controls on two rows above
   the grid, and spacing them out the way a marketing page would means the
   results table gets pushed below the fold on a laptop - which is the one
   thing this screen must not do. */

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    margin-bottom: 6px;
    background: var(--charcoal);
    border-radius: 4px;
}
.tb-label { color: var(--tan); font-size: 12.5px; margin: 0 2px 0 6px; }
.tb-check { color: var(--cream); font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.tb-check input { width: auto; min-width: 0; margin: 0; }
.tb-sep { width: 1px; height: 20px; background: var(--panel); margin: 0 6px; }
.toolbar-row select, .toolbar-row input[type="text"], .toolbar-row input[type="number"] {
    margin: 0; padding: 5px 7px; font-size: 13px;
}
.tb-btn {
    background: var(--panel);
    color: var(--cream);
    border: 1px solid #2A2F3C;
    padding: 6px 11px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
}
.tb-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tb-btn.active { border-color: var(--gold); color: var(--gold); background: var(--charcoal); }
.tb-accent { background: var(--gold); color: var(--jet); font-weight: bold; border-color: var(--gold); }
.tb-accent:hover:not(:disabled) { opacity: 0.9; color: var(--jet); }
.tb-jump { color: var(--gold); }

.status-bar {
    background: var(--charcoal);
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--tan);
    margin-top: 6px;
}

.legend-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 12px;
}
.legend-label { color: var(--tan); }
.legend-chip { padding: 3px 9px; border-radius: 3px; font-weight: bold; color: var(--jet); }
/* The same four buckets ui/row_coloring.py returns, in the same colours
   ui/theme.py assigns them: green / gold / blue / grey. */
.chip-strong { background: #2ECC71; }
.chip-watch  { background: #F5C542; }
.chip-early  { background: #6EC6FF; }
.chip-none   { background: #8A8F9C; }
.legend-timing { margin-left: auto; color: var(--cream); background: var(--charcoal);
                 padding: 3px 10px; border-radius: 3px; }

/* Results grid. Row tints are the translucent versions of the four chip
   colours - strong enough to scan down the column at a glance, light
   enough that the text stays readable on the dark theme. */
.scan-table-wrap { overflow-x: auto; max-height: 62vh; overflow-y: auto; }
.scan-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12.5px; }
.scan-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--charcoal); color: var(--gold);
    padding: 7px 10px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--panel); cursor: help;
}
.scan-table td { padding: 5px 10px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.04); }
.scan-table tbody tr.row-strong { background: rgba(46, 204, 113, 0.16); }
.scan-table tbody tr.row-watch  { background: rgba(245, 197, 66, 0.16); }
.scan-table tbody tr.row-early  { background: rgba(110, 198, 255, 0.14); }
.scan-table tbody tr.row-none   { background: transparent; }
.scan-table tbody tr:hover { outline: 1px solid var(--gold); }
/* Ticker column pinned - with 26 columns you lose track of which row you
   are reading the moment you scroll right. */
.scan-table th:first-child, .scan-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--panel);
}
.scan-table th:first-child { z-index: 3; background: var(--charcoal); }

.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-panel {
    background: var(--panel); border: 1px solid var(--charcoal); border-radius: 6px;
    padding: 20px; max-width: 720px; width: 92%;
}

/* ================================================ help & guide ========== */
.help-section {
    border: 1px solid var(--charcoal);
    border-radius: 4px;
    margin-bottom: 6px;
    background: var(--panel);
}
.help-section > summary {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--gold);
    font-weight: bold;
    font-size: 14px;
    list-style: none;
}
.help-section > summary::-webkit-details-marker { display: none; }
.help-section > summary::before { content: "\25B8 "; color: var(--tan); }
.help-section[open] > summary::before { content: "\25BE "; }
.help-section > summary:hover { background: var(--charcoal); }
/* pre-wrap, not <br> substitution: the desktop help text is hand-wrapped
   with real newlines and indentation that carries meaning (numbered steps,
   indented continuations). Collapsing that whitespace would mangle it. */
.help-body {
    padding: 2px 14px 14px 14px;
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cream);
}

/* The one place live-vs-simulated is still surfaced: when the displayed
   numbers are generated rather than real. Everything else about data
   sourcing is now handled silently by the server. */
.sim-warning {
    display: inline-block;
    background: rgba(231, 76, 60, 0.16);
    border: 1px solid var(--red);
    color: var(--red);
    padding: 6px 11px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: bold;
}

/* =============================================== disclaimer ============= */
.disclaimer-block { font-size: 13.5px; line-height: 1.6; color: var(--cream); }
.disclaimer-block p { margin: 0 0 12px 0; }
.disclaimer-lead {
    color: var(--red);
    font-weight: bold;
    border-left: 3px solid var(--red);
    padding-left: 11px;
}
.disclaimer-block strong { color: var(--gold); }
.disclaimer-foot { font-size: 12.5px; color: var(--tan); margin-bottom: 0 !important; }
.disclaimer-foot a { color: var(--gold); }

/* Scan history rows: label on the left, delete on the right. */
.job-list-item { display: flex; align-items: center; gap: 10px; }
.job-list-label { flex: 1; min-width: 0; }
.job-delete-btn {
    flex: none;
    background: none;
    border: 1px solid transparent;
    color: var(--tan);
    font-size: 17px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
}
.job-delete-btn:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.job-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* % Results */
.pct-summary {
    display: flex; flex-wrap: wrap; gap: 18px;
    background: var(--charcoal); border-radius: 4px;
    padding: 10px 14px; margin-bottom: 10px; font-size: 13px;
}
.pct-summary strong { color: var(--cream); font-size: 15px; }
.pct-up { color: var(--green); }
.pct-up strong { color: var(--green); }
.pct-down { color: var(--red); }
.pct-down strong { color: var(--red); }

/* Inline field guidance under signup inputs. */
.field-hint { font-size: 12px; color: var(--tan); margin-top: 4px; line-height: 1.45; }

/* Explanatory notes at the foot of reference pages. */
.context-note {
    margin-top: 16px;
    border-top: 1px solid var(--charcoal);
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cream);
}
.context-note h3 { color: var(--gold); font-size: 15px; margin: 0 0 8px 0; }
.context-note p { margin: 0 0 10px 0; }
.context-note strong { color: var(--gold); }

.richtext-output p { margin: 0 0 14px 0; }
.richtext-output p:last-child { margin-bottom: 0; }
.richtext-output ul, .richtext-output ol { margin: 0 0 14px 22px; padding: 0; }
.richtext-output img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
.richtext-output a { color: var(--gold); }

.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 40px; }
.password-toggle-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 16px;
    padding: 4px 6px; line-height: 1; color: var(--tan);
}
.password-toggle-btn:hover { color: var(--gold); }