/* =====================================================================
   Maverick Trade AI — app.css
   Premium trading-terminal design system (hand-crafted, no framework)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#070a12; --bg-2:#0a0e18;
  --panel:#0e1320; --panel-2:#111726; --elev:#161d2e; --hover:#1a2334;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.04);
  --text:#eaedf6; --muted:#98a2bd; --faint:#5d6884;
  --blue:#5b8cff; --blue-2:#3b6dff; --blue-dim:rgba(91,140,255,.14);
  --green:#2dd4a7; --green-2:#1fae87; --green-dim:rgba(45,212,167,.14);
  --red:#ff5d6e; --red-2:#e23950; --red-dim:rgba(255,93,110,.14);
  --gold:#f5b740;
  --grad:linear-gradient(135deg,#5b8cff,#7c6bff);
  --grad-green:linear-gradient(135deg,#2dd4a7,#27b3d4);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter","Noto Sans Thai",system-ui,sans-serif;
  --sb:248px; --r:14px; --r2:10px; --r3:7px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;letter-spacing:.005em;line-height:1.5;
  background-image:radial-gradient(900px 600px at 80% -10%,rgba(91,140,255,.10),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(45,212,167,.08),transparent 55%);
  background-attachment:fixed;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#222b3d;border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#2e3a52;background-clip:content-box}
::selection{background:rgba(91,140,255,.3)}
.mono{font-family:var(--mono)}
.up,.profit-text,.pos,.res-win{color:var(--green)!important}
.down,.loss-text,.neg,.res-loss{color:var(--red)!important}

/* ============ LAYOUT ============ */
.sb{position:fixed;left:0;top:0;height:100vh;width:var(--sb);background:linear-gradient(180deg,#0b1018,#080b13);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 0;z-index:50}
.sb-brand{display:flex;align-items:center;gap:11px;padding:0 22px 22px}
.sb-logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(91,140,255,.4);flex:0 0 auto;overflow:hidden}
.sb-logo img{width:100%;height:100%;object-fit:cover}
.sb-brand h1{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.1;
  background:linear-gradient(90deg,#fff,#b9c6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sb-brand p{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:3px;font-weight:700}
.sb-nav{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.sb-sec{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:14px 12px 6px}
.sb-link{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:var(--r2);color:var(--muted);
  font-size:13.5px;font-weight:600;position:relative;transition:.16s;cursor:pointer}
.sb-link .mi{font-size:20px;width:22px;text-align:center;opacity:.85}
.sb-link:hover{background:var(--hover);color:var(--text)}
.sb-link.active{color:#fff;background:linear-gradient(90deg,rgba(91,140,255,.22),rgba(91,140,255,.04))}
.sb-link.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:var(--blue)}
.sb-cta{margin:8px 16px 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r2);
  background:var(--grad);color:#fff;font-weight:700;font-size:13px;box-shadow:0 8px 22px rgba(91,140,255,.35);transition:.16s}
.sb-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sb-foot{margin:16px 16px 0;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.sb-foot .ava{width:36px;height:36px;border-radius:10px;overflow:hidden;border:1px solid var(--line);flex:0 0 auto}
.sb-foot .ava img{width:100%;height:100%;object-fit:cover}
.sb-foot b{font-size:12.5px;display:block}
.sb-foot span{font-size:10px;color:var(--green);font-family:var(--mono)}

.main{margin-left:var(--sb);min-height:100vh;display:flex;flex-direction:column}
.tb{position:sticky;top:0;height:62px;background:rgba(8,11,18,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;gap:18px;z-index:40}
.tb-ticker{display:flex;gap:10px;overflow:hidden}
.tk{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;white-space:nowrap}
.tk .s{color:var(--muted);font-weight:600}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.tb-clock{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.tb-bal{text-align:right}
.tb-bal .l{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700}
.tb-bal .v{font-family:var(--mono);font-size:15px;font-weight:700}
.btn-exec{padding:9px 18px;border-radius:9px;background:var(--blue-dim);color:var(--blue);border:1px solid rgba(91,140,255,.35);
  font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:.15s;cursor:pointer}
.btn-exec:hover{background:rgba(91,140,255,.25)}
.content{padding:26px 28px 60px;max-width:1680px;width:100%;margin:0 auto;flex:1}

/* ============ PAGE / HEADERS ============ */
.page{display:none;animation:fade .35s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:flex-end;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.phead .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:21px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(91,140,255,.2),rgba(45,212,167,.12));border:1px solid var(--line)}
.phead h1{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.phead .sub{color:var(--muted);font-size:13px;margin-top:3px}
.phead .right{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ============ PANELS ============ */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));border:1px solid var(--line);
  border-radius:var(--r);position:relative;backdrop-filter:blur(8px)}
.panel.pad{padding:20px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.panel-h h3{font-size:14.5px;font-weight:700}
.panel-h .mi{color:var(--blue)}
.row{display:flex;gap:18px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.center{text-align:center}

/* ============ KPI ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px}
.ico{display:inline-grid;place-items:center;width:22px;font-size:15px;flex:0 0 auto}
.sb-link .ico,.sb-cta .ico{font-size:16px}
.api-status{display:flex;gap:18px;flex-wrap:wrap;padding:11px 18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);margin-bottom:18px;font-size:11.5px}
.api-status .it{display:flex;align-items:center;gap:7px;color:var(--muted)}
.api-status .d{width:8px;height:8px;border-radius:50%}
.api-status .d.on{background:var(--green);box-shadow:0 0 0 3px rgba(45,212,167,.18)}
.api-status .d.off{background:var(--faint)}
.api-status .d.warn{background:var(--gold);box-shadow:0 0 0 3px rgba(245,183,64,.18)}

/* ---- top bar: search / status / lang / ticker strip ---- */
.tb-search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:9px;padding:0 12px}
.tb-search input{border:none;background:transparent;padding:9px 0;font-size:12.5px}
.tb-search span{color:var(--faint);font-size:13px}
.tb-stat{display:flex;gap:14px;align-items:center}
.tb-stat .it{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.tb-stat .d{width:7px;height:7px;border-radius:50%}
.tb-stat .d.on{background:var(--green);box-shadow:0 0 0 3px rgba(45,212,167,.16)}
.tb-stat .d.off{background:var(--faint)}.tb-stat .d.warn{background:var(--gold)}
.lang-btn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:7px 11px;font-size:11px;font-weight:700;cursor:pointer}
.lang-btn:hover{color:var(--text)}
.ticker-strip{position:sticky;top:62px;z-index:39;display:flex;gap:8px;overflow-x:auto;padding:8px 26px;background:rgba(8,11,18,.6);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2);scrollbar-width:none}
.ticker-strip::-webkit-scrollbar{display:none}

/* ---- AI signal cards ---- */
.sigcard{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative}
.sigcard.buy{border-left:3px solid var(--green)}.sigcard.sell{border-left:3px solid var(--red)}
.sigcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sigcard-top .sym{font-family:var(--mono);font-weight:700;font-size:15px}
.sig-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:12px;margin-bottom:10px}
.sig-rows .r{display:flex;justify-content:space-between;border-bottom:1px solid var(--line-2);padding-bottom:5px}
.sig-rows .r span{color:var(--faint)}.sig-rows .r b{font-family:var(--mono)}
.sig-exp{font-size:11.5px;color:var(--muted);line-height:1.55;background:rgba(91,140,255,.05);border:1px solid var(--line);border-radius:8px;padding:10px}
.sig-status{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px}
.sig-status.waiting{background:rgba(245,183,64,.16);color:var(--gold)}
.sig-status.triggered{background:var(--green-dim);color:var(--green)}
.sig-status.expired{background:rgba(255,255,255,.07);color:var(--faint)}

/* ---- settings ---- */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.set-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.set-row:last-child{border:none}.set-row .k{color:var(--muted)}
.checklist{list-style:none;padding:0;margin:0;font-size:12.5px}
.checklist li{display:flex;align-items:center;gap:9px;padding:8px 0;color:var(--muted)}
.checklist li::before{content:"✓";color:var(--green);font-weight:800}
.btn-danger{background:linear-gradient(135deg,#ff5d6e,#e23950);color:#fff;border:none;border-radius:var(--r3);font-weight:700;font-size:12.5px;padding:11px 17px;cursor:pointer}
.banner{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r2);font-size:12.5px;line-height:1.55;margin-bottom:16px;border:1px solid}
.banner.sim{background:var(--blue-dim);border-color:rgba(91,140,255,.3);color:#acc4ff}
.banner.live{background:var(--red-dim);border-color:rgba(255,93,110,.3);color:#ffb3bb}
.banner.amber{background:rgba(245,183,64,.08);border-color:rgba(245,183,64,.3);color:#f5cd7a}

/* ---- legal modal ---- */
#legal-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.legal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);max-width:680px;width:100%;max-height:82vh;overflow:auto;padding:28px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.legal-card h2{font-size:21px;margin-bottom:6px}
#legal-body{color:var(--muted);font-size:13.5px;line-height:1.8;margin-top:12px}
#legal-body h4{color:var(--text);margin:16px 0 6px;font-size:14px}
#legal-x{position:absolute;right:16px;top:14px;background:none;border:none;color:var(--faint);font-size:19px;cursor:pointer}
#legal-x:hover{color:var(--text)}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden;transition:.18s}
.kpi:hover{border-color:rgba(91,140,255,.3);transform:translateY(-2px)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,140,255,.10),transparent 70%)}
.kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.kpi .v{font-family:var(--mono);font-size:27px;font-weight:700;margin-top:8px;letter-spacing:-.01em}
.kpi .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden}
.kpi .bar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.hero-bal{display:flex;align-items:center;gap:26px;background:linear-gradient(135deg,rgba(91,140,255,.1),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--r);padding:18px 24px}
.hero-bal .l{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700;margin-bottom:6px}
.hero-bal .big{font-family:var(--mono);font-size:38px;font-weight:700;letter-spacing:-.02em}
.hero-bal .pl{font-family:var(--mono);font-size:17px;font-weight:700}
.hero-bal .sep{width:1px;height:46px;background:var(--line)}

/* ============ TABLE ============ */
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.tbl thead th{font-family:var(--sans);text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl thead th:first-child{text-align:left}
.tbl tbody td{padding:11px 16px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
.tbl tbody td:first-child{text-align:left;font-weight:600}
.tbl tbody tr{transition:.12s}
.tbl tbody tr:hover td{background:rgba(91,140,255,.05)}
.tbl .act{text-transform:uppercase;font-size:10.5px;font-weight:700;letter-spacing:.04em;font-family:var(--sans)}

/* ============ BUTTONS / BADGE / FIELDS ============ */
.btn,.btn-primary,.btn-ghost,.btn-ai,.btn-buy,.btn-sell{border:none;border-radius:var(--r3);font-weight:700;font-size:12.5px;
  padding:11px 17px;transition:.15s;cursor:pointer;letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(91,140,255,.3)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--text)}
.btn-ai{width:100%;margin-top:12px;background:var(--grad);color:#fff}
.btn-ai:hover{filter:brightness(1.1)}
.btn-buy{background:linear-gradient(135deg,var(--green),var(--green-2));color:#04231a;box-shadow:0 5px 16px rgba(45,212,167,.28)}
.btn-sell{background:linear-gradient(135deg,var(--red),var(--red-2));color:#fff;box-shadow:0 5px 16px rgba(255,93,110,.28)}
.btn-buy:hover,.btn-sell:hover{filter:brightness(1.06);transform:translateY(-1px)}
.badge{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.05);padding:5px 11px;border-radius:99px;border:1px solid var(--line)}
.seg{display:inline-flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:6px 13px;border-radius:6px;cursor:pointer;transition:.14s}
.seg button.on{background:var(--blue-dim);color:var(--blue)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
input,select,textarea{background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:var(--r3);color:var(--text);
  padding:11px 13px;font-size:13px;outline:none;transition:.15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:rgba(91,140,255,.55);background:rgba(0,0,0,.42);box-shadow:0 0 0 3px var(--blue-dim)}
input[type=range]{padding:0;accent-color:var(--blue)}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);cursor:pointer}
.switch input{width:auto}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
code{background:rgba(255,255,255,.07);padding:2px 6px;border-radius:5px;font-family:var(--mono);font-size:.9em}
h4{font-size:14px;font-weight:700;margin-bottom:13px}

/* ============ DASHBOARD: market overview / heatmap / signals ============ */
.mkt-act{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.heat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.heat-tile{border-radius:var(--r2);padding:16px;min-height:92px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line)}
.heat-tile .n{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;opacity:.92}
.heat-tile .c{font-family:var(--mono);font-size:18px;font-weight:700}
.sig{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:var(--r2);padding:13px 14px;display:flex;justify-content:space-between;align-items:center;transition:.15s}
.sig:hover{border-color:rgba(91,140,255,.3)}
.sig .sym{font-family:var(--mono);font-weight:700;font-size:13.5px}
.sig .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:3px}
.sig .conf{text-align:right}
.sig .conf .l{font-size:9px;text-transform:uppercase;color:var(--faint);font-weight:700;letter-spacing:.05em}
.sig .conf .v{font-family:var(--mono);font-weight:700;color:var(--blue);font-size:15px}
.tag-buy{background:var(--green-dim);color:var(--green);padding:3px 9px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase}
.tag-sell{background:var(--red-dim);color:var(--red);padding:3px 9px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase}

/* ============ STRATEGY READINESS CARDS ============ */
.strat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.strat{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));border:1px solid var(--line);
  border-radius:var(--r);padding:17px;transition:.18s;position:relative;overflow:hidden}
.strat:hover{transform:translateY(-2px)}
.strat.pass{border-color:rgba(45,212,167,.45);box-shadow:0 0 0 1px rgba(45,212,167,.2),0 10px 30px rgba(45,212,167,.08)}
.strat-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.strat-top>span:first-child{font-size:17px}
.strat-top .nm{font-weight:700;font-size:13.5px;flex:1;line-height:1.2}
.strat-top .sc{font-family:var(--mono);font-weight:800;font-size:17px;color:var(--text)}
.strat.pass .strat-top .sc{color:var(--green)}
.dirtag{display:inline-block;font-size:10px;font-weight:800;padding:4px 11px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:11px}
.dirtag.BUY{background:var(--green-dim);color:var(--green)}
.dirtag.SELL{background:var(--red-dim);color:var(--red)}
.dirtag.none{background:rgba(255,255,255,.06);color:var(--faint)}
.meter{height:7px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin:6px 0 11px}
.meter span{display:block;height:100%;border-radius:99px;transition:width .6s}
.meter .buy{background:var(--grad-green)}.meter .sell{background:linear-gradient(90deg,#ff5d6e,#e23950)}.meter .idle{background:#3a455e}
.strat-note{font-size:11.5px;color:var(--faint);line-height:1.5}

/* ============ AI / bias / confidence ============ */
.ai-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.ai-head h3{font-size:15px;font-weight:700}
.bias-pill{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:99px}
.bias-pill.bullish{background:var(--green-dim);color:var(--green)}
.bias-pill.bearish{background:var(--red-dim);color:var(--red)}
.bias-pill.neutral{background:rgba(255,255,255,.07);color:var(--muted)}
.ai-headline{font-size:15px;font-weight:600;margin:4px 0}
.ai-summary{color:var(--muted);font-size:13px;line-height:1.7;margin:10px 0}
.conf{margin-top:14px}
.conf .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-bottom:7px;font-weight:600}
.conf .bar{height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.conf .bar span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .6s}

/* ============ multi-tf / levels ============ */
.tf-row{display:flex;gap:9px;flex-wrap:wrap}
.tf{flex:1;min-width:62px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:11px;text-align:center}
.tf-n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.tf-d{font-weight:700;font-size:12.5px;margin-top:4px}
.tf-d.bullish{color:var(--green)}.tf-d.bearish{color:var(--red)}.tf-d.neutral{color:var(--muted)}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.levels .h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-bottom:9px;font-weight:700}
.lvl{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:7px;margin-bottom:6px;font-family:var(--mono);font-size:12.5px;background:rgba(255,255,255,.03)}
.lvl.res{border-left:2px solid var(--red)}.lvl.sup{border-left:2px solid var(--green)}
.lvl span{color:var(--faint);font-size:10px}

/* ============ news / calendar / sentiment ============ */
.news-item{display:flex;gap:13px;padding:13px;border-radius:var(--r2);transition:.15s;border:1px solid transparent}
.news-item:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
.news-item .stime{font-family:var(--mono);font-size:11px;color:var(--faint);min-width:44px;padding-top:2px}
.news-item .ttl{font-size:13.5px;font-weight:600;line-height:1.45}
.news-go{opacity:.45;font-size:11px}
.news-item .src{font-size:11.5px;color:var(--faint);margin-top:6px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.tag{padding:2px 9px;border-radius:99px;font-size:10px;font-weight:700}
.tag.bullish{background:var(--green-dim);color:var(--green)}.tag.bearish{background:var(--red-dim);color:var(--red)}.tag.neutral{background:rgba(255,255,255,.07);color:var(--muted)}
.impact{font-size:10.5px;font-weight:700}.impact.up{color:var(--green)}.impact.down{color:var(--red)}.impact.flat{color:var(--muted)}
.impact-live{display:flex;align-items:center;gap:13px;padding:15px 19px;border-radius:var(--r);background:linear-gradient(90deg,var(--blue-dim),transparent);border:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.il-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(45,212,167,.18)}
.il-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
.il-dir{font-weight:700;font-size:14px}.il-dir.up{color:var(--green)}.il-dir.down{color:var(--red)}.il-dir.flat{color:var(--muted)}
.il-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto}
.cal-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cal-table th{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:9px;font-weight:700;border-bottom:1px solid var(--line)}
.cal-table td{padding:10px 9px;border-bottom:1px solid var(--line-2);text-align:right}
.cal-table td:nth-child(1),.cal-table td:nth-child(3){text-align:left}
.imp{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.imp.high{background:var(--red)}.imp.medium{background:var(--gold)}.imp.low{background:var(--faint)}
.cur{background:rgba(255,255,255,.06);padding:2px 8px;border-radius:5px;font-family:var(--mono);font-size:11px}
.sent-bar{display:flex;height:11px;border-radius:99px;overflow:hidden;background:var(--panel-2)}
.sent-bar .b{background:var(--green)}.sent-bar .n{background:var(--gold)}.sent-bar .r{background:var(--red)}
.sent-legend{display:flex;gap:18px;margin-top:11px;font-size:11.5px;color:var(--muted)}
.sent-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.drivers{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:2}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;margin-bottom:9px}
.stat .v{font-family:var(--mono);font-size:25px;font-weight:700}
.stat .v.green{color:var(--green)}.stat .v.red{color:var(--red)}.stat .v.gold{color:var(--gold)}
.stat .s{font-size:11px;color:var(--faint);margin-top:5px}
.chart-wrap{position:relative;width:100%;height:240px;background:var(--bg-2);border-radius:var(--r2);overflow:hidden;border:1px solid var(--line-2)}

/* ============ LIVE TRADING ============ */
.lt{display:grid;grid-template-columns:280px 1fr 320px;gap:14px;align-items:start}
.live-trend{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em}
.live-trend .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(45,212,167,.2);animation:pulse 1.6s infinite}
.live-trend.down{color:var(--red)}.live-trend.down .dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,93,110,.2)}
@keyframes pulse{50%{opacity:.35}}
.w-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer;border-left:2px solid transparent;transition:.12s}
.w-row:hover{background:rgba(255,255,255,.04)}
.w-row.on{background:var(--blue-dim);border-left-color:var(--blue)}
.w-sym{font-family:var(--mono);font-size:13px;font-weight:600}
.w-nm{font-size:10px;color:var(--faint)}
.w-px{font-family:var(--mono);font-size:12.5px;text-align:right}
.w-chg{font-family:var(--mono);font-size:10.5px;text-align:right}
.lt-chart-top{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lt-ohlc{display:flex;gap:13px;font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto}
.lt-ohlc b{font-weight:600}
.senti .g{font-family:var(--mono);font-size:32px;font-weight:700}
.ob-row{position:relative;display:flex;justify-content:space-between;padding:3.5px 13px;font-family:var(--mono);font-size:11px;overflow:hidden}
.ob-row span{position:relative;z-index:1}
.ob-row i{position:absolute;right:0;top:0;height:100%;opacity:.12}
.ob-row.a span:first-child{color:var(--red)}.ob-row.a i{background:var(--red)}
.ob-row.b span:first-child{color:var(--green)}.ob-row.b i{background:var(--green)}
.ob-mid{padding:8px 13px;text-align:center;font-family:var(--mono);font-size:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============ SIMULATOR ============ */
.sim-grid{display:grid;grid-template-columns:380px 1fr;gap:16px}
.sim-bot-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.sim-bot-desc{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.sim-bot-cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.sim-bot-status{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:9px}
.sim-bidask{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:11px 0}
.ba{padding:11px;border-radius:var(--r2);text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.ba .k{font-size:10px;text-transform:uppercase;color:var(--faint);font-weight:700}
.ba .v{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:4px}
.ba.sell .v{color:var(--red)}.ba.buy .v{color:var(--green)}
.sim-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}
.al-msg{font-size:12px;color:var(--muted);margin-top:8px;min-height:16px}

/* ============ ALERTS / BACKTEST ============ */
.al-switches{display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 14px}
.al-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:12px}
.al-asset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px;max-height:360px;overflow:auto}
.al-help{margin-top:15px;font-size:12px;color:var(--muted)}
.al-help summary{cursor:pointer;color:var(--blue)}
.al-help ol{padding-left:18px;line-height:1.9;margin-top:8px}
.bt-note{font-size:13px;color:var(--gold);background:rgba(245,183,64,.08);border-color:rgba(245,183,64,.25)!important}
.bt-pick{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.bt-pick .field{margin:0;min-width:180px}
.bt-strategy{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.6}
.bt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}
.bt-lower{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:16px}

/* ============ AI CHAT ============ */
#ai-fab{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;border:none;background:var(--grad);
  color:#fff;font-size:25px;box-shadow:0 10px 32px rgba(91,140,255,.45);z-index:60;cursor:pointer;transition:.18s}
#ai-fab:hover{transform:scale(1.06)}
#ai-chat{position:fixed;right:24px;bottom:94px;width:380px;max-width:92vw;height:540px;max-height:76vh;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);z-index:60;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ai-chat-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line);font-weight:700}
.ai-chat-head button{background:none;border:none;color:var(--faint);font-size:16px;cursor:pointer}
.ai-chat-body{flex:1;overflow:auto;padding:15px;display:flex;flex-direction:column;gap:11px;font-size:13px}
.ai-chat-quick{display:flex;gap:7px;flex-wrap:wrap;padding:0 13px 9px}
.ai-chat-quick button{font-size:11px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.ai-chat-input{display:flex;gap:8px;padding:13px;border-top:1px solid var(--line)}
.ai-chat-input textarea{resize:none}
.ai-chat-input button{background:var(--grad);color:#fff;border:none;border-radius:var(--r3);padding:0 17px;font-weight:700;cursor:pointer}
.chat-msg{padding:10px 13px;border-radius:11px;max-width:85%;line-height:1.55}
.chat-msg.u{align-self:flex-end;background:var(--blue-2);color:#fff}
.chat-msg.a{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line)}

.flash-up{animation:fu .6s}.flash-down{animation:fd .6s}
@keyframes fu{0%{color:var(--green)}}@keyframes fd{0%{color:var(--red)}}

/* ---- universal hidden (fix: panel display rules ต้องไม่ทับ hidden) ---- */
[hidden]{display:none!important}
/* chat bubbles (chat.js ใช้ class .ai-msg) */
.ai-msg{padding:10px 13px;border-radius:11px;max-width:86%;line-height:1.55;font-size:13px}
.ai-msg.u{align-self:flex-end;background:var(--blue-2);color:#fff}
.ai-msg.a{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line);white-space:pre-wrap}
.ai-msg.loading{opacity:.6}

/* ---- indicator chips + confluence (Live Trading analysis) ---- */
.confl{border-radius:var(--r2);padding:13px 15px;text-align:center;font-weight:800;font-size:15px;letter-spacing:.02em;border:1px solid var(--line)}
.confl.buy{background:var(--green-dim);color:var(--green);border-color:rgba(45,212,167,.35)}
.confl.sell{background:var(--red-dim);color:var(--red);border-color:rgba(255,93,110,.35)}
.confl.wait{background:rgba(255,255,255,.04);color:var(--muted)}
.confl small{display:block;font-size:10.5px;font-weight:600;opacity:.8;margin-top:4px;letter-spacing:.04em}
.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.ind-chip{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:11.5px}
.ind-chip .lab{color:var(--muted);font-weight:600}
.ind-chip .val{font-family:var(--mono);font-size:11px}
.ind-chip .dot2{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ind-chip.bull .dot2{background:var(--green)}.ind-chip.bull .val{color:var(--green)}
.ind-chip.bear .dot2{background:var(--red)}.ind-chip.bear .val{color:var(--red)}
.ind-chip.neutral .dot2{background:var(--faint)}.ind-chip.neutral .val{color:var(--muted)}

/* ---- sidebar live news ---- */
.sb-news{margin:6px 14px 0;border-top:1px solid var(--line);padding-top:10px;max-height:218px;overflow-y:auto}
.sb-news .hd{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:8px}
.sb-news .hd .live{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(45,212,167,.2);animation:pulse 1.6s infinite}
.sb-nw{display:block;padding:8px;border-radius:8px;transition:.12s;border:1px solid transparent}
.sb-nw:hover{background:var(--hover);border-color:var(--line)}
.sb-nw .t{font-size:11.5px;font-weight:600;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-nw .m{font-size:9.5px;color:var(--faint);margin-top:4px;display:flex;gap:6px;align-items:center}
.sb-nw .dotc{width:5px;height:5px;border-radius:50%}
.sb-nw .dotc.up{background:var(--green)}.sb-nw .dotc.down{background:var(--red)}.sb-nw .dotc.flat{background:var(--faint)}

/* ---- mode badges / disclaimer / states ---- */
.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:99px}
.mode-badge.sim{background:var(--blue-dim);color:var(--blue)}
.mode-badge.live{background:var(--red-dim);color:var(--red)}
.mode-badge.paper{background:var(--green-dim);color:var(--green)}
.warn-box{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r2);background:rgba(245,183,64,.08);border:1px solid rgba(245,183,64,.3);font-size:12.5px;color:#f5cd7a;line-height:1.55;margin-bottom:16px}
.warn-box .mi{color:var(--gold)}
.disclaimer{margin-top:34px;padding:20px 24px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px;line-height:1.7;text-align:center}
.disclaimer b{color:var(--muted)}
.disclaimer a{color:var(--blue)}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:sk 1.3s infinite;border-radius:6px;color:transparent!important}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty-state{text-align:center;color:var(--faint);padding:30px 16px;font-size:13px}

/* ---- diversification gauge / alert history / journal filters ---- */
.divscore{display:flex;align-items:center;gap:16px}
.divscore .ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:conic-gradient(var(--green) 0 78%,rgba(255,255,255,.08) 78% 100%)}
.divscore .ring b{width:64px;height:64px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-family:var(--mono);font-size:22px;font-weight:700}
.divbar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:7px}
.divbar i{display:block;height:100%;background:var(--grad-green)}
.alert-h-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;border:1px solid var(--line);margin-bottom:8px;background:rgba(255,255,255,.02)}
.dotc{flex:0 0 auto}.dotc.up{background:var(--green)}.dotc.down{background:var(--red)}.dotc.flat{background:var(--faint)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select{width:auto;min-width:130px}
.alert-type{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r2);border:1px solid var(--line);background:rgba(255,255,255,.02);margin-bottom:10px}
.alert-type .mi{font-size:22px;color:var(--blue)}
.alert-type .at-t{font-weight:700;font-size:13px}.alert-type .at-d{font-size:11.5px;color:var(--faint);margin-top:2px}
.alert-type label.switch{margin-left:auto}
.botstat{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px}
.botstat .dt{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(45,212,167,.18)}
.mi{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;
  display:inline-block;vertical-align:middle;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1280px){.lt{grid-template-columns:1fr}.sim-grid,.bt-lower,.al-grid{grid-template-columns:1fr}}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.heat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){
  .sb{transform:translateX(-100%);transition:.25s;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .sb.open{transform:none}
  .main{margin-left:0}
  .content{padding:18px 14px 50px}
  .menu-btn{display:grid!important}
  .levels,.news-grid{grid-template-columns:1fr!important}
}
.menu-btn{display:none;place-items:center;width:40px;height:40px;border-radius:9px;background:var(--panel);border:1px solid var(--line);cursor:pointer}