:root {
    --bg: #f7f7f8;
    --text: #1a1a1a;
    --muted: #666;
    --muted-2: #888;
    --muted-3: #999;

    --nav-bg: #1a1a2e;
    --nav-text: #e6e6f0;
    --nav-text-hover: #fff;

    --card-bg: #fff;
    --card-border: #e2e2e6;
    --row-border: #eee;
    --row-hover: #fafafa;

    --input-border: #ccc;
    --dropdown-hover: #f0f0f5;

    --accent: #1a1a2e;
    --accent-hover: #33334d;
    --disabled-bg: #aaa;

    --pos: #0a7d33;
    --neg: #c0392b;

    /* Colors are spread across distinct hues (not just light/dark shades of
       the same hue) so the 7 categories stay tellable apart as small solid
       dots in the graphs, not just as tinted badge text. The two "paired"
       categories per side (Confirmed vs. its softer sibling) additionally
       lean on a dark+muted vs. bright+saturated contrast, which reads faster
       at a glance than a lightness difference alone. */
    /* Confirmed Breakout */    --badge-dark-green-bg: #bfe8da;   --badge-dark-green-text: #0b6e52;
    /* Building Momentum */     --badge-green-bg: #dbf3df;        --badge-green-text: #2fa84a;
    /* Unconfirmed Rally */     --badge-yellow-green-bg: #eef3c0; --badge-yellow-green-text: #8fae1b;
    /* Unconfirmed Decline */   --badge-orange-red-bg: #fce4c2;   --badge-orange-red-text: #d97706;
    /* Fading Support */        --badge-red-bg: #fbdcd9;          --badge-red-text: #dc2626;
    /* Confirmed Breakdown */   --badge-dark-red-bg: #f0c6c6;     --badge-dark-red-text: #7f1d1d;
    /* Neutral */                --badge-gray-bg: #eee;             --badge-gray-text: #666;

    /* Scatter-plot cluster colors (k-medoids groups) -- deliberately blues/
       purples/browns, away from the green-red hue range the regime colors
       use above, so cluster mode never looks like it's reusing (and
       conflicting with) the bullish/bearish color language. */
    --cluster-1: #2563eb; --cluster-2: #d97706; --cluster-3: #7c3aed;
    --cluster-4: #0d9488; --cluster-5: #db2777; --cluster-6: #78350f;
    --cluster-7: #4d7c0f; --cluster-8: #0891b2;
    --outlier-halo: #f5c518;

    --sort-arrow: #888;
    --sort-arrow-active: #000;

    --notice-bg: #fff6e0; --notice-border: #f0dca0;
    --notice-blocking-bg: #fdecec; --notice-blocking-border: #f0b8b0;

    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-strong: rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] {
    --bg: #1e1e26;
    --text: #e8e8ec;
    --muted: #a0a0b0;
    --muted-2: #8a8a9a;
    --muted-3: #77778a;

    --nav-bg: #19191f;
    --nav-text: #c8c8d8;
    --nav-text-hover: #fff;

    --card-bg: #292933;
    --card-border: #3a3a46;
    --row-border: #34343f;
    --row-hover: #2d2d38;

    --input-border: #3f3f4d;
    --dropdown-hover: #2a2a38;

    --accent: #4b4b7a;
    --accent-hover: #5c5c94;
    --disabled-bg: #4a4a56;

    --pos: #4ade80;
    --neg: #f87171;

    /* Dark-mode badge text needs to stay light enough to read on a dark
       badge background, so unlike the light theme this leans on hue
       separation rather than a dark/bright split within each pair. */
    /* Confirmed Breakout */    --badge-dark-green-bg: #0f2e1c;   --badge-dark-green-text: #34d399;
    /* Building Momentum */     --badge-green-bg: #163a28;        --badge-green-text: #4ade80;
    /* Unconfirmed Rally */     --badge-yellow-green-bg: #2d3a14; --badge-yellow-green-text: #bef264;
    /* Unconfirmed Decline */   --badge-orange-red-bg: #3a2814;   --badge-orange-red-text: #fb923c;
    /* Fading Support */        --badge-red-bg: #3b1f1f;          --badge-red-text: #f87171;
    /* Confirmed Breakdown */   --badge-dark-red-bg: #3a1230;     --badge-dark-red-text: #ec4899;
    /* Neutral */                --badge-gray-bg: #2a2a35;          --badge-gray-text: #b0b0c0;

    /* Brighter/more saturated than the light-theme cluster set so they still
       read clearly against a dark background. */
    --cluster-1: #60a5fa; --cluster-2: #fb923c; --cluster-3: #a78bfa;
    --cluster-4: #2dd4bf; --cluster-5: #f472b6; --cluster-6: #c2874a;
    --cluster-7: #a3e635; --cluster-8: #22d3ee;
    --outlier-halo: #fde047;

    --sort-arrow: #7a7a8a; --sort-arrow-active: #fff;

    --notice-bg: #3a3320; --notice-border: #5c4f28;
    --notice-blocking-bg: #3b1f1f; --notice-blocking-border: #5c2f2f;

    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
}

nav {
    background: var(--nav-bg);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    row-gap: 8px;
}

nav a, nav button {
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
}

nav a:hover, nav button:hover { color: var(--nav-text-hover); }

nav .brand {
    font-weight: 600;
    color: var(--nav-text-hover);
    margin-right: auto;
}

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

h1 { font-size: 22px; margin-bottom: 4px; }
h2 { font-size: 17px; margin-top: 32px; }
h3 { font-size: 14px; margin: 0 0 12px; }

.subtitle { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--row-border);
}

th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

/* Table headers stay visible at the top of the viewport while a long table
   scrolls past underneath (see .table-wrap below for the horizontal-scroll
   counterpart). Needs a solid background since sticky cells otherwise let
   scrolled-past rows show through. */
.table-wrap thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 3; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }
.sort-arrow { font-size: 10px; text-decoration: none; color: var(--sort-arrow); }
.sort-arrow.active { color: var(--sort-arrow-active); font-weight: bold; }

/* Any header with a hover definition gets a dotted underline on its label
   text (not the cell's own border-bottom, which stays solid as the table's
   row divider) -- applies automatically on every page, no per-header class
   needed. */
th[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
th.sortable[title] { cursor: pointer; }  /* sortable wins over the plain "hover for info" cursor */

tr:hover { background: var(--row-hover); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
}
.badge-dark-green { background: var(--badge-dark-green-bg); color: var(--badge-dark-green-text); }
.badge-green { background: var(--badge-green-bg); color: var(--badge-green-text); }
.badge-yellow-green { background: var(--badge-yellow-green-bg); color: var(--badge-yellow-green-text); }
.badge-orange-red { background: var(--badge-orange-red-bg); color: var(--badge-orange-red-text); }
.badge-red { background: var(--badge-red-bg); color: var(--badge-red-text); }
.badge-dark-red { background: var(--badge-dark-red-bg); color: var(--badge-dark-red-text); }
.badge-gray, .badge-unknown { background: var(--badge-gray-bg); color: var(--badge-gray-text); }

input, select, button {
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}

/* Momentary "something happened" feedback on every button the instant it's
   pressed (not the deliberate toggled-on look of button.active below, which
   is a persistent state, not a click reaction). Generic enough to layer on
   top of any button variant -- primary, link, chip, nav -- without
   per-variant overrides, and skipped for a disabled button since pressing
   it doesn't actually do anything. */
button:not(:disabled):active {
    transform: translateY(1px) scale(0.97);
    filter: brightness(0.95);
}

.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 10px var(--shadow);
}
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.autocomplete-item:hover, .autocomplete-item.highlighted { background: var(--dropdown-hover); }
.autocomplete-item .ticker { font-weight: 600; font-size: 13px; white-space: nowrap; }
.autocomplete-item .name {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.primary {
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { background: var(--disabled-bg); cursor: default; }

button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: default;
    box-shadow: inset 0 2px 4px var(--shadow-strong);
    transform: translateY(1px);
}

button.link {
    border: none;
    background: none;
    color: var(--neg);
    cursor: pointer;
    padding: 4px 8px;
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 12px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    font-size: 13px;
}
.chip button {
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}
.chip button:hover { color: var(--neg); }

/* Wide tables (screener/watchlist/alerts) scroll horizontally on narrow
   screens instead of squeezing every column down to unreadable widths. */
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 640px; }

/* A slim mirror scrollbar above a .table-wrap (see addTopScrollbars() in
   app.js) so a long table can be scrolled horizontally without first
   scrolling all the way down to find the real scrollbar at its bottom edge. */
.table-scroll-top { overflow-x: auto; overflow-y: hidden; height: 16px; margin-bottom: 4px; }
.table-scroll-top > div { height: 1px; }

/* Ticker symbols wired up for the hover mini-radar (see initTickerHoverPopup
   in app.js) -- a dotted underline hints there's more info on hover, same
   visual language as th[title] uses for column header definitions. */
.ticker-hover { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

.ticker-hover-popup {
    display: none;
    position: absolute;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px 6px;
    box-shadow: 0 8px 20px var(--shadow);
}
.ticker-hover-popup .thp-header { font-size: 13px; margin-bottom: 2px; }
.ticker-hover-popup .thp-name { color: var(--muted); font-size: 11px; margin-bottom: 4px; max-width: 180px; }
.ticker-hover-popup .thp-actions { display: flex; gap: 4px; margin: 2px -8px -6px; border-top: 1px solid var(--card-border); }
.ticker-hover-popup .thp-actions button { font-size: 12px; padding: 6px 8px; }

/* Flags a Stockdar Signal that differs from the same ticker's regime on the
   previous scan (see regimeBadge in app.js) -- yellow ties it to the same
   "something notable here" visual language as the scatter plot's outlier
   halo, rather than introducing a new color meaning. */
.regime-changed { color: var(--outlier-halo); font-size: 9px; cursor: help; }

.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Regime-colored <option>s (Stockdar Signal Sort) get a tinted background
   to match their text in light mode; dark mode already reads fine with just
   colored text on the normal dropdown background, so the tint is undone there. */
:root[data-theme="dark"] #viewSelect option,
:root[data-theme="dark"] #tableSignalFilter option { background-color: var(--card-bg) !important; }

.error { color: var(--neg); font-size: 13px; margin-top: 8px; }
.notice { background: var(--notice-bg); border: 1px solid var(--notice-border); border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; font-size: 14px; }
.notice.blocking { background: var(--notice-blocking-bg); border-color: var(--notice-blocking-border); }

.empty { color: var(--muted-2); font-size: 14px; padding: 16px 0; }

footer {
    max-width: 1000px;
    margin: 40px auto 20px;
    padding: 0 24px;
    color: var(--muted-3);
    font-size: 12px;
    line-height: 1.5;
}

.auth-box {
    max-width: 360px;
    margin: 80px auto;
}

.auth-box h1 { text-align: center; }

.auth-box .card { display: flex; flex-direction: column; gap: 10px; }
.auth-box form { display: flex; flex-direction: column; gap: 10px; }
.auth-box input, .auth-box button.primary { width: 100%; }

.toggle-link { text-align: center; font-size: 13px; margin-top: 12px; }
.toggle-link a { color: var(--accent); cursor: pointer; }

/* Site page directory at the bottom of the Profile page. Deliberately
   inverted (white on black) in light mode to stand out as a distinct "site
   map" block -- but in dark mode that inversion would mean black-on-white,
   which was explicitly ruled out, so it just falls back to the normal card
   styling there instead of inverting the other way. */
.page-directory { background: #000; color: #fff; border-radius: 8px; padding: 16px 20px; margin-top: 32px; }
.page-directory a { color: #fff; }
:root[data-theme="dark"] .page-directory { background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); }
:root[data-theme="dark"] .page-directory a { color: var(--accent-hover); }