/* ============================================================
   TRADETURE DESIGN SYSTEM — Black / White / Gold / Gray
   /static/css/tradeturestyle.css

   Shared, centralized styling for Tradeture pages. Consolidates:
     - the settings + dashboard "command center" redesign
     - api settings (.apx-wrap)
     - get started / academy (.gs-*, .academy-hub)  [was getstarted.css]
     - exchange connection guides (.byapi-*)         [was instruction.css]

   ------------------------------------------------------------
   HOW TO RE-THEME THE WHOLE SITE
   ------------------------------------------------------------
   Everything below is driven from ONE palette block: "PART 1 —
   COLOR PALETTE" directly under this comment. Every component on
   every page (including the .gs-* / .byapi-* sections further
   down) reads its colors through these custom properties, so you
   can swap an entire look by editing values in ONE place.

   The palette is grouped into 4 buckets, per the site's current
   direction:
     1. BACKGROUND  -> --bg / --panel / --panel-2      (black)
     2. BORDERS/GRID -> --border / --border-hover / --bg-grid  (white)
     3. TEXT        -> --text / --muted / --muted-dim  (white / gray)
     4. HIGHLIGHTS  -> --accent / --accent-soft / --accent-dim / --accent-deep (gold)

   Status colors (--success / --danger / --warn) are semantic (win/
   loss/paused-style indicators), not decorative, so they're kept
   separate from the 4 buckets above -- change them if you want a
   different success/danger/warn hue, but they won't move when you
   retune the "look" bucket colors.

   Each palette color also has an "-rgb" twin (e.g. --accent-rgb)
   holding the same color as bare "r,g,b" numbers, so any rule that
   needs a translucent version of it can write
   rgba(var(--accent-rgb), 0.15) instead of a hardcoded value --
   change --accent-rgb once and every translucent tint made from it
   updates too.

   HOW TO USE ON A NEW PAGE:
   1. Link this file: <link rel="stylesheet" href="{{ url_for('static', filename='css/tradeturestyle.css') }}">
   2. Everything below "PART 2 -- GLOBAL, SAFE TO LOAD ANYWHERE"
      only activates on elements that opt in via a scope class
      (.cc-scope / .db-root / .apx-wrap / .gs-hero / .academy-hub /
      .byapi-wrap / .tt-scope) or a .tt-* component class, so
      linking this file will not clobber a page's existing
      unrelated styles.
   ============================================================ */

/* ============================================================
   PART 1 — COLOR PALETTE (edit this block to re-theme the site)
   ============================================================ */
:root{
    /* ---- 1. BACKGROUND (black) ---- */
    --bg:#020202;               /* page canvas */
    --panel:rgba(22,22,22,0.74);   /* card / panel fill, sits on --bg */
    --panel-2:rgba(32,32,32,0.82); /* nested / secondary panel fill, slightly lighter */

    /* ---- 2. BORDERS / GRID (white) ---- */
    --bg-grid:rgba(255,255,255,0.05);     /* faint dot/line grid painted on the page canvas */
    --border:rgba(255,255,255,0.16);      /* default card/input border */
    --border-hover:rgba(255,255,255,0.36);/* hovered / focused card border */
    --border-rgb:255,255,255;

    /* legacy names kept as aliases so existing markup (settings,
       dashboard, apisettings, etc.) keeps working unmodified */
    --panel-border:var(--border);
    --panel-border-hover:var(--border-hover);

    /* ---- 3. TEXT (white / gray) ---- */
    --text:#f2f2f0;      /* primary / important text */
    --muted:#8f8f8c;     /* secondary, non-important text */
    --muted-dim:#5c5c5a; /* tertiary / faintest text */

    /* ---- 4. HIGHLIGHTS (gold) — used for anything meant to draw the eye:
       links, active states, key numbers/variables, buttons, glows ---- */
    --accent:#FFC400;
    --accent-soft:#FFDD55;
    --accent-dim:#8a6d0f;
    --accent-deep:#C9A227;
    --accent-rgb:255,196,20;
    --accent-soft-rgb:255,221,85;
    --glow:rgba(255,196,20,0.45);
    --ink:#120c02; /* dark text placed on top of bright gold buttons/pills */

    /* ---- Status colors (semantic, not part of the 4 look-buckets) ---- */
    --success:#2be6a8;
    --danger:#ff5f7e;
    --warn:#ff9f43;
    --success-rgb:43,230,168;
    --danger-rgb:255,95,126;
    --warn-rgb:255,159,67;

    --radius:14px;
}

/* ============================================================
   PART 2 — GLOBAL, SAFE TO LOAD ANYWHERE
   ============================================================ */

/* ---------- full-bleed command-center backdrop ----------
   Painted directly on html/body (not an overlay element) so the
   grid + glow backdrop sits behind ALL page content -- navbar,
   page sections, and footer -- with no z-index/stacking tricks
   and no visible "boxed" edge. */
html{ background-color:var(--bg); }
body{
    background-color:var(--bg) !important;
    background-image:
        linear-gradient(var(--bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
        radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb),0.07), transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(var(--accent-rgb),0.05), transparent 40%) !important;
    background-size:42px 42px, 42px 42px, auto, auto !important;
    background-attachment:fixed, fixed, fixed, fixed !important;
    background-repeat:repeat, repeat, no-repeat, no-repeat !important;
}

/* ---------- shared keyframes ---------- */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}
/* pulses using the element's own `color` (currentColor), so the same
   keyframe self-adapts whether it's animating a gold, green, or red dot */
@keyframes pulseDot{
    0%,100%{ box-shadow:0 0 0 0 currentColor; }
    70%{ box-shadow:0 0 0 8px transparent; }
}
@keyframes softGlow{
    0%,100%{ text-shadow:0 0 6px var(--glow); }
    50%{ text-shadow:0 0 16px var(--glow); }
}
@keyframes scan{
    0%,100%{ transform:translateY(0); opacity:0.15; }
    50%{ transform:translateY(140px); opacity:0.5; }
}
@keyframes pulseWarn{
    0%,100%{ opacity:1; }
    50%{ opacity:.55; }
}
@keyframes pulseBtn{
    0%,100%{ box-shadow:0 10px 30px -8px var(--glow); }
    50%{ box-shadow:0 10px 42px -4px var(--glow); }
}

/* ---------- opt-in box-sizing reset ----------
   Scoped to known component roots so this file stays safe to link
   on ANY page without silently changing box-sizing site-wide. Add
   your page's wrapper class here (or just use .tt-scope) to opt in. */
.cc-scope, .cc-scope *, .cc-scope *::before, .cc-scope *::after,
.db-root, .db-root *, .db-root *::before, .db-root *::after,
.apx-wrap, .apx-wrap *, .apx-wrap *::before, .apx-wrap *::after,
.gs-hero, .gs-hero *, .gs-hero *::before, .gs-hero *::after,
.academy-hub, .academy-hub *, .academy-hub *::before, .academy-hub *::after,
.byapi-wrap, .byapi-wrap *, .byapi-wrap *::before, .byapi-wrap *::after,
.tt-scope, .tt-scope *, .tt-scope *::before, .tt-scope *::after{
    box-sizing:border-box;
}

/* ---------- global Bootstrap alert re-theme ----------
   Applies wherever Bootstrap's .alert / .alert-{category} classes
   are used (flash messages, notices) so system messages match the
   theme on every page, even ones without a scope class. Base style
   is neutral (white border); category classes carry their own
   semantic color. */
.alert{
    background:rgba(20,20,20,0.85) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
    border-radius:10px !important;
    backdrop-filter:blur(6px);
}
.alert-success{ border-color:rgba(var(--success-rgb),0.45) !important; }
.alert-danger{ border-color:rgba(var(--danger-rgb),0.45) !important; }
.alert-warning{ border-color:rgba(var(--warn-rgb),0.45) !important; }
.alert-info{ border-color:rgba(var(--accent-rgb),0.45) !important; }

/* ---------- range slider accent, scoped to .tt-scope pages ----------
   Any <input type="range"> inside a .tt-scope wrapper picks up the
   shared gold accent automatically -- no class needed on the input
   itself. Scoped (not a bare `input[type=range]`) so this file stays
   safe to load on pages with sliders it doesn't own. */
.tt-scope input[type=range]{
    width:100%;
    accent-color:var(--accent);
    height:4px;
}

/* ============================================================
   PART 3 — OPT-IN REUSABLE PRIMITIVES (.tt-*)
   Link this file and use these classes directly in any new page's
   markup -- they will not affect anything unless applied.
   ============================================================ */

.tt-scope{
    position:relative;
    color:var(--text);
    font-family:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;
}

.tt-eyebrow{
    letter-spacing:.28em;
    font-size:11px;
    color:var(--accent-dim);
    text-transform:uppercase;
    margin:0 0 6px;
}

.tt-glow-text{
    color:var(--accent-soft);
    animation:softGlow 4s ease-in-out infinite;
}

.tt-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
    backdrop-filter:blur(6px);
    transition:border-color .25s ease, box-shadow .25s ease;
}
.tt-card:hover{ border-color:var(--border-hover); box-shadow:0 0 26px -12px var(--glow); }

.tt-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, var(--accent-dim), var(--accent));
    color:var(--ink);
    border:none;
    padding:10px 18px;
    border-radius:9px;
    font-weight:600;
    font-size:.85rem;
    cursor:pointer;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tt-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 22px -6px var(--glow); filter:brightness(1.08); color:var(--ink); }
.tt-btn:active{ transform:translateY(0); }

.tt-btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    padding:10px 18px;
    border-radius:9px;
    font-size:.85rem;
    text-decoration:none;
    transition:all .2s ease;
}
.tt-btn-ghost:hover{ border-color:var(--accent); color:var(--accent-soft); box-shadow:0 0 16px -8px var(--glow); }

.tt-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 10px;
    border-radius:999px;
    font-size:.7rem;
    letter-spacing:.08em;
    font-family:monospace;
    background:rgba(var(--accent-rgb),0.1);
    color:var(--accent-soft);
    border:1px solid rgba(var(--accent-rgb),0.3);
}
.tt-badge--success{ background:rgba(var(--success-rgb),0.15); color:var(--success); border-color:rgba(var(--success-rgb),0.35); }
.tt-badge--danger{ background:rgba(var(--danger-rgb),0.15); color:var(--danger); border-color:rgba(var(--danger-rgb),0.35); }
.tt-badge--warn{ background:rgba(var(--warn-rgb),0.15); color:var(--warn); border-color:rgba(var(--warn-rgb),0.35); }

.tt-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--panel);
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
}

.tt-input{
    width:100%;
    background:rgba(0,0,0,0.35);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
    padding:10px 12px;
    font-size:.92rem;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.tt-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15), 0 0 18px -6px var(--glow);
}

/* ---------- form helpers ----------
   .tt-label pairs with .tt-input for pages without Bootstrap's
   .form-group/label (e.g. pages extending base.html). .tt-form-row is a
   simple 2-up responsive grid for side-by-side fields. */
.tt-label{
    display:block;
    font-family:monospace;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
}
.tt-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
@media (max-width:768px){
    .tt-form-row{ grid-template-columns:1fr; }
}

/* ---------- alerts / flash messages (non-Bootstrap pages) ----------
   Mirrors .db-flash's look for pages that don't load Bootstrap's .alert
   (e.g. pages extending base.html instead of base3.html/base4.html). */
.tt-alert{
    padding:12px 18px;
    border-radius:8px;
    font-size:.85rem;
    letter-spacing:.02em;
    border-left:3px solid var(--accent);
    background:rgba(var(--accent-rgb),0.06);
    color:var(--accent-soft);
}
.tt-alert--error,
.tt-alert--danger{ border-left-color:var(--danger); background:rgba(var(--danger-rgb),0.06); color:var(--danger); }
.tt-alert--success{ border-left-color:var(--success); background:rgba(var(--success-rgb),0.06); color:var(--success); }
.tt-alert--warning{ border-left-color:var(--warn); background:rgba(var(--warn-rgb),0.06); color:var(--warn); }

/* ---------- callout note (left-accent info box) ---------- */
.tt-note{
    padding:.75rem 1rem;
    border-left:3px solid var(--accent);
    background:var(--panel-2);
    color:var(--muted);
    font-style:italic;
    border-radius:0 8px 8px 0;
    font-size:.88rem;
    line-height:1.6;
}
.tt-note strong{ color:var(--accent-soft); font-style:normal; }

/* ---------- rule / spec list (bordered rows, e.g. strategy key-rules) ---------- */
.tt-list{
    list-style:none;
    padding:0;
    margin:0;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.tt-list-item{
    padding:.75rem 1rem;
    border-bottom:1px solid var(--border);
    font-size:.9rem;
    line-height:1.6;
    color:var(--muted);
    background:var(--panel);
    transition:background .15s ease;
}
.tt-list-item:last-child{ border-bottom:none; }
.tt-list-item:hover{ background:rgba(var(--accent-rgb),0.04); }
.tt-list-item strong{ color:var(--accent-soft); }

/* ---------- centered image wrapper ---------- */
.tt-img-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:.75rem;
}
.tt-img-wrap img{
    max-width:100%;
    height:auto;
    border-radius:8px;
    opacity:0.85;
}

/* ---------- description text inside a .tt-card ---------- */
.tt-card .description{
    font-size:1.05rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:.5rem;
}

/* ---------- plain prose defaults inside a .tt-card ----------
   For cards that are just a heading + a few paragraphs/a list (FAQ-style
   explainer panels, calculator instructions, etc.) rather than the
   dashboard-style .description block above. */
.tt-card h2{ font-size:1.05rem; margin:0 0 16px; color:var(--text); font-weight:700; }
.tt-card h3{ font-size:.95rem; margin:0 0 10px; color:var(--accent-soft); font-weight:600; }
.tt-card p{ margin:0 0 10px; font-size:.92rem; color:var(--text); line-height:1.6; }
.tt-card p:last-child{ margin-bottom:0; }
.tt-card ul{ margin:0 0 0 1.1rem; padding:0; font-size:.92rem; color:var(--text); }
.tt-card ul li{ margin-bottom:8px; }
.tt-card ul li:last-child{ margin-bottom:0; }
.tt-card ul li b, .tt-card ul li strong{ color:var(--accent-soft); }

/* ---------- small muted helper text ---------- */
.tt-hint{ color:var(--muted); font-size:.8rem; }

/* ---------- centered legal/disclaimer footnote ---------- */
.tt-disclaimer{
    font-size:.78rem;
    color:var(--muted);
    text-align:center;
    margin-top:8px;
}

/* ---------- responsive N-up grid helpers ---------- */
.tt-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tt-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){
    .tt-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
    .tt-grid-2,
    .tt-grid-3{ grid-template-columns:1fr; }
}

/* ---------- featured / highlighted card variant ----------
   Opt in with class="tt-card tt-card--featured" to lift one card out of a
   row (e.g. the recommended pricing tier) with a gold border + glow and a
   "MOST POPULAR" ribbon, no extra markup required. */
.tt-card--featured{
    border-color:rgba(var(--accent-rgb),0.55);
    box-shadow:0 0 32px -10px var(--glow);
    position:relative;
}
.tt-card--featured::before{
    content:'MOST POPULAR';
    position:absolute;
    top:-11px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg, var(--accent-dim), var(--accent));
    color:var(--ink);
    font-family:monospace;
    font-size:.65rem;
    letter-spacing:.1em;
    font-weight:700;
    padding:3px 12px;
    border-radius:999px;
    white-space:nowrap;
}

/* ---------- big numeric price display ---------- */
.tt-price-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:1.9rem;
    font-weight:600;
    color:var(--accent-soft);
    line-height:1.2;
    margin:.5rem 0;
}
.tt-price-tag span{
    font-family:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;
    font-size:.7rem;
    font-weight:400;
    color:var(--muted);
    letter-spacing:.04em;
    margin-left:6px;
}

/* ---------- long-form legal / prose content ----------
   Opt in with class="tt-legal" on the wrapping element (e.g. inside a
   .tt-card) to theme plain Terms of Service / Privacy Policy style pages. */
.tt-legal-updated{
    color:var(--muted);
    font-size:.8rem;
    margin-bottom:22px;
}
.tt-legal h2{
    color:var(--accent-soft);
    font-weight:700;
    letter-spacing:.01em;
    margin:0 0 18px;
}
.tt-legal h3{
    color:var(--accent);
    font-size:1.05rem;
    font-weight:600;
    margin:30px 0 12px;
    padding-top:16px;
    border-top:1px solid var(--border);
}
.tt-legal h3:first-of-type{ border-top:none; padding-top:0; margin-top:22px; }
.tt-legal p{
    color:var(--text);
    line-height:1.75;
    font-size:.92rem;
    opacity:.92;
}
.tt-legal strong{ color:var(--accent-soft); font-weight:600; }
.tt-legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.tt-legal a:hover{ color:var(--accent-soft); }

/* ============================================================
   PART 4 — GET STARTED / ACADEMY  (.gs-*, .academy-hub)
   Consolidated from getstarted.css. Local --gs-* variables now
   alias the shared palette above instead of holding their own
   independent colors, so this section re-themes automatically
   with everything else. Class names and layout rules are
   otherwise unchanged from the original stylesheet.
   ============================================================ */

html{ scroll-behavior:smooth; }

.gs-hero,
.academy-hub{
    --gs-bg:var(--bg);
    --gs-surface:var(--panel);
    --gs-surface-alt:var(--panel-2);
    --gs-border:var(--border);
    --gs-border-strong:var(--border-hover);

    --gs-text:var(--text);
    --gs-text-muted:var(--muted);
    --gs-text-faint:var(--muted-dim);

    --gs-teal:var(--accent);
    --gs-teal-dim:rgba(var(--accent-rgb),0.12);
    --gs-teal-border:rgba(var(--accent-rgb),0.35);

    --gs-gold:var(--accent);
    --gs-gold-soft:var(--accent-soft);
    --gs-gold-dim:rgba(var(--accent-rgb),0.14);
    --gs-gold-border:rgba(var(--accent-rgb),0.4);

    --gs-violet:var(--accent-soft);
    --gs-violet-dim:rgba(var(--accent-soft-rgb),0.14);

    --gs-red:var(--danger);
    --gs-red-dim:rgba(var(--danger-rgb),0.1);

    --gs-radius-lg:20px;
    --gs-radius-md:14px;
    --gs-radius-sm:10px;

    --gs-shadow:0 24px 60px -30px rgba(0,0,0,0.65);
    --gs-font-head:'Poppins','Segoe UI',sans-serif;
    --gs-font-body:'Roboto','Segoe UI',sans-serif;
}

/* ---------- Base page treatment ---------- */

.gs-hero,
.academy-hub{
    position:relative;
    font-family:var(--gs-font-body);
    color:var(--gs-text);
    background-color:var(--gs-bg);
}

/* soft gradient mesh + fine dot-grid, applied once behind the whole flow */
.gs-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(700px 420px at 12% -10%, rgba(var(--accent-rgb),0.12), transparent 65%),
        radial-gradient(600px 380px at 88% 10%, rgba(var(--accent-soft-rgb),0.09), transparent 60%),
        radial-gradient(circle, rgba(var(--border-rgb),0.05) 1px, transparent 1px);
    background-size:auto, auto, 26px 26px;
}

.academy-hub::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:radial-gradient(circle, rgba(var(--border-rgb),0.035) 1px, transparent 1px);
    background-size:26px 26px;
}

.academy-hub--overview::after,
.academy-hub--security::after,
.academy-hub--action::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

.academy-hub--overview::after{
    background:radial-gradient(900px 500px at 100% 0%, rgba(var(--accent-rgb),0.06), transparent 60%);
}

.academy-hub--security{
    background-color:#050505;
}

.academy-hub--security::after{
    background:radial-gradient(900px 480px at 0% 20%, rgba(var(--accent-rgb),0.07), transparent 62%);
}

.academy-hub--action{
    background-color:#070502;
}

.academy-hub--action::after{
    background:radial-gradient(1000px 520px at 50% 0%, rgba(var(--accent-rgb),0.08), transparent 65%);
}

.academy-hub--next{
    background-color:var(--gs-bg);
}

.academy-hub:last-of-type{
    border-bottom:none;
}

.gs-hero > *,
.academy-hub > *{
    position:relative;
    z-index:1;
}

/* ---------- Hero ---------- */

.gs-hero{
    padding:40px 24px;
    overflow:hidden;
}

.gs-hero__inner{
    margin:0 auto;
}

.gs-hero__eyebrow{
    font-family:var(--gs-font-head);
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gs-teal);
    margin:0 0 18px;
}

.gs-hero__title{
    font-family:var(--gs-font-head);
    font-weight:800;
    font-size:clamp(2.1rem, 5vw, 3.4rem);
    line-height:1.18;
    letter-spacing:-0.015em;
    color:var(--gs-text);
    margin:0 0 22px;
    background:linear-gradient(135deg, #ffffff 40%, var(--gs-teal) 120%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.gs-hero__subtitle{
    font-size:1.08rem;
    line-height:1.7;
    color:var(--gs-text-muted);
    margin:0 auto 32px;
}

.gs-hero__trust{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-bottom:56px;
}

.gs-hero__trust span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    font-weight:500;
    color:var(--gs-text);
    background:var(--gs-surface-alt);
    border:1px solid var(--gs-border-strong);
    padding:9px 16px;
    border-radius:999px;
}

.gs-hero__trust i{
    color:var(--gs-teal);
}

/* Section stepper */

.gs-stepper{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    margin:0 auto;
    padding-bottom:22px;
}

.gs-stepper__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--gs-font-head);
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--gs-text-muted);
    text-decoration:none;
    padding:8px 14px;
    border-radius:999px;
    transition:color 0.15s ease, background 0.15s ease;
}

.gs-stepper__link span{
    color:var(--gs-teal);
    font-weight:700;
}

.gs-stepper__link:hover{
    color:var(--gs-text);
    background:var(--gs-teal-dim);
}

/* ---------- Section shell ---------- */

.academy-hub{
    padding:88px 24px;
    scroll-margin-top:32px;
}

.gs-section__inner{
    max-width:980px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:52px;
}

/* ---------- Eyebrow / heading block ---------- */

.eyebrow{
    font-family:var(--gs-font-head);
    font-size:0.76rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gs-teal);
    margin:0 0 12px;
}

.academy-hub--action .eyebrow{
    color:var(--gs-gold-soft);
}

.gs-block__title{
    font-family:var(--gs-font-head);
    font-size:clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight:700;
    line-height:1.28;
    color:var(--gs-text);
    margin:0 0 22px;
    letter-spacing:-0.01em;
}

.gs-block__body{
    font-size:1.03rem;
    line-height:1.8;
    color:var(--gs-text-muted);
    margin:0 0 20px;
}

.gs-block__body:last-child{ margin-bottom:0; }

.gs-block__body strong{
    color:var(--gs-text);
    font-weight:600;
}

/* ---------- Diagrams ---------- */

.gs-diagram{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.gs-diagram__title{
    font-family:var(--gs-font-head);
    font-size:1.12rem;
    font-weight:700;
    color:var(--gs-teal);
    margin:0;
}

.gs-diagram__img-wrap{
    position:relative;
    border-radius:var(--gs-radius-lg);
    overflow:hidden;
    border:1px solid var(--gs-border);
    background:var(--gs-surface);
    box-shadow:var(--gs-shadow);
}

.gs-diagram__img{
    display:block;
    width:100%;
    height:auto;
}

.gs-diagram__overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(2,2,2,0) 55%, rgba(2,2,2,0.65) 100%);
}

.gs-diagram__label{
    position:absolute;
    left:16px;
    bottom:14px;
    font-family:var(--gs-font-head);
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gs-teal);
    background:rgba(2,2,2,0.7);
    border:1px solid var(--gs-teal-border);
    padding:6px 10px;
    border-radius:999px;
}

/* ---------- Comparison strip (Manual vs Tradeture) ---------- */

.gs-compare{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    text-align:center;
    gap:0;
}

.gs-compare__side{
    padding:20px 22px;
    border:1px solid var(--gs-border);
    display:flex;
    flex-direction:column;
    gap:8px;
    justify-content:center;
}

.gs-compare__side--manual{
    border-radius:var(--gs-radius-sm) 0 0 var(--gs-radius-sm);
    background:var(--gs-red-dim);
    border-right:none;
}

.gs-compare__side--tradeture{
    border-radius:0 var(--gs-radius-sm) var(--gs-radius-sm) 0;
    background:var(--gs-teal-dim);
    border-left:none;
    box-shadow:inset 0 0 0 1px var(--gs-teal-border);
}

.gs-compare__label{
    font-family:var(--gs-font-head);
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gs-text-faint);
}

.gs-compare__side--tradeture .gs-compare__label{
    color:var(--gs-teal);
}

.gs-compare__side p{
    margin:0;
    font-size:0.95rem;
    line-height:1.6;
    color:var(--gs-text-muted);
}

.gs-compare__side--tradeture p{
    color:var(--gs-text);
}

.gs-compare__vs{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    font-family:var(--gs-font-head);
    font-size:0.72rem;
    font-weight:800;
    color:var(--gs-bg);
    background:var(--gs-gold);
    z-index:1;
}

/* ---------- Benefit grid (workflow diagram caption) ---------- */

.gs-benefit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.gs-benefit-card{
    background:var(--gs-surface);
    border:1px solid var(--gs-border);
    border-radius:var(--gs-radius-md);
    padding:22px 22px 24px;
    transition:border-color 0.15s ease, transform 0.15s ease;
}

.gs-benefit-card:hover{
    border-color:var(--gs-teal-border);
    transform:translateY(-2px);
}

.gs-benefit-card i{
    font-size:1.2rem;
    color:var(--gs-teal);
    margin-bottom:12px;
    display:block;
}

.gs-benefit-card h4{
    font-family:var(--gs-font-head);
    font-size:0.98rem;
    font-weight:700;
    color:var(--gs-text);
    margin:0 0 8px;
}

.gs-benefit-card p{
    font-size:0.9rem;
    line-height:1.6;
    color:var(--gs-text-muted);
    margin:0;
}

/* ---------- Verdict callout ---------- */

.gs-verdict{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:var(--gs-teal-dim);
    border:1px solid var(--gs-teal-border);
    border-radius:var(--gs-radius-md);
    padding:20px 24px;
}

.gs-verdict__icon{
    color:var(--gs-teal);
    font-size:1.1rem;
    margin-top:3px;
}

.gs-verdict p{
    margin:0;
    font-size:0.98rem;
    line-height:1.7;
    color:var(--gs-text);
}

.gs-verdict strong{
    color:var(--gs-teal);
}

/* ---------- Step-by-step setup ---------- */

.gs-steps{
    display:flex;
    flex-direction:column;
    gap:0;
}

.gs-step{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:28px;
    padding-bottom:40px;
}

.gs-step:last-child{ padding-bottom:0; }

.gs-step__aside{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.gs-step__num{
    font-family:var(--gs-font-head);
    font-size:1.05rem;
    font-weight:800;
    color:var(--gs-bg);
    background:var(--gs-gold);
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:0 0 0 6px rgba(var(--accent-rgb),0.08);
}

.gs-step__line{
    flex:1;
    width:2px;
    margin-top:10px;
    background:linear-gradient(180deg, var(--gs-gold-border), transparent);
}

.gs-step__content{
    padding-top:6px;
    background:var(--gs-surface);
    border:1px solid var(--gs-border);
    border-radius:var(--gs-radius-md);
    padding:22px 24px 24px;
}

.gs-step__title{
    font-family:var(--gs-font-head);
    font-size:1.22rem;
    font-weight:700;
    color:var(--gs-text);
    margin:0 0 10px;
}

.gs-step__body{
    font-size:0.98rem;
    line-height:1.7;
    color:var(--gs-text-muted);
    margin:0 0 18px;
}

.gs-step__note{
    font-size:0.9rem;
    line-height:1.6;
    color:var(--gs-gold-soft);
    background:var(--gs-gold-dim);
    border-left:3px solid var(--gs-gold);
    padding:12px 16px;
    border-radius:var(--gs-radius-sm);
    margin:0 0 16px;
}

.gs-step__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.gs-link-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--gs-font-head);
    font-size:0.87rem;
    font-weight:600;
    color:var(--gs-text);
    background:rgba(var(--border-rgb),0.04);
    border:1px solid var(--gs-border-strong);
    padding:11px 18px;
    border-radius:999px;
    text-decoration:none;
    transition:border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.gs-link-btn:hover{
    border-color:var(--gs-teal-border);
    background:var(--gs-teal-dim);
    transform:translateY(-1px);
    color:var(--gs-text);
}

.gs-link-btn i{
    color:var(--gs-teal);
    font-size:0.95rem;
}

.gs-link-btn--gold{
    background:var(--gs-gold);
    border-color:var(--gs-gold);
    color:var(--ink);
}

.gs-link-btn--gold i{
    color:var(--ink);
}

.gs-link-btn--gold:hover{
    background:var(--gs-gold-soft);
    border-color:var(--gs-gold-soft);
    color:var(--ink);
}

.gs-reassurance{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    font-size:0.9rem;
    color:var(--gs-text-faint);
    margin:8px 0 0;
}

.gs-reassurance i{
    color:var(--gs-gold-soft);
}

/* ---------- Bottom nav ---------- */

.gs-next__inner{
    margin:0 auto;
    text-align:center;
}

.gs-next__title{
    font-family:var(--gs-font-head);
    font-size:clamp(1.5rem, 2.4vw, 2rem);
    font-weight:700;
    color:var(--gs-text);
    margin:8px 0 32px;
}

.gs-next__cards{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    text-align:left;
}

.gs-next__card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:22px 20px;
    background:var(--gs-surface);
    border:1px solid var(--gs-border);
    border-radius:var(--gs-radius-md);
    text-decoration:none;
    transition:border-color 0.15s ease, transform 0.15s ease;
}

.gs-next__card:hover{
    border-color:var(--gs-teal-border);
    transform:translateY(-3px);
}

.gs-next__card i{
    font-size:1.4rem;
    color:var(--gs-teal);
}

.gs-next__card-title{
    font-family:var(--gs-font-head);
    font-size:1.02rem;
    font-weight:700;
    color:var(--gs-text);
}

.gs-next__card-sub{
    font-size:0.88rem;
    line-height:1.5;
    color:var(--gs-text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
    .gs-hero{ padding:40px 20px; }
    .academy-hub{ padding:64px 20px; }
    .gs-benefit-grid{ grid-template-columns:1fr; }
    .gs-next__cards{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
    .gs-compare{ grid-template-columns:1fr; }
    .gs-compare__side--manual,
    .gs-compare__side--tradeture{
        border-radius:var(--gs-radius-sm);
        border:1px solid var(--gs-border);
    }
    .gs-compare__side--tradeture{
        box-shadow:none;
        border-color:var(--gs-teal-border);
    }
    .gs-compare__vs{ width:100%; height:30px; }
    .gs-step{ grid-template-columns:40px 1fr; gap:14px; }
    .gs-step__num{ width:34px; height:34px; font-size:0.88rem; }
    .gs-next__cards{ grid-template-columns:1fr; }
}

/* ---------- scroll-triggered reveal animations ----------
   Additive -- runs once per element the first time it scrolls into
   view (see the <script> at the bottom of get_started.html). */

.gs-reveal,
.gs-reveal--scale,
.gs-reveal--pop,
.gs-reveal--left{
    opacity:0;
    transition:opacity 0.7s cubic-bezier(0.16, 0.8, 0.24, 1),
               transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1);
}

.gs-reveal{
    transform:translateY(26px);
    transition-delay:calc(var(--i, 0) * 110ms);
}
.gs-reveal.is-visible{ opacity:1; transform:translateY(0); }

.gs-reveal--scale{
    transform:translateY(18px) scale(0.97);
    transition-delay:calc(var(--i, 0) * 110ms);
}
.gs-reveal--scale.is-visible{ opacity:1; transform:translateY(0) scale(1); }

.gs-reveal--pop{
    transform:translateY(20px) scale(0.94);
    transition-delay:calc(var(--i, 0) * 110ms);
}
.gs-reveal--pop.is-visible{ opacity:1; transform:translateY(0) scale(1); }

.gs-reveal--left{
    transform:translateX(-40px);
    transition-delay:calc(var(--i, 0) * 170ms);
}
.gs-reveal--left.is-visible{ opacity:1; transform:translateX(0); }

.gs-compare__side--manual,
.gs-compare__side--tradeture{
    opacity:0;
    transition:opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1),
               transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1);
    transition-delay:180ms;
}
.gs-compare__side--manual{ transform:translateX(70px); }
.gs-compare__side--tradeture{ transform:translateX(-70px); }

.gs-compare__vs{
    opacity:0;
    transform:scale(0.4);
    transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gs-compare.is-visible .gs-compare__side--manual,
.gs-compare.is-visible .gs-compare__side--tradeture{
    opacity:1;
    transform:translateX(0);
}
.gs-compare.is-visible .gs-compare__vs{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion: reduce){
    .gs-reveal,
    .gs-reveal--scale,
    .gs-reveal--pop,
    .gs-reveal--left,
    .gs-compare__side--manual,
    .gs-compare__side--tradeture,
    .gs-compare__vs{
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
}

/* ============================================================
   PART 5 — EXCHANGE CONNECTION GUIDES (.byapi-*)
   Consolidated from instruction.css. Local variables now alias
   the shared palette above. "ok/no" permission colors keep
   success/danger since they're semantic; the cyan/violet/pink
   trio from the original design collapses onto the gold accent
   family for a single-hue highlight look.
   ============================================================ */

.byapi-wrap{
    --bg-0:var(--bg);
    --bg-1:#050505;
    --panel:var(--panel);
    --panel-border:var(--border);
    --cyan:var(--accent);
    --violet:var(--accent-soft);
    --pink:var(--accent-deep);
    --green:var(--success);
    --red:var(--danger);
    --text-hi:var(--text);
    --text-mid:var(--muted);
    --text-dim:var(--muted-dim);
    position:relative;
    max-width:900px;
    margin:0 auto;
    padding:3rem 1.25rem 4rem;
    color:var(--text-hi);
    font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
    z-index:0;
}

/* Keep the site chrome above the fixed backdrop below. Without this, the
   navbar/footer (plain static elements with no z-index of their own) can
   end up painted behind the guide's fixed, negative-z-index background in
   some browsers, effectively hiding them. */
footer.footer{
    position:relative;
    z-index:20;
}

/* Anchor the navbar to the top of the viewport on every page that loads
   this file, instead of scrolling away with the content -- long pages
   (calculators, academy guides, the trading matrix tool) were losing the
   nav entirely once you scrolled past the first screen. A solid
   background is required for a sticky element or content would show
   through underneath it while scrolling; --bg matches the page canvas so
   it reads as part of the same surface rather than a separate bar. */
.navbar-custom{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--bg);
}

/* Ambient backdrop: grid + glow orbs, full-bleed behind the entire page
   (fixed to the viewport so it blends with the page's own background
   instead of reading as a separate rounded panel). Sits in its own
   low-level stacking context so it never climbs above site chrome. */
.byapi-bg{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgba(var(--accent-soft-rgb),0.10), transparent 60%),
        radial-gradient(ellipse 55% 45% at 100% 30%, rgba(var(--accent-rgb),0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(201,162,39,0.08), transparent 60%),
        linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
}
.byapi-grid{
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:
        linear-gradient(rgba(var(--border-rgb),0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--border-rgb),0.055) 1px, transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 75%);
    mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 75%);
}

/* Header */
.byapi-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--cyan);
    background:rgba(var(--accent-rgb),0.08);
    border:1px solid rgba(var(--accent-rgb),0.3);
    padding:0.32rem 0.85rem;
    border-radius:999px;
    margin:0 auto 1.1rem;
}
.byapi-eyebrow .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 8px var(--green);
    animation:byapi-pulse 1.8s ease-in-out infinite;
}
.byapi-header{ text-align:center; margin-bottom:2.75rem; }
.byapi-title{
    font-size:clamp(1.8rem, 4vw, 2.5rem);
    font-weight:800;
    margin:0 0 0.6rem;
    letter-spacing:-0.01em;
    background:linear-gradient(100deg, #ffffff 10%, var(--cyan) 55%, var(--violet) 90%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.byapi-subtitle{
    color:var(--text-mid);
    font-size:1rem;
    max-width:560px;
    margin:0 auto;
    line-height:1.6;
}

/* Progress rail */
.byapi-rail{
    position:relative;
    display:flex;
    justify-content:space-between;
    max-width:560px;
    margin:1.8rem auto 0;
    padding:0 6px;
}
.byapi-rail::before{
    content:"";
    position:absolute;
    top:9px;
    left:6px;
    right:6px;
    height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
    opacity:0.35;
}
.byapi-rail-node{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--bg-1);
    border:2px solid var(--cyan);
    box-shadow:0 0 10px rgba(var(--accent-rgb),0.5);
    position:relative;
    z-index:1;
}

/* Step cards */
.byapi-steps{
    position:relative;
    margin-top:3rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
.byapi-steps::before{
    content:"";
    position:absolute;
    left:27px;
    top:8px;
    bottom:8px;
    width:2px;
    background:linear-gradient(180deg, var(--cyan), var(--violet) 50%, var(--pink));
    opacity:0.28;
}

.byapi-step{
    position:relative;
    display:grid;
    grid-template-columns:56px 1fr;
    gap:1.1rem;
    opacity:0;
    transform:translateY(18px);
    animation:byapi-rise 0.6s ease forwards;
    animation-play-state:paused;
}
.byapi-step.byapi-in-view{ animation-play-state:running; }

.byapi-num{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.15rem;
    color:var(--bg-0);
    background:linear-gradient(135deg, var(--cyan), var(--violet));
    box-shadow:0 0 0 4px var(--bg-1), 0 0 22px rgba(var(--accent-rgb),0.35);
    z-index:1;
    align-self:start;
}

.byapi-card{
    position:relative;
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:18px;
    padding:1.4rem 1.5rem 1.6rem;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow:hidden;
}
.byapi-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(var(--accent-rgb),0.3), rgba(var(--accent-soft-rgb),0.12), transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.byapi-card:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--accent-rgb),0.4);
    box-shadow:0 12px 32px rgba(var(--accent-rgb),0.08);
}

.byapi-card h3{
    margin:0 0 0.45rem;
    font-size:1.08rem;
    font-weight:700;
    color:var(--text-hi);
    letter-spacing:0.01em;
}
.byapi-card p{
    color:var(--text-mid);
    font-size:0.93rem;
    line-height:1.6;
    margin:0 0 0.9rem;
}
.byapi-card p:last-child{ margin-bottom:0; }
.byapi-card strong{ color:var(--cyan); font-weight:600; }

.byapi-diagram{
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border);
    margin:0.9rem 0 1.1rem;
    background:rgba(0,0,0,0.25);
    position:relative;
}
.byapi-diagram::after{
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),0.08);
    pointer-events:none;
}
.byapi-diagram img{
    display:block;
    width:100%;
    height:auto;
    transition:transform 0.4s ease;
}
.byapi-diagram:hover img{ transform:scale(1.02); }

.byapi-permlist{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}
.byapi-permlist li{
    display:flex;
    align-items:center;
    gap:0.6rem;
    background:rgba(var(--border-rgb),0.03);
    border:1px solid var(--border);
    border-radius:10px;
    padding:0.6rem 0.85rem;
    font-size:0.9rem;
    color:var(--text-mid);
}
.byapi-permlist li.ok{ border-color:rgba(var(--success-rgb),0.25); }
.byapi-permlist li.no{ border-color:rgba(var(--danger-rgb),0.28); }
.byapi-permlist .icon{
    flex-shrink:0;
    width:22px;
    height:22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    font-weight:800;
}
.byapi-permlist li.ok .icon{ background:rgba(var(--success-rgb),0.15); color:var(--green); }
.byapi-permlist li.no .icon{ background:rgba(var(--danger-rgb),0.15); color:var(--red); }

/* Emphasized "critical" callout -- used to make permission steps impossible to miss */
.byapi-critical{
    position:relative;
    border:1.5px solid rgba(var(--danger-rgb),0.45);
    background:linear-gradient(180deg, rgba(var(--danger-rgb),0.07), rgba(var(--danger-rgb),0.02));
    border-radius:14px;
    padding:1.1rem 1.1rem 1.2rem;
    margin:0.9rem 0 1.1rem;
    box-shadow:0 0 0 1px rgba(var(--danger-rgb),0.08), 0 0 26px rgba(var(--danger-rgb),0.08);
}
.byapi-critical-tag{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.68rem;
    font-weight:800;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--red);
    background:rgba(var(--danger-rgb),0.14);
    border:1px solid rgba(var(--danger-rgb),0.35);
    padding:0.28rem 0.65rem;
    border-radius:999px;
    margin-bottom:0.7rem;
}
.byapi-critical-tag .dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 6px var(--red);
    animation:byapi-pulse 1.6s ease-in-out infinite;
}
.byapi-critical > p{
    font-weight:600;
    color:var(--text-hi);
    margin-bottom:0.7rem !important;
}
.byapi-critical .byapi-permlist li.ok{ font-weight:600; color:#d7fdea; }
.byapi-critical .byapi-permlist li.no{ font-weight:700; color:#ffd7de; }

/* Server-IP / copy widget -- used for the fail-safe IP whitelist step */
.byapi-ipbox{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(var(--accent-rgb),0.28);
    border-radius:12px;
    padding:0.85rem 0.85rem 0.85rem 1.05rem;
    margin:0.9rem 0 1.1rem;
}
.byapi-ipbox-label{
    display:block;
    font-size:0.68rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:0.25rem;
}
.byapi-ipbox-value{
    font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:1.05rem;
    font-weight:700;
    color:var(--cyan);
    letter-spacing:0.03em;
}
.byapi-copy-btn{
    flex-shrink:0;
    cursor:pointer;
    font-size:0.82rem;
    font-weight:600;
    color:var(--bg-0);
    background:linear-gradient(120deg, var(--cyan), var(--accent-soft));
    border:none;
    border-radius:9px;
    padding:0.5rem 0.95rem;
    transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.byapi-copy-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(var(--accent-rgb),0.3);
}
.byapi-copy-btn.byapi-copied{
    background:linear-gradient(120deg, var(--green), #5bffb0);
}

/* Standalone security note card (non-numbered, closes out the guide) */
.byapi-secnote{
    position:relative;
    margin-top:1.75rem;
    background:linear-gradient(180deg, rgba(var(--success-rgb),0.07), var(--panel-2));
    border:1px solid rgba(var(--success-rgb),0.28);
    border-radius:18px;
    padding:1.4rem 1.5rem 1.6rem;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.byapi-secnote-head{
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin-bottom:0.6rem;
}
.byapi-secnote-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    background:rgba(var(--success-rgb),0.15);
    color:var(--green);
    flex-shrink:0;
}
.byapi-secnote h3{
    margin:0;
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-hi);
}
.byapi-secnote p{
    color:var(--text-mid);
    font-size:0.93rem;
    line-height:1.65;
    margin:0 0 0.7rem;
}
.byapi-secnote p:last-child{ margin-bottom:0; }
.byapi-secnote strong{ color:var(--green); font-weight:600; }
.byapi-secnote-tagline{
    display:inline-block;
    margin-top:0.4rem;
    font-size:0.85rem;
    font-style:italic;
    color:#9be8c4;
    border-left:2px solid rgba(var(--success-rgb),0.4);
    padding-left:0.7rem;
}

.byapi-note{
    display:flex;
    gap:0.6rem;
    align-items:flex-start;
    background:rgba(var(--accent-soft-rgb),0.06);
    border:1px solid rgba(var(--accent-soft-rgb),0.22);
    border-radius:10px;
    padding:0.7rem 0.9rem;
    font-size:0.85rem;
    color:var(--text-mid);
    margin-top:0.9rem;
}
.byapi-note b{ color:var(--accent-soft); }

/* CTA buttons */
.byapi-btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-weight:600;
    font-size:0.92rem;
    text-decoration:none;
    padding:0.65rem 1.3rem;
    border-radius:12px;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.byapi-btn-primary{
    color:var(--ink);
    background:linear-gradient(120deg, var(--cyan), var(--accent-soft));
    box-shadow:0 8px 24px rgba(var(--accent-rgb),0.25);
}
.byapi-btn-primary:hover{
    color:var(--ink);
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(var(--accent-rgb),0.4);
}
.byapi-btn-ghost{
    color:var(--text-hi);
    background:rgba(var(--border-rgb),0.04);
    border:1px solid var(--border);
}
.byapi-btn-ghost:hover{
    color:var(--text-hi);
    border-color:rgba(var(--accent-rgb),0.4);
    background:rgba(var(--accent-rgb),0.06);
    transform:translateY(-2px);
}

.byapi-footer{
    text-align:center;
    margin-top:3rem;
}
.byapi-footer-links{
    display:flex;
    justify-content:center;
    gap:0.9rem;
    flex-wrap:wrap;
}

@keyframes byapi-rise{
    to{ opacity:1; transform:translateY(0); }
}
@keyframes byapi-pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.5; transform:scale(1.3); }
}

@media (max-width: 560px){
    .byapi-step{ grid-template-columns:44px 1fr; gap:0.8rem; }
    .byapi-num{ width:44px; height:44px; font-size:0.95rem; border-radius:12px; }
    .byapi-steps::before{ left:21px; }
    .byapi-ipbox{ flex-direction:column; align-items:flex-start; }
    .byapi-copy-btn{ align-self:stretch; text-align:center; }
}

/* ============================================================
   PART 6 — DASHBOARD SHELL (.db-*)
   Shared "command center" building blocks used by dashboard.html,
   performance.html, and tpanalysis.html: the stat-card strip, the
   card container, tab rows, tables, and small state utilities.
   Page-specific pieces (dashboard's topbar/bot panel/journal/
   referral card; performance's span filter; tpanalysis's slider)
   stay local to their own template.
   ============================================================ */

.db-root{
    position:relative;
    max-width:100%;
    margin:0 auto;
    padding:1.5rem 1.5rem 3rem;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:var(--text);
}

/* thin scanning HUD line, confined to this section */
.db-scanline{
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    opacity:0.5;
    animation:scan 6s ease-in-out infinite;
    pointer-events:none;
}

/* STAT CARDS */
.db-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:1.5rem;
    animation:fadeUp .5s ease .05s both;
}
.db-stat{
    background:var(--panel);
    backdrop-filter:blur(6px);
    padding:1.1rem 1.2rem;
    transition:background .2s ease;
}
/* Hover darkens instead of lightening -- a light wash over the dark
   panel was washing out the stat values/labels. */
.db-stat:hover{
    background:black
}
.db-stat--plan{
    background:black
}
.db-stat--plan:hover{
    background:black
}
.db-stat__label{
    font-size:0.72rem;
    color:var(--muted);
    letter-spacing:0.09em;
    text-transform:uppercase;
    margin-bottom:0.35rem;
}
.db-stat__value{
    font-size:1.5rem;
    font-weight:600;
    color:#ffffff;
    line-height:1.2;
    margin-bottom:0.25rem;
    font-family:'IBM Plex Mono', monospace;
}
.db-stat__value--pos{ color:var(--success); }
.db-stat__value--neg{ color:var(--danger); }
.db-stat__value--gold{ color:var(--warn); }
.db-stat__sub{ font-size:0.72rem; color:var(--muted); }

/* MAIN GRID */
.db-grid{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:1.25rem;
    align-items:start;
}
.db-col{ display:flex; flex-direction:column; gap:1.25rem; }

/* CARD */
.db-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    backdrop-filter:blur(6px);
    animation:fadeUp .5s ease .08s both;
    transition:border-color .25s ease, box-shadow .25s ease;
}
.db-card:hover{ border-color:var(--border-hover); box-shadow:0 0 26px -12px var(--glow); }
.db-card__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.9rem 1.1rem;
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
    gap:0.5rem;
}
.db-card__head2{ display:flex; }
.db-card__title{ font-size:0.85rem; font-weight:500; color:var(--accent-soft); letter-spacing:0.04em; }
.db-card__badge{
    font-size:0.72rem;
    background:rgba(var(--accent-rgb),0.1);
    color:var(--accent-soft);
    padding:2px 8px;
    border-radius:10px;
    font-family:monospace;
}
.db-card__link{ font-size:0.75rem; color:var(--accent); text-decoration:none; transition:color .2s ease; }
.db-card__link:hover{ color:var(--accent-soft); text-decoration:underline; }
.db-card--links{ background:transparent; border:none; padding:0; overflow:visible; box-shadow:none; animation:fadeUp .5s ease .1s both; }
.db-card--links:hover{ box-shadow:none; }

/* ANALYTICS TABS */
.db-tab-row{ display:flex; gap:4px; flex-wrap:wrap; }
.db-tab{
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    font-size:0.75rem;
    padding:0.3rem 0.7rem;
    border-radius:999px;
    cursor:pointer;
    font-family:inherit;
    transition:all 0.2s;
}
.db-tab--active{ background:rgba(var(--accent-rgb),0.1); border-color:var(--accent); color:var(--accent-soft); box-shadow:0 0 14px -6px var(--glow); }
.db-tab:hover:not(.db-tab--active){ border-color:var(--border-hover); color:var(--text); }

/* Chart area */
.db-chart-area{ padding:1rem 1.1rem 0.8rem; }

/* TABLE */
.db-table-wrap{ overflow-x:auto; }
.db-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.8rem;
}
.db-table th{
    padding:0.5rem 0.75rem;
    text-align:left;
    color:var(--muted);
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.db-table td{
    padding:0.55rem 0.75rem;
    border-bottom:1px solid rgba(var(--border-rgb),0.08);
    color:var(--muted);
    white-space:nowrap;
}
.db-table tbody tr{ transition:background .15s ease; }
.db-table tbody tr:hover{ background:rgba(var(--accent-rgb),0.04); }
.db-table__symbol{ color:#ffffff; font-weight:500; font-family:monospace; }
.db-table__liq{ color:var(--danger); font-family:monospace; }
.db-table__risk{ color:var(--warn); font-family:monospace; }

/* ---------- numeric variant: right-aligned columns, first column left ----------
   Opt in with class="db-table db-table--numeric" for financial/analytics
   tables that are mostly numbers (risk matrices, trade logs, etc.). */
.db-table--numeric th{ text-align:right; }
.db-table--numeric td{ text-align:right; font-variant-numeric:tabular-nums; }
.db-table--numeric th:first-child,
.db-table--numeric td:first-child{ text-align:left; }

/* ---------- flagged/at-risk row ---------- */
.db-table tr.broken{ background:rgba(var(--danger-rgb),0.10); }
.db-table tr.broken td:first-child{ color:var(--danger); }

.db-dir{
    font-size:0.7rem;
    font-weight:600;
    padding:2px 7px;
    border-radius:3px;
    letter-spacing:0.05em;
}
.db-dir--long{ background:rgba(var(--success-rgb),0.12); color:var(--success); }
.db-dir--short{ background:rgba(var(--danger-rgb),0.12); color:var(--danger); }

/* TAGS (journal / trade log) */
.db-tag{
    font-size:0.68rem;
    padding:2px 7px;
    border-radius:2px;
    font-family:monospace;
    letter-spacing:0.04em;
}
.db-tag--win{ background:rgba(var(--success-rgb),0.10); color:var(--success); }
.db-tag--loss{ background:rgba(var(--danger-rgb),0.10); color:var(--danger); }
.db-tag--strat{ background:rgba(var(--warn-rgb),0.10); color:var(--warn); }

/* small color utilities */
.db-pos{ color:var(--success); }
.db-neg{ color:var(--danger); }
.db-muted{ color:var(--muted); }

.db-empty{
    padding:2rem;
    text-align:center;
    color:var(--muted);
    font-size:0.85rem;
}
.db-empty i{ font-size:28px; margin-bottom:0.5rem; display:block; color:var(--accent-dim); }

.db-btn--ghost{
    display:block;
    margin:0 1.1rem 1rem;
    padding:0.6rem;
    text-align:center;
    background:transparent;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--muted);
    font-size:0.78rem;
    text-decoration:none;
    transition:all 0.2s;
    letter-spacing:0.05em;
}
.db-btn--ghost:hover{ border-color:var(--accent); color:var(--accent-soft); box-shadow:0 0 16px -8px var(--glow); }

/* FLASH MESSAGES */
.db-flash{
    padding:0.7rem 1rem;
    border-radius:8px;
    font-size:0.82rem;
    margin-top:1rem;
    border:1px solid var(--border);
    border-left:3px solid var(--accent);
    background:var(--panel);
    color:var(--accent-soft);
    backdrop-filter:blur(6px);
    transition:opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease, padding 0.4s ease;
    opacity:1;
}
.db-flash--error{ border-left-color:var(--danger); color:var(--danger); }
.db-flash--success{ border-left-color:var(--success); color:var(--success); }
.db-flash--warning{ border-left-color:var(--warn); color:var(--warn); }
.db-flash--hide{
    opacity:0;
    transform:translateY(-4px);
    margin-top:0;
    padding-top:0;
    padding-bottom:0;
    max-height:0;
    overflow:hidden;
}

/* QUICK LINKS (small icon+label link tiles, used in card sidebars) */
.db-quick{
    display:flex;
    align-items:center;
    gap:0.65rem;
    padding:0.7rem 1rem;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--muted);
    text-decoration:none;
    font-size:0.82rem;
    transition:all 0.2s;
    margin-bottom:0.5rem;
    backdrop-filter:blur(6px);
}
.db-quick i{ font-size:16px; color:var(--accent); }
.db-quick:hover{ background:rgba(var(--accent-rgb),0.05); border-color:var(--border-hover); color:var(--text); transform:translateY(-1px); box-shadow:0 6px 22px -10px var(--glow); }
.db-quick:last-child{ margin-bottom:0; }

/* RESPONSIVE */
@media (max-width: 900px){
    .db-grid{ grid-template-columns:1fr; width:100%; }
}
@media (max-width: 600px){
    .db-root{ padding:1rem; }
    .db-stats{ grid-template-columns:repeat(2, 1fr); }
    .db-card__head2{ flex-direction:column; }
    .db-grid{ grid-template-columns:1fr; width:100%; }
}

/* ============================================================
   PART 7 — AUTH PAGES (.tt-auth-*)
   Shared look for login / signup / password-reset style pages:
   a centered card, themed Bootstrap form controls and buttons
   scoped under .tt-auth-wrap so linking this file never touches
   .form-control/.btn elsewhere (e.g. apisettings' own inputs).
   ============================================================ */

.tt-auth-wrap{
    max-width:440px;
    margin:48px auto;
    position:relative;
    color:var(--text);
}
.tt-auth-wrap h2{
    color:var(--accent-soft);
    font-weight:700;
    margin-bottom:24px;
    text-align:center;
    animation:softGlow 4s ease-in-out infinite;
}
.tt-auth-wrap .form-group{ margin-bottom:16px; }
.tt-auth-wrap label{
    color:var(--muted);
    font-size:.8rem;
    letter-spacing:.03em;
    margin-bottom:6px;
    display:block;
}
.tt-auth-wrap .form-control{
    background:rgba(0,0,0,0.35);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
    padding:10px 12px;
}
.tt-auth-wrap .form-control:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15);
    background:rgba(0,0,0,0.35);
    color:var(--text);
}
.tt-auth-wrap .input-group-text{
    background:rgba(0,0,0,0.35);
    border:1px solid var(--border);
    border-left:none;
    color:var(--muted);
    cursor:pointer;
}
.tt-auth-wrap .btn{ border-radius:8px; }
.tt-auth-wrap .btn-primary{
    background:linear-gradient(135deg, var(--accent-dim), var(--accent));
    border:none;
    color:var(--ink);
    font-weight:600;
}
.tt-auth-wrap .btn-primary:hover{ filter:brightness(1.08); color:var(--ink); }
.tt-auth-wrap .btn-secondary{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
}
.tt-auth-wrap .btn-secondary:hover{ border-color:var(--border-hover); background:rgba(255,255,255,0.04); color:var(--text); }
.tt-auth-wrap .btn-success{
    background:linear-gradient(135deg, var(--success), #1fae82);
    border:none;
    color:#04140d;
    font-weight:600;
}
.tt-auth-wrap .btn-success:hover{ filter:brightness(1.08); color:#04140d; }
.tt-auth-wrap .btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.tt-auth-wrap a{ color:var(--accent); }
.tt-auth-wrap a:hover{ color:var(--accent-soft); }
/* .tt-auth-wrap a (0,1,1) would otherwise beat .tt-google-btn (0,1,0) and
   tint Google's mandated button text gold; re-pin it here at (0,2,0). */
.tt-auth-wrap .tt-google-btn,
.tt-auth-wrap .tt-google-btn:hover{ color:#3c4043; }
.tt-auth-wrap .text-warning{ color:var(--warn) !important; }
.tt-auth-wrap .form-check-label{ color:var(--muted); font-size:.85rem; }
.tt-auth-wrap .form-check-input{ accent-color:var(--accent); }

.tt-auth-wrap .or-divider{
    display:flex;
    align-items:center;
    text-align:center;
    color:var(--muted);
    margin:16px 0;
}
.tt-auth-wrap .or-divider::before,
.tt-auth-wrap .or-divider::after{
    content:"";
    flex:1;
    border-bottom:1px solid var(--border);
}
.tt-auth-wrap .or-divider span{ padding:0 10px; }

/* Google's official sign-in button keeps its mandated white/gray
   branding regardless of site theme -- generic enough to share. */
.tt-google-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    margin-bottom:10px;
    margin-top:10px;
    background:#fff;
    border:1px solid #dadce0;
    border-radius:4px;
    color:#3c4043;
    font-family:Roboto, Arial, sans-serif;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    box-sizing:border-box;
    transition:box-shadow .2s, background-color .2s;
}
.tt-google-btn:hover{
    box-shadow:0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
    color:#3c4043;
    text-decoration:none;
}
.tt-google-btn-icon{ display:flex; }
.tt-google-btn-disabled{ opacity:0.5; pointer-events:none; cursor:not-allowed; }

/* ============================================================
   PART 8 — TRADING MATRIX CALCULATOR (.tmc-*)
   The handful of pieces here (slider grid, field labels, summary
   lines, results legend) are genuinely specific to this one
   calculator's layout -- everything reusable (cards, buttons, badges,
   the stats row, the results table) already lives in Parts 3 and 6
   above, and this page uses those directly instead of redefining them.
   ============================================================ */

.tmc-controls{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:18px 24px;
}
.tmc-field label{
    display:flex;
    justify-content:space-between;
    font-size:0.85rem;
    color:var(--muted);
    margin-bottom:6px;
}
.tmc-field label .val{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.tmc-field .tt-input{
    width:100%;
    margin-top:6px;
    font-size:0.8rem;
    padding:6px 8px;
}

.tmc-summary-line{ font-size:0.85rem; color:var(--muted); margin:4px 0; }
.tmc-summary-line b{ color:var(--text); }
.tmc-summary-line span.flag{ color:var(--warn); }

.tmc-legend{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px 20px;
    font-size:0.8rem;
    color:var(--muted);
    margin-top:14px;
}
.tmc-legend b{ color:var(--text); }

/* .badge / .badge.ok / .badge.broken keep their original (non tt-badge)
   class names on purpose -- the <script> block on this page generates
   this exact markup via template literals, and that JS is not allowed
   to change. Colors still pull from the shared success/danger vars so
   they stay in step with the rest of the palette. */
.badge{
    display:inline-block;
    font-size:0.72rem;
    font-weight:700;
    padding:2px 8px;
    border-radius:999px;
}
.badge.ok{ background:rgba(var(--success-rgb),0.15); color:var(--success); }
.badge.broken{ background:rgba(var(--danger-rgb),0.18); color:var(--danger); }

/* ============================================================
   Trading Matrix Calculator — page layout
   Isolated to .tmc-page (the tt-scope wrapper on tradingmatrixcalc.html)
   so nothing here can leak onto any other page. Pure layout/spacing --
   no new colors are introduced, everything still reads from the root
   palette in Part 1 via the existing .tt-card/.tt-grid-3 primitives.
   ============================================================ */

/* Slightly tighter card padding on this page only, for a denser,
   more "reference sheet" professional look. */
.tmc-page .tt-card{
    padding:20px 22px;
}

/* Why / Rules / How-to trio -- side by side instead of stacked, so the
   explanatory copy doesn't push the actual calculator below the fold.
   Reuses the .tt-grid-3 primitive from Part 3; this just makes the three
   cards equal-height and match column heights nicely. */
.tmc-intro.tt-grid-3{
    margin-bottom:20px;
    align-items:stretch;
}
.tmc-intro .tt-card{
    display:flex;
    flex-direction:column;
}

/* Sliders (left) + Results Matrix (right), summary stacked under the
   sliders. Mirrors the .db-grid fixed/flexible split from Part 6, just
   reversed -- the narrow fixed column holds Configuration + Configuration
   Summary, the flexible column holds the wide results table. */
.tmc-grid{
    display:grid;
    /* minmax(0, ...) keeps the wide results table from forcing this
       column past the viewport -- a bare 1fr respects the table's
       min-content width and blows the layout out instead of letting
       .db-table-wrap's own overflow-x:auto handle it. */
    grid-template-columns:340px minmax(0,1fr);
    gap:20px;
    align-items:start;
    margin-bottom:20px;
}
.tmc-grid__left{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:0;
}
.tmc-grid__right{
    min-width:0;
}

/* A touch tighter than the shared .db-table default (Part 6), just for
   this page's especially column-heavy matrix. */
.tmc-page .db-table th,
.tmc-page .db-table td{
    padding:0.5rem 0.6rem;
}

@media (max-width:900px){
    .tmc-grid{ grid-template-columns:minmax(0,1fr); }
}