/* ==============================================
   PSERYTE PRO TERMINAL v10.0
   Premium Trading App CSS
   ============================================== */

:root {
    --bg:        #08080d;
    --s1:        #0e0e16;
    --s2:        #14141e;
    --s3:        #1c1c28;
    --border:    #252533;
    --border2:   #32323f;
    --accent:    #6366f1;
    --accent2:   #818cf8;
    --accent3:   #a5b4fc;
    --green:     #00d97e;
    --green2:    #00b96b;
    --red:       #ff4757;
    --red2:      #e63950;
    --amber:     #f59e0b;
    --text:      #e2e4ef;
    --text2:     #a0a3b1;
    --muted:     #5a5c6e;
    --nav-h:     66px;
    --mono:      'JetBrains Mono', monospace;
    --sans:      'Outfit', sans-serif;
    --r:         14px;
    --r-sm:      8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%; width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===================== LAYOUT ===================== */
#app {
    position: fixed; inset: 0;
    overflow: hidden;
    background: var(--bg);
    isolation: isolate;
}

.section {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);   /* ← CRUCIAL: opaque so no bleed-through */
    z-index: 1;
}
/* Animation ONLY when becoming active */
.section.active {
    display: flex;
    z-index: 2;
    animation: fadeUp .2s ease-out;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Universal scroll container - used by all sections */
.scroll-area {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 10px 14px;
    padding-bottom: calc(var(--nav-h) + 28px);
    scrollbar-width: none;
    min-height: 0;
}
.scroll-area::-webkit-scrollbar { display: none; }

/* ===================== BRAND HEADER ===================== */
.brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    flex-shrink: 0;
    position: relative;
}
.brand-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 14px; right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
}

.brand-logo-wrap {
    display: flex; align-items: center; gap: 10px;
}
.brand-logo {
    position: relative;
    animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(99,102,241,0.4)); }
    50%       { filter: drop-shadow(0 0 14px rgba(99,102,241,0.7)); }
}

.brand-text-wrap { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, #fff 0%, var(--accent3) 60%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.brand-tag {
    font-size: 9px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-actions { display: flex; align-items: center; gap: 8px; }

.hdr-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--s2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text2); cursor: pointer;
    transition: all 0.15s;
}
.hdr-btn:hover { border-color: var(--accent); color: var(--accent2); }

.live-badge {
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--green);
    background: rgba(0,217,126,0.1);
    border: 1px solid rgba(0,217,126,0.3);
    border-radius: 6px;
    padding: 4px 7px;
    animation: liveBlink 2.5s ease-in-out infinite;
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ===================== CONTROLS ===================== */
.ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    flex-shrink: 0;
}

.coin-pill {
    display: flex; align-items: center; gap: 6px;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 0;
    flex-shrink: 0;
}
.coin-pill:hover { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.coin-pill-sym { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.03em; }
.coin-pill-name { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.coin-pill svg { color: var(--muted); flex-shrink: 0; }

.tf-row {
    display: flex; gap: 3px;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
    flex: 1;
}
.tf {
    flex: 1;
    background: none;
    border: none; border-radius: 6px;
    padding: 5px 4px;
    font-size: 11px; font-weight: 700; font-family: var(--sans);
    color: var(--muted); cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tf.active { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(99,102,241,0.4); }
.tf:hover:not(.active) { color: var(--text); }

.chart-resize-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--s2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text2); cursor: pointer;
    transition: all 0.15s; flex-shrink: 0;
}
.chart-resize-btn:hover { border-color: var(--accent); color: var(--accent2); }

/* ===================== PRICE/SIGNAL ===================== */
.price-signal-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 4px 14px 6px;
    flex-shrink: 0;
}
.lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin-bottom: 3px; }
.big-price { font-size: 26px; font-weight: 800; font-family: var(--mono); color: #fff; line-height: 1; }
.signal-badge { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--amber); }
.text-right { text-align: right; }

/* ===================== MULTI-TF STRIP ===================== */
.mtf-strip-wrap { flex-shrink: 0; padding-bottom: 8px; }
.mtf-strip {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 0 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mtf-strip::-webkit-scrollbar { display: none; }

.mtf-card {
    flex-shrink: 0;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 70px;
    display: flex; flex-direction: column; gap: 3px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.mtf-card:hover { border-color: var(--accent); }
.mtf-card.active-tf { border-color: var(--accent); background: rgba(99,102,241,0.1); }
.mtf-tf { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; }
.mtf-struct { font-size: 10px; font-weight: 700; color: var(--text2); }
.mtf-sig { font-size: 9px; font-weight: 600; color: var(--muted); }

/* ===================== INSIGHT STRIP ===================== */
.insight-bar {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 14px 8px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(129,140,248,0.05) 100%);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 10px;
    padding: 10px 12px;
    flex-shrink: 0;
    animation: insightGlow 4s ease-in-out infinite;
}
@keyframes insightGlow {
    0%, 100% { border-color: rgba(99,102,241,0.2); }
    50%       { border-color: rgba(99,102,241,0.4); }
}

.insight-icon { font-size: 18px; flex-shrink: 0; }
.insight-content { flex: 1; min-width: 0; }
.insight-main { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.insight-sub { font-size: 10px; color: var(--text2); margin-top: 3px; line-height: 1.3; }

/* ===================== CHART ===================== */
.chart-scroll {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    min-height: 0;
    padding-bottom: calc(var(--nav-h) + 16px);
    display: flex;
    flex-direction: column;
}
.chart-scroll::-webkit-scrollbar { display: none; }

.chart-area {
    flex-shrink: 0;
    height: 55vw;
    min-height: 220px;
    max-height: 340px;
    padding: 0 10px 10px;
    position: relative;
}
.chart-area.compact { height: 200px; max-height: 200px; }

#chartContainer { width: 100%; height: 100%; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); }
#chartContainer iframe { border-radius: var(--r); }

.chart-overlay-info {
    position: absolute;
    top: 8px; left: 18px;
    display: flex; gap: 6px;
    pointer-events: none;
    z-index: 5;
}
.chart-label {
    font-size: 10px; font-weight: 700;
    background: rgba(8,8,13,0.8);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 7px;
    color: var(--text2);
    font-family: var(--mono);
}

/* ===================== SECTION HEADER ===================== */
.sec-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 10px;
    flex-shrink: 0;
    position: relative;
}
.sec-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 14px; right: 14px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sec-header-left { display: flex; align-items: center; gap: 10px; }
.sec-header-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sec-icon { font-size: 22px; }
.pulse-ic { animation: spin 8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.sec-title { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; color: #fff; }
.sec-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.accent { color: var(--accent2); }

.ai-logo {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #4c1d95);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,0.4);
}

.tf-badge {
    font-size: 11px; font-weight: 700; font-family: var(--mono);
    color: var(--accent2);
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 6px; padding: 3px 9px;
}
.struct-mini { display: flex; gap: 4px; }
.mini-badge {
    font-size: 9px; font-weight: 800;
    border-radius: 5px; padding: 3px 7px;
}
.mini-badge.bull { background: rgba(0,217,126,0.12); color: var(--green); }
.mini-badge.bear { background: rgba(255,71,87,0.12); color: var(--red); }
.mini-badge.neutral { background: var(--s3); color: var(--text2); }

/* ===================== CARDS ===================== */
.card {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 10px;
    animation: cardSlide .25s ease-out;
}
@keyframes cardSlide {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 700;
    color: var(--text2); letter-spacing: 0.07em; text-transform: uppercase;
}
.hdr-note { margin-left: auto; font-size: 9px; color: var(--muted); font-weight: 500; text-transform: none; }
.hdr-price { margin-left: auto; font-size: 12px; font-family: var(--mono); color: var(--accent2); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ===================== S/R PANELS ===================== */
.sr-duo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 10px;
}
.sr-panel {
    background: var(--s1);
    border-radius: var(--r);
    padding: 14px 12px;
    position: relative; overflow: hidden;
}
.support-panel    { border: 1px solid rgba(0,217,126,0.3); border-left: 3px solid var(--green); }
.resistance-panel { border: 1px solid rgba(255,71,87,0.3); border-left: 3px solid var(--red); }
.support-panel::before    { content: ''; position: absolute; inset: 0; background: var(--green); opacity: 0.03; }
.resistance-panel::before { content: ''; position: absolute; inset: 0; background: var(--red);   opacity: 0.03; }

.sr-panel-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sr-panel-icon {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900;
}
.s-icon { background: rgba(0,217,126,0.15); color: var(--green); }
.r-icon { background: rgba(255,71,87,0.15); color: var(--red); }
.sr-panel-label { font-size: 8px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.sr-panel-price { font-size: 16px; font-weight: 800; font-family: var(--mono); line-height: 1.2; }
.s-price { color: var(--green); }
.r-price { color: var(--red); }
.sr-panel-dist { font-size: 9px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.sr-strength-bar {
    height: 4px; background: var(--s3); border-radius: 2px; overflow: hidden; margin-bottom: 4px;
}
.sb-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
.s-fill { background: linear-gradient(90deg, var(--green2), var(--green)); }
.r-fill { background: linear-gradient(90deg, var(--red2), var(--red)); }
.sr-strength-label { font-size: 9px; font-weight: 700; color: var(--muted); }

/* ===================== TRADE ZONES ===================== */
.zones-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.zone-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--border);
}
.zone-neutral { background: var(--s2); }
.zone-long  { background: rgba(0,217,126,0.05); border-color: rgba(0,217,126,0.2); }
.zone-short { background: rgba(255,71,87,0.05); border-color: rgba(255,71,87,0.2); }
.zone-lbl { font-size: 10px; font-weight: 700; color: var(--text2); letter-spacing: 0.05em; }
.zone-val { font-size: 11px; font-family: var(--mono); font-weight: 600; color: var(--text); max-width: 55%; text-align: right; }
.zl { color: var(--green); } .zs { color: var(--red); }

/* ===================== LEVEL LISTS ===================== */
.level-section-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
}
.s-hdr { color: var(--green); background: rgba(0,217,126,0.05); border-bottom: 1px solid rgba(0,217,126,0.1); }
.r-hdr { color: var(--red); background: rgba(255,71,87,0.05); border-bottom: 1px solid rgba(255,71,87,0.1); border-top: 1px solid var(--border); }
.level-count { font-size: 9px; font-weight: 600; opacity: 0.7; }
.level-list { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; }
.empty-list { font-size: 11px; color: var(--muted); padding: 6px 0; }

.level-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--s2);
    border-radius: 7px;
    border: 1px solid var(--border);
}
.level-price { font-size: 13px; font-weight: 700; font-family: var(--mono); min-width: 90px; }
.level-price.s { color: var(--green); }
.level-price.r { color: var(--red); }
.level-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.level-touch-bar { height: 4px; background: var(--s3); border-radius: 2px; overflow: hidden; }
.ltb-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.ltb-s { background: linear-gradient(90deg, var(--green2), var(--green)); }
.ltb-r { background: linear-gradient(90deg, var(--red2), var(--red)); }
.level-meta { font-size: 9px; color: var(--muted); }
.level-badge {
    font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.05em; flex-shrink: 0;
}
.lb-fresh  { background: rgba(167,139,250,0.18); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); }
.lb-strong { background: rgba(0,217,126,0.15); color: var(--green); }
.lb-medium { background: rgba(245,158,11,0.15); color: var(--amber); }
.lb-weak   { background: rgba(255,71,87,0.15); color: var(--red); }
.lb-flip   { background: rgba(245,158,11,0.2); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }

/* ===================== FLIPS CARD ===================== */
.flips-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.flip-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 7px;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2);
}
.flip-type { font-size: 10px; font-weight: 700; color: var(--amber); }
.flip-price { font-size: 12px; font-family: var(--mono); font-weight: 700; color: #fff; }

/* ===================== INSIGHT CARD ===================== */
.insight-card {
    background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(129,140,248,0.04) 100%);
    border-color: rgba(99,102,241,0.2);
}
.insight-para { padding: 12px 14px; font-size: 13px; color: var(--text); line-height: 1.55; }
.strat-box { margin: 0 14px 14px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); }
.strat-lbl { font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.strat-txt { font-size: 12px; color: var(--text2); line-height: 1.4; }

/* ===================== CHAT ===================== */
.chat-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    padding-bottom: calc(var(--nav-h) + 8px);
    min-height: 0;
    overflow: hidden;
}

.qp-section { padding: 10px 0 8px; flex-shrink: 0; }
.qp-label {
    font-size: 9px; font-weight: 800; color: var(--muted);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px;
}

/* Trade Now grid: 3 cols, prominent */
.qp-grid-trade {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 4px;
}
/* Learn grid: 3 cols, subtle */
.qp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }

.qp {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 8px;
    background: var(--s2); border: 1px solid var(--border); border-radius: 9px;
    font-size: 10px; font-weight: 600; font-family: var(--sans);
    color: var(--text2); cursor: pointer; transition: all .15s; text-align: left;
}
.qp:active { transform: scale(.97); }
.qp:hover  { border-color: var(--border2); color: #fff; }
.qp span:first-child { font-size: 13px; flex-shrink: 0; }

/* Trade Now variants — colored borders + tints */
.qp-sr    { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.3);  color: var(--accent3); }
.qp-long  { background: rgba(0,217,126,.07);  border-color: rgba(0,217,126,.35);  color: var(--green);   }
.qp-short { background: rgba(255,71,87,.07);  border-color: rgba(255,71,87,.35);  color: var(--red);     }
.qp-spot  { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3);  color: var(--amber);   }
.qp-flip  { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3);  color: var(--amber);   }
.qp-sl    { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.2);  color: var(--accent2); }
.qp-sent  { background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.25); color: #22d3ee;        }

/* Learn buttons — subtle */
.qp-grid .qp { background: var(--s1); padding: 6px 7px; font-size: 9.5px; }
.qp-grid .qp:hover { background: rgba(255,255,255,.03); border-color: var(--accent); color: #fff; }

.chat-msgs {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
    min-height: 0;
}
.chat-msgs::-webkit-scrollbar { display: none; }

.msg { display: flex; gap: 8px; align-items: flex-end; }
.msg.anim { animation: msgIn .2s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.msg-av {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent) 0%, #4338ca 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 900; color: #fff;
    box-shadow: 0 3px 10px rgba(99,102,241,0.3);
}
.bubble { max-width: 84%; padding: 10px 13px; font-size: 12px; line-height: 1.5; }
.ai-bubble {
    background: var(--s1); border: 1px solid var(--border);
    border-radius: 4px 12px 12px 12px; color: var(--text);
}
.user-msg { flex-direction: row-reverse; }
.user-bubble {
    background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.25);
    border-radius: 12px 4px 12px 12px; color: var(--text);
    margin-left: auto;
}
.bubble-sub { font-size: 10px; color: var(--muted); margin-top: 4px; }
.bubble strong { color: #fff; }

.typing-dots { display: flex; gap: 3px; padding: 2px; }
.td { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: tdBounce 1.3s ease-in-out infinite; }
.td:nth-child(2) { animation-delay: .18s; }
.td:nth-child(3) { animation-delay: .36s; }
@keyframes tdBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

.chat-input-row {
    display: flex; gap: 8px; padding: 8px 0 6px; flex-shrink: 0;
}
.ci {
    flex: 1;
    background: var(--s1); border: 1px solid var(--border); border-radius: 11px;
    padding: 12px 16px; font-size: 13px; font-family: var(--sans);
    color: var(--text); outline: none; transition: border-color .2s;
}
.ci:focus { border-color: var(--accent); }
.ci::placeholder { color: var(--muted); }
.send-b {
    width: 46px; height: 46px; border-radius: 11px;
    background: var(--accent); border: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; transition: all .15s; flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
}
.send-b:hover { background: #4f46e5; transform: scale(1.05); }
.send-b:active { transform: scale(.95); }

.price-chip {
    font-size: 12px; font-weight: 700; font-family: var(--mono);
    color: var(--green); background: rgba(0,217,126,0.1);
    border: 1px solid rgba(0,217,126,0.25); border-radius: 7px; padding: 5px 10px;
}

/* ===================== PULSE / FNG ===================== */
.fng-card { padding: 16px; }
.fng-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.gauge-wrap { position: relative; width: 140px; flex-shrink: 0; }
.gauge-svg { width: 140px; height: 90px; }
.gauge-anim { transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); }
.gauge-center {
    position: absolute; bottom: 4px; left: 50%;
    transform: translateX(-50%); text-align: center;
}
.fng-num { display: block; font-size: 28px; font-weight: 900; font-family: var(--mono); color: #fff; line-height: 1; }
.fng-lbl { display: block; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

.fng-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.leg { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text2); }
.ldot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.fng-bar-section { margin-bottom: 10px; }
.fng-track {
    height: 8px; background: var(--s3); border-radius: 4px; overflow: visible;
    position: relative; margin-bottom: 4px;
}
.fng-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 30%, #eab308 50%, #22d3ee 70%, #00d97e 100%);
    transition: width 1.3s cubic-bezier(.4,0,.2,1);
}
.fng-marker {
    position: absolute; top: -3px; bottom: -3px; width: 3px;
    background: #fff; border-radius: 2px; box-shadow: 0 0 8px rgba(255,255,255,.5);
    transform: translateX(-50%);
    transition: left 1.3s cubic-bezier(.4,0,.2,1);
}
.fng-track-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }
.fng-tip { font-size: 11px; color: var(--text2); text-align: center; padding-top: 4px; line-height: 1.4; }

/* ===================== LIQUIDATIONS ===================== */
.liq-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.liq-box { border-radius: var(--r-sm); padding: 12px; border: 1px solid var(--border); }
.liq-red   { background: rgba(255,71,87,0.05); border-color: rgba(255,71,87,0.2); }
.liq-green { background: rgba(0,217,126,0.05); border-color: rgba(0,217,126,0.2); }
.liq-top { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.ld-icon { font-size: 14px; font-weight: 900; }
.ld-lbl { font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.danger-col  { color: var(--red); }
.success-col { color: var(--green); }
.accent-col  { color: var(--accent2); }
.muted-col   { color: var(--muted); }
.liq-val { font-size: 12px; font-family: var(--mono); font-weight: 700; color: #fff; line-height: 1.3; }
.liq-note { font-size: 9px; color: var(--muted); margin-top: 4px; }

/* ===================== MARKET STRUCTURE ===================== */
.struct-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px; }
.struct-box { background: var(--s2); border-radius: 8px; padding: 11px; text-align: center; }
.struct-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.struct-val { font-size: 13px; font-weight: 800; color: var(--text); }

/* ===================== SETTINGS ===================== */
.settings-list { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sitem {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; background: var(--s2);
    border: 1px solid var(--border); border-radius: 9px;
    cursor: pointer; transition: all .15s; width: 100%; color: var(--text);
}
.sitem:hover { border-color: var(--accent); background: rgba(99,102,241,0.06); }
.sitem-icon { font-size: 16px; flex-shrink: 0; }
.sitem-info { flex: 1; text-align: left; }
.sitem-title { font-size: 12px; font-weight: 600; color: var(--text); }
.sitem-sub { font-size: 10px; margin-top: 2px; }

/* ===================== BOTTOM NAV ===================== */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: #070709;
    border-top: 1px solid #1a1a26;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999;
    box-shadow: 0 -8px 32px rgba(0,0,0,.7);
}

.nb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    background: none;
    border: none;
    color: #3a3a50;
    cursor: pointer;
    transition: color .18s ease;
    border-radius: 10px;
    flex: 1;
    min-width: 0;
    position: relative;
    font-family: var(--sans);
}
.nb svg { transition: transform .18s ease; }
.nb span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nb.active {
    color: #fff;
}
.nb.active svg { transform: translateY(-1px); }

/* Accent pill under active tab */
.nb.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 10px rgba(99,102,241,.8);
}

.nb:hover:not(.active) { color: #666; }
.nb:active svg { transform: scale(.9); }

/* ===================== COIN MODAL ===================== */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 300;
    display: flex; align-items: flex-end; justify-content: center;
    animation: modalFade .2s ease-out;
}
.modal-bg.hidden { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.coin-modal {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 480px;
    max-height: 80vh;
    display: flex; flex-direction: column;
    animation: slideUp .25s ease-out;
    overflow: hidden;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.coin-modal-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.coin-modal-title { font-size: 15px; font-weight: 700; color: #fff; }
.modal-close {
    background: var(--s2); border: 1px solid var(--border); border-radius: 8px;
    width: 30px; height: 30px; color: var(--text2); cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.modal-close:hover { color: #fff; border-color: var(--border2); }

.coin-search-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.cs-icon { color: var(--muted); flex-shrink: 0; }
.coin-search-inp {
    flex: 1; background: none; border: none; outline: none;
    font-size: 14px; font-family: var(--sans); color: var(--text);
}
.coin-search-inp::placeholder { color: var(--muted); }

.coin-list-container {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 8px 0;
}
.coin-list-container::-webkit-scrollbar { display: none; }
.coin-loading { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }

.coin-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; cursor: pointer; transition: background .1s;
}
.coin-item:hover { background: var(--s2); }
.coin-rank { font-size: 10px; color: var(--muted); width: 22px; text-align: center; flex-shrink: 0; font-family: var(--mono); }
.coin-sym { font-size: 13px; font-weight: 800; color: #fff; min-width: 46px; }
.coin-name { font-size: 12px; color: var(--text2); flex: 1; }
.coin-price { font-size: 12px; font-family: var(--mono); font-weight: 600; color: var(--accent2); }

/* ===================== SETTINGS MODAL ===================== */
.settings-modal {
    background: var(--s1); border: 1px solid var(--border);
    border-radius: 18px; width: calc(100% - 32px); max-width: 380px;
    overflow: hidden; animation: scaleIn .2s ease-out;
    margin: auto;
}
@keyframes scaleIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-body { padding: 18px; }
.modal-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; display: block; }
.optional-tag { font-size: 10px; color: var(--accent2); text-transform: none; font-weight: 600; }
.modal-inp {
    width: 100%; background: var(--s2); border: 1px solid var(--border); border-radius: 9px;
    padding: 11px 14px; font-size: 14px; font-family: var(--mono); color: var(--text);
    outline: none; transition: border-color .2s;
}
.modal-inp:focus { border-color: var(--accent); }
.modal-hint { font-size: 11px; color: var(--text2); margin-top: 10px; line-height: 1.5; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.btn-pri {
    flex: 1; background: var(--accent); border: none; border-radius: 9px;
    padding: 11px; font-size: 13px; font-weight: 700; font-family: var(--sans);
    color: #fff; cursor: pointer; transition: background .15s;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
}
.btn-pri:hover { background: #4f46e5; }
.btn-sec {
    flex: 1; background: var(--s2); border: 1px solid var(--border); border-radius: 9px;
    padding: 11px; font-size: 13px; font-weight: 600; font-family: var(--sans);
    color: var(--text2); cursor: pointer; transition: all .15s;
}
.btn-sec:hover { color: var(--text); border-color: var(--border2); }

/* ===================== TOASTS ===================== */
#toasts {
    position: fixed; top: 16px; right: 14px; z-index: 400;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    background: var(--s1); border: 1px solid var(--border); border-radius: 9px;
    padding: 10px 14px; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    animation: toastIn .3s ease-out; pointer-events: auto; max-width: 260px;
}
.toast.ok  { border-color: rgba(0,217,126,.4); color: var(--green); }
.toast.err { border-color: rgba(255,71,87,.4); color: var(--red); }
.toast.inf { border-color: rgba(99,102,241,.4); color: var(--accent2); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ===================== UTILS ===================== */
.app-footer { text-align: center; padding: 16px; color: var(--muted); font-size: 10px; line-height: 1.7; }

/* ===================== LOG TRADE BUTTON ===================== */
.log-trade-btn {
    background: var(--accent); border: none; border-radius: 9px;
    padding: 7px 14px; font-size: 12px; font-weight: 800;
    font-family: var(--sans); color: #fff; cursor: pointer;
    transition: all .15s; letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
}
.log-trade-btn:hover { background: #4f46e5; transform: scale(1.03); }

/* ===================== TRADE STATS ===================== */
.trade-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; margin-bottom: 10px;
}
.tstat {
    background: var(--s1); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 8px; text-align: center;
}
.tstat-val { font-size: 16px; font-weight: 800; font-family: var(--mono); color: #fff; line-height: 1; }
.tstat-lbl { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

/* ===================== TRADE ITEMS ===================== */
.trade-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 7px;
}
.trade-item:last-child { border-bottom: none; }
.trade-closed { opacity: 0.75; }
.trade-closed:hover { opacity: 1; }

.ti-top {
    display: flex; align-items: center; justify-content: space-between;
}
.ti-left { display: flex; align-items: center; gap: 7px; }
.ti-right { display: flex; align-items: center; gap: 8px; }

.ti-dir {
    font-size: 10px; font-weight: 800; padding: 3px 8px;
    border-radius: 5px; letter-spacing: 0.04em;
}
.dir-long  { background: rgba(0,217,126,0.15); color: var(--green); }
.dir-short { background: rgba(255,71,87,0.15); color: var(--red); }

.ti-coin { font-size: 13px; font-weight: 800; color: #fff; font-family: var(--mono); }
.ti-tf   { font-size: 9px; font-weight: 700; color: var(--muted); background: var(--s3); border-radius: 4px; padding: 2px 5px; }
.ti-status { font-size: 14px; }

.ti-pnl {
    font-size: 14px; font-weight: 800; font-family: var(--mono); letter-spacing: 0.02em;
}
.pnl-win  { color: var(--green); }
.pnl-loss { color: var(--red); }

.ti-close-btn {
    font-size: 10px; font-weight: 700; padding: 4px 10px;
    background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3);
    border-radius: 6px; color: var(--accent2); cursor: pointer;
    transition: all .15s; font-family: var(--sans);
}
.ti-close-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.ti-del-btn {
    font-size: 11px; width: 22px; height: 22px;
    background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.2);
    border-radius: 5px; color: var(--red); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; font-family: var(--sans);
}
.ti-del-btn:hover { background: var(--red); color: #fff; }

.ti-details {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ti-detail { font-size: 10px; color: var(--text2); }
.ti-detail b { color: #fff; font-weight: 700; }
.sl-detail b { color: var(--red); }
.tp-detail b { color: var(--green); }
.ti-time { color: var(--muted) !important; margin-left: auto; }

.ti-note {
    font-size: 10px; color: var(--muted); font-style: italic;
    background: var(--s2); border-radius: 5px; padding: 5px 8px;
}

/* ===================== TRADE FORM ===================== */
.trade-dir-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.tdir-btn {
    padding: 9px 6px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--s2); font-size: 11px; font-weight: 700;
    font-family: var(--sans); color: var(--text2); cursor: pointer;
    transition: all .15s;
}
.tdir-btn.active.tdir-long  { background: rgba(0,217,126,0.15); border-color: var(--green); color: var(--green); }
.tdir-btn.active.tdir-short { background: rgba(255,71,87,0.15); border-color: var(--red); color: var(--red); }
.tdir-btn.active.tdir-spot  { background: rgba(99,102,241,0.15); border-color: var(--accent); color: var(--accent2); }

.tform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tform-field { display: flex; flex-direction: column; gap: 5px; }
.tform-lbl { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tform-inp {
    background: var(--s2); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; font-size: 13px; font-family: var(--mono);
    color: var(--text); outline: none; transition: border-color .2s;
    width: 100%; resize: none;
}
.tform-inp:focus { border-color: var(--accent); }
.tform-inp::placeholder { color: var(--muted); }
.tform-inp[readonly] { color: var(--accent2); cursor: default; }

/* ===================== CLOSE TRADE MODAL ===================== */
.close-modal-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ===================== LEVELS SPLIT COLUMNS ===================== */
.levels-split {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    min-height: 140px;
}

.levels-divider {
    background: var(--border);
    width: 1px;
    align-self: stretch;
}

.levels-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.levels-col-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    flex-shrink: 0;
}
.s-col-hdr {
    color: var(--green);
    background: rgba(0,217,126,.06);
    border-bottom: 1px solid rgba(0,217,126,.15);
}
.r-col-hdr {
    color: var(--red);
    background: rgba(255,71,87,.06);
    border-bottom: 1px solid rgba(255,71,87,.15);
}

.level-col-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 3px 0;
}

/* Compact level row for split view */
.level-col-item {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background .15s;
}
.level-col-item:hover { background: rgba(255,255,255,.02); }
.level-col-item:last-child { border-bottom: none; }

.lci-price {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--mono);
    line-height: 1;
}
.lci-price.s { color: var(--green); }
.lci-price.r { color: var(--red); }

/* Support: bar fills left → right  */
.lci-bar {
    height: 3px;
    background: var(--s3);
    border-radius: 2px;
    overflow: hidden;
}
.lci-bar-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.lci-bar-s { background: linear-gradient(90deg, var(--green2), var(--green)); }
.lci-bar-r { background: linear-gradient(90deg, var(--red), var(--red2)); }

/* Resistance: bar fills right → left (mirror effect) */
.levels-col-r .lci-bar {
    display: flex;
    flex-direction: row-reverse;
}
.levels-col-r .lci-bar-fill {
    border-radius: 2px;
}

.lci-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.lci-touches {
    font-size: 8px;
    color: var(--muted);
    font-family: var(--mono);
}
.lci-badge {
    font-size: 7px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.lci-rec {
    font-size: 7px;
    color: var(--muted);
}
/* ── Leverage presets ── */
.lev-preset {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text2);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: var(--mono);
}
.lev-preset:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Journal coin selector button ── */
.tform-coin-btn {
    background: var(--s2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-family: var(--mono) !important;
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
}
.tform-coin-btn:hover { border-color: var(--accent) !important; }

/* ── Edit trade button ── */
.ti-edit-btn {
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 6px;
    color: var(--accent);
    font-size: 11px;
    padding: 4px 7px;
    cursor: pointer;
    transition: background .15s;
    line-height: 1;
}
.ti-edit-btn:hover { background: rgba(99,102,241,.25); }

/* ── Trade timestamps ── */
.ti-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.ti-timestamp {
    font-size: 9px;
    color: var(--muted);
    font-family: var(--mono);
}
.ti-timeago {
    font-size: 9px;
    color: var(--text2);
    margin-left: auto;
}

/* ── Leverage badge in trade cards ── */
.ti-lev {
    display: inline-block;
    background: rgba(99,102,241,.15);
    color: var(--accent);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    font-family: var(--mono);
    margin-left: 2px;
}

/* ================================================================
   PSERYTE GRID BOT — UI Styles
   ================================================================ */

/* ── Status badge ── */
.bot-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: var(--mono);
    transition: all .3s;
}
.bot-stopped {
    background: rgba(90,92,110,.15);
    color: var(--muted);
    border: 1px solid rgba(90,92,110,.3);
}
.bot-running {
    background: rgba(0,217,126,.12);
    color: var(--green);
    border: 1px solid rgba(0,217,126,.3);
    animation: botPulse 2s infinite;
}
@keyframes botPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,217,126,.35); }
    50%      { box-shadow: 0 0 0 6px rgba(0,217,126,0); }
}

/* ── Capital row ── */
.bot-cap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s2);
    border-radius: 10px;
    padding: 10px 13px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.bot-cap-btn {
    background: var(--s3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text2);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
    font-family: var(--mono);
    transition: all .15s;
}
.bot-cap-btn.active,
.bot-cap-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Balance card ── */
.bot-balance-card {
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(16,185,129,.06));
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}
.bbc-left  { flex: 1; }
.bbc-right { text-align: right; flex-shrink: 0; }
.bbc-lbl   { font-size: 8px; font-weight: 700; color: var(--muted); letter-spacing: .07em; margin-bottom: 3px; }
.bbc-val   { font-size: 22px; font-weight: 900; color: var(--green); font-family: var(--mono); line-height: 1; }
.bbc-pnl   { font-size: 18px; font-weight: 800; color: var(--green); font-family: var(--mono); }
.bbc-resets{ font-size: 9px; color: var(--muted); margin-top: 4px; }
.bbc-bar-wrap {
    height: 5px;
    background: var(--s3);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 7px;
}
.bbc-bar {
    height: 100%;
    border-radius: 4px;
    background: var(--green);
    transition: width .6s, background .3s;
}

/* ── Stats row ── */
.bot-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.bot-stat {
    background: var(--s2);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--border);
}
.bs-val { font-size: 16px; font-weight: 800; color: var(--text); font-family: var(--mono); }
.bs-lbl { font-size: 8px; color: var(--muted); font-weight: 600; letter-spacing: .05em; margin-top: 3px; }

/* ── Leverage selector ── */
.bot-lev-row {
    background: var(--s2);
    border-radius: 10px;
    padding: 10px 13px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}
.bot-lev-btn {
    background: var(--s3);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text2);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
    font-family: var(--mono);
    transition: all .15s;
}
.bot-lev-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.bot-lev-btn:hover  { background: var(--accent);  color: #fff; border-color: var(--accent);  }

/* ── Control buttons ── */
.bot-ctrl-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.bot-btn-start {
    flex: 1;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 12px;
    cursor: pointer;
    font-family: var(--mono);
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(16,185,129,.3);
    transition: all .2s;
}
.bot-btn-start:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.bot-btn-start:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.bot-btn-stop {
    flex: 0 0 80px;
    background: var(--s2);
    border: 1px solid rgba(255,71,87,.35);
    border-radius: 10px;
    color: var(--red);
    font-size: 11px;
    font-weight: 800;
    padding: 12px 10px;
    cursor: pointer;
    font-family: var(--mono);
    transition: all .2s;
}
.bot-btn-stop:hover:not(:disabled) { background: rgba(255,71,87,.1); }
.bot-btn-stop:disabled { opacity: .3; cursor: not-allowed; }

.bot-btn-reset {
    flex: 0 0 70px;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    padding: 12px 10px;
    cursor: pointer;
    transition: all .2s;
}
.bot-btn-reset:hover { border-color: var(--amber); color: var(--amber); }

/* ── Open trade 3-col grid ── */
.bot-trade-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.bot-tstat-box {
    background: var(--s2);
    border-radius: 8px;
    padding: 7px 9px;
    border: 1px solid var(--border);
}
.bts-lbl { font-size: 8px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin-bottom: 2px; }
.bts-val { font-size: 12px; font-weight: 800; font-family: var(--mono); }

/* ── Grid display ── */
.bot-grid-display {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}
.bot-grid-row {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: background .15s;
}
.bot-grid-row:last-child { border-bottom: none; }

/* State-specific row styles */
.bgr-current { background: rgba(99,102,241,.08); }
.bgr-entry   { background: rgba(245,158,11,.07); }
.bgr-tp      { background: rgba(16,185,129,.07); }
.bgr-sl      { background: rgba(255,71,87,.07);  }

.bgr-type {
    font-size: 9px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: .05em;
    width: 38px;
    flex-shrink: 0;
}
.bgr-price {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--mono);
    flex: 1;
}
.bgr-badge-wrap { flex: 0 0 60px; }
.bgr-pct {
    font-size: 9px;
    font-family: var(--mono);
    font-weight: 600;
    text-align: right;
    min-width: 48px;
}
.bgr-pill {
    display: inline-block;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    letter-spacing: .04em;
}
.bgr-pill-price { background: rgba(99,102,241,.2);  color: var(--accent); }
.bgr-pill-entry { background: rgba(245,158,11,.2);  color: var(--amber);  }
.bgr-pill-tp    { background: rgba(16,185,129,.2);  color: var(--green);  }
.bgr-pill-sl    { background: rgba(255,71,87,.2);   color: var(--red);    }

/* ── History list ── */
.bot-history-list {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
}
.bot-hist-row {
    display: flex;
    align-items: center;
    padding: 9px 13px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    transition: background .15s;
}
.bot-hist-row:last-child { border-bottom: none; }
.bot-hist-win  { background: rgba(16,185,129,.03); }
.bot-hist-loss { background: rgba(255,71,87,.03);  }
.bot-hist-reset {
    background: rgba(245,158,11,.06);
    border: 1px solid rgba(245,158,11,.15);
    border-radius: 8px;
    margin: 4px 8px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================================================================
   PSERYTE GRID BOT — EXTENDED UI STYLES v2
   ================================================================ */

/* ── Bot Tab nav ── */
.bot-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px 0;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bot-tabs::-webkit-scrollbar { display: none; }
.bot-tab {
    flex-shrink: 0;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    letter-spacing: .02em;
}
.bot-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.bot-tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

/* ── Tab panels ── */
.bot-tab-panel {
    display: none;
}
.bot-tab-panel.active {
    display: block;
}

/* ── Grid Preview ── */
.bot-preview-body {
    max-height: 280px;
    overflow-y: auto;
}
.gp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.gp-row-current {
    background: rgba(99,102,241,.08);
    border-radius: 6px;
    padding: 5px 4px;
    margin: 1px 0;
}
.gp-type  { font-size: 9px; font-weight: 800; font-family: var(--mono); width: 44px; flex-shrink: 0; letter-spacing: .04em; }
.gp-price { font-size: 12px; font-weight: 700; font-family: var(--mono); width: 90px; flex-shrink: 0; }
.gp-bar-wrap { flex: 1; height: 3px; background: var(--s3); border-radius: 2px; overflow: hidden; }
.gp-bar { height: 100%; border-radius: 2px; opacity: .6; transition: width .3s; }
.gp-pct { font-size: 9px; font-family: var(--mono); color: var(--muted); min-width: 48px; text-align: right; }

/* ── Strategy Map ── */
.bot-strategy-map { padding: 4px; }

.strat-map-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 0 12px 10px;
}

.strat-zone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 4px 0;
    font-weight: 700;
}
.resist-zone {
    background: rgba(255,71,87,.1);
    border: 1px solid rgba(255,71,87,.3);
}
.support-zone {
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.3);
}
.sz-label { font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.sz-price { font-size: 13px; font-family: var(--mono); color: var(--text); }

.strat-level {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-bottom: 1px dashed rgba(255,255,255,.05);
    position: relative;
}
.strat-long  { border-bottom-color: rgba(16,185,129,.15); }
.strat-short { border-bottom-color: rgba(255,71,87,.15); }
.strat-price { background: rgba(99,102,241,.08); border-radius: 5px; }

.strat-lv-type  { font-size: 8px; font-weight: 800; font-family: var(--mono); width: 40px; letter-spacing: .05em; }
.strat-lv-price { font-size: 11px; font-weight: 700; font-family: var(--mono); flex: 1; }
.strat-lv-line  { flex: 1; height: 1px; background: currentColor; opacity: .15; }

.strat-price-badge {
    font-size: 10px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--accent);
    background: rgba(99,102,241,.15);
    border-radius: 5px;
    padding: 2px 7px;
}
.strat-mode-chip {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .03em;
}

/* Mode rows */
.bot-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    margin-bottom: 6px;
    background: var(--s2);
    border: 1px solid var(--border);
}
.bot-mode-icon  { font-size: 18px; }
.bot-mode-title { font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .05em; }
.bot-mode-desc  { font-size: 9px; color: var(--muted); margin-top: 1px; }
.bot-mode-indicator { font-size: 14px; color: var(--muted); margin-left: auto; flex-shrink: 0; }

/* ── Backtest ── */
.bt-period-btn {
    background: var(--s3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text2);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 18px;
    cursor: pointer;
    font-family: var(--mono);
    transition: all .15s;
}
.bt-period-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bt-period-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

.bt-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.bt-res-box {
    background: var(--s2);
    border-radius: 8px;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--border);
}
.bt-res-lbl { font-size: 7px; color: var(--muted); font-weight: 700; letter-spacing: .07em; margin-bottom: 3px; }
.bt-res-val { font-size: 13px; font-weight: 800; font-family: var(--mono); color: var(--text); }

/* ── Missed trades badges ── */
.missed-badge {
    display: inline-block;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    letter-spacing: .03em;
}
.mb-win  { background: rgba(16,185,129,.2);  color: var(--green); }
.mb-loss { background: rgba(255,71,87,.2);   color: var(--red);   }
.mb-pend { background: rgba(99,102,241,.15); color: var(--accent); }
.mb-exp  { background: rgba(90,92,110,.15);  color: var(--muted); }

/* ── Performance panel ── */
.perf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.perf-stat-box {
    background: var(--s2);
    border-radius: 9px;
    padding: 10px;
    border: 1px solid var(--border);
}
.perf-lbl { font-size: 8px; color: var(--muted); font-weight: 700; letter-spacing: .07em; margin-bottom: 3px; }
.perf-val { font-size: 15px; font-weight: 800; font-family: var(--mono); color: var(--text); }

/* ── Share card ── */
.share-card {
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(16,185,129,.06));
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}
.sc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.sc-title  { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: .06em; }
.sc-sub    { font-size: 9px; color: var(--muted); margin-left: auto; }
.sc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.sc-stat  { background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 4px; }
.sc-lbl   { font-size: 8px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.sc-val   { font-size: 14px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.sc-footer { font-size: 8px; color: var(--muted); letter-spacing: .04em; }

/* ── Equity chart canvas ── */
#equityChart, #backtestChart { display: block; }

/* ── Bot quality/filter status badge ── */
.bot-quality-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--mono);
}

/* ================================================================
   PSERYTE v12.0 — New Feature Styles
   Fibonacci · Candle Patterns · S&D Zones · School · Language
   ================================================================ */

/* ── Fibonacci Card ── */
.fib-body { padding: 8px 12px 12px; }
.fib-range-bar {
    display: flex; align-items: center; gap: 6px;
    font-size: 9px; color: var(--muted);
    margin-bottom: 10px; font-family: var(--mono);
}
.fib-level-row {
    display: flex; align-items: center; gap: 0;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.fib-level-row:last-child { border-bottom: none; }
.fib-ratio {
    width: 44px; font-size: 10px; font-weight: 700;
    font-family: var(--mono); color: var(--text2);
}
.fib-price {
    flex: 1; font-size: 11px; font-weight: 700;
    font-family: var(--mono); color: var(--text);
}
.fib-golden { color: #f59e0b !important; }
.fib-bar-wrap { width: 60px; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin-right: 6px; }
.fib-bar-fill { height: 100%; border-radius: 2px; }
.fib-tag {
    font-size: 8px; font-weight: 700; padding: 2px 5px;
    border-radius: 4px; letter-spacing: .04em;
}
.fib-tag-golden { background: rgba(245,158,11,.2); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.fib-tag-near   { background: rgba(99,102,241,.2); color: var(--accent); border: 1px solid rgba(99,102,241,.3); }
.fib-tag-above  { background: rgba(0,217,126,.1); color: var(--green); }
.fib-tag-below  { background: rgba(255,71,87,.1); color: var(--red); }
.fib-price-curr { color: var(--accent2) !important; }
.fib-zone-highlight {
    background: rgba(245,158,11,.08); border: 1px dashed rgba(245,158,11,.3);
    border-radius: 6px; padding: 6px 10px; margin: 8px 0 4px;
    font-size: 10px; color: #f59e0b;
}

/* ── Candle Pattern Card ── */
.candle-pattern-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cp-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--s2); border-radius: 8px; padding: 9px 11px;
}
.cp-icon { font-size: 22px; line-height: 1; }
.cp-info { flex: 1; }
.cp-name { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.cp-desc { font-size: 9px; color: var(--muted); }
.cp-signal {
    font-size: 9px; font-weight: 800; padding: 3px 7px;
    border-radius: 5px; letter-spacing: .05em;
}
.cp-bull { background: rgba(0,217,126,.15); color: var(--green); border: 1px solid rgba(0,217,126,.2); }
.cp-bear { background: rgba(255,71,87,.15); color: var(--red); border: 1px solid rgba(255,71,87,.2); }
.cp-neutral { background: rgba(245,158,11,.15); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }

/* ── Fake Breakout Card ── */
.fake-bo-body { padding: 10px 12px; }
.fbo-row {
    display: flex; gap: 10px; align-items: flex-start;
    background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
.fbo-icon { font-size: 20px; line-height: 1.2; }
.fbo-type { font-size: 11px; font-weight: 800; color: #f59e0b; margin-bottom: 3px; }
.fbo-desc { font-size: 9px; color: var(--text2); line-height: 1.5; }
.fbo-level { font-size: 10px; font-family: var(--mono); font-weight: 700; color: var(--text); margin-top: 3px; }

/* ── Supply & Demand Zones ── */
.sd-zone-body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sd-zone-item {
    border-radius: 8px; padding: 10px 12px;
    display: flex; align-items: center; gap: 10px;
}
.sd-demand { background: rgba(0,217,126,.07); border: 1px solid rgba(0,217,126,.2); }
.sd-supply { background: rgba(255,71,87,.07); border: 1px solid rgba(255,71,87,.2); }
.sd-zone-icon { font-size: 18px; line-height: 1; }
.sd-zone-info { flex: 1; }
.sd-zone-label { font-size: 9px; font-weight: 800; letter-spacing: .06em; margin-bottom: 3px; }
.sd-zone-range { font-size: 11px; font-weight: 700; font-family: var(--mono); color: var(--text); margin-bottom: 2px; }
.sd-zone-note { font-size: 9px; color: var(--muted); }
.sd-strength-badge {
    font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 5px;
}
.sd-strong { background: rgba(0,217,126,.2); color: var(--green); }
.sd-weak   { background: rgba(245,158,11,.2); color: var(--amber); }

/* ── R:R Display ── */
.rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rr-box { background: var(--s2); border-radius: 8px; padding: 9px 10px; }
.rr-lbl { font-size: 8px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin-bottom: 3px; }
.rr-val { font-size: 14px; font-weight: 800; font-family: var(--mono); }
.rr-pass { color: var(--green); }
.rr-fail { color: var(--red); }
.rr-verdict {
    margin-top: 8px; padding: 8px 10px; border-radius: 8px;
    font-size: 10px; font-weight: 700; text-align: center;
}
.rr-verdict-pass { background: rgba(0,217,126,.1); color: var(--green); border: 1px solid rgba(0,217,126,.2); }
.rr-verdict-fail { background: rgba(255,71,87,.1); color: var(--red); border: 1px solid rgba(255,71,87,.2); }

/* ── Chat Mode Tabs ── */
.chat-mode-tabs {
    display: flex; gap: 6px; padding: 8px 14px 4px;
    border-bottom: 1px solid var(--border);
}
.cmt-btn {
    flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--s2); color: var(--text2); font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all .2s; font-family: var(--font);
}
.cmt-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Language Toggle ── */
.lang-toggle {
    background: var(--s2); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 9px; font-size: 10px; font-weight: 700; color: var(--text2);
    cursor: pointer; font-family: var(--font); white-space: nowrap;
    transition: all .2s;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-toggle.en-active { background: rgba(99,102,241,.15); color: var(--accent); border-color: var(--accent); }

/* ── Trading School ── */
/* school-panel: layout only — display controlled by JS (switchChatMode) */
.school-panel { flex-direction: column; flex: 1; overflow: hidden; }
.school-lesson-nav {
    display: flex; gap: 6px; padding: 8px 14px;
    border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto;
    flex-shrink: 0; scrollbar-width: none;
}
.school-lesson-nav::-webkit-scrollbar { display: none; }
.sl-btn {
    min-width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
    background: var(--s2); color: var(--text2); font-size: 12px; font-weight: 800;
    cursor: pointer; transition: all .2s; font-family: var(--font); flex-shrink: 0;
}
.sl-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.school-content {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    padding-bottom: calc(var(--nav-h, 60px) + 24px);
    display: flex; flex-direction: column; gap: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}
.school-content::-webkit-scrollbar { display: none; }
.school-lesson-header {
    background: linear-gradient(135deg, rgba(99,102,241,.15) 0%, rgba(79,70,229,.1) 100%);
    border: 1px solid rgba(99,102,241,.3); border-radius: 12px; padding: 16px 14px;
}
.school-lesson-num { font-size: 9px; font-weight: 800; color: var(--accent); letter-spacing: .1em; margin-bottom: 4px; }
.school-lesson-title { font-size: 17px; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.school-lesson-sub { font-size: 11px; color: var(--text2); }
.school-card {
    background: var(--s2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px;
}
.school-card-title {
    font-size: 10px; font-weight: 800; color: var(--accent2); letter-spacing: .06em; margin-bottom: 7px;
}
.school-body { font-size: 12px; color: var(--text2); line-height: 1.7; }
.school-body b { color: var(--text); }
.school-body .school-ne { color: #a78bfa; font-style: italic; }
.school-rule {
    background: rgba(245,158,11,.07); border-left: 3px solid var(--amber);
    border-radius: 0 8px 8px 0; padding: 8px 11px; margin: 8px 0;
    font-size: 11px; color: var(--amber); font-weight: 600;
}
.school-example {
    background: rgba(0,217,126,.06); border-left: 3px solid var(--green);
    border-radius: 0 8px 8px 0; padding: 8px 11px; margin: 8px 0;
    font-size: 11px; color: var(--green);
}
.school-summary {
    background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2);
    border-radius: 8px; padding: 10px 12px; margin-top: 4px;
}
.school-summary-title { font-size: 9px; font-weight: 800; color: var(--accent); letter-spacing: .06em; margin-bottom: 5px; }
.school-kp { font-size: 11px; color: var(--text2); margin: 3px 0; }
.school-kp::before { content: "✦ "; color: var(--accent); }

/* ================================================================
   PSERYTE v12.1 — Session 9 Additions
   Collapsible Levels · Bot Learning Progress · Trade History
   ================================================================ */

/* ── Collapsible Level Groups ── */
.level-groups { display: flex; flex-direction: column; gap: 6px; }
.lg-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.lg-header {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 11px 13px; background: var(--s2); border: none; cursor: pointer;
    font-family: var(--font); text-align: left; transition: background .15s;
}
.lg-header:hover { background: var(--s3); }
.lg-s-header      { border-left: 3px solid var(--green); }
.lg-r-header      { border-left: 3px solid var(--red); }
.lg-supply-header { border-left: 3px solid rgba(255,71,87,.5); }
.lg-demand-header { border-left: 3px solid rgba(0,217,126,.5); }
.lg-icon  { font-size: 13px; }
.lg-title { flex: 1; font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .03em; }
.lg-count {
    font-size: 10px; font-weight: 800; color: var(--accent); 
    background: rgba(99,102,241,.15); border-radius: 5px; padding: 2px 7px;
}
.lg-chevron { font-size: 9px; color: var(--muted); transition: transform .2s; }
.lg-header.collapsed .lg-chevron { transform: rotate(-90deg); }
.lg-body { display: none; background: var(--s1); }
.lg-body.open { display: block; }
.lg-list { display: flex; flex-direction: column; }

/* Level row in accordion */
.lg-level-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 13px; border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.lg-level-row:last-child { border-bottom: none; }
.lg-level-row:hover { background: var(--s2); }
.lg-level-price { 
    font-size: 12px; font-weight: 800; font-family: var(--mono); 
    min-width: 80px; color: var(--text);
}
.lg-level-price.lg-s { color: var(--green); }
.lg-level-price.lg-r { color: var(--red); }
.lg-level-dist { flex: 1; font-size: 9px; color: var(--muted); }
.lg-level-tag {
    font-size: 8px; font-weight: 800; padding: 2px 6px; border-radius: 5px; 
    letter-spacing: .04em; white-space: nowrap;
}
.lg-tag-fresh  { background: rgba(167,139,250,.2); color: #a78bfa; border: 1px solid rgba(167,139,250,.3); }
.lg-tag-strong { background: rgba(0,217,126,.15); color: var(--green); border: 1px solid rgba(0,217,126,.2); }
.lg-tag-medium { background: rgba(245,158,11,.15); color: var(--amber); border: 1px solid rgba(245,158,11,.2); }
.lg-tag-weak   { background: rgba(255,71,87,.15); color: var(--red); border: 1px solid rgba(255,71,87,.2); }
.lg-tag-flip   { background: rgba(245,158,11,.2); color: #f59e0b; border: 1px solid rgba(245,158,11,.4); }
.lg-tag-htf    { background: rgba(99,102,241,.15); color: var(--accent); border: 1px solid rgba(99,102,241,.3); }

/* S&D zone rows inside accordion */
.lg-zone-row {
    padding: 9px 13px; border-bottom: 1px solid var(--border);
}
.lg-zone-row:last-child { border-bottom: none; }
.lg-zone-range { font-size: 11px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.lg-zone-meta { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ── Bot Learning Progress Panel ── */
.bot-learning-panel {
    padding: 12px 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.blp-stat { display: flex; flex-direction: column; gap: 4px; }
.blp-lbl { font-size: 8px; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.blp-val { font-size: 14px; font-weight: 800; font-family: var(--mono); }
.blp-bar-wrap { height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.blp-bar { height: 100%; border-radius: 3px; transition: width .5s ease; }
.blp-bar-win    { background: var(--green); }
.blp-bar-profit { background: var(--accent2); }
.blp-bar-dd     { background: var(--red); }

/* ── Enhanced Trade History rows ── */
.bth-row {
    padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start;
}
.bth-row:last-child { border-bottom: none; }
.bth-row.win-row  { border-left: 3px solid var(--green); }
.bth-row.loss-row { border-left: 3px solid var(--red); }
.bth-icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.bth-info { flex: 1; min-width: 0; }
.bth-dir-row { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.bth-prices { font-size: 9px; color: var(--muted); margin-bottom: 2px; font-family: var(--mono); }
.bth-fee    { font-size: 8px; color: var(--muted); }
.bth-pnl { text-align: right; flex-shrink: 0; }
.bth-pnl-usd { font-size: 14px; font-weight: 800; }
.bth-pnl-pct { font-size: 9px; font-weight: 700; }

/* ================================================================
   PSERYTE v12.2 — Two-Column Key Levels Dashboard
   ================================================================ */

/* ── Trade Zones 2-col ── */
.tz-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 8px;
}
.tz-panel {
    border-radius: 10px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tz-bull { background: rgba(0,217,126,.06); border: 1px solid rgba(0,217,126,.2); }
.tz-bear { background: rgba(255,71,87,.06);  border: 1px solid rgba(255,71,87,.2); }
.tz-side-label {
    font-size: 9px; font-weight: 900; letter-spacing: .08em;
    margin-bottom: 2px;
}
.bull-label { color: var(--green); }
.bear-label { color: var(--red); }
.tz-item {
    display: flex; flex-direction: column; gap: 2px;
}
.tz-lbl {
    font-size: 8px; font-weight: 800; color: var(--muted);
    letter-spacing: .06em; text-transform: uppercase;
}
.tz-val {
    font-size: 10px; font-weight: 700; color: var(--text2);
    font-family: var(--mono); line-height: 1.3; word-break: break-word;
}
.tz-green { color: var(--green) !important; }
.tz-red   { color: var(--red)   !important; }

/* ── Two-column analysis grid ── */
.lvl-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 8px;
    align-items: start;
}
.lvl-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Unified accordion group (both col + full-width) ── */
.acc-group, .acc-full {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--s1);
}
.acc-hdr, .acc-full-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    background: var(--s2);
    border: none;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    transition: background .15s;
    min-height: 38px;
}
.acc-hdr:hover, .acc-full-hdr:hover { background: var(--s3); }

/* colour-coded left border per type */
.acc-hdr-s       { border-left: 3px solid var(--green); }
.acc-hdr-demand  { border-left: 3px solid rgba(0,217,126,.45); }
.acc-hdr-candle  { border-left: 3px solid #a78bfa; }
.acc-hdr-r       { border-left: 3px solid var(--red); }
.acc-hdr-supply  { border-left: 3px solid rgba(255,71,87,.45); }
.acc-hdr-fbo     { border-left: 3px solid var(--amber); }
.acc-hdr-flips   { border-left: 3px solid var(--amber); }
.acc-hdr-fib     { border-left: 3px solid #60a5fa; }
.acc-hdr-rr      { border-left: 3px solid var(--accent2); }
.acc-hdr-ai      { border-left: 3px solid var(--accent); }

.acc-icon  { font-size: 12px; flex-shrink: 0; }
.acc-title { flex: 1; font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.acc-note  { font-size: 8px; color: var(--muted); margin-right: 4px; }
.acc-count {
    font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
    flex-shrink: 0;
}
.acc-count-s { background: rgba(0,217,126,.15); color: var(--green); }
.acc-count-r { background: rgba(255,71,87,.15);  color: var(--red); }
.acc-chev {
    font-size: 13px; color: var(--muted);
    transition: transform .2s;
    flex-shrink: 0;
    line-height: 1;
}
/* open state — rotate chevron */
.acc-body.acc-open ~ .acc-chev,
.acc-hdr:not(.acc-collapsed) .acc-chev,
.acc-full-hdr:not(.acc-collapsed) .acc-chev { transform: rotate(90deg); }
.acc-hdr.acc-collapsed .acc-chev,
.acc-full-hdr.acc-collapsed .acc-chev { transform: rotate(0deg); }

.acc-body {
    display: none;
    background: var(--s1);
    border-top: 1px solid var(--border);
}
.acc-body.acc-open { display: block; }

/* full-width accordion strip */
.acc-full { margin-bottom: 6px; }
.acc-full-hdr { padding: 11px 13px; }

/* ── Responsive: stack on very small screens ── */
@media (max-width: 480px) {
    .lvl-2col, .tz-duo { grid-template-columns: 1fr; }
}

/* ================================================================
   PSERYTE STRATEGY ENGINE v1.0 — CSS Components
   ================================================================ */

/* ── Scan button in card header ── */
.se-scan-btn {
    margin-left: auto;
    padding: 3px 9px;
    font-size: 9px;
    font-weight: 800;
    background: rgba(139,92,246,.18);
    color: var(--accent);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .15s;
}
.se-scan-btn:hover { background: rgba(139,92,246,.32); }

/* ── Live dot pulse ── */
.se-live-dot {
    color: var(--green);
    animation: pulseDot 1.2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Strategies list ── */
.se-strategies-list { display: flex; flex-direction: column; gap: 0; }

.se-strat-row {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.se-strat-row:last-child { border-bottom: none; }

.se-strat-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    min-width: 58px;
    text-align: center;
}
.se-conf-pct { font-size: 11px; font-weight: 800; }

.se-strat-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.se-strat-toprow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.se-strat-type { font-size: 9px; font-weight: 900; color: var(--accent2); letter-spacing: .05em; }
.se-str-tag {
    font-size: 8px; font-weight: 800; padding: 1px 5px;
    background: rgba(255,255,255,.07); border-radius: 3px; color: var(--muted);
}
.se-strat-level { font-size: 10px; font-weight: 800; color: var(--text); font-family: var(--mono); }
.se-strat-sl    { font-size: 9px; color: var(--muted); font-family: var(--mono); }
.se-strat-reason { font-size: 9px; color: var(--text2); line-height: 1.45; margin-top: 2px; }
.se-strat-gate  { font-size: 9px; font-weight: 700; margin-top: 3px; }

/* ── Active trade card ── */
.se-active-trade { padding: 13px; display: flex; flex-direction: column; gap: 8px; }

.se-at-toprow {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 800;
}
.se-at-dir  { font-size: 12px; font-weight: 900; }
.se-at-type { font-size: 9px; color: var(--muted); text-transform: uppercase; flex: 1; }
.se-at-hold { font-size: 9px; color: var(--muted); }

.se-at-pnl {
    font-size: 26px;
    font-weight: 900;
    font-family: var(--mono);
    letter-spacing: -.01em;
    line-height: 1;
}

.se-at-prog-wrap {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
}
.se-at-prog {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
}

.se-at-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
    margin-top: 2px;
}
.se-at-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}
.se-at-row span:first-child { color: var(--muted); }
.se-at-row span:last-child  { font-weight: 700; font-family: var(--mono); }
.se-at-reason { font-size: 9px; color: var(--text2); line-height: 1.4; padding-top: 4px; border-top: 1px solid var(--border); }

/* ── Performance panel ── */
.se-perf-header { padding: 10px 13px 4px; }
.se-perf-title  { font-size: 11px; font-weight: 900; color: var(--accent2); letter-spacing: .03em; }

.se-perf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}
.se-ps {
    background: var(--s1);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.se-ps-lbl { font-size: 8px; font-weight: 800; color: var(--muted); letter-spacing: .05em; }
.se-ps-val { font-size: 16px; font-weight: 900; color: var(--text); font-family: var(--mono); }

/* ── Debug log ── */
.se-debug-log {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 0;
}
.se-log-row {
    display: flex;
    gap: 8px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    align-items: flex-start;
}
.se-log-time { font-size: 8px; color: var(--muted); flex-shrink: 0; padding-top: 1px; font-family: var(--mono); }
.se-log-msg  { font-size: 9px; line-height: 1.4; word-break: break-word; }

/* ── bth-rr helper ── */
.bth-rr { font-size: 8px; color: var(--muted); margin-top: 1px; }

@media (max-width: 480px) {
    .se-perf-grid { grid-template-columns: repeat(2, 1fr); }
    .se-at-grid   { grid-template-columns: 1fr; }
}

/* ================================================================
   PSERYTE ALERT NOTIFICATION SYSTEM v1.0 — CSS
   ================================================================ */

/* ── Bell button badge ── */
.alert-bell-btn { position: relative; }

.alert-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    background: var(--red);
    color: #fff;
    font-size: 8px; font-weight: 900;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--bg);
    pointer-events: none;
    animation: badgePop .2s ease;
}
@keyframes badgePop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* ── Bell shake ── */
@keyframes bellShake {
    0%,100%{transform:rotate(0)}
    10%,30%,50%{transform:rotate(-15deg)}
    20%,40%,60%{transform:rotate(15deg)}
    70%{transform:rotate(-8deg)}
    80%{transform:rotate(8deg)}
}
.bell-shake { animation: bellShake .7s ease; }

/* ── Overlay ── */
.alert-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}

/* ── Slide-up panel ── */
.alert-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 501;
    background: var(--s1);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -12px 48px rgba(0,0,0,.55);
    display: flex; flex-direction: column;
    max-height: 88vh;
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    padding-bottom: env(safe-area-inset-bottom);
}

.alert-panel-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
}

.alert-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.alert-panel-hdr-left { display: flex; align-items: center; gap: 8px; }
.alert-panel-title {
    font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--text);
}
.alert-live-dot {
    font-size: 10px; color: var(--green);
    animation: pulseDot 1.4s ease-in-out infinite;
}
.alert-count-chip {
    font-size: 9px; font-weight: 800; color: var(--muted);
    background: rgba(255,255,255,.06);
    border-radius: 5px; padding: 2px 8px;
}
.alert-close-btn {
    background: rgba(255,255,255,.07); border: none; color: var(--muted);
    font-size: 14px; cursor: pointer;
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.alert-close-btn:hover { background: rgba(255,255,255,.14); }

/* ── Sub-tabs ── */
.alert-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0; overflow-x: auto;
    scrollbar-width: none;
}
.alert-tabs::-webkit-scrollbar { display: none; }
.alert-tab {
    flex: 1; min-width: 70px;
    padding: 9px 6px; background: none; border: none;
    font-family: var(--font); font-size: 9px; font-weight: 800;
    color: var(--muted); cursor: pointer; letter-spacing: .04em;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.alert-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Tab panels ── */
.alert-tab-panel { display: none; flex: 1; overflow-y: auto; min-height: 0; }
.alert-tab-panel.active { display: flex; flex-direction: column; }

/* ── Alert list ── */
.alert-list {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0;
    padding: 8px;
}

/* ── Empty state ── */
.alert-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 36px 20px; gap: 8px; text-align: center;
}
.alert-empty-icon { font-size: 32px; opacity: .5; }
.alert-empty-title { font-size: 13px; font-weight: 700; color: var(--text2); }
.alert-empty-sub   { font-size: 10px; color: var(--muted); line-height: 1.5; max-width: 240px; }

/* ── Alert card ── */
.alert-card {
    background: var(--s2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: transform .1s;
}
.alert-card:active { transform: scale(.99); }

.alert-card-hdr {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 11px 12px 8px;
}
.alert-dir-badge {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 8px; border: 1px solid transparent;
}
.alert-time       { font-size: 8px; color: var(--muted); margin-top: 3px; }
.alert-conf       { font-size: 13px; font-weight: 900; font-family: var(--mono); }
.alert-rr         { font-size: 10px; font-weight: 700; font-family: var(--mono); }
.alert-dismiss {
    background: none; border: none; color: var(--muted);
    font-size: 13px; cursor: pointer; padding: 0; margin-left: 2px;
    flex-shrink: 0;
}

/* ── Tags ── */
.alert-asset-tag, .alert-type-tag, .alert-qual-tag, .alert-htf-badge {
    font-size: 8px; font-weight: 800; padding: 1px 5px;
    border-radius: 3px; letter-spacing: .04em;
}
.alert-asset-tag  { background: rgba(251,191,36,.12); color: #fbbf24; }
.alert-type-tag   { background: rgba(99,102,241,.15);  color: var(--accent); }
.alert-qual-tag   { background: rgba(255,255,255,.07); color: var(--muted); }
.alert-htf-badge  { background: rgba(96,165,250,.15);  color: #60a5fa; }

/* ── Trade plan grid ── */
.alert-card-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.alert-plan-row {
    background: var(--s1);
    display: flex; flex-direction: column; gap: 2px;
    padding: 7px 10px;
}
.apl { font-size: 7px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.apv { font-size: 11px; font-weight: 800; font-family: var(--mono); color: var(--text); }

/* ── Reasons list ── */
.alert-reasons {
    padding: 9px 12px 6px;
    display: flex; flex-direction: column; gap: 3px;
}
.alert-reason-row { font-size: 9px; color: var(--text2); line-height: 1.4; }

.alert-card-footer {
    padding: 4px 12px 9px;
    border-top: 1px solid rgba(255,255,255,.04);
}

/* ── Debug log ── */
.alert-debug-log {
    flex: 1; overflow-y: auto;
    padding: 4px 0;
}
.alert-log-row {
    display: flex; gap: 8px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    align-items: flex-start;
}
.alert-log-time { font-size: 8px; color: var(--muted); flex-shrink: 0; font-family: var(--mono); padding-top: 1px; }
.alert-log-msg  { font-size: 9px; line-height: 1.4; word-break: break-word; }

/* ── Settings ── */
.alert-settings-body {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 8px 0;
}
.alert-setting-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.alert-setting-row-full { justify-content: center; }
.alert-set-lbl { font-size: 11px; font-weight: 700; color: var(--text); }
.alert-set-sub { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

.alert-perm-btn {
    flex-shrink: 0;
    padding: 7px 14px; border: none; border-radius: 8px;
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 800; cursor: pointer;
    transition: background .15s;
}
.alert-perm-btn:disabled { background: rgba(255,255,255,.1); color: var(--muted); cursor: default; }

.alert-sel {
    flex-shrink: 0;
    background: var(--s3); color: var(--text);
    border: 1px solid var(--border); border-radius: 7px;
    padding: 6px 10px; font-size: 10px; font-weight: 700;
    cursor: pointer;
}
.alert-clear-btn {
    width: 100%; padding: 10px;
    background: rgba(255,71,87,.1); color: var(--red);
    border: 1px solid rgba(255,71,87,.25); border-radius: 9px;
    font-size: 11px; font-weight: 800; cursor: pointer;
    transition: background .15s;
}
.alert-clear-btn:hover { background: rgba(255,71,87,.2); }


/* ================================================================
   PSERYTE v12.3 — NEW MODULE CSS
   ================================================================ */

/* ─────────────────────────────────────────────
   PATCH: Fibonacci — extension levels + new tags
   ───────────────────────────────────────────── */
.fib-row-ext { opacity: .85; }
.fib-section-divider {
    font-size: 8px; color: var(--muted); text-align: center;
    padding: 6px 0 3px; letter-spacing: .06em;
    border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px;
}
.fib-price-ext  { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fb7185; }
.fib-tag-ext         { background: rgba(244,63,94,.15); color: #fb7185;     border:1px solid rgba(244,63,94,.3); font-size:7px; font-weight:800; padding:1px 5px; border-radius:3px; }
.fib-tag-ext-golden  { background: rgba(225,29,72,.2);  color: #e11d48;     border:1px solid rgba(225,29,72,.4); font-size:7px; font-weight:900; padding:1px 5px; border-radius:3px; }
.fib-tag-confluence  { background: rgba(99,102,241,.2); color: var(--accent);border:1px solid rgba(99,102,241,.4); font-size:7px; font-weight:800; padding:1px 5px; border-radius:3px; }
.fib-tag-vwap        { background: rgba(96,165,250,.2); color: #60a5fa;     border:1px solid rgba(96,165,250,.4); font-size:7px; font-weight:800; padding:1px 5px; border-radius:3px; }

/* ─────────────────────────────────────────────
   PATCH: R:R Card — Expected Value row
   ───────────────────────────────────────────── */
.rr-ev-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    border-radius: 0 0 9px 9px;
}
.rr-ev-lbl  { font-size: 9px; font-weight: 700; color: var(--muted); }
.rr-ev-hint { font-size: 8px; font-weight: 400; color: var(--muted); }
.rr-ev-val  { font-size: 11px; font-weight: 900; font-family: var(--mono); }
.rr-ev-pos  { color: var(--green); }
.rr-ev-neg  { color: var(--red); }

/* ─────────────────────────────────────────────
   NEW MODULE: Accordion header colours
   (VWAP, Volume Profile, SFP, Risk Calc)
   ───────────────────────────────────────────── */
.acc-hdr-vwap     { border-left-color: #60a5fa; }
.acc-hdr-vp       { border-left-color: #a78bfa; }
.acc-hdr-sfp      { border-left-color: #f97316; }
.acc-hdr-riskcalc { border-left-color: #34d399; }

/* ─────────────────────────────────────────────
   MODULE 1: VWAP
   ───────────────────────────────────────────── */
.vwap-grid { display: flex; flex-direction: column; gap: 0; }
.vwap-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.vwap-band-section { margin-top: 2px; }
.vwap-band-row { padding-left: 16px !important; opacity: .9; }
.vwap-lbl   { font-size: 9px; font-weight: 700; color: var(--muted); min-width: 72px; }
.vwap-val   { font-size: 11px; font-weight: 800; font-family: var(--mono); color: var(--text); flex: 1; }
.vwap-main  { font-size: 14px; color: #60a5fa; }
.vwap-dist  { font-size: 9px; font-weight: 700; font-family: var(--mono); min-width: 40px; text-align: right; }
.vwap-note  { font-size: 8px; color: var(--muted); font-weight: 400; font-family: var(--font); }
.vwap-rule  { font-size: 9px; color: var(--muted); padding: 10px 12px 8px; line-height: 1.5; border-top: 1px solid rgba(255,255,255,.05); }

/* ─────────────────────────────────────────────
   MODULE 2: Volume Profile
   ───────────────────────────────────────────── */
.vp-summary {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1px; background: var(--border);
    border-bottom: 1px solid var(--border);
}
.vp-sum-item {
    background: var(--s1);
    padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.vp-sum-lbl { font-size: 7px; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.vp-sum-val { font-size: 11px; font-weight: 900; font-family: var(--mono); }

.vp-chart   { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.vp-bar-row {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 4px; border-radius: 3px;
}
.vp-price-label { font-size: 8px; font-family: var(--mono); color: var(--muted); min-width: 64px; text-align: right; }
.vp-bar-track   { flex: 1; height: 12px; background: rgba(255,255,255,.04); border-radius: 2px; position: relative; overflow: visible; }
.vp-bar-fill    { height: 100%; border-radius: 2px; transition: width .3s ease; }
.vp-poc-tag     { position: absolute; right: -28px; top: 0; font-size: 7px; font-weight: 900; color: var(--amber); }
.vp-current-marker { position: absolute; right: -52px; top: 0; font-size: 7px; font-weight: 900; color: #60a5fa; white-space: nowrap; }
.vp-vol-pct     { font-size: 7px; color: var(--muted); min-width: 28px; text-align: right; }
.vp-rule        { font-size: 9px; color: var(--muted); padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.05); line-height: 1.5; }

/* ─────────────────────────────────────────────
   MODULE 3: Swing Failure Pattern
   ───────────────────────────────────────────── */
.sfp-body { display: flex; flex-direction: column; gap: 0; }
.sfp-row {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    border-left: 2px solid var(--muted);
}
.sfp-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 3px;
}
.sfp-type   { font-size: 10px; font-weight: 900; }
.sfp-age    { font-size: 8px; color: var(--muted); }
.sfp-signal { font-size: 9px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.sfp-levels {
    display: grid; grid-template-columns: auto 1fr auto 1fr;
    gap: 2px 8px; margin-bottom: 5px; align-items: center;
}
.sfp-lbl { font-size: 7px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.sfp-val { font-size: 10px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.sfp-desc { font-size: 9px; color: var(--text2); line-height: 1.4; }

/* ─────────────────────────────────────────────
   MODULE 4: Risk Management — Interactive Calc
   ───────────────────────────────────────────── */
.rc-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 12px;
}
.rc-field { display: flex; flex-direction: column; gap: 4px; }
.rc-lbl   { font-size: 8px; font-weight: 800; color: var(--muted); letter-spacing: .05em; }
.rc-inp {
    background: var(--s3); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 8px 10px;
    font-size: 12px; font-family: var(--mono); font-weight: 700;
    outline: none; transition: border-color .15s;
}
.rc-inp:focus { border-color: var(--accent); }
.rc-autofill {
    grid-column: 1 / -1;
    background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.35);
    color: var(--accent); border-radius: 8px; padding: 9px;
    font-size: 11px; font-weight: 800; cursor: pointer; font-family: var(--font);
    transition: background .15s;
}
.rc-autofill:hover { background: rgba(99,102,241,.25); }

.rc-output { padding: 0 12px 12px; }
.rc-output-grid { display: flex; flex-direction: column; gap: 0; background: var(--s2); border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.rc-output-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.rc-output-row:last-child { border-bottom: none; }
.rc-out-lbl { font-size: 9px; font-weight: 700; color: var(--muted); }
.rc-out-val { font-size: 11px; font-weight: 900; font-family: var(--mono); color: var(--text); }
.rc-pass    { color: var(--green) !important; }
.rc-fail    { color: var(--red)   !important; }


/* ─────────────────────────────────────────────
   FIX 3 (v12.3): Portfolio Risk Bar
   Sits between sec-header and bot-tabs
   ───────────────────────────────────────────── */
.portfolio-risk-wrap {
    padding: 6px 14px 8px;
    background: var(--s2);
    border-bottom: 1px solid var(--border);
}
.portfolio-risk-hdr {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
}
.portfolio-risk-label {
    font-size: 7px; font-weight: 800; color: var(--muted);
    letter-spacing: .07em; text-transform: uppercase;
}
.portfolio-risk-pct {
    font-size: 9px; font-weight: 900; font-family: var(--mono);
}
.portfolio-risk-track {
    height: 4px; background: rgba(255,255,255,.08);
    border-radius: 2px; overflow: hidden;
}
.portfolio-risk-fill {
    height: 100%; border-radius: 2px;
    transition: width .4s ease, background .3s;
}
.portfolio-risk-tip {
    display: block; font-size: 8px; color: var(--muted);
    margin-top: 3px; font-family: var(--mono);
}

/* ================================================================
   PSERYTE v12.4 — EMPEROR BRAIN CARD
   ================================================================ */

.acc-hdr-emperor { border-left-color: #f59e0b; }

/* ── No-trade state ── */
.eb-no-trade { padding: 12px; }
.eb-nt-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eb-nt-icon   { font-size: 20px; }
.eb-nt-title  { font-size: 11px; font-weight: 900; color: var(--muted); }
.eb-nt-reason { font-size: 10px; color: var(--text2); margin-bottom: 8px; background: rgba(255,255,255,.04); padding: 8px 10px; border-radius: 7px; border-left: 2px solid var(--amber); }
.eb-nt-watch  { font-size: 9px; color: var(--muted); white-space: pre-wrap; line-height: 1.6; }

/* ── Trade setup state ── */
.eb-setup { display: flex; flex-direction: column; gap: 0; }

.eb-setup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 8px; gap: 8px; flex-wrap: wrap;
}
.eb-bias-chip {
    font-size: 11px; font-weight: 900; padding: 4px 10px;
    border-radius: 20px; letter-spacing: .03em;
}
.eb-signal-label {
    font-size: 9px; font-weight: 800; color: var(--muted);
    letter-spacing: .06em; text-transform: uppercase;
}

/* Confidence bar */
.eb-conf-wrap   { padding: 0 12px 10px; }
.eb-conf-label  { display: flex; justify-content: space-between; font-size: 8px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.eb-conf-pct    { font-size: 11px; font-weight: 900; font-family: var(--mono); }
.eb-conf-track  { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.eb-conf-fill   { height: 100%; border-radius: 3px; transition: width .5s ease, background .3s; }

/* Setup grid */
.eb-grid { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.eb-row  { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.eb-row:last-child { border-bottom: none; }
.eb-lbl  { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.eb-val  { font-size: 12px; font-weight: 900; font-family: var(--mono); color: var(--text); }

/* Insight section */
.eb-insight-section { padding: 12px 12px 8px; border-bottom: 1px solid var(--border); }
.eb-insight-lbl  { font-size: 8px; font-weight: 900; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.eb-insight-body { font-size: 11px; color: var(--text2); line-height: 1.6; }

/* Trade plan section */
.eb-plan-section { padding: 12px; }
.eb-plan-lbl  { font-size: 8px; font-weight: 900; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.eb-plan-body {
    font-size: 10px; color: var(--text2); line-height: 1.7;
    white-space: pre-wrap; font-family: var(--font);
    background: rgba(255,255,255,.03); border-radius: 8px;
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.06);
    margin: 0;
}

/* ================================================================
   PSERYTE v12.4 — CHAT CARD SYSTEM (cr-*)
   ================================================================ */

/* Bubble container upgrade */
.cr-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 4px 12px 12px 12px !important;
}

/* ── Context chip (coin / price / structure) ── */
.cr-context-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.cr-ctx-coin  { font-size: 9px; font-weight: 900; color: var(--muted); letter-spacing: .07em; }
.cr-ctx-price { font-size: 10px; font-weight: 900; font-family: var(--mono); color: var(--text); }
.cr-ctx-struct{ font-size: 9px; font-weight: 800; }

/* ── Section divider block ── */
.cr-block {
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; flex-direction: column; gap: 2px;
}
.cr-block:first-of-type { border-top: none; }

/* ── Section header ── */
.cr-section-hdr {
    font-size: 9px; font-weight: 900; color: var(--muted);
    letter-spacing: .08em; text-transform: uppercase;
    padding: 10px 12px 4px; margin: 0;
}

/* ── Regular text ── */
.cr-text {
    font-size: 12px; line-height: 1.6; color: var(--text2);
    padding: 3px 12px; margin: 0;
}
.cr-text:first-of-type { padding-top: 10px; }

/* ── Gap spacer ── */
.cr-gap { height: 6px; }

/* ── Bullet points ── */
.cr-bullet {
    font-size: 11px; color: var(--text2); line-height: 1.5;
    padding: 2px 12px 2px 22px; position: relative; margin: 1px 0;
}
.cr-bullet::before { content: '•'; position: absolute; left: 12px; color: var(--accent); }
.cr-bullet-num::before { content: counter(li); counter-increment: li; }

/* ── Bold text inside responses ── */
.cr-bold { color: #fff; font-weight: 800; }

/* ── Value rows (Entry / SL / TP / Invalidation) ── */
.cr-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
    gap: 8px;
}
.cr-row:last-child { border-bottom: none; }
.cr-lbl {
    font-size: 9px; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
}
.cr-val {
    font-size: 11px; font-weight: 900; font-family: var(--mono);
    color: var(--text); text-align: right;
}
.cr-row-entry { background: rgba(0,217,126,.04); }
.cr-row-sl    { background: rgba(255,71,87,.04); }
.cr-row-tp    { background: rgba(0,217,126,.04); }
.cr-row-inv   { background: rgba(255,71,87,.04); }
.cr-entry { color: var(--green) !important; }
.cr-sl    { color: var(--red)   !important; }
.cr-tp    { color: #4ade80     !important; }
.cr-inv   { color: var(--red)   !important; opacity: .75; }

/* ── Confidence row ── */
.cr-conf-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; flex-wrap: wrap;
}
.cr-conf-val { font-size: 13px; font-weight: 900; font-family: var(--mono); }
.cr-conf-bar-wrap {
    flex: 1; height: 4px; background: rgba(255,255,255,.08);
    border-radius: 2px; overflow: hidden; min-width: 60px;
}
.cr-conf-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }

/* ── AI avatar upgrade ── */
.msg-av { font-size: 15px; }

/* ─────────────────────────────────────────────
   v12.4 NEW MODULE: Accordion header colours
   ───────────────────────────────────────────── */
.acc-hdr-retestqual { border-left-color: #f59e0b; }
.acc-hdr-trendline  { border-left-color: #60a5fa; }

/* ─────────────────────────────────────────────
   v12.4 RETEST QUALITY CARD
   ───────────────────────────────────────────── */
.rq-row {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.rq-row:last-child { border-bottom: none; }
.rq-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.rq-dir   { font-size: 10px; font-weight: 900; }
.rq-level {
    font-size: 11px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--text);
    flex: 1;
}
.rq-badge {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.rq-desc {
    font-size: 9px;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 8px;
}
.rq-mod-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.rq-mod-lbl { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.rq-mod-val { font-size: 10px; font-weight: 900; font-family: var(--mono); }
.rq-guide {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    background: rgba(255,255,255,.03);
    padding: 6px 8px;
    border-radius: 5px;
    margin-top: 4px;
}
.rq-guide-lbl { font-size: 8px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.rq-guide-txt { font-size: 9px; color: var(--text2); line-height: 1.4; }

/* ─────────────────────────────────────────────
   v12.4 DIAGONAL TRENDLINE CARD
   ───────────────────────────────────────────── */
.tl-row {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.tl-row:last-child { border-bottom: none; }
.tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.tl-type   { font-size: 10px; font-weight: 900; }
.tl-signal {
    font-size: 8px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.tl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 6px;
    overflow: hidden;
}
.tl-cell {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    border-right: 1px solid rgba(255,255,255,.04);
}
.tl-cell:nth-child(even) { border-right: none; }
.tl-cell:nth-child(3), .tl-cell:nth-child(4) { border-bottom: none; }
.tl-lbl { display: block; font-size: 7px; font-weight: 800; color: var(--muted); text-transform: uppercase; margin-bottom: 2px; }
.tl-val { display: block; font-size: 11px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.tl-anchors {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 5px 8px;
    background: rgba(255,255,255,.03);
    border-radius: 5px;
}
.tl-anc-lbl { font-size: 8px; font-weight: 700; color: var(--muted); }
.tl-anc-val { font-size: 9px; font-weight: 800; font-family: var(--mono); color: var(--text); }
.tl-anc-sep { font-size: 9px; color: var(--muted); margin: 0 2px; }
.tl-desc { font-size: 9px; color: var(--text2); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   PSERYTE v12.4 — REDESIGN LAYER
   UI redesign CSS. All original IDs/classes preserved above.
   New classes prefixed v2- to avoid conflicts.
═══════════════════════════════════════════════════════════ */

/* ── TOP BAR ── */
.v2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px 5px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    min-height: 44px;
}
.v2-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}
.v2-brand-name {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: .08em;
    line-height: 1;
}
.v2-brand-sub {
    display: block;
    font-size: 7px;
    font-weight: 700;
    color: var(--accent2);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: 2px;
}
.v2-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.v2-icon-btn {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--s2);
    border: 1px solid var(--border);
    color: var(--text2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    position: relative;
}
.v2-icon-btn:hover { background: var(--s3); color: var(--text); border-color: var(--border2); }
.v2-icon-btn:active { transform: scale(.93); }
.v2-live-pill {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--green);
    background: rgba(0,217,126,.1);
    border: 1px solid rgba(0,217,126,.25);
    border-radius: 20px;
    padding: 3px 8px;
    margin-left: 4px;
}

/* ── COIN + TF ROW ── */
.v2-ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 4px;
    flex-shrink: 0;
}
.v2-coin-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--s2);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text);
    transition: background .15s;
    min-width: 0;
}
.v2-coin-btn:hover { background: var(--s3); }
.v2-coin-btn:active { transform: scale(.97); }
.v2-coin-sym {
    font-size: 13px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--text);
}
.v2-coin-name {
    font-size: 9px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}
.v2-tf-group {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.v2-tf {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--sans);
    cursor: pointer;
    transition: all .15s;
    letter-spacing: .04em;
}
.v2-tf:hover { background: var(--s2); color: var(--text2); }
.v2-tf.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,.4);
}

/* ── HERO SIGNAL CARD ── */
.v2-hero {
    margin: 0 12px 6px;
    background: linear-gradient(135deg, #0f0f1a 0%, #12121e 100%);
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.v2-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.6), transparent);
}
.v2-hero-left { flex: 1; min-width: 0; }
.v2-hero-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.v2-price {
    font-size: 24px;
    font-weight: 900;
    font-family: var(--mono);
    color: var(--text);
    line-height: 1;
    letter-spacing: -.01em;
}
.v2-signal-chip {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--s3);
    color: var(--accent2);
    border: 1px solid rgba(99,102,241,.3);
    text-transform: uppercase;
    white-space: nowrap;
}
.v2-hero-pair {
    font-size: 9px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .04em;
    margin-top: 2px;
}
.v2-pair-sym { color: var(--text2); font-weight: 700; }
.v2-pair-tf  { color: var(--accent2); }
.v2-hero-right {
    text-align: right;
    flex-shrink: 0;
}
.v2-conf-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.v2-conf-lbl {
    font-size: 7px;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.v2-conf-val {
    font-size: 20px;
    font-weight: 900;
    font-family: var(--mono);
    color: var(--amber);
    line-height: 1;
}

/* ── MTF STRIP ── */
.v2-mtf-wrap {
    padding: 0 12px 8px;
    flex-shrink: 0;
}

/* ── SECTION HEADER (redesigned) ── */
.v2-sec-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.v2-sec-hdr-left { display: flex; align-items: center; gap: 10px; }
.v2-sec-hdr-right { display: flex; align-items: center; gap: 6px; }
.v2-sec-icon { font-size: 18px; }
.v2-sec-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2px;
}
.v2-sec-sub {
    font-size: 9px;
    color: var(--muted);
    font-weight: 600;
}
.v2-tf-badge-inline {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent2);
}

/* ── LAYER LABELS ── */
.v2-layer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
}
.v2-layer-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.decision-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.6); }
.core-dot     { background: #6366f1; box-shadow: 0 0 6px rgba(99,102,241,.6); }
.adv-dot      { background: var(--muted); }

/* Emperor Brain gets extra prominence on Analysis page */
.v2-emperor-acc {
    margin: 0 0 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(245,158,11,.25) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.v2-emperor-hdr {
    background: linear-gradient(135deg, #1a1508 0%, #141411 100%) !important;
    border-bottom: 1px solid rgba(245,158,11,.15) !important;
}
.v2-emperor-badge {
    background: rgba(245,158,11,.15);
    color: var(--amber);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
}

/* ── ADVANCED ANALYSIS TOGGLE ── */
.v2-adv-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 12px;
    margin: 4px 0;
    transition: background .15s;
    user-select: none;
}
.v2-adv-toggle:hover { background: rgba(255,255,255,.03); }
.v2-adv-toggle:active { background: rgba(255,255,255,.05); }
.v2-adv-label {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 1;
}
.v2-adv-count {
    font-size: 8px;
    font-weight: 700;
    color: var(--accent2);
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 20px;
    padding: 2px 8px;
}
.v2-adv-chev {
    color: var(--muted);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.v2-adv-open .v2-adv-chev { transform: rotate(180deg); }

.v2-adv-panel {
    animation: fadeUp .2s ease-out;
}

/* ── ACTIVE TRADE CARD (Bot) ── */
.v2-active-trade-card {
    border: 1px solid rgba(0,217,126,.35) !important;
    background: linear-gradient(135deg, #09140f 0%, #0a110e 100%) !important;
    box-shadow: 0 0 20px rgba(0,217,126,.08);
}
.v2-trade-hdr {
    color: var(--green) !important;
    font-weight: 800 !important;
}
.v2-live-dot {
    color: var(--green);
    font-size: 8px;
    margin-right: 4px;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ── BOT CONTROL CARD ── */
.v2-bot-ctrl-card {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
}
.v2-bot-top {
    padding: 2px 0 0;
}

/* ── BOT STYLE SELECTOR ── */
.v2-bot-style-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px 4px;
    flex-wrap: wrap;
}
.v2-bot-style-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .05em;
    flex-shrink: 0;
}
.v2-bot-style-btns {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.v2-style-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--s2);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    font-family: var(--sans);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.v2-style-btn:hover { background: var(--s3); color: var(--text2); border-color: var(--border2); }
.v2-style-btn.active {
    background: rgba(99,102,241,.2);
    border-color: rgba(99,102,241,.5);
    color: var(--accent2);
}

/* ── MARKET PAGE — INSTITUTIONAL GRID ── */
.v2-inst-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.v2-inst-card {
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}
.v2-inst-lbl {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.v2-inst-val {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}
.v2-inst-sub {
    font-size: 8px;
    color: var(--muted);
    font-weight: 500;
}

/* ── NAV — updated icon styles, font unchanged ── */
.nb span {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* ── INSIGHT BAR — hide from chart, keep in DOM for JS ── */
.v2-insight-bar { display: none !important; }

/* ── CHART OVERLAY INFO — hidden, label now in hero ── */
.chart-overlay-info { display: none !important; }

/* ── BRAND HEADER (original) — suppress so v2 topbar shows ── */
.brand-header { display: none !important; }

/* Ctrl row (original) — suppress */
.ctrl-row { display: none !important; }

/* Price-signal-row (original) — suppress (v2-hero replaces) */
.price-signal-row { display: none !important; }

/* MTF strip original wrapper padding override */
.mtf-strip-wrap { padding: 0 !important; margin: 0 !important; }

/* ── SIGNAL CHIP COLOR OVERRIDES (for v2-signal-chip) ── */
#stateDisplay.signal-badge { display: none !important; }  /* original badge hidden */

/* ── MISC POLISH ── */
.v2-emperor-acc .acc-full-hdr { border-radius: 0 !important; }

/* Ensure chart-scroll doesn't constrain height on trade tab */
.chart-scroll {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Override section header for original sections we kept */
.sec-header {
    border-bottom: 1px solid var(--border);
}

/* ── ACC COLLAPSED CHEVRON ── */
.acc-hdr-trendline.acc-collapsed .acc-chev,
.acc-hdr-retestqual.acc-collapsed .acc-chev,
.acc-hdr-fib.acc-collapsed .acc-chev,
.acc-hdr-vwap.acc-collapsed .acc-chev,
.acc-hdr-vp.acc-collapsed .acc-chev,
.acc-hdr-rr.acc-collapsed .acc-chev,
.acc-hdr-riskcalc.acc-collapsed .acc-chev,
.acc-hdr-ai.acc-collapsed .acc-chev {
    transform: rotate(-90deg);
}

/* ── EMPEROR BRAIN on ANALYSIS — badge text sync ── */
#emperorBrainBadgeAnalysis {
    background: rgba(245,158,11,.15);
    color: var(--amber);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    margin-left: auto;
}

/* ── LAYER LABELS position in scroll-area ── */
[data-section="levels"] .scroll-area > .v2-layer-label:first-child {
    padding-top: 12px;
}

/* ── Trendline card always shows (not display:none by default) ── */
#trendlineCard { display: block; }


/* ═══════════════════════════════════════════════════════════════
   PSERYTE v12.5 — SMART MONEY NARRATIVE + TRADE PROBABILITY CSS
═══════════════════════════════════════════════════════════════ */

/* ── Narrative card accordion accent ── */
.v2-smn-acc {
    margin-bottom: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(99,102,241,.22) !important;
}
.acc-hdr-smn {
    background: linear-gradient(135deg, #0e0e1b 0%, #121220 100%) !important;
    border-bottom: 1px solid rgba(99,102,241,.15) !important;
}
.v2-smn-badge {
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(99,102,241,.35);
    background: rgba(99,102,241,.12);
    color: var(--accent2);
    margin-left: auto;
}

/* Narrative body */
.smn-body { padding: 12px 14px; }
.smn-loading { font-size: 10px; color: var(--muted); padding: 8px 0; }

.smn-wrap { display: flex; flex-direction: column; gap: 10px; }

.smn-headline {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255,255,255,.03);
    border-radius: 10px;
    padding: 11px 12px;
    border-left: 3px solid var(--accent);
}
.smn-hl-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.smn-hl-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.55;
}

.smn-bullets { display: flex; flex-direction: column; gap: 6px; }
.smn-bullet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.smn-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent2);
    flex-shrink: 0;
    margin-top: 5px;
}
.smn-text {
    font-size: 10px;
    color: var(--text2);
    line-height: 1.6;
}

.smn-path {
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.18);
    border-radius: 8px;
    padding: 9px 12px;
}
.smn-path-lbl {
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent2);
    display: block;
    margin-bottom: 4px;
}
.smn-path-txt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

.smn-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2px;
}
.smn-conf-chip {
    font-size: 9px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
    border: 1px solid;
}
.smn-update {
    font-size: 8px;
    color: var(--muted);
}

/* ── Trade Probability card ── */
.v2-prob-acc {
    margin-bottom: 8px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,217,126,.18) !important;
}
.acc-hdr-prob {
    background: linear-gradient(135deg, #0a140f 0%, #0c1210 100%) !important;
    border-bottom: 1px solid rgba(0,217,126,.12) !important;
}
.v2-prob-badge {
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(0,217,126,.3);
    background: rgba(0,217,126,.1);
    color: var(--green);
    margin-left: auto;
}

.tp-body { padding: 12px 14px; }
.tp-loading { font-size: 10px; color: var(--muted); padding: 8px 0; }

.tp-wrap { display: flex; flex-direction: column; gap: 10px; }

/* Seeded note */
.tp-seeded-note {
    font-size: 9px;
    color: var(--amber);
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.2);
    border-radius: 7px;
    padding: 7px 10px;
    line-height: 1.5;
}

/* Hero stats row */
.tp-hero {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tp-stat-main {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tp-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.tp-big {
    font-size: 20px;
    font-weight: 900;
    font-family: var(--mono);
    line-height: 1;
}

/* Setup label row */
.tp-setup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tp-setup-chip {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent2);
    background: rgba(99,102,241,.1);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* Streak */
.tp-streak {
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 10px;
}
.tp-streak-win {
    background: rgba(0,217,126,.08);
    border: 1px solid rgba(0,217,126,.2);
    color: var(--green);
}
.tp-streak-loss {
    background: rgba(255,71,87,.08);
    border: 1px solid rgba(255,71,87,.2);
    color: var(--red);
}

/* Section label */
.tp-section-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 0 4px;
}

/* By-type breakdown bars */
.tp-by-type { display: flex; flex-direction: column; gap: 6px; }
.tp-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tp-type-lbl {
    font-size: 8px;
    font-weight: 700;
    color: var(--text2);
    width: 96px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-type-bar-wrap {
    flex: 1;
    height: 5px;
    background: var(--s3);
    border-radius: 3px;
    overflow: hidden;
}
.tp-type-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.tp-type-pct {
    font-size: 9px;
    font-weight: 800;
    font-family: var(--mono);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}
.tp-type-n {
    font-size: 8px;
    color: var(--muted);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
}

/* Summary wins/losses/total row */
.tp-summary-row {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.tp-sum {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.tp-sum-lbl {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.tp-sum-val {
    font-size: 15px;
    font-weight: 900;
    font-family: var(--mono);
}


/* ═══════════════════════════════════════════════════════════════
   PSERYTE v12.6 — FEATURE CSS
   1. Advanced Menu | 2. AI Insight | 3. Hero Fix | 4. Glow
   5. Entry Zone | 6. MTF Align | 7. Bot Badge | 8. Mentor
   9. School Toggle | 10. Liquidity Heatmap | 11. Trade Timeline
═══════════════════════════════════════════════════════════════ */

/* ── 1. ANALYSIS ⋯ BUTTON ── */
.adv-menu-btn {
    background: var(--s3);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text2);
    font-size: 16px;
    font-weight: 900;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1;
    letter-spacing: .04em;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.adv-menu-btn:active { background: var(--accent); color: #fff; }

/* Advanced menu overlay */
.adv-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 300;
    backdrop-filter: blur(2px);
}

/* Advanced menu slide-up modal */
.adv-menu-modal {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 301;
    background: #0e0e18;
    border-top: 1px solid var(--border2);
    border-radius: 22px 22px 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.adv-menu-modal.open {
    transform: translateY(0);
}
.adv-menu-handle {
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 3px;
    margin: 12px auto 0;
    flex-shrink: 0;
}
.adv-menu-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.adv-menu-hdr-left { display: flex; flex-direction: column; gap: 2px; }
.adv-menu-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .03em;
}
.adv-menu-sub {
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.adv-menu-close {
    background: var(--s3);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text2);
    font-size: 14px;
    flex-shrink: 0;
}
.adv-menu-scroll {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px 12px;
    padding-bottom: 28px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.adv-menu-scroll::-webkit-scrollbar { display: none; }

/* ── 3 & 4. HERO CARD LAYOUT FIX + GLOW ── */
/* Fix stacking layout */
.v2-hero-left {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Ensure price is the biggest element */
.v2-price {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}
/* Signal chip below price */
.v2-signal-chip {
    display: inline-flex !important;
    width: fit-content !important;
    align-self: flex-start !important;
}
/* No overlap */
.v2-hero-price-row { display: none !important; }

/* Glow classes (feature 4) */
.v2-hero--long {
    border-color: rgba(0,217,126,.4) !important;
    box-shadow: 0 0 20px rgba(0,217,126,.12), 0 0 6px rgba(0,217,126,.08) !important;
}
.v2-hero--short {
    border-color: rgba(255,71,87,.4) !important;
    box-shadow: 0 0 20px rgba(255,71,87,.12), 0 0 6px rgba(255,71,87,.08) !important;
}
.v2-hero--flip {
    border-color: rgba(245,158,11,.4) !important;
    box-shadow: 0 0 20px rgba(245,158,11,.1) !important;
}
.v2-hero { transition: box-shadow .4s ease, border-color .4s ease; }

/* ── 5. ENTRY ZONE OVERLAY ── */
.entry-zone-overlay {
    position: absolute;
    bottom: 18px;
    right: 16px;
    background: rgba(99,102,241,.18);
    border: 1px solid rgba(99,102,241,.45);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    pointer-events: none;
    z-index: 5;
    backdrop-filter: blur(4px);
}
.ez-label {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent2);
}
.ez-range {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}

/* ── 6. MTF ALIGNMENT BAR ── */
.mtf-align-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 3px;
    flex-shrink: 0;
}
.mtf-align-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.mtf-align-dots {
    display: flex;
    gap: 5px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.mtf-align-dots::-webkit-scrollbar { display: none; }
.mtf-align-pill {
    flex-shrink: 0;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    transition: all .15s;
    min-width: 42px;
}
.mtf-align-pill:active,
.mtf-align-pill.active-tf {
    border-color: var(--accent);
    background: rgba(99,102,241,.1);
}
.mtf-ap-tf {
    font-size: 8px;
    font-weight: 900;
    color: var(--muted);
    letter-spacing: .06em;
}
.mtf-ap-dot { font-size: 12px; line-height: 1; }
.mtf-ap-struct {
    font-size: 7px;
    font-weight: 700;
    color: var(--text2);
    white-space: nowrap;
}
.mtf-align-score {
    font-size: 9px;
    font-weight: 800;
    color: var(--amber);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--mono);
}

/* ── CHART TAB: fix chart height + add scroll below ── */
[data-section="chart"] .chart-area {
    height: clamp(160px, 33vh, 220px) !important;
    flex: none !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
}
.trade-scroll {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 8px 12px;
    padding-bottom: calc(var(--nav-h) + 24px);
    scrollbar-width: none;
    min-height: 0;
}
.trade-scroll::-webkit-scrollbar { display: none; }

/* ── 2. AI STRATEGY INSIGHT + 7. BOT STATUS + 11. TRADE TIMELINE ── */
.trade-card {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 8px;
    overflow: hidden;
}
.tc-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}
.tc-icon { font-size: 14px; }
.tc-title {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text2);
    flex: 1;
}
.tc-time {
    font-size: 8px;
    color: var(--muted);
    font-family: var(--mono);
}
.tc-live-dot {
    color: var(--green);
    font-size: 10px;
    animation: pulse 1.6s ease-in-out infinite;
}
.tc-body {
    padding: 10px 12px;
}
.tc-loading {
    font-size: 10px;
    color: var(--muted);
    padding: 4px 0;
}

/* AI Insight rows */
.ai-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.ai-row:last-child { border-bottom: none; }
.ai-row-icon { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.ai-row-content { flex: 1; }
.ai-row-label {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.ai-row-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}
.ai-action-box {
    margin-top: 8px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 9px;
    padding: 9px 11px;
}
.ai-action-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 4px;
    display: block;
}
.ai-action-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* Bot status card */
.tc-bot-active {
    border-color: rgba(0,217,126,.25) !important;
    background: linear-gradient(135deg, #0a140f, #0c1210) !important;
}
.bs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.bs-item {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 9px;
}
.bs-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.bs-val {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--mono);
}
.bs-status-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text2);
}
.bs-status-chip {
    font-size: 8px;
    font-weight: 800;
    border-radius: 20px;
    padding: 2px 8px;
    border: 1px solid;
}

/* Trade Timeline (feature 11) */
.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.timeline-steps::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(to bottom, var(--accent)66, var(--border));
}
.tl-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    position: relative;
}
.tl-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--s3);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: var(--accent2);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.tl-step:last-child .tl-num {
    background: rgba(99,102,241,.15);
    border-color: var(--accent2);
}
.tl-content { flex: 1; padding-top: 4px; }
.tl-event {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}
.tl-sub {
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px;
}
.tl-next {
    margin-top: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(129,140,248,.06));
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 10px;
    padding: 9px 12px;
}
.tl-next-lbl {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 4px;
}
.tl-next-txt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* ── 8. MENTOR COMPACT HEADER ── */
.mentor-hdr-compact {
    padding: 8px 14px 6px !important;
    min-height: 0 !important;
}
.mentor-hdr-compact .sec-title { line-height: 1.2 !important; }
.ai-logo-sm {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.25);
    display: flex; align-items: center; justify-content: center;
}

/* Chat messages take more space */
[data-section="chat"] .chat-msgs {
    min-height: 0 !important;
    flex: 1 !important;
}
[data-section="chat"] .chat-wrap {
    min-height: 0 !important;
}

/* Chat input — flex-shrink keeps it at bottom of flex column */
.chat-input-row {
    display: flex; gap: 8px;
    flex-shrink: 0;
    padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 6px);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* ── 9. SCHOOL VISUAL LESSON TOGGLE ── */
.school-visual-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--s3);
    border: 1px solid var(--border);
    border-radius: 9px;
    margin: 4px 0 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    flex-shrink: 0;
}
.school-visual-toggle .svt-chev {
    font-size: 12px;
    transition: transform .25s ease;
    color: var(--muted);
    flex-shrink: 0;
}
.school-visual-toggle.open .svt-chev { transform: rotate(180deg); }
.school-visual-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
.school-visual-wrap.open { max-height: 400px; }

/* ── 10. LIQUIDITY HEATMAP ── */
.liq-heatmap-card { border-color: var(--border2) !important; }
.liq-heatmap-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lhm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid;
}
.lhm-item.lhm-short {
    background: rgba(255,71,87,.06);
    border-color: rgba(255,71,87,.2);
}
.lhm-item.lhm-long {
    background: rgba(0,217,126,.06);
    border-color: rgba(0,217,126,.2);
}
.lhm-item.lhm-neutral {
    background: rgba(245,158,11,.05);
    border-color: rgba(245,158,11,.15);
}
.lhm-icon { font-size: 16px; flex-shrink: 0; }
.lhm-info { flex: 1; }
.lhm-lbl {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.lhm-short .lhm-lbl { color: var(--red); }
.lhm-long  .lhm-lbl { color: var(--green); }
.lhm-neutral .lhm-lbl { color: var(--amber); }
.lhm-range {
    font-size: 12px;
    font-weight: 800;
    font-family: var(--mono);
    color: var(--text);
}
.lhm-sub { font-size: 8px; color: var(--muted); margin-top: 2px; }
.lhm-bar-wrap {
    width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.lhm-strength {
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lhm-short .lhm-strength { color: var(--red); }
.lhm-long  .lhm-strength { color: var(--green); }
.lhm-neutral .lhm-strength { color: var(--amber); }
.lhm-bar {
    width: 6px;
    height: 28px;
    background: var(--s3);
    border-radius: 3px;
    overflow: hidden;
}
.lhm-bar-fill {
    width: 100%;
    border-radius: 3px;
    transition: height .4s ease;
}
.lhm-short  .lhm-bar-fill { background: var(--red); }
.lhm-long   .lhm-bar-fill { background: var(--green); }
.lhm-neutral .lhm-bar-fill { background: var(--amber); }


/* ═══════════════════════════════════════════════════════════════
   PSERYTE v12.7 — POLISH & BUG FIXES
═══════════════════════════════════════════════════════════════ */

/* ── HERO: bigger, crisper price ── */
.v2-price {
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    font-family: var(--mono) !important;
    color: #ffffff !important;
}

/* ── HERO: confidence column — number-only, clean ── */
#heroConfPct {
    font-size: 20px !important;
    font-weight: 900 !important;
    font-family: var(--mono) !important;
    line-height: 1 !important;
    transition: color .35s ease !important;
}

/* ── HERO: signal chip — clean inline chip below price ── */
.v2-signal-chip {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(99,102,241,.3) !important;
    background: rgba(99,102,241,.12) !important;
    color: var(--accent2) !important;
    text-transform: uppercase !important;
    transition: color .2s, background .2s, border-color .2s !important;
    margin-top: 4px !important;
}

/* ── HERO GLOW — higher contrast pulses ── */
.v2-hero--long {
    border-color: rgba(0,217,126,.5) !important;
    box-shadow: 0 0 24px rgba(0,217,126,.18), 0 0 8px rgba(0,217,126,.12) !important;
    animation: heroGlowLong 2.4s ease-in-out infinite !important;
}
.v2-hero--short {
    border-color: rgba(255,71,87,.5) !important;
    box-shadow: 0 0 24px rgba(255,71,87,.18), 0 0 8px rgba(255,71,87,.12) !important;
    animation: heroGlowShort 2.4s ease-in-out infinite !important;
}
.v2-hero--flip {
    border-color: rgba(245,158,11,.5) !important;
    box-shadow: 0 0 20px rgba(245,158,11,.14) !important;
    animation: heroGlowFlip 2.4s ease-in-out infinite !important;
}
@keyframes heroGlowLong {
    0%,100% { box-shadow: 0 0 18px rgba(0,217,126,.14), 0 0 6px rgba(0,217,126,.08); }
    50%      { box-shadow: 0 0 30px rgba(0,217,126,.26), 0 0 12px rgba(0,217,126,.16); }
}
@keyframes heroGlowShort {
    0%,100% { box-shadow: 0 0 18px rgba(255,71,87,.14), 0 0 6px rgba(255,71,87,.08); }
    50%      { box-shadow: 0 0 30px rgba(255,71,87,.26), 0 0 12px rgba(255,71,87,.16); }
}
@keyframes heroGlowFlip {
    0%,100% { box-shadow: 0 0 16px rgba(245,158,11,.10); }
    50%      { box-shadow: 0 0 28px rgba(245,158,11,.22); }
}

/* ── MTF ALIGNMENT BAR — visual polish only (layout at source) ── */
.mtf-align-bar {
    background: var(--s1) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin: 0 12px 4px !important;
    padding: 4px 10px !important;
    gap: 5px !important;
}
.mtf-align-pill {
    min-width: 50px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    gap: 3px !important;
    flex-direction: column !important;
    align-items: center !important;
}
.mtf-ap-tf {
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    color: var(--muted) !important;
}
.mtf-ap-dot { font-size: 11px !important; line-height: 1 !important; }
.mtf-ap-struct {
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}
.mtf-align-score {
    font-size: 9px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--border) !important;
}

/* ── ADVANCED MENU BUTTON — more prominent ── */
.adv-menu-btn {
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    background: var(--s2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text2) !important;
    transition: all .15s !important;
}
.adv-menu-btn:hover, .adv-menu-btn:active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* ── ADVANCED MENU MODAL — slide-up with better shadow ── */
.adv-menu-modal {
    max-height: 85vh !important;
    box-shadow: 0 -12px 48px rgba(0,0,0,.6), 0 -4px 16px rgba(0,0,0,.4) !important;
}
.adv-menu-modal.open {
    transform: translateY(0) !important;
}

/* ── MENTOR CHAT — fixed input row, max messages area ── */
[data-section="chat"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
[data-section="chat"] .sec-header,
[data-section="chat"] .mentor-hdr-compact {
    flex-shrink: 0 !important;
}
[data-section="chat"] .chat-mode-tabs {
    flex-shrink: 0 !important;
}
/*
  IMPORTANT: Do NOT set display on #chatModePanel / #schoolModePanel here.
  JS (switchChatMode) controls visibility via inline style.display = 'flex'|'none'.
  CSS display:flex !important would override inline display:none — causing both
  panels to appear simultaneously (the overlap bug).
  Only set flex layout properties here; display is owned by JS.
*/
[data-section="chat"] #chatModePanel,
[data-section="chat"] #schoolModePanel {
    flex: 1 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* display intentionally omitted — JS sets this */
}
[data-section="chat"] .chat-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    padding: 0 12px !important;
    padding-bottom: 0 !important;
    /* NOTE: display is intentionally NOT set here.
       #chatModePanel has class chat-wrap. If we set display:flex !important,
       JS cannot hide it with style.display='none' (CSS !important beats inline).
       Visibility is controlled by the .mentor-panel-hide class below. */
}
[data-section="chat"] .qp-section {
    flex-shrink: 0 !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}
[data-section="chat"] .qp-section::-webkit-scrollbar { display: none; }
[data-section="chat"] #chatMessages {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 0 !important;
    scrollbar-width: none !important;
}
[data-section="chat"] #chatMessages::-webkit-scrollbar { display: none; }
[data-section="chat"] .chat-input-row {
    flex-shrink: 0 !important;
    padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    border-top: 1px solid var(--border) !important;
    background: var(--bg) !important;
}

/* ── TRADE CARDS — tighter, cleaner ── */
.trade-card {
    border-radius: 12px !important;
}
.tc-hdr {
    padding: 9px 12px 7px !important;
}

/* ── BOT STATUS CARD — green accent top border ── */
.tc-bot-active {
    border-top: 2px solid rgba(0,217,126,.4) !important;
}

/* ── TIMELINE step numbers — bigger, more contrast ── */
.tl-num {
    background: rgba(99,102,241,.15) !important;
    border: 1.5px solid var(--accent) !important;
    color: #a5b4fc !important;
}

/* ── LIQUIDITY HEATMAP label improvements ── */
.lhm-range {
    font-size: 11px !important;
    letter-spacing: -.01em !important;
}

/* ── FOOTER version bump ── */
.app-footer::after { content: " · v12.7"; color: var(--muted); }


/* ══════════════════════════════════════════════════════════════
   MENTOR PANEL TOGGLE — v12.9  (MUST stay at very end of file)

   The .mentor-panel-hide class uses maximum specificity + !important
   so it beats ANY earlier display rule in the entire stylesheet.
   JS adds/removes this class to toggle panels — never sets style.display.
   ══════════════════════════════════════════════════════════════ */

/* This beats everything — 3 selectors + !important + last in file */
[data-section="chat"] #chatModePanel.mentor-panel-hide,
[data-section="chat"] #schoolModePanel.mentor-panel-hide,
.mentor-panel-hide {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Restore flex layout when panel IS visible */
[data-section="chat"] #chatModePanel:not(.mentor-panel-hide),
[data-section="chat"] .chat-wrap:not(.mentor-panel-hide) {
    display: flex !important;
    flex-direction: column !important;
}
[data-section="chat"] #schoolModePanel:not(.mentor-panel-hide) {
    display: flex !important;
    flex-direction: column !important;
}

/* ═══════════════════════════════════════════════
   v13 — Structure Events (CHoCH) card
═══════════════════════════════════════════════ */
.acc-hdr-choch { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.acc-hdr-choch:hover { background: linear-gradient(135deg, #1e1e38 0%, #1a253f 100%); }

/* ═══════════════════════════════════════════════
   v13 — FVG / Liquidity card header
═══════════════════════════════════════════════ */
.acc-hdr-fvg { background: linear-gradient(135deg, #0d2137 0%, #0a1929 100%); }
.acc-hdr-fvg:hover { background: linear-gradient(135deg, #0f2740 0%, #0c1f30 100%); }

/* ═══════════════════════════════════════════════
   v13 — Pattern Memory grid stats
═══════════════════════════════════════════════ */
.pm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.pm-stat {
    background: var(--surface2);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.pm-val {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}
.pm-lbl {
    font-size: 9px;
    color: var(--muted);
    margin: 0 0 4px;
    letter-spacing: .05em;
    text-transform: uppercase;
}