/* ==========================================================================
   Foxhole Analytics - customer portal stylesheet
   Styled on the Foxhole Analytics brand design system:
   "night, earth, and a single warm eye of light."

     - Near-black dug-earth greens are the base for everything.
     - Fox rust (#C2571E) is the one true brand colour - rationed to the
       primary action, ideally one rust element per view.
     - Ember amber (#E8A33D) is the eye of light - eyebrows, highlights,
       the focus ring, active markers.
     - Signal teal (#3BD4C0) is reserved for live data / up-states;
       clay (#D5533E) is its down-state counterpart. A teal element that is
       not a quote, a delta or a live indicator teaches the customer that
       the colour means nothing - so nothing decorative may wear it.
     - Type is a three-way split: Spectral (serif headlines),
       Manrope (UI/body), IBM Plex Mono (numeric/eyebrows).

   Markup class names are unchanged from the pre-rebrand portal; only the
   visual language is remapped. Legacy --fin-* / --up / --down aliases are
   kept so existing markup and JS keep working.

   Sections:
     1. Design tokens & legacy aliases
     2. Base reset & document
     3. Primitives (buttons, inputs, cards, badges, alerts, modals, eyebrow)
     4. Signed-out chrome (navbar, footer)
     5. Auth pages (login, register, forgot/reset password, confirm)
     6. Dashboard shell (topbar, sidebar, bottom nav, page header, KPI)
     7. Dashboard panels (watchlist, picks, daytrade, records, settings, pay)
     8. Data visualization (sparklines, meters, chart containers)
     9. Responsive
   ========================================================================== */

/* == 1. Design tokens ====================================================== */
:root {
    color-scheme: dark;

    /* ---- Foxhole ground: near-black greenish charcoals (the earth) ---- */
    --ground-900: #0E110A; /* deepest pit - app backdrop behind everything */
    --ground-800: #12160D; /* recessed wells, input fields */
    --ground-700: #16190F; /* foxhole ground - primary base surface */
    --ground-600: #1B1F16; /* raised surface / panel */
    --ground-500: #1F2416; /* card surface */
    --ground-400: #26301C; /* hover on dark surfaces */
    --ground-300: #2E3A22; /* hairline borders, dividers */
    --ground-200: #3A472C; /* strong border / focus ring on dark */

    /* ---- Field greens: muted foliage tones for text + quiet UI ---- */
    --moss-500: #6E7C5E;
    --moss-400: #7C8A6B;
    --moss-300: #8FA06E;
    --moss-200: #B9C29E;

    /* ---- Field snow: warm off-whites (headings on dark, never #fff) ---- */
    --snow-100: #EDE8DF;
    --snow-200: #D9D3C6;
    --snow-300: #C7C0B1;

    /* ---- Fox rust: the one true brand colour. Rationed. ---- */
    --rust-700: #7C330F;
    --rust-600: #9A4416;
    --rust-500: #C2571E;
    --rust-400: #D8692B;
    --rust-300: #E67C42;
    --rust-tint: rgba(194, 87, 30, 0.14);

    /* ---- Ember signal: the eye of light. Highlights + warmth. ---- */
    --ember-600: #C9862B;
    --ember-500: #E8A33D;
    --ember-400: #F0B65E;
    --ember-glow: rgba(232, 163, 61, 0.20);

    /* ---- Signal teal: LIVE DATA ONLY. ---- */
    --teal-600: #1E3A34;
    --teal-500: #3BD4C0;
    --teal-400: #63E0CF;
    --teal-tint: rgba(59, 212, 192, 0.12);

    /* ---- Down / negative (data family only; desaturated clay) ---- */
    --down-500: #D5533E;
    --down-tint: rgba(213, 83, 62, 0.12);

    /* ---- Semantic surfaces ---- */
    --surface-app:   var(--ground-900);
    --surface-base:  var(--ground-700);
    --surface-panel: var(--ground-600);
    --surface-card:  var(--ground-500);
    --surface-hover: var(--ground-400);
    --surface-inset: var(--ground-800);

    /* ---- Type ---- */
    --font-voice: 'Spectral', Georgia, 'Times New Roman', serif;
    --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

    /* ---- Radii, borders, shadows, motion ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 20px -6px rgba(0,0,0,0.55);
    --shadow-lg: 0 18px 48px -12px rgba(0,0,0,0.65);
    --shadow-inset: inset 0 1px 0 rgba(237,232,223,0.04);
    --glow-ember: 0 0 0 4px var(--ember-glow);

    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 200ms;
    --dur-slow: 320ms;

    /* ================= LEGACY ALIASES =================
       Existing markup and JS reference these names; they stay mapped onto the
       brand palette so hundreds of call sites did not have to change at once.
       Every alias below still has readers. The --fin-blue pair is gone: a name
       that says blue while delivering rust misleads at every call site, so its
       readers were rewritten onto real tokens instead. --up, --down and --mono
       are kept on purpose even if their readers ever thin out - they are
       semantic names ("the up colour"), which read better at a call site than
       the palette step they resolve to. */
    --fin-bg:      var(--ground-900);
    --fin-bg2:     var(--ground-600);
    --fin-bg3:     var(--ground-800);
    --fin-border:  var(--ground-300);
    --fin-text:    var(--snow-200);
    --fin-muted:   var(--moss-200);
    --fin-dimmed:  var(--moss-400);
    --up:          var(--teal-500);   /* live / positive data */
    --down:        var(--down-500);   /* negative data (clay) */
    --mono:        var(--font-mono);
}

/* == 2. Base reset & document ============================================= */
body {
    font-family: var(--font-sans);
    background: var(--ground-900);
    color: var(--snow-200);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--rust-500); color: var(--snow-100); }

a { color: var(--rust-400); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--ember-500); }

/* Status colours come from the data family, never from brand rust. */
.up      { color: var(--teal-500)  !important; }
.down    { color: var(--down-500)  !important; }
.neutral { color: var(--moss-400)  !important; }

/* Text helpers */
.u-muted  { color: var(--moss-200); }
.u-dimmed { color: var(--moss-400); }

@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .45; transform: scale(.72); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* == 3. Primitives ========================================================= */

/* -- Mono eyebrow / overline: tracked-out uppercase, ember or moss -- */
.fox-eyebrow {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ember-500);
}

/* -- Buttons: primary is rust and there is one per view -- */
.fin-btn-primary {
    background: var(--rust-500); border: 1px solid var(--rust-500); color: var(--snow-100);
    font-size: .875rem; font-weight: 600; border-radius: var(--radius-md);
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.fin-btn-primary:hover  { background: var(--rust-400); border-color: var(--rust-400); color: var(--snow-100); }
.fin-btn-primary:active { transform: scale(.97); }
.fin-btn-ghost {
    background: transparent; border: 1px solid var(--ground-200);
    color: var(--snow-200); font-size: .875rem; font-weight: 500;
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.fin-btn-ghost:hover  { border-color: var(--moss-300); color: var(--snow-100); background: var(--ground-400); }
.fin-btn-ghost:active { transform: scale(.97); }

/* -- Focus: the ember eye of light, everywhere -- */
:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 2px; }

/* == 4. Signed-out chrome ================================================== */

/* -- Navbar -- */
.fin-navbar {
    background: rgba(14,17,10,.92) !important;
    border-bottom: 1px solid var(--ground-300);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 0;
}
.fin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 0; }
.fin-brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
.fin-brand-text { display: flex; flex-direction: column; line-height: 1; }
/* Canonical lockup: prominent serif "Foxhole" over small mono "ANALYTICS" */
.fin-brand-top  { font-family: var(--font-voice); font-size: 1.35rem; font-weight: 700; color: var(--snow-100); letter-spacing: -.01em; }
.fin-brand-bot  { font-family: var(--font-mono); font-size: .5rem; font-weight: 500; color: var(--rust-500); letter-spacing: .24em; text-transform: uppercase; margin-top: 2px; }
.fin-nav-link {
    font-size: .875rem !important; font-weight: 500 !important;
    color: var(--moss-200) !important; padding: 18px 14px !important;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.fin-nav-link:hover { color: var(--snow-100) !important; border-bottom-color: var(--rust-500); }

/* -- Footer -- */
.fin-footer { background: var(--ground-900); border-top: 1px solid var(--ground-300); margin-top: auto; }
.fin-footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem .75rem; padding: 1.25rem 0 .25rem; }
.fin-footer-link { font-size: .8375rem; color: var(--moss-200); text-decoration: none; transition: color var(--dur-fast); }
.fin-footer-link:hover { color: var(--rust-300); }
.fin-footer-nav .fin-footer-link:not(:last-child)::after {
    content: "|";
    color: var(--ground-300);
    margin-left: .75rem;
}
.fin-footer-legal { padding: .5rem 0 1.5rem; text-align: center; }
.fin-reg-text { font-size: .8rem; line-height: 1.7; color: var(--moss-400); margin: 0; }

/* == 5. Auth pages ========================================================= */
.auth-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    position: relative;
    overflow: hidden;
}
/* Faint rust survey grid, fading out downward - the one permitted texture. */
.auth-wrapper::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(194,87,30,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194,87,30,.035) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}

.auth-card {
    position: relative;
    width: 100%; max-width: 440px;
    background: var(--surface-card);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}
.auth-card-wide   { max-width: 520px; }
.auth-card-medium { max-width: 480px; }
.auth-card-center { text-align: center; }

.auth-logo-row {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 24px;
}
.auth-logo-row img { height: 44px; width: auto; }

.auth-eyebrow {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ember-500); text-align: center; margin-bottom: 10px;
}
.auth-title {
    font-family: var(--font-voice);
    font-size: 1.6rem; font-weight: 600; color: var(--snow-100);
    text-align: center; margin-bottom: 6px; letter-spacing: -.01em;
}
.auth-subtitle { font-size: .875rem; color: var(--moss-200); text-align: center; margin-bottom: 28px; }
/* A title standing without a subtitle carries the subtitle's bottom rhythm. */
.auth-title-solo { margin-bottom: 28px; }

/* -- Form controls: recessed wells, ember focus -- */
.form-label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--moss-200); margin-bottom: 6px;
}
.form-input, .form-control {
    width: 100%;
    background: var(--surface-inset) !important;
    border: 1px solid var(--ground-300) !important;
    color: var(--snow-200) !important;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: .9rem;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-input::placeholder, .form-control::placeholder { color: var(--moss-500) !important; }
.form-input:focus, .form-control:focus {
    border-color: var(--ember-500) !important;
    outline: none;
    box-shadow: var(--glow-ember) !important;
    background: var(--surface-inset) !important;
    color: var(--snow-200) !important;
}
.form-group { margin-bottom: 18px; }

/* Bootstrap .form-control needs its radius/padding restated at equal weight */
.form-control { border-radius: var(--radius-md) !important; padding: 10px 14px !important; font-size: .9rem !important; }

/* -- Checkboxes -- */
.remember-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 22px;
}
.remember-row input[type="checkbox"] { accent-color: var(--rust-500); width: 15px; height: 15px; }
.remember-row label { font-size: .82rem; color: var(--moss-200); margin: 0; }
.forgot-link { margin-left: auto; font-size: .82rem; color: var(--ember-500); text-decoration: none; }
.forgot-link:hover { color: var(--snow-100); }

.form-check-input {
    background-color: var(--surface-inset) !important;
    border-color: var(--ground-200) !important;
    width: 16px; height: 16px;
}
.form-check-input:checked { background-color: var(--rust-500) !important; border-color: var(--rust-500) !important; }
.form-check-input:focus { border-color: var(--ember-500) !important; box-shadow: var(--glow-ember) !important; }
.form-check-label { font-size: .85rem; color: var(--moss-200); }
.form-check-label a { color: var(--ember-500); text-decoration: none; }
.form-check-label a:hover { color: var(--snow-100); }

/* -- Submit: the one rust element on each auth view -- */
.auth-submit-btn {
    width: 100%; background: var(--rust-500);
    color: var(--snow-100); border: none; border-radius: var(--radius-md);
    padding: 12px; font-size: .9rem; font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
    margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit-btn:hover:not(:disabled) { background: var(--rust-400); }
.auth-submit-btn:active { transform: scale(.97); }
.auth-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-submit-btn .ti { font-size: 1rem; line-height: 1; }
.auth-cta-note { margin: 0; text-align: center; font-size: .8125rem; color: var(--moss-400); letter-spacing: .01em; }

/* -- Inline messages -- */
.auth-msg {
    display: none;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .85rem;
    text-align: center;
}
.auth-msg-error {
    background: var(--down-tint);
    border: 1px solid rgba(213,83,62,.35);
    color: var(--down-500);
}
.auth-msg-success {
    background: var(--teal-tint);
    border: 1px solid rgba(59,212,192,.3);
    color: var(--teal-500);
}
#wrong_pass {
    display: none;
    background: var(--down-tint);
    border: 1px solid rgba(213,83,62,.35);
    color: var(--down-500);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: .85rem;
    margin-bottom: 18px;
    text-align: center;
}
#wrong_pass.show { display: block; }

/* -- Auth links + divider -- */
.auth-links { text-align: center; font-size: .83rem; color: var(--moss-200); }
.auth-links a { color: var(--ember-500); text-decoration: none; }
.auth-links a:hover { color: var(--snow-100); }
.auth-divider { border-top: 1px solid var(--ground-300); margin: 18px 0; }

/* -- Confirm page states -- */
.confirm-spinner {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid var(--ground-300);
    border-top-color: var(--ember-500);
    animation: spin .8s linear infinite;
    margin: 0 auto 20px;
}
.confirm-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.7rem;
}
.confirm-icon.success { background: var(--teal-tint);  color: var(--teal-500); }
.confirm-icon.error   { background: var(--down-tint);  color: var(--down-500); }
.confirm-msg { font-size: .9rem; color: var(--moss-200); margin-bottom: 24px; line-height: 1.6; }

/* -- Invalid token banner (reset password) -- */
.token-missing {
    background: var(--down-tint);
    border: 1px solid rgba(213,83,62,.3);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    text-align: center;
    color: var(--moss-200);
    font-size: .87rem;
}
.token-missing strong { color: var(--down-500); display: block; font-size: 1rem; margin-bottom: 6px; }

/* -- Error modal (register / reset password) -- */
.auth-modal-content {
    background: var(--surface-panel);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.auth-modal-body { padding: 32px 28px; text-align: center; }
.auth-modal-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--down-tint); color: var(--down-500);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-size: 1.5rem;
}
.auth-modal-title {
    font-family: var(--font-voice);
    font-size: 1.15rem; font-weight: 600; color: var(--snow-100); margin-bottom: 10px;
}
.auth-modal-msg { font-size: .87rem; color: var(--moss-200); margin-bottom: 24px; line-height: 1.6; }
.auth-modal-dialog { max-width: 400px; }
.modal-backdrop.show { background: rgba(8,10,6,.9); }


/* == 6-8. Dashboard (shell, panels, data visualization) ====================
   Moved out of dashboard.php's inline <style> and remapped onto the brand
   tokens. Rust is rationed to the primary action; ember carries active,
   focused and highlighted states; teal appears only where data is live.
   ========================================================================== */


/* -- Layout shell -- */
/* Scoped to body.dash: the dashboard pins the viewport and scrolls only its
   main pane, but the signed-out pages scroll normally and must not inherit a
   frozen body from sharing this stylesheet. */
body.dash { height: 100vh; min-height: 100vh; overflow: hidden; }

.dash-shell {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* -- Top bar -- */
.dash-topbar {
    height: 52px;
    background: rgba(14,17,10,.97);
    border-bottom: 1px solid var(--fin-border);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 100;
}
/* Greeting. Set as running text, not as a control: the name used to sit in a
   bordered pill that looked like a menu and opened nothing. Only the name is
   emphasised, because "Welcome," is the part nobody needs to read twice. */
.dash-welcome {
    font-size: .88rem;
    color: var(--fin-muted);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-welcome strong { color: var(--snow-100); font-weight: 700; }

/* Account status. Mono because it is a reading of state rather than prose, and
   toned by what it says: ember for anything the customer has to act on, moss
   for an account that is settled, dimmed for a trial still running.

   Held against the right edge so that it and the sign-out button read as one
   group of account controls, rather than as a second sentence trailing off the
   greeting. What separates the two is empty space. */
.dash-acct { display: flex; align-items: center; gap: .55rem; min-width: 0; margin-left: auto; }
.dash-acct-text {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--fin-dimmed);
    white-space: nowrap;
}
.dash-acct-text.is-paid  { color: var(--moss-200); }
.dash-acct-text.is-trial { color: var(--fin-dimmed); }
.dash-acct-text.is-warn  { color: var(--ember-500); }
.dash-acct-btn { font-size: .72rem; padding: 3px 11px; white-space: nowrap; }

/* The account block above already claims the right edge, so sign-out only has
   to refuse to be squeezed by it. */
.topbar-signout { flex-shrink: 0; }

/* Sidebar footer meta */
.dash-sidebar-meta { font-family: var(--font-mono); font-size: .6rem; color: var(--moss-400); line-height: 1.6; text-align: center; }

/* Glyph sizing in chrome controls */
.dash-hamburger .ti { font-size: 1.1rem; }
.dash-nav-btn .ti { font-size: 1rem; flex-shrink: 0; }
.dash-tab-btn .ti { font-size: 1.15rem; }
.fin-search-box .ti { color: var(--moss-400); flex-shrink: 0; font-size: .85rem; }

/* -- Sidebar -- */
.dash-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--ground-900);
    border-right: 1px solid var(--fin-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0;
}

.dash-nav-section {
    padding: 0 .75rem;
    margin-bottom: 1.5rem;
}
.dash-nav-label {
    font-family: var(--mono);
    font-size: .58rem; font-weight: 700; letter-spacing: .1em;
    color: var(--fin-dimmed);
    padding: 0 .5rem .5rem;
    display: block;
}
.dash-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--fin-muted);
    font-size: .84rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
    position: relative;
    text-decoration: none;
}
.dash-nav-btn:hover { background: var(--ground-400); color: var(--fin-text); }
.dash-nav-btn.active {
    background: var(--surface-hover);
    color: var(--snow-100);
}
.dash-nav-btn.active::before {
    content: '';
    position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 2px;
    background: var(--ember-500);
    border-radius: 2px;
}
.dash-nav-badge {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .6rem; font-weight: 700;
    background: var(--surface-inset);
    color: var(--moss-200);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

/* Hidden by default and shown only in the drawer; the mobile block at the foot
   of this file is the other half. One sign-out on screen at any width - the top
   bar's above 767px, this one below - so the two are never both present and
   never both absent. */
.dash-nav-signout { display: none; }

.dash-sidebar-footer {
    margin-top: auto;
    padding: 1rem .75rem;
    border-top: 1px solid var(--fin-border);
    /* Makes the footer the query container the lockup below sizes against, so
       the mark and the wordmark scale with the rail rather than with the root
       font size. The rail is 220px today; nothing here has to be revisited if
       that changes. */
    container-type: inline-size;
}

/* The full lockup - the fox mark beside the serif wordmark - set to the width
   of the rail. Every length is in cqw so the two halves keep their proportions
   to each other and to the space they sit in. */
.dash-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5cqw;
    width: 100%;
    text-decoration: none;
    margin-bottom: .9rem;
}
.dash-sidebar-logo-img { width: 27cqw; height: auto; display: block; flex-shrink: 0; }
.dash-sidebar-logo-text { display: flex; flex-direction: column; line-height: 1; }
.dash-sidebar-logo-top {
    font-family: var(--font-voice);
    font-size: 15cqw; font-weight: 700;
    color: var(--snow-100);
    letter-spacing: -.01em;
}
.dash-sidebar-logo-bot {
    font-family: var(--font-mono);
    font-size: 5.2cqw; font-weight: 500;
    color: var(--rust-500);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: .35em;
}

/* Terms and Privacy. Stacked rather than inline: at this size a separator
   between two links on one line is most of the width they occupy. */
.dash-sidebar-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: .55rem;
}
.dash-sidebar-legal a {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--moss-400);
    text-decoration: none;
    line-height: 1.4;
}
.dash-sidebar-legal a:hover,
.dash-sidebar-legal a:focus-visible { color: var(--rust-500); text-decoration: underline; }

/* -- Main content area -- */
.dash-main {
    flex: 1;
    /* The paywall is absolutely positioned against this box. Without the
       containing block it would resolve against the viewport and sit over the
       sidebar as well, walling off the navigation to the page that sells the
       way out of it. */
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.75rem;
}

/* -- Page switching -- */
.dash-page { display: none; }
.dash-page.active { display: block; }

/* -- The paywall --
   Covers the main region only, so the sidebar, the account menu and the pages a
   customer needs in order to start paying stay reachable behind it. Positioned
   against .dash-main, which is why that rule carries position:relative - the
   wall must not scroll away from the panels it is covering. */
.paywall {
    display: none;
    position: absolute; inset: 0; z-index: 20;
    background: color-mix(in srgb, var(--fin-bg) 82%, transparent);
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 1.75rem;
}
.paywall.open { display: flex; }
.paywall-card {
    background: var(--fin-bg2); border: 1px solid var(--fin-border); border-radius: 10px;
    padding: 34px 30px; max-width: 440px; text-align: center;
}
.paywall-icon { font-size: 2rem; color: var(--ember-500); margin-bottom: 12px; }
.paywall-title { font-size: 1.05rem; font-weight: 700; color: var(--fin-text); margin-bottom: 8px; }
.paywall-text { font-size: .85rem; color: var(--fin-muted); margin-bottom: 20px; line-height: 1.55; }
.paywall-btn { min-width: 160px; }

/* -- Common page elements -- */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 1.5rem; gap: 1rem;
    flex-wrap: wrap;
}
.page-title-tag {
    font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-500); margin-bottom: .35rem;
}
.page-title {
    font-family: var(--font-voice);
    font-size: 1.5rem; font-weight: 600; color: var(--snow-100);
    letter-spacing: -.01em; line-height: 1.15;
    margin: 0;
}
.page-sub { font-size: .83rem; color: var(--fin-muted); margin-top: .2rem; }

/* -- KPI tiles -- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.kpi-tile {
    background: var(--fin-bg2);
    border: 1px solid var(--fin-border);
    border-radius: 7px;
    padding: 14px 16px;
}
.kpi-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; color: var(--fin-dimmed); margin-bottom: 6px; }
.kpi-val   { font-family: var(--mono); font-size: 1.45rem; font-weight: 700; color: var(--snow-100); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi-delta { font-family: var(--mono); font-size: .68rem; }
.kpi-delta.up   { color: var(--up); }
.kpi-delta.down { color: var(--down); }
.kpi-delta.flat { color: var(--fin-dimmed); }

/* -- Data table -- */
.fin-table-wrap {
    background: var(--fin-bg2);
    border: 1px solid var(--fin-border);
    border-radius: 8px;
    overflow: hidden;
}
.fin-table-toolbar {
    display: flex; align-items: center; gap: .75rem;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fin-border);
    flex-wrap: wrap;
}
.fin-table-title { font-size: .85rem; font-weight: 700; color: var(--fin-text); flex: 1; }
.fin-search-box {
    display: flex; align-items: center; gap: 6px;
    background: var(--fin-bg);
    border: 1px solid var(--fin-border);
    border-radius: 4px;
    padding: 5px 10px;
}
.fin-search-box input {
    background: none; border: none; outline: none;
    color: var(--fin-text); font-size: .8rem;
    width: 160px;
}
.fin-search-box input::placeholder { color: var(--fin-dimmed); }
.fin-search-box svg { color: var(--fin-dimmed); flex-shrink: 0; }
.fin-select-sm { background: var(--fin-bg3); border: 1px solid var(--fin-border); color: var(--fin-text); border-radius: 6px; padding: 4px 10px; font-size: .78rem; font-family: var(--mono); cursor: pointer; outline: none; }
.fin-select-sm:focus { border-color: var(--ember-500); box-shadow: var(--glow-ember); }

table.fin-table { width: 100%; border-collapse: collapse; }
table.fin-table thead th {
    font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    color: var(--fin-dimmed);
    padding: 10px 16px;
    border-bottom: 1px solid var(--fin-border);
    white-space: nowrap;
    text-align: left;
}
table.fin-table tbody tr {
    border-bottom: 1px solid var(--fin-border);
    transition: background .1s;
}
table.fin-table tbody tr:last-child { border-bottom: none; }
table.fin-table tbody tr:hover { background: rgba(237,232,223,.03); }
#tbl-portfolios tbody td { padding: 18px 16px; }
table.fin-table tbody td {
    padding: 11px 16px;
    font-size: .84rem;
    color: var(--fin-text);
    vertical-align: middle;
}
.td-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.td-muted { color: var(--fin-dimmed) !important; font-size: .78rem !important; }

/* Status badges */
.badge-fin {
    font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .05em;
    padding: 2px 8px; border-radius: 3px;
}
.badge-active   { background: var(--teal-tint);  color: var(--teal-500); }
.badge-inactive { background: var(--surface-inset); color: var(--moss-200); }
.badge-pending  { background: var(--ember-glow);  color: var(--ember-400); }
.badge-high     { background: var(--down-tint);   color: var(--down-500); }
.badge-med      { background: var(--ember-glow);  color: var(--ember-400); }
.badge-low      { background: var(--teal-tint);   color: var(--teal-500); }
.badge-yes      { background: var(--surface-inset);  color: var(--ember-500); }
.badge-no       { background: var(--surface-inset); color: var(--moss-200); }

/* Action buttons in table */
.btn-table {
    background: transparent;
    border: 1px solid var(--fin-border);
    color: var(--fin-muted);
    font-size: .75rem; border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.btn-table:hover { border-color: var(--moss-300); color: var(--snow-100); }

/* -- Chart mini sparkline -- */
.spark-svg { display: block; }

/* -- Forecast probability bar -- */
.prob-bar-wrap { display: flex; align-items: center; gap: 8px; }
.prob-bar { flex: 1; height: 4px; background: var(--ground-800); border-radius: 100px; overflow: hidden; }
.prob-fill-yes { height: 100%; background: var(--teal-500); border-radius: 100px; }
.prob-pct { font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--teal-500); min-width: 32px; text-align: right; }


/* -- Empty / utility -- */
.text-up   { color: var(--up)   !important; }
.text-down { color: var(--down) !important; }

/* -- Scrollbar styling -- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ground-200); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ground-200); }

/* -- Hamburger (desktop: hidden) -- */
.dash-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--fin-bg2);
    border: 1px solid var(--fin-border);
    border-radius: 5px;
    color: var(--fin-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.dash-hamburger:hover { border-color: var(--ground-200); color: var(--fin-text); }

/* -- Sidebar overlay (desktop: hidden) -- */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(8,10,6,.72);
    z-index: 190;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* -- Bottom tab bar (desktop: hidden) -- */
.dash-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 180;
    background: rgba(14,17,10,.97);
    border-top: 1px solid var(--fin-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dash-bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}
.dash-tab-btn {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    background: none; border: none;
    color: var(--fin-dimmed);
    font-size: .6rem; font-weight: 600;
    font-family: var(--mono); letter-spacing: .04em;
    cursor: pointer;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.dash-tab-btn.active { color: var(--ember-500); }
.dash-tab-btn svg { flex-shrink: 0; }

/* ==========================================
MOBILE BREAKPOINT  <= 767px
========================================== */
@media (max-width: 767px) {

    /* Prevent any horizontal overflow */
    body.dash { height: auto; min-height: 100svh; overflow-x: hidden; overflow-y: auto; max-width: 100%; }
    .dash-shell { min-height: calc(100svh - 52px); overflow: visible; max-width: 100%; }

    /* Sidebar becomes slide-in drawer */
    .dash-sidebar {
        position: fixed;
        left: 0; top: 52px;
        height: calc(100svh - 52px);
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4,0,.2,1);
        width: 260px;
    }
    body.sidebar-open .dash-sidebar    { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; }

    /* Main full width, add bottom padding for tab bar */
    .dash-main {
        overflow-x: hidden;
        overflow-y: visible;
        padding: 1rem .9rem 5.5rem;
        max-width: 100%;
    }

    /* All pages contained */
    .dash-page { max-width: 100%; overflow-x: hidden; }

    /* Topbar adjustments.

       The status WORDING goes and the button stays. On a narrow bar the
       greeting, a date and a button do not fit together, and of the three the
       button is the one that does something - a customer who can see
       "Subscribe Now" can work out why it is there, where a date with no way
       to act on it is only an alarm. With sign-out gone from the bar, the
       status takes over holding the right edge. */
    .dash-hamburger   { display: flex; }
    .dash-acct-text   { display: none; }
    .dash-welcome     { font-size: .8rem; }

    /* Sign-out leaves the bar and appears in the drawer instead. The two rules
       are one decision and have to move together: dropping the button here
       without the drawer item is what left a phone with no way to end a
       session at all. */
    .topbar-signout   { display: none !important; }
    .dash-nav-signout { display: flex; }

    /* Topbar itself must not overflow */
    .dash-topbar { max-width: 100vw; overflow: hidden; }

    /* Tables: horizontal scroll contained */
    .fin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .fin-table-wrap table.fin-table { min-width: 560px; }

    /* KPI: 2 columns */
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Page header: stack buttons below title */
    .page-header { flex-direction: column; }
    .page-header > div:last-child:not(:first-child) { display: flex; width: 100%; }
    .page-header > div:last-child:not(:first-child) .btn { flex: 1; font-size: .78rem !important; padding: 7px 10px !important; }
    .page-title { font-size: 1.2rem; }

    /* Search box full width */
    .fin-table-toolbar { flex-direction: column; align-items: stretch; }
    .fin-table-title   { margin-bottom: .25rem; }
    .fin-search-box    { width: 100%; }
    .fin-search-box input { width: 100%; }


    /* Detail header wraps */
    .fc-detail-header { flex-wrap: wrap; }
    .fc-detail-actions-desktop { display: none !important; }
    .fc-detail-actions-mobile  { display: block !important; }

    /* Daytrade day grid: 2 cols on mobile */
    .dt-days-grid { grid-template-columns: 1fr 1fr !important; }

    /* Rec grid: single column */
    .fc-rec-grid { grid-template-columns: 1fr !important; }

    /* AI forecast grid in daytrade detail: stack */
    .dtsd-ai-grid { grid-template-columns: 1fr !important; }

    /* Modal dialogs fit screen */
    .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem) !important; }
    .wl-modal-dialog { max-width: calc(100vw - 1rem) !important; }

    /* Show bottom nav */
    .dash-bottom-nav { display: block; }
}

/* ==========================================
CLIENT DETAIL PAGE
========================================== */

/* Back button */
.btn-back {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0;
    font-family: var(--mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .06em; color: var(--fin-dimmed);
    cursor: pointer; margin-bottom: .6rem;
    transition: color .15s;
}
.btn-back:hover { color: var(--ember-500); }


/* -- Modals -- */
.fin-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fin-border);
}
.fin-modal-title { font-size: .95rem; font-weight: 700; color: var(--snow-100); }
.fin-modal-close {
    width: 28px; height: 28px;
    background: var(--ground-800);
    border: none; border-radius: 4px;
    color: var(--fin-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.fin-modal-close:hover { background: var(--ground-200); color: var(--snow-100); }
.fin-modal-body { padding: 20px; }
.fin-modal-footer {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: 14px 20px;
    border-top: 1px solid var(--fin-border);
}

/* Watchlist modal */
.wl-modal-dialog { max-width: 520px; }
.wl-modal-dialog .modal-content {
    background: var(--fin-bg2);
    border: 1px solid var(--fin-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.wl-modal-dialog .fin-modal-header { padding: 18px 22px; }
.wl-modal-subtitle { font-size: .75rem; color: var(--fin-muted); margin-top: 2px; }
.pa-modal-tabs { display: flex; border-bottom: 1px solid var(--fin-border); padding: 0 20px; gap: 0; }
.pa-tab-btn { padding: 10px 16px; cursor: pointer; border: none; border-bottom: 2px solid transparent; background: none; color: var(--fin-muted); font-size: .82rem; white-space: nowrap; transition: color .15s; }
.pa-tab-btn:hover { color: var(--fin-text); }
.pa-tab-btn.active { border-bottom-color: var(--rust-500); color: var(--snow-100); font-weight: 600; }
.wl-step { padding: 16px 22px; }
.wl-step-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--fin-muted);
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.wl-optional-tag {
    font-size: .65rem; font-weight: 600; letter-spacing: .04em;
    background: var(--ground-800); color: var(--fin-muted);
    padding: 2px 7px; border-radius: 10px; margin-left: 4px;
    text-transform: uppercase;
}
.wl-select {
    flex: 1;
    background: var(--fin-bg);
    border: 1px solid var(--fin-border);
    border-radius: 5px;
    color: var(--fin-text);
    font-size: .82rem;
    padding: 7px 10px;
    outline: none;
    transition: border-color .15s;
}
.wl-select:focus { border-color: var(--ember-500); box-shadow: var(--glow-ember); }
.wl-divider { height: 1px; background: var(--fin-border); margin: 0 22px; }
.wl-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.wl-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--fin-muted); font-size: .8rem; pointer-events: none;
}
.wl-search-input {
    width: 100%;
    background: var(--fin-bg);
    border: 1px solid var(--fin-border);
    border-radius: 5px;
    color: var(--fin-text);
    font-size: .82rem;
    padding: 7px 10px 7px 30px;
    outline: none;
    transition: border-color .15s;
}
.wl-search-input:focus { border-color: var(--ember-500); box-shadow: var(--glow-ember); }
.wl-search-input::placeholder { color: var(--fin-dimmed); }
.wl-symbol-list {
    max-height: 180px; overflow-y: auto;
    border: 1px solid var(--fin-border);
    border-radius: 5px;
    background: var(--fin-bg);
}
.wl-symbol-list::-webkit-scrollbar { width: 4px; }
.wl-symbol-list::-webkit-scrollbar-track { background: transparent; }
.wl-symbol-list::-webkit-scrollbar-thumb { background: var(--fin-border); border-radius: 2px; }
.wl-symbol-placeholder {
    padding: 18px 14px; font-size: .78rem;
    color: var(--fin-dimmed); text-align: center;
}
.wl-symbol-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ground-400);
    transition: background .1s;
}
.wl-symbol-row:last-child { border-bottom: none; }
.wl-symbol-row:hover { background: var(--ground-400); }
.wl-symbol-row.selected { background: var(--surface-hover); border-left: 2px solid var(--ember-500); }
.wl-sym-ticker {
    font-size: .78rem; font-weight: 700; font-family: var(--font-mono);
    color: var(--snow-100); min-width: 60px;
}
.wl-sym-name { font-size: .78rem; color: var(--fin-muted); }
.wl-selected-sym-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-inset); border: 1px solid var(--ground-200);
    border-radius: 4px; padding: 4px 10px;
    font-size: .78rem; font-weight: 600; color: var(--snow-100);
    margin-bottom: 12px;
}
.wl-fields-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.wl-field-full { grid-column: 1 / -1; }
.wl-field-group { display: flex; flex-direction: column; gap: 4px; }
.wl-field-label { font-size: .7rem; font-weight: 600; color: var(--fin-muted); letter-spacing: .04em; text-transform: uppercase; }
.wl-input-wrap { position: relative; }
.wl-input-prefix {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    font-size: .8rem; color: var(--fin-muted); pointer-events: none;
}
.wl-field-input {
    width: 100%;
    background: var(--fin-bg);
    border: 1px solid var(--fin-border);
    border-radius: 5px;
    color: var(--fin-text);
    font-size: .82rem;
    padding: 7px 10px;
    outline: none;
    transition: border-color .15s;
}
.wl-input-wrap .wl-field-input { padding-left: 22px; }
.wl-field-input:focus { border-color: var(--ember-500); box-shadow: var(--glow-ember); }
.wl-field-input::placeholder { color: var(--fin-dimmed); }
.wl-field-input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.5); }


/* == FORECAST PAGE STYLES (scoped to #page-forecast) ==================== */
#page-forecast { color: var(--snow-200); }

#page-forecast .stock-up, #page-portfolios .stock-up, #page-daytrade .stock-up { color: var(--up); }
#page-forecast .stock-down, #page-portfolios .stock-down, #page-daytrade .stock-down { color: var(--down); }

/* Chart interval selector */
#page-forecast .chart-type { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#page-forecast .chart-type-option { padding: 4px 12px; background: var(--fin-bg3); border-radius: 20px; cursor: pointer; font-size: .78rem; color: var(--fin-muted); border: 1px solid var(--fin-border); transition: background .15s, color .15s; }
#page-forecast .chart-type-option:hover, #page-forecast .chart-type-option.active { background: var(--surface-hover); color: var(--snow-100); border-color: var(--moss-300); }

/* News */
#page-forecast .news-item, #page-recommendation .news-item, #page-daytrade .news-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--fin-border); }
#page-forecast .news-item:last-child, #page-recommendation .news-item:last-child, #page-daytrade .news-item:last-child { border-bottom: none; margin-bottom: 0; }
#page-forecast .news-score-wrap, #page-recommendation .news-score-wrap, #page-daytrade .news-score-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 48px; padding-top: 2px; }
#page-forecast .news-score, #page-recommendation .news-score, #page-daytrade .news-score { font-family: var(--mono); font-size: .85rem; font-weight: 700; line-height: 1; }
#page-forecast .news-score.pos, #page-recommendation .news-score.pos, #page-daytrade .news-score.pos { color: var(--up); }
#page-forecast .news-score.neg, #page-recommendation .news-score.neg, #page-daytrade .news-score.neg { color: var(--down); }
#page-forecast .news-score.neu, #page-recommendation .news-score.neu, #page-daytrade .news-score.neu { color: var(--fin-dimmed); }
#page-forecast .news-score-bar-track, #page-recommendation .news-score-bar-track, #page-daytrade .news-score-bar-track { width: 36px; height: 4px; background: var(--fin-bg3); border-radius: 2px; overflow: hidden; }
#page-forecast .news-score-bar-fill, #page-recommendation .news-score-bar-fill, #page-daytrade .news-score-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
#page-forecast .news-score-label, #page-recommendation .news-score-label, #page-daytrade .news-score-label { font-family: var(--mono); font-size: .52rem; letter-spacing: .05em; color: var(--fin-dimmed); text-transform: uppercase; }
#page-forecast .news-body, #page-recommendation .news-body, #page-daytrade .news-body { flex: 1; min-width: 0; }
#page-forecast .news-title, #page-recommendation .news-title, #page-daytrade .news-title { font-weight: 600; margin-bottom: 6px; font-size: .9rem; color: var(--fin-text); }
#page-forecast .news-summary, #page-recommendation .news-summary, #page-daytrade .news-summary { font-size: 13px; color: var(--fin-muted); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }
#page-forecast .news-item, #page-recommendation .news-item, #page-daytrade .news-item { cursor: pointer; }
#page-forecast .news-item:hover .news-title, #page-recommendation .news-item:hover .news-title, #page-daytrade .news-item:hover .news-title { color: var(--ember-500); }
#page-forecast .news-time, #page-recommendation .news-time, #page-daytrade .news-time { font-size: 11px; color: var(--fin-dimmed); }

/* Detail view metrics */
#page-forecast .metric-row, #page-daytrade .metric-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .85rem; }
#page-forecast .metric-name, #page-daytrade .metric-name { color: var(--fin-muted); }
#page-forecast .metric-data, #page-daytrade .metric-data { font-weight: 600; color: var(--fin-text); }
#page-forecast .positive { color: var(--up); }
#page-forecast .negative { color: var(--down); }
#page-forecast .red_font { color: var(--down); }

/* Modal styling for watchlist modal */
#watchlistModal .modal-content { background: var(--fin-bg2); border: 1px solid var(--fin-border); color: var(--fin-text); }
#watchlistModal .modal-header { border-bottom: 1px solid var(--fin-border); }
#watchlistModal .btn-close { filter: invert(1); }
#watchlistModal .form-control, #watchlistModal .form-select { background: var(--fin-bg); border-color: var(--fin-border); color: var(--fin-text); }
#watchlistModal .form-control::placeholder { color: var(--fin-dimmed); }
#watchlistModal .input-group-text { background: var(--fin-bg); border-color: var(--fin-border); color: var(--fin-muted); }
#watchlistModal label { color: var(--fin-muted); font-size: .85rem; }
#watchlistModal small { color: var(--fin-dimmed); }
#watchlistModal .custom-button { background: var(--rust-500); color: var(--snow-100); border: none; border-radius: var(--radius-sm); padding: 6px 14px; font-size: .85rem; cursor: pointer; }
#watchlistModal .custom-button:hover { background: var(--rust-400); }
#watchlistModal .add-btn { font-size: 1.4rem; background: none; border: none; cursor: pointer; color: var(--fin-text); }
#watchlistModal #client_symbol_list { border: 1px solid var(--fin-border); background: var(--fin-bg); color: var(--fin-text); border-radius: 4px; }


/* -- Forecast view switching ------------------------------------------- */
#page-forecast .fc-view { display: none; }
#page-forecast .fc-view.fc-view-active { display: block; }

/* -- Signal badges ----------------------------------------------------- */
.fc-signal-badge {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em;
}
.fc-signal-buy  { background: var(--teal-tint);  color: var(--teal-500); border: 1px solid rgba(59,212,192,.3); }
.fc-signal-sell { background: var(--down-tint);  color: var(--down-500); border: 1px solid rgba(213,83,62,.35); }
/* Hold is an absence of caution, not a caution: it wears moss, the brand's
   nothing-to-report colour, never warning ember. The chip always carries its
   word, so the muted colour never has to be told apart from clay on its own. */
.fc-signal-hold    { background: var(--surface-inset);  color: var(--moss-200); border: 1px solid var(--ground-300); }
.fc-signal-neutral { background: var(--surface-inset); color: var(--moss-200); border: 1px solid var(--ground-200); }

/* -- Sentiment bar ----------------------------------------------------- */
.fc-sentiment-wrap { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.fc-sentiment-bar  { flex: 1; height: 6px; background: var(--fin-bg3); border-radius: 3px; overflow: hidden; }
.fc-sentiment-fill { height: 6px; border-radius: 3px; background: var(--teal-500); }
.fc-sentiment-pct  { font-family: var(--mono); font-size: .72rem; color: var(--fin-text); flex-shrink: 0; }
.fc-sentiment-lbl  { font-size: .68rem; margin-top: 3px; }
.fc-sentiment-lbl.bullish { color: var(--up); }
.fc-sentiment-lbl.bearish { color: var(--down); }
.fc-sentiment-lbl.neutral { color: var(--fin-muted); }

/* -- Detail view layout ------------------------------------------------ */
.fc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.fc-ar-summary-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .07em; color: var(--fin-dimmed); text-transform: uppercase; margin-bottom: 6px; }
.fc-ar-summary-text { font-size: .87rem; color: var(--fin-muted); line-height: 1.75; margin: 0 0 10px; }
.fc-ar-keypoints { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fc-ar-keypoints li { font-size: .83rem; color: var(--fin-muted); line-height: 1.6; padding-left: 14px; position: relative; }
.fc-ar-keypoints li::before { content: '\25B8'; position: absolute; left: 0; color: var(--ember-500); font-size: .7rem; top: 2px; }
.fc-annual-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 16px; }
.fc-annual-item { background: var(--fin-bg3); border-radius: 6px; padding: 12px; }
.fc-annual-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: var(--fin-dimmed); margin-bottom: 4px; }
.fc-annual-value { font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--fin-text); }
.fc-analysis-text { font-size: .87rem; color: var(--fin-muted); line-height: 1.78; padding: 16px 16px 8px; margin: 0; }
.rsd-reason-text  { font-size: .9rem; color: var(--fin-muted); line-height: 1.75; padding: 14px 16px; margin: 0; border-left: 3px solid var(--ember-500); }

.fc-rec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 0 16px 16px; }
.fc-rec-card { border-radius: 7px; padding: 16px; border: 1px solid var(--fin-border); }
/* Terms are categorical, not ordered by value, and the brand has no
   categorical palette by design - so the horizon cards are one neutral
   treatment, told apart by their labels. The signal word inside each card is
   what carries a status colour, not the horizon around it. */
.fc-rec-card.short,
.fc-rec-card.mid,
.fc-rec-card.long { background: var(--surface-inset); border-color: var(--ground-300); }
.fc-rec-label { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .07em; margin-bottom: 6px; }
.fc-rec-label.short,
.fc-rec-label.mid,
.fc-rec-label.long  { color: var(--moss-400); }
.fc-rec-signal { font-family: var(--mono); font-size: .88rem; font-weight: 700; margin-bottom: 8px; color: var(--fin-text); }
.fc-rec-text { font-size: .82rem; color: var(--fin-muted); line-height: 1.6; }
@media (max-width: 768px) { .fc-rec-grid { grid-template-columns: 1fr; } }
/* -- Last Alerts -- */
.fc-alerts-grid { display: flex; flex-direction: column; gap: 10px; }
.fc-alerts-matrix-wrap { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.fc-alerts-term-col {  }
.fc-alerts-term-head { font-family: var(--mono); font-size: .63rem; font-weight: 700; letter-spacing: .08em; color: var(--fin-dimmed); text-transform: uppercase; padding: 0 2px 8px; border-bottom: 1px solid var(--fin-border); margin-bottom: 8px; }
.fc-alerts-term-head span { color: var(--fin-dimmed); opacity:.6; font-weight:400; display:block; font-size:.6rem; margin-top:1px; }
.fc-alert-card--sm { display: flex; flex-direction: column; gap: 5px; background: var(--fin-bg3); border: 1px solid var(--fin-border); border-radius: 7px; padding: 9px 10px; margin-bottom: 8px; }
.fc-alert-card--sm:last-child { margin-bottom: 0; }
.fc-alert-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.fc-alert-type-sm { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .05em; color: var(--fin-muted); text-transform: uppercase; }
.fc-alert-desc-sm { font-size: .72rem; color: var(--fin-text); line-height: 1.35; }
.fc-alert-meta-sm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-alert-price-sm { font-family: var(--mono); font-size: .75rem; font-weight: 600; color: var(--fin-text); }
.fc-alert-time-sm  { font-size: .68rem; color: var(--fin-dimmed); }
.fc-alert-badge-sm { font-family: var(--mono); font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.fc-alert-card { display: flex; align-items: flex-start; gap: 12px; background: var(--fin-bg3); border: 1px solid var(--fin-border); border-radius: 8px; padding: 12px 14px; }
.fc-alert-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.fc-alert-icon--boll { background: var(--surface-inset); color: var(--moss-300); }
.fc-alert-icon--pi   { background: var(--surface-inset); color: var(--moss-300); }
.fc-alert-icon--rsi  { background: var(--surface-inset); color: var(--moss-300); }
.fc-alert-body { flex: 1; min-width: 0; }
.fc-alert-type { font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .06em; color: var(--fin-dimmed); text-transform: uppercase; margin-bottom: 3px; }
.fc-alert-desc { font-size: .84rem; color: var(--fin-text); font-weight: 500; margin-bottom: 6px; }
.fc-alert-meta { display: flex; align-items: center; gap: 12px; }
.fc-alert-price { font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--fin-text); }
.fc-alert-time { font-size: .75rem; color: var(--fin-dimmed); }
.fc-alert-badge { flex-shrink: 0; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; align-self: center; white-space: nowrap; }
.fc-alert-badge.alert-warn  { background: var(--ember-glow);  color: var(--ember-500); }
.fc-alert-badge.alert-up    { background: var(--teal-tint);  color: var(--up); }
.fc-alert-badge.alert-down  { background: var(--down-tint);  color: var(--down); }
.fc-alert-badge.alert-info  { background: var(--surface-inset); color: var(--moss-200); }
/* -- Indicator Term Tabs -- */
.fc-ind-tabs { display: flex; gap: 2px; background: var(--fin-bg); border: 1px solid var(--fin-border); border-radius: 7px; padding: 3px; margin-bottom: 14px; }
.fc-ind-tab { flex: 1; background: none; border: none; color: var(--fin-muted); font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em; padding: 5px 4px; border-radius: 5px; cursor: pointer; transition: background .18s, color .18s; text-transform: uppercase; }
.fc-ind-tab.active { background: var(--fin-bg3); color: var(--fin-text); }
.fc-ind-panel { display: none; }
.fc-ind-panel.active { display: block; }
.fc-detail-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.fc-action-menu-item {
    display: flex; align-items: center; width: 100%;
    background: none; border: none; padding: 10px 16px;
    font-size: .83rem; color: var(--fin-text); text-align: left; cursor: pointer;
    transition: background .12s;
}
.fc-action-menu-item:hover { background: var(--ground-400); }
.fc-action-menu-danger { color: var(--down) !important; }
.fc-action-menu-danger:hover { background: var(--down-tint) !important; }

/* -- Recommendation page ------------------------------------------------ */
#page-recommendation .rec-view { display: none; }
#page-recommendation .rec-view.rec-view-active { display: flex; flex-direction: column; height: 100%; }

/* Horizontal risk groups */
.rec-hgroups-wrap { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 0 12px; }
.rec-hgroup { background: var(--fin-bg2); border: 1px solid var(--fin-border); border-radius: 10px; overflow: hidden; }
.rec-hgroup .fin-table-wrap { border: none; border-radius: 0; background: transparent; }
.rec-hgroup .fin-table { border-radius: 0; }
.rec-hgroup .fin-table thead th { background: var(--fin-bg2); }
.rec-hgroup-bar { height: 3px; flex-shrink: 0; }
.rec-hgroup-bar.low  { background: linear-gradient(90deg, rgba(59,212,192,.55), var(--teal-tint)); }
.rec-hgroup-bar.mid  { background: linear-gradient(90deg, rgba(232,163,61,.55), var(--ember-glow)); }
.rec-hgroup-bar.high { background: linear-gradient(90deg, rgba(213,83,62,.55), rgba(213,83,62,.2)); }
.rec-hgroup-label { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 7px 14px; border-bottom: 1px solid var(--fin-border); }
.rec-hgroup-label.low  { color: var(--up);    background: var(--teal-tint); }
.rec-hgroup-label.mid  { color: var(--ember-500);       background: var(--ember-glow); }
.rec-hgroup-label.high { color: var(--down);  background: var(--down-tint); }
/* Market tab bar */
.rec-market-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 0 0 14px; flex-shrink: 0; scrollbar-width: none; }
.rec-market-tabs::-webkit-scrollbar { display: none; }
.rec-market-tab { font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .06em; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--fin-border); background: var(--fin-bg2); color: var(--fin-muted); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.rec-market-tab:hover { border-color: var(--moss-300); color: var(--snow-100); background: var(--surface-hover); }
.rec-market-tab.active { background: var(--rust-500); border-color: var(--rust-500); color: var(--snow-100); }
.rec-market-tab:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.rec-risk-select { font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .06em; padding: 5px 28px 5px 14px; border-radius: 20px; border: 1px solid var(--fin-border); background: var(--fin-bg2); color: var(--fin-muted); cursor: pointer; white-space: nowrap; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238FA06E'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .15s, color .15s; margin-left: 6px; }
.rec-risk-select:hover { border-color: var(--moss-300); color: var(--snow-100); }
.rec-risk-select:focus { outline: none; border-color: var(--ember-500); }
.rec-market-label { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--fin-muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.rec-col-label {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: .62rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    border-radius: 6px; padding: 4px 8px;
}
.rec-col-label.low  { color: var(--up);            background: var(--teal-tint); }
.rec-col-label.mid  { color: var(--ember-500);               background: var(--ember-glow); }
.rec-col-label.high { color: var(--down);           background: var(--down-tint); }
.rec-row-label {
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-lr; transform: rotate(180deg);
    font-family: var(--mono); font-size: .58rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--fin-dimmed);
    border-radius: 6px; background: var(--fin-bg2); border: 1px solid var(--fin-border);
}
.rec-cell {
    background: var(--fin-bg2); border: 1px solid var(--fin-border);
    border-radius: 10px; overflow: hidden; cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    display: flex; flex-direction: column;
}
.rec-cell:hover { border-color: var(--ground-200); box-shadow: var(--shadow-md); }
.rec-cell-bar { height: 3px; flex-shrink: 0; }
.rec-cell-bar.low  { background: linear-gradient(90deg, rgba(59,212,192,.55), var(--teal-tint)); }
.rec-cell-bar.mid  { background: linear-gradient(90deg, rgba(232,163,61,.55), var(--ember-glow)); }
.rec-cell-bar.high { background: linear-gradient(90deg, rgba(213,83,62,.55), rgba(213,83,62,.2)); }
.rec-mini-list { flex: 1; overflow: hidden; }
.rec-mini-row {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 10px; border-bottom: 1px solid var(--fin-border);
    transition: background .12s;
}
.rec-mini-row:last-child { border-bottom: none; }
.rec-mini-sym { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--snow-100); width: 38px; flex-shrink: 0; }
.rec-mini-name { font-size: .7rem; color: var(--fin-muted); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rec-mini-price { font-family: var(--mono); font-size: .68rem; color: var(--fin-text); flex-shrink: 0; }
.rec-mini-chg { font-family: var(--mono); font-size: .62rem; flex-shrink: 0; width: 50px; text-align: right; }
.rec-mini-sig { font-family: var(--mono); font-size: .56rem; font-weight: 700; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
.rec-mini-sig.buy  { background: var(--teal-tint);  color: var(--up); }
.rec-mini-sig.hold { background: var(--surface-inset);  color: var(--moss-200); }
.rec-mini-sig.sell { background: var(--down-tint);  color: var(--down); }

/* Detail view (zoomed in) */
#rec-detail-view .fin-table-wrap { flex: 1; }

/* == DAYTRADE PAGE ====================================================== */
#page-daytrade .dt-view { display: none; }
#page-daytrade .dt-view.dt-view-active { display: flex; flex-direction: column; height: 100%; }
.dt-days-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 1100px) { .dt-days-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .dt-days-grid { grid-template-columns: 1fr 1fr; } }
.dt-day-card { background: var(--fin-bg2); border: 1px solid var(--fin-border); border-radius: 8px; cursor: pointer; overflow: hidden; transition: border-color .18s, box-shadow .18s; display: flex; flex-direction: column; }
.dt-day-card:hover { border-color: var(--ground-200); box-shadow: var(--shadow-md); }
.dt-day-card.dt-today { border-color: rgba(59,212,192,.35); }
.dt-day-bar { height: 3px; background: linear-gradient(90deg, rgba(232,163,61,.55), var(--surface-hover)); flex-shrink: 0; }
.dt-day-bar.dt-today-bar { background: linear-gradient(90deg, rgba(59,212,192,.55), var(--teal-tint)); }
.dt-day-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--fin-border); }
.dt-day-date { font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; color: var(--ember-500); text-transform: uppercase; }
.dt-day-date.dt-today-lbl { color: var(--up); }
.dt-day-weekday { font-size: .78rem; color: var(--fin-text); font-weight: 600; margin-top: 2px; }
.dt-day-count { font-size: .68rem; color: var(--fin-dimmed); margin-top: 1px; }
.dt-mini-list { flex: 1; overflow: hidden; }
.dt-mini-row { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-bottom: 1px solid var(--fin-border); transition: background .12s; }
.dt-mini-row:last-child { border-bottom: none; }
.dt-mini-sym  { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--snow-100); width: 38px; flex-shrink: 0; }
.dt-mini-name { font-size: .7rem; color: var(--fin-muted); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dt-mini-price { font-family: var(--mono); font-size: .68rem; color: var(--fin-text); flex-shrink: 0; }
.dt-mini-sig   { font-family: var(--mono); font-size: .56rem; font-weight: 700; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
.dt-mini-sig.buy  { background: var(--teal-tint); color: var(--up); }
.dt-mini-sig.hold { background: var(--surface-inset);  color: var(--moss-200); }
.dt-mini-sig.sell { background: var(--down-tint);  color: var(--down); }
#dt-day-view .fin-table-wrap { flex: 1; }
.dtsd-reason-text { font-size: .88rem; color: var(--fin-muted); line-height: 1.6; padding: 14px 16px; margin: 0; }
.dt-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.dt-ai-grid-single { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
.dt-ai-card { background: var(--fin-bg3); border: 1px solid var(--fin-border); border-radius: 8px; overflow: hidden; }
.dt-ai-card-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--fin-border); }
.dt-ai-card-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
/* The AI mark is ember - the eye of light is how the system marks AI insight.
   The horizon chips are deliberately uncoloured: five hues for five horizons
   is a rainbow that encodes nothing the label does not already say. */
.dt-ai-card-icon.ai         { background: var(--ember-glow);  color: var(--ember-500); }
.dt-ai-card-icon.rsd-term-short,
.dt-ai-card-icon.rsd-term-mid,
.dt-ai-card-icon.rsd-term-long,
.dt-ai-card-icon.rsd-term-daytrade,
.dt-ai-card-icon.rsd-term-extra-short { background: var(--surface-inset); border: 1px solid var(--ground-300); color: var(--moss-200); }
.dt-ai-card-name { font-size: .72rem; font-weight: 700; color: var(--fin-text); font-family: var(--mono); letter-spacing: .04em; }
.dt-ai-card-body { padding: 10px 14px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.dt-ai-metric { display: flex; flex-direction: column; gap: 2px; }
.dt-ai-metric-label { font-size: .6rem; font-weight: 600; letter-spacing: .06em; color: var(--fin-dimmed); text-transform: uppercase; }
.dt-ai-metric-value { font-size: .86rem; font-family: var(--mono); color: var(--fin-text); font-weight: 600; }
.dt-ai-metric-value.buy  { color: var(--up); }
.dt-ai-metric-value.sell { color: var(--down); }
.dt-ai-metric-value.profit { color: var(--ember-400); }
@media (max-width: 900px) {
    .rec-hgroup-label { font-size: .55rem; }
    .rec-mini-name, .rec-mini-price { display: none; }
}
#fc-detail-chart, #fc-tech-chart { min-height: 280px; }

@media (max-width: 768px) {
    .fc-2col { grid-template-columns: 1fr; }
    .fc-annual-grid { grid-template-columns: repeat(2,1fr); }
}

/* -- btn-xs utility ---------------------------------------------------- */
.btn-xs { font-size:.75rem !important; padding:4px 10px !important; }

/* -- Shared button base ------------------------------------------------ */
.fin-btn-ghost,
.fin-btn-primary {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 6px; font-size: .82rem; font-weight: 500;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    text-decoration: none; border: 1px solid transparent;
}
.fin-btn-ghost {
    background: var(--fin-bg2);
    border-color: var(--fin-border);
    color: var(--snow-100);
}
.fin-btn-ghost:hover {
    background: var(--surface-hover);
    border-color: var(--moss-300);
    color: var(--snow-100);
}
.fin-btn-primary {
    background: var(--rust-500);
    border-color: var(--rust-500);
    color: var(--snow-100);
}
.fin-btn-primary:hover {
    background: var(--rust-400);
    border-color: var(--rust-400);
    color: var(--snow-100);
}
.fin-btn-primary:active { transform: scale(.97); }
.fin-btn-danger {
    background: var(--down-tint);
    border: 1px solid rgba(213,83,62,.4);
    color: var(--down-500);
}
.fin-btn-danger:hover { background: rgba(213,83,62,.28); color: var(--down-500); }
.fc-purchased-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 600;
    font-family: var(--mono);
    background: var(--ground-800);
    border: 1px solid var(--fin-border);
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--fin-muted);
}

/* Portfolio sub-views */
.port-view { display: none; }
.port-view.port-view-active { display: block; }

/* Watchlist portfolio summary bar */
.wl-summary-bar {
    display: flex; gap: 24px; flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--fin-bg2);
    border: 1px solid var(--fin-border);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.wl-summary-item { display: flex; flex-direction: column; gap: 2px; }
.wl-summary-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fin-muted); }
.wl-summary-value { font-size: 1.05rem; font-weight: 700; font-family: var(--mono); color: var(--fin-text); }
.wl-summary-perf { font-size: 1.05rem; font-weight: 700; font-family: var(--mono); }
.wl-summary-perf.up   { color: var(--up,var(--teal-500)); }
.wl-summary-perf.down { color: var(--down,var(--down-500)); }


/* -- Payment page ----------------------------------------------------- */
.pay-trial-banner { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:8px; margin-bottom:1.5rem; font-size:.83rem; font-family:var(--mono); font-weight:600; letter-spacing:.03em; }
.pay-trial-banner.trial-active { background:var(--surface-hover); border:1px solid var(--ground-200); color:var(--ember-500); }
.pay-trial-banner.trial-expired { background:var(--down-tint); border:1px solid rgba(213,83,62,.35); color:var(--down-500); }
.pay-trial-banner.sub-active { background:var(--teal-tint); border:1px solid rgba(59,212,192,.3); color:var(--teal-500); }
.pay-trial-banner-icon { font-size:1.1rem; flex-shrink:0; }
.pay-trial-banner-days { margin-left:auto; font-size:.72rem; color:var(--fin-muted); white-space:nowrap; }
.pay-plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:1.5rem; }
@media (max-width:680px) { .pay-plan-grid { grid-template-columns:1fr; } }
.pay-plan-card { background:var(--fin-bg2); border:1px solid var(--fin-border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s; }
.pay-plan-card:hover { border-color:var(--ground-200); }
.pay-plan-card.pay-plan-featured { border-color:rgba(194,87,30,.5); }
.pay-plan-card-top { padding:22px 22px 0; }
.pay-plan-badge { display:inline-block; font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:20px; margin-bottom:10px; }
.pay-plan-badge.popular { background:var(--ember-glow); color:var(--moss-200); border:1px solid rgba(194,87,30,.35); }
.pay-plan-badge.save { background:var(--teal-tint); color:var(--teal-500); border:1px solid rgba(59,212,192,.3); }
.pay-plan-name { font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fin-muted); margin-bottom:6px; }
.pay-plan-price-wrap { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.pay-plan-price { font-size:2.2rem; font-weight:800; color:var(--fin-text); line-height:1; }
.pay-plan-price-period { font-size:.75rem; color:var(--fin-muted); font-family:var(--mono); }
.pay-plan-price-sub { font-size:.72rem; color:var(--fin-dimmed); margin-bottom:16px; font-family:var(--mono); }
.pay-plan-divider { border:none; border-top:1px solid var(--fin-border); margin:0 0 16px; }
.pay-plan-features { list-style:none; padding:0 22px; margin:0 0 20px; display:flex; flex-direction:column; gap:8px; }
.pay-plan-features li { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--fin-muted); }
.pay-plan-features li .ti-check { color:var(--moss-300); flex-shrink:0; font-size:.9rem; }
.pay-plan-card-footer { padding:0 22px 22px; margin-top:auto; }
.pay-plan-btn { display:block; width:100%; text-align:center; padding:10px 0; border-radius:6px; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:opacity .15s, background .15s; cursor:pointer; border:none; }
/* One rust action per view: the featured plan carries it, the other plan is
   an outline so two loud buttons never compete on the pricing panel. */
.pay-plan-btn.btn-primary-stripe { background:transparent; border:1px solid var(--rust-500); color:var(--rust-300); }
.pay-plan-btn.btn-primary-stripe:hover { background:var(--rust-500); color:var(--snow-100); opacity:1; }
.pay-plan-btn.btn-featured-stripe { background:var(--rust-500); color:var(--snow-100); }
.pay-plan-btn.btn-featured-stripe:hover { opacity:.85; }
.pay-active-wrap { display:none; }
.pay-active-card { background:var(--teal-tint); border:1px solid var(--teal-tint); border-radius:10px; padding:28px; display:flex; align-items:center; gap:20px; margin-bottom:1.5rem; }
/* The same card carries a subscription in trouble and one that has ended, which
   is why the tint is a modifier rather than baked in: a customer whose payment
   failed reads a teal "all is well" panel as saying the failure was handled. */
.pay-active-card.pay-active-warn { background:var(--down-tint); border-color:rgba(213,83,62,.35); }
.pay-active-card.pay-active-ended { background:var(--fin-bg2); border-color:var(--fin-border); }
.pay-active-icon { font-size:2.2rem; flex-shrink:0; }
.pay-active-title { font-size:1rem; font-weight:700; color:var(--teal-500); margin-bottom:4px; }
.pay-active-card.pay-active-warn .pay-active-title,
.pay-active-card.pay-active-warn .pay-active-icon { color:var(--down-500); }
.pay-active-card.pay-active-ended .pay-active-title,
.pay-active-card.pay-active-ended .pay-active-icon { color:var(--fin-muted); }
.pay-active-sub { font-size:.8rem; color:var(--fin-muted); font-family:var(--mono); }
.pay-activate-section { background:var(--fin-bg2); border:1px solid var(--fin-border); border-radius:10px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pay-activate-text { font-size:.82rem; color:var(--fin-muted); }
.pay-activate-text strong { color:var(--fin-text); display:block; margin-bottom:2px; font-size:.85rem; }

/* == 9. Responsive ========================================================= */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    .fin-brand-top { font-size: 1.1rem; }
    .auth-card { padding: 24px 16px; }
}