/* =========================================================
   ai-bot.css — AI Smart Trade design system (Phase 1)
   Professional light-mode trading-platform look.
   Light surfaces · navy text · gold accent · green/red PnL.
   RTL-aware (logical properties only), mobile-first.
   Mirrors copy-trading.css / halal-trading.css conventions.
   ========================================================= */

/* ----------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------- */
:root {
    --st-navy-950: #0B1526;
    --st-navy-900: #101D33;
    --st-navy-700: #1E3A5F;
    --st-navy-600: #274B77;
    --st-navy-100: #E8EEF6;

    --st-gold:       #D4AF37;
    --st-gold-strong:#B8860B;
    --st-gold-deep:  #92660A;
    --st-gold-soft:  #E9CE7A;
    --st-gold-pale:  #FBF6E7;
    --st-gold-line:  #EBD9A2;

    --st-green:      #047857;
    --st-green-pale: #ECFDF5;
    --st-green-line: #A7F3D0;
    --st-red:        #B91C1C;
    --st-red-pale:   #FEF2F2;
    --st-red-line:   #FECACA;
    --st-amber:      #B45309;
    --st-amber-pale: #FFFBEB;
    --st-amber-line: #FDE68A;
    --st-slate:      #64748B;
    --st-slate-light:#94A3B8;

    --st-text:   var(--st-navy-900);
    --st-muted:  var(--st-slate);
    --st-border: #E4E9F1;
    --st-bg:     #F5F7FA;
    --st-surface:#FFFFFF;
    --st-surface-alt: #FAFBFD;

    --st-radius-sm: 8px;
    --st-radius:    14px;
    --st-radius-lg: 20px;

    --st-shadow-sm: 0 1px 2px rgba(16, 29, 51, .05);
    --st-shadow:    0 1px 2px rgba(16, 29, 51, .05), 0 10px 28px -14px rgba(16, 29, 51, .14);
    --st-shadow-lg: 0 24px 48px -20px rgba(16, 29, 51, .22);

    --st-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --st-num-font-feature: "tnum" 1, "lnum" 1;
}

body.locale-bn .st-wrap,
body.locale-bn .st-hero,
body.locale-bn .st-plan-card { font-family: 'Hind Siliguri', 'Inter', system-ui, sans-serif; }

/* ----------------------------------------------------------
   2. Scope & typography
   ---------------------------------------------------------- */
.st-wrap {
    max-width: 1180px;
    color: var(--st-text);
    font-family: var(--st-font);
}

.st-wrap h1, .st-wrap h2, .st-wrap h3,
.st-hero h1, .st-plan-card h3 {
    color: var(--st-navy-900);
    letter-spacing: -.01em;
}

.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--st-gold-strong);
    margin-bottom: .5rem;
}
.st-eyebrow::before {
    content: "";
    inline-size: 18px;
    block-size: 2px;
    background: linear-gradient(90deg, var(--st-gold), var(--st-gold-soft));
    border-radius: 2px;
}

.st-muted { color: var(--st-muted); }
.st-num, .st-kpi .val, .st-hist td, .st-hist th, .st-tl-card, .st-hwm-table { font-variant-numeric: tabular-nums; }

.st-pos { color: var(--st-green); }
.st-neg { color: var(--st-red); }
.st-skip { color: var(--st-amber); font-size: .85rem; }

/* ----------------------------------------------------------
   3. Buttons (scoped to AI Smart Trade pages)
   ---------------------------------------------------------- */
.st-wrap .btn-warning,
.st-hero .btn-warning {
    background: linear-gradient(135deg, var(--st-gold) 0%, var(--st-gold-strong) 100%);
    border-color: var(--st-gold-strong);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 6px 16px -8px rgba(184, 134, 11, .55);
}
.st-wrap .btn-warning:hover, .st-wrap .btn-warning:focus {
    background: linear-gradient(135deg, var(--st-gold-soft) 0%, var(--st-gold) 100%);
    border-color: var(--st-gold-strong);
    color: #fff;
}
.st-wrap .btn-outline-dark {
    border-color: var(--st-navy-100);
    color: var(--st-navy-700);
    border-radius: 10px;
    font-weight: 700;
    background: var(--st-surface);
}
.st-wrap .btn-outline-dark:hover {
    background: var(--st-navy-700);
    border-color: var(--st-navy-700);
    color: #fff;
}

/* ----------------------------------------------------------
   4. Badges & pills
   ---------------------------------------------------------- */
.st-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.st-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.st-badge::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: currentColor;
}
.st-on   { background: var(--st-green-pale); color: var(--st-green); border-color: var(--st-green-line); }
.st-off  { background: #EEF2F7; color: var(--st-slate); border-color: var(--st-border); }
.st-warn { background: var(--st-amber-pale); color: var(--st-amber); border-color: var(--st-amber-line); }

.st-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.st-buy  { background: var(--st-green-pale); color: var(--st-green); border-color: var(--st-green-line); }
.st-hold { background: #EEF2F7; color: #475569; border-color: var(--st-border); }
.st-win  { background: var(--st-green-pale); color: var(--st-green); border-color: var(--st-green-line); }
.st-loss { background: var(--st-red-pale); color: var(--st-red); border-color: var(--st-red-line); }
.st-close { background: var(--st-navy-100); color: var(--st-navy-700); border-color: #CBD8E8; }

/* ----------------------------------------------------------
   5. Cards
   ---------------------------------------------------------- */
.st-card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: var(--st-shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.st-card:hover { box-shadow: var(--st-shadow); border-color: #D8E0EB; }
.st-card--flush { padding: 0; overflow: hidden; }
.st-card--gold {
    background: linear-gradient(150deg, var(--st-gold-pale) 0%, #fff 55%);
    border-color: var(--st-gold-line);
}
.st-card--alert {
    background: var(--st-amber-pale);
    border-color: var(--st-amber-line);
}

.st-card-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.st-card-title .fas { color: var(--st-gold-strong); font-size: .85rem; }
.st-card-sub { font-size: .82rem; color: var(--st-muted); margin: 0 0 14px; }

/* ----------------------------------------------------------
   6. KPI cards
   ---------------------------------------------------------- */
.st-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.st-kpi {
    background: var(--st-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.st-kpi::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 3px;
    background: linear-gradient(90deg, transparent, var(--st-gold-line), transparent);
}
.st-kpi .lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--st-muted);
    font-weight: 700;
}
.st-kpi .val { font-size: 1.4rem; font-weight: 800; margin-top: 6px; color: var(--st-navy-900); }
.st-kpi .sub { font-size: 11px; color: var(--st-muted); margin-top: 2px; }

.st-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.st-mini {
    background: var(--st-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    color: #475569;
}

@media (min-width: 768px) {
    .st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .st-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------
   7. Charts & tabs
   ---------------------------------------------------------- */
.st-charts { display: flex; flex-wrap: wrap; gap: 16px; }
.st-chart {
    background: var(--st-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 14px;
    position: relative;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.st-chart.big   { flex: 2 1 420px; }
.st-chart.small { flex: 1 1 260px; }
.st-chart h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--st-navy-700); }
.st-chart-box { position: relative; height: 240px; width: 100%; }
.st-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-muted);
    font-size: 13px;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(100,116,139,.045) 14px 15px);
    border-radius: 8px;
}

.st-tabs { display: inline-flex; background: var(--st-surface-alt); border: 1px solid var(--st-border); border-radius: 999px; padding: 3px; gap: 2px; }
.st-tabs button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--st-muted);
    transition: background .15s ease, color .15s ease;
}
.st-tabs button:hover { color: var(--st-navy-700); }
.st-tabs button.on { background: var(--st-navy-700); color: #fff; box-shadow: 0 4px 10px -6px rgba(30,58,95,.6); }

/* ----------------------------------------------------------
   8. Tables
   ---------------------------------------------------------- */
.st-hist { width: 100%; font-size: 14px; border-collapse: separate; border-spacing: 0; }
.st-hist th {
    color: var(--st-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--st-border);
    background: var(--st-surface-alt);
    text-align: start;
    white-space: nowrap;
}
.st-hist td { padding: 10px 12px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; }
.st-hist tbody tr:last-child td { border-bottom: 0; }
.st-hist tbody tr { transition: background .12s ease; }
.st-hist tbody tr:hover { background: var(--st-gold-pale); }

/* ----------------------------------------------------------
   9. Pager
   ---------------------------------------------------------- */
.st-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; color: var(--st-muted); }
.st-pager a {
    border: 1px solid var(--st-border);
    background: var(--st-surface);
    border-radius: 8px;
    padding: 5px 12px;
    color: var(--st-navy-700);
    text-decoration: none;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.st-pager a:hover { border-color: var(--st-gold); background: var(--st-gold-pale); }

/* ----------------------------------------------------------
   10. Size settings (radio cards + presets)
   ---------------------------------------------------------- */
.st-size { margin-top: 12px; border-top: 1px dashed var(--st-border); padding-top: 14px; }
.st-size-radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px; }
.st-size-radios input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.st-size-radios label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .35rem;
    border: 1px solid var(--st-border);
    background: var(--st-surface-alt);
    border-radius: 10px;
    padding: 8px 6px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    margin: 0;
}
.st-size-radios label:hover { border-color: var(--st-gold-line); }
.st-size-radios input[type="radio"]:checked + label,
.st-size-radios input[type="radio"]:focus-visible + label {
    border-color: var(--st-gold-strong);
    background: var(--st-gold-pale);
    color: var(--st-gold-deep);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .18);
    font-weight: 700;
}
.st-size-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.st-size-presets button {
    border: 1px solid var(--st-border);
    background: var(--st-surface-alt);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    transition: all .15s ease;
}
.st-size-presets button:hover { border-color: var(--st-gold-line); color: var(--st-gold-deep); }
.st-size-presets button.on {
    background: linear-gradient(135deg, var(--st-gold), var(--st-gold-strong));
    color: #fff;
    border-color: var(--st-gold-strong);
}
.st-size-msg.st-ok { color: var(--st-green); font-weight: 700; }
.st-size-msg.st-err { color: var(--st-red); font-weight: 700; }

/* ----------------------------------------------------------
   11. Subscribe page — plan picker & status
   ---------------------------------------------------------- */
.st-status { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.st-status-ACTIVE   { background: var(--st-green-pale); color: var(--st-green); border: 1px solid var(--st-green-line); }
.st-status-EXPIRED  { background: var(--st-amber-pale); color: var(--st-amber); border: 1px solid var(--st-amber-line); }
.st-status-CANCELLED{ background: #EEF2F7; color: #475569; border: 1px solid var(--st-border); }

.st-sub-card { position: relative; }
.st-sub-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: linear-gradient(180deg, var(--st-gold), var(--st-gold-soft));
    border-start-start-radius: var(--st-radius);
    border-end-start-radius: var(--st-radius);
}

.st-plan-pick { display: flex; flex-direction: column; height: 100%; }
.st-plan-pick .st-plan-fee {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--st-gold-strong);
    letter-spacing: -.02em;
}
.st-plan-pick .st-plan-fee span { font-size: .9rem; color: var(--st-muted); font-weight: 600; }
.st-plan-pick h6 { font-size: 1.05rem; font-weight: 800; }
#st-chosen-plan { border-color: var(--st-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .22), var(--st-shadow); }

/* Radio-card grid (subscribe size mode) */
.st-radio-cards { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.st-radio-cards input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.st-radio-cards .st-radio-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid var(--st-border);
    background: var(--st-surface-alt);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    margin: 0;
}
.st-radio-cards .st-radio-card:hover { border-color: var(--st-gold-line); }
.st-radio-cards .st-radio-dot {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.st-radio-cards .st-radio-card b { display: block; font-size: .85rem; color: var(--st-navy-900); }
.st-radio-cards .st-radio-card small { color: var(--st-muted); font-size: .75rem; line-height: 1.35; display: block; }
.st-radio-cards input[type="radio"]:checked + .st-radio-card {
    border-color: var(--st-gold-strong);
    background: var(--st-gold-pale);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}
.st-radio-cards input[type="radio"]:checked + .st-radio-card .st-radio-dot {
    border-color: var(--st-gold-strong);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--st-gold);
}
@media (min-width: 576px) {
    .st-radio-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------
   12. Feed timeline
   ---------------------------------------------------------- */
.st-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.st-timeline::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 9px;
    inline-size: 2px;
    background: linear-gradient(180deg, var(--st-gold-line), var(--st-border));
    border-radius: 2px;
}
.st-tl-item { position: relative; padding-inline-start: 34px; padding-bottom: 16px; }
.st-tl-item:last-child { padding-bottom: 0; }
.st-tl-dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 6px;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    background: var(--st-surface);
    border: 2px solid var(--st-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--st-gold-strong);
}
.st-tl-dot.taken { border-color: var(--st-green); color: var(--st-green); }
.st-tl-dot.blocked { border-color: var(--st-amber); color: var(--st-amber); }
.st-tl-card {
    background: var(--st-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .15s ease, background .15s ease;
}
.st-tl-card:hover { border-color: var(--st-gold-line); background: #fff; }
.st-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.st-tl-head time { margin-inline-start: auto; font-size: .75rem; color: var(--st-muted); }
.st-tl-prices { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; }
.st-tl-prices .k { color: var(--st-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; display: block; }
.st-tl-note { font-size: .78rem; color: var(--st-muted); margin: 8px 0 0; }

/* ----------------------------------------------------------
   13. Learn page (public) — hero, plans, HWM, trust
   ---------------------------------------------------------- */
.st-hero {
    background:
        radial-gradient(1100px 480px at 85% -10%, rgba(212, 175, 55, .16), transparent 60%),
        radial-gradient(800px 420px at 0% 110%, rgba(30, 58, 95, .08), transparent 55%),
        linear-gradient(165deg, #FFFDF6 0%, #FFFFFF 55%, #F7F9FC 100%);
    border-bottom: 1px solid var(--st-border);
}

.st-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.st-kpi-strip .cell {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--st-shadow-sm);
}
.st-kpi-strip .v { font-size: 1.3rem; font-weight: 800; color: var(--st-navy-900); }
.st-kpi-strip .k { font-size: .72rem; color: var(--st-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
@media (min-width: 768px) {
    .st-kpi-strip .v { font-size: 1.6rem; }
}

.st-live-dot {
    display: inline-block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--st-green);
    margin-inline-end: 6px;
    animation: st-pulse 1.8s ease-in-out infinite;
}
@keyframes st-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, .35); }
    50% { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0); }
}

/* Plan cards (public) */
.st-plan-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.st-plan-card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    box-shadow: var(--st-shadow-sm);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.st-plan-card::before {
    content: "";
    position: absolute;
    inset-inline: 18px;
    inset-block-start: 0;
    block-size: 4px;
    border-end-start-radius: 4px;
    border-end-end-radius: 4px;
    background: linear-gradient(90deg, var(--st-gold), var(--st-gold-soft));
}
.st-plan-card:hover { transform: translateY(-3px); box-shadow: var(--st-shadow-lg); border-color: var(--st-gold-line); }
.st-plan-kicker { font-size: 11px; font-weight: 800; color: var(--st-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.st-plan-card h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; }
.st-plan-amt { color: var(--st-gold-strong); font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.st-plan-amt span { font-size: 1rem; color: var(--st-muted); font-weight: 600; }
.st-plan-split { display: flex; gap: 10px; margin: 8px 0 12px; }
.st-plan-split div { flex: 1; background: var(--st-gold-pale); border: 1px solid var(--st-gold-line); border-radius: 10px; padding: 10px 12px; }
.st-plan-split .k { font-size: 11px; color: var(--st-slate-light); text-transform: uppercase; letter-spacing: .04em; }
.st-plan-split .v { font-size: 1.15rem; font-weight: 800; color: var(--st-navy-900); }
.st-plan-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; color: var(--st-muted); margin: 8px 0 14px; }
.st-plan-meta b { color: var(--st-navy-900); font-weight: 700; display: block; }
.st-plan-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.st-plan-actions a { flex: 1; min-width: 120px; text-align: center; }
@media (min-width: 768px) {
    .st-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* HWM walk-through */
.st-hwm-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--st-surface); border-radius: var(--st-radius); overflow: hidden; box-shadow: var(--st-shadow-sm); }
.st-hwm-table th, .st-hwm-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--st-border); text-align: end; }
.st-hwm-table th:first-child, .st-hwm-table td:first-child { text-align: start; }
.st-hwm-table th { color: var(--st-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; background: var(--st-surface-alt); }
.st-hwm-table .neg, .st-hwm-card .neg { color: var(--st-red); }
.st-hwm-table .pos, .st-hwm-card .pos { color: var(--st-green); }
.st-hwm-table tfoot td { font-weight: 800; border-top: 2px solid var(--st-border); background: var(--st-gold-pale); }
.st-hwm-cards { display: none; }
.st-hwm-card { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--st-shadow-sm); }
.st-hwm-card .row-k { font-size: 11px; color: var(--st-slate-light); text-transform: uppercase; letter-spacing: .04em; }
.st-hwm-card .row-v { font-weight: 700; color: var(--st-navy-900); }
.st-hwm-card .row-v.pos { color: var(--st-green); }
.st-hwm-card .row-v.neg { color: var(--st-red); }
.st-hwm-card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; }
@media (max-width: 767px) {
    .st-hwm-desktop { display: none; }
    .st-hwm-cards { display: grid; gap: 10px; }
}

/* Trust strip */
.st-trust-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.st-trust-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--st-shadow-sm);
}
.st-trust-item .fas, .st-trust-item .far {
    flex: 0 0 auto;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-gold-pale);
    color: var(--st-gold-strong);
    border: 1px solid var(--st-gold-line);
}
.st-trust-item b { display: block; font-size: .92rem; color: var(--st-navy-900); }
.st-trust-item span { font-size: .8rem; color: var(--st-muted); line-height: 1.45; }
@media (min-width: 768px) {
    .st-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------
   14. FAQ polish (learn) — ct-faq-* structure owned by
   copy-trading.css; only refined here
   ---------------------------------------------------------- */
#st-faq-list .ct-faq-question { white-space: normal; align-items: flex-start; border-radius: 12px; }
#st-faq-list .ct-faq-item.open .ct-faq-answer { max-height: 720px; }
@media (max-width: 767px) {
    #st-faq-list .ct-faq-question { padding: .9rem 1rem; font-size: .9rem; }
    #st-faq-list .ct-faq-answer-inner { padding: 0 1rem 1rem; }
}

/* ----------------------------------------------------------
   15. Small screens
   ---------------------------------------------------------- */
@media (max-width: 576px) {
    .st-card { padding: 16px; }
    .st-kpi .val { font-size: 1.2rem; }
    .st-hist th, .st-hist td { padding: 8px; }
    .st-tabs button { padding: 5px 10px; font-size: 12px; }
    .st-chart-box { height: 200px; }
    .st-size-radios { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .st-plan-card, .st-card, .st-tl-card { transition: none; }
    .st-live-dot { animation: none; }
}

/* ----------------------------------------------------------
   16. Public learn page refinements
   (frame-level body/navbar overrides stay in learn.html's
   <style> block — base.html has no body-class hook, and
   un-scoped rules here would leak onto the dashboard theme)
   ---------------------------------------------------------- */
.st-hero .ct-hero-subtitle { max-width: 720px; margin-inline: auto; }
.st-hero .ct-trust-badge {
    background: var(--st-surface);
    border: 1px solid var(--st-gold-line);
    color: var(--st-navy-700);
}
.st-hero h1 { color: var(--st-navy-900); }
.st-book-card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
    padding: 20px;
}