/* ============ Tava Screener — Design System (Fresh) ============ */
:root{
  --ground:#0A1024; --surface:#151D36; --surface-2:#1B2542; --elevate:#243052;
  --border:#2C3A61; --border-soft:#20294A;
  --text:#EEF2FC; --text-2:#AAB6D4; --muted:#7583A5;
  --brand:#22D3EE; --brand-2:#34F5C5; --brand-ink:#03242C;
  --gain:#34D399; --gain-dim:#10331F; --loss:#FB7185; --loss-dim:#3A1722; --warn:#FBBF24; --warn-dim:#33270E;
  --acc1:#22D3EE; --acc2:#A78BFA; --acc3:#34D399; --acc4:#FBBF24; --acc5:#F472B6; --acc6:#60A5FA;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -18px rgba(0,0,0,.65);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --r:14px; --r-sm:10px;
}
@media (prefers-color-scheme: light){:root:not([data-theme]){
  --ground:#EFF3FB; --surface:#FFFFFF; --surface-2:#F6F9FE; --elevate:#EDF2FB;
  --border:#DDE5F3; --border-soft:#EAF0F9;
  --text:#101728; --text-2:#4A5674; --muted:#8792AB;
  --brand:#0AA2BF; --brand-2:#0FBFA0; --brand-ink:#FFFFFF;
  --gain:#0DA36C; --gain-dim:#DFF6EA; --loss:#E24666; --loss-dim:#FDE8ED; --warn:#B27B0E; --warn-dim:#FCF1D9;
  --acc1:#0AA2BF; --acc2:#7C5CE0; --acc3:#0DA36C; --acc4:#D98E04; --acc5:#DB4C93; --acc6:#3A78E7;
  --shadow:0 1px 2px rgba(16,22,40,.04), 0 14px 34px -22px rgba(16,22,40,.25);
}}
:root[data-theme="light"]{
  --ground:#EFF3FB; --surface:#FFFFFF; --surface-2:#F6F9FE; --elevate:#EDF2FB;
  --border:#DDE5F3; --border-soft:#EAF0F9;
  --text:#101728; --text-2:#4A5674; --muted:#8792AB;
  --brand:#0AA2BF; --brand-2:#0FBFA0; --brand-ink:#FFFFFF;
  --gain:#0DA36C; --gain-dim:#DFF6EA; --loss:#E24666; --loss-dim:#FDE8ED; --warn:#B27B0E; --warn-dim:#FCF1D9;
  --acc1:#0AA2BF; --acc2:#7C5CE0; --acc3:#0DA36C; --acc4:#D98E04; --acc5:#DB4C93; --acc6:#3A78E7;
  --shadow:0 1px 2px rgba(16,22,40,.04), 0 14px 34px -22px rgba(16,22,40,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{color:var(--text);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;line-height:1.5;font-size:14px;
  background:
    radial-gradient(55% 38% at 8% 0%, color-mix(in srgb,var(--acc2) 9%,transparent), transparent 70%),
    radial-gradient(50% 34% at 92% 0%, color-mix(in srgb,var(--acc1) 10%,transparent), transparent 70%),
    radial-gradient(60% 42% at 50% 100%, color-mix(in srgb,var(--acc3) 6%,transparent), transparent 72%),
    var(--ground);
  background-attachment:fixed}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.pos{color:var(--gain)} .neg{color:var(--loss)} .neu{color:var(--warn)}

/* shell */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}
.logo{width:34px;height:34px;border-radius:9px;background:radial-gradient(120% 120% at 30% 20%,var(--brand-2),var(--brand) 55%,#1D8FA0);
  display:grid;place-items:center;color:var(--brand-ink);font-weight:800;font-size:17px;box-shadow:0 6px 18px -8px var(--brand)}
.brand b{font-size:16px;letter-spacing:-.02em;display:block}
.brand span{display:block;font-size:11px;color:var(--muted);letter-spacing:.03em}
.nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav .lbl{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:16px 10px 7px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--text-2);text-decoration:none;font-weight:500;font-size:13.5px;transition:.16s}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 16%,transparent),transparent);color:var(--text);box-shadow:inset 2px 0 0 var(--brand)}
.nav a.on svg{color:var(--brand);opacity:1}
.side .me{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:8px;flex:none;background:linear-gradient(135deg,#37507a,#22304b);display:grid;place-items:center;font-weight:700;font-size:13px;color:#cfe0ff}
.me b{font-size:13px} .me small{color:var(--muted);font-size:11.5px;display:block}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:16px 26px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(10px);z-index:5}
.top h1{font-size:18px;margin:0;letter-spacing:-.02em}
.top .sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--surface)}
.dot{width:7px;height:7px;border-radius:50%}
.pill.closed{color:var(--warn)} .pill.closed .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-dim)}
.pill.open{color:var(--gain)} .pill.open .dot{background:var(--gain);box-shadow:0 0 0 3px var(--gain-dim)}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--muted);font-size:13px;min-width:210px}
.search svg{width:15px;height:15px}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--text-2);cursor:pointer}
.iconbtn svg{width:17px;height:17px}
.iconbtn:hover{color:var(--text);border-color:var(--brand)}

.wrap{padding:24px 26px 40px;display:flex;flex-direction:column;gap:22px;max-width:1320px;width:100%}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.k-lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.k-val{font-size:29px;font-weight:750;letter-spacing:-.02em;margin-top:9px;font-family:var(--font-mono)}
.k-val .u{font-size:16px}
.k-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--text-2)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:700}
.chip.up{color:var(--gain);background:var(--gain-dim)} .chip.down{color:var(--loss);background:var(--loss-dim)} .chip.warn{color:var(--warn);background:var(--warn-dim)}
.spark{position:absolute;right:0;bottom:0;width:96px;height:44px;opacity:.9}

/* cards + grid */
.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1.4fr;gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border-soft)}
.card-h h2{font-size:14.5px;margin:0;letter-spacing:-.01em}
.card-h .hint{color:var(--muted);font-size:12px;margin-left:auto}
.card-b{padding:8px 8px 12px}

table{width:100%;border-collapse:collapse}
thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;text-align:right;padding:9px 12px}
thead th:first-child{text-align:left}
tbody td{padding:11px 12px;border-top:1px solid var(--border-soft);text-align:right;font-size:13.5px}
tbody td:first-child{text-align:left}
tbody tr:hover{background:var(--surface-2)}
.style-name{display:flex;align-items:center;gap:10px;font-weight:600}
.tag{min-width:34px;text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 6px;border-radius:6px;background:var(--elevate);color:var(--text-2);border:1px solid var(--border)}
.best .tag{background:var(--gain-dim);color:var(--gain);border-color:transparent}
.meter{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.bar{width:64px;height:6px;border-radius:100px;background:var(--elevate);overflow:hidden}
.bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.pl{font-family:var(--font-mono);font-weight:700}

/* feed */
.feed{display:flex;flex-direction:column}
.sig{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--border-soft)}
.sig:first-child{border-top:0}
.sig .sym{font-weight:700;font-size:13.5px;width:82px}
.code{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}
.code.entry{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}
.code.exit{background:var(--warn-dim);color:var(--warn)}
.sig .desc{color:var(--text-2);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig .px{font-family:var(--font-mono);font-weight:600;font-size:13px}
.sig .tm{color:var(--muted);font-size:11.5px;width:74px;text-align:right}

/* reason bars */
.reason{display:flex;flex-direction:column;gap:13px;padding:16px 18px}
.rrow{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px}
.rrow .rn{font-size:12.5px;color:var(--text-2)}
.rbar{height:9px;border-radius:100px;background:var(--elevate);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:100px}
.rrow .rv{font-family:var(--font-mono);font-size:12.5px;font-weight:700;width:66px;text-align:right}

/* insight */
.insight{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:linear-gradient(100deg,var(--loss-dim),transparent 70%);border:1px solid color-mix(in srgb,var(--loss) 30%,var(--border))}
.insight .ic{width:38px;height:38px;border-radius:10px;background:var(--loss-dim);display:grid;place-items:center;flex:none}
.insight .ic svg{width:20px;height:20px;color:var(--loss)}
.insight h3{margin:0 0 3px;font-size:14px} .insight p{margin:0;color:var(--text-2);font-size:13px} .insight b{color:var(--loss)}

.chartwrap{padding:12px 8px 4px}
.legend{display:flex;gap:16px;padding:2px 12px 10px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

.status-pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px}
.status-pill.OPEN{background:var(--warn-dim);color:var(--warn)}
.status-pill.CLOSED{background:var(--elevate);color:var(--text-2)}
.out-WIN{color:var(--gain);font-weight:700} .out-LOSS{color:var(--loss);font-weight:700} .out-BREAKEVEN{color:var(--muted)}

.empty{padding:40px;text-align:center;color:var(--muted)}

/* ---- tetingkap channel (grid workspace) ---- */
.chwin{--wacc:var(--acc1);background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .18s,box-shadow .18s}
.chwin:hover{transform:translateY(-2px);box-shadow:0 16px 36px -18px color-mix(in srgb,var(--wacc) 45%,transparent)}
#workspace .chwin:nth-child(6n+2){--wacc:var(--acc2)}
#workspace .chwin:nth-child(6n+3){--wacc:var(--acc3)}
#workspace .chwin:nth-child(6n+4){--wacc:var(--acc4)}
#workspace .chwin:nth-child(6n+5){--wacc:var(--acc5)}
#workspace .chwin:nth-child(6n+6){--wacc:var(--acc6)}
.chwin-h{display:flex;align-items:center;gap:8px;padding:9px 13px;cursor:move;user-select:none;touch-action:none;
  border-bottom:1px solid var(--border-soft);box-shadow:inset 0 3px 0 var(--wacc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--wacc) 14%,var(--surface)),var(--surface))}
.chwin-h .t{font-size:12.5px;font-weight:700;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.chwin-h .k{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--wacc);pointer-events:none;
  background:color-mix(in srgb,var(--wacc) 14%,transparent);padding:2px 7px;border-radius:6px}
.chwin-x{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;line-height:1;padding:2px;border-radius:6px}
.chwin-x:hover{color:var(--loss);background:var(--loss-dim)}
.chwin-b{max-height:190px;overflow-y:auto}
.chwin[data-ch="all"] .chwin-b{max-height:430px;overflow:auto}

/* jalur aksen KPI */
.kpis .kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc1)}
.kpis .kpi:nth-child(6n+2)::before{background:var(--acc2)}
.kpis .kpi:nth-child(6n+3)::before{background:var(--acc3)}
.kpis .kpi:nth-child(6n+4)::before{background:var(--acc4)}
.kpis .kpi:nth-child(6n+5)::before{background:var(--acc5)}
.kpis .kpi:nth-child(6n+6)::before{background:var(--acc6)}

@media (prefers-reduced-motion:no-preference){
  .kpi,.card,.insight{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
  .kpis .kpi:nth-child(2){animation-delay:.05s}.kpis .kpi:nth-child(3){animation-delay:.1s}.kpis .kpi:nth-child(4){animation-delay:.15s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* ================= RESPONSIF (mobile + tablet) ================= */
.navtoggle{display:none}
.nav-ovl{display:none}

@media (max-width:1080px){
  .grid,.grid2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr) !important}
}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  /* Sidebar → laci gelongsor (drawer) */
  .side{position:fixed;top:0;left:0;height:100dvh;width:min(84vw,300px);z-index:60;
        transform:translateX(-100%);transition:transform .25s ease;
        box-shadow:0 0 46px rgba(0,0,0,.42)}
  body.nav-open .side{transform:none}
  .nav-ovl{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5);
           opacity:0;visibility:hidden;transition:opacity .25s}
  body.nav-open .nav-ovl{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .navtoggle{display:grid}
  .top{padding:11px 14px;gap:10px}
  .top>div{min-width:0}
  .top h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .sub{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .search{display:none}
  .wrap{padding:16px 14px 34px;gap:16px}
  .card-h{padding:13px 15px}
  .card-b{padding:8px 6px 10px;overflow-x:auto}   /* jadual lebar boleh skrol, bukan halaman */
  thead th{padding:8px 10px}
  tbody td{padding:10px 10px;font-size:13px}
  /* borang grid (inline repeat) → 2 lajur */
  .wrap form[style*="repeat("]{grid-template-columns:1fr 1fr !important}
}

@media (max-width:560px){
  .kpis{grid-template-columns:1fr !important}
  .wrap form[style*="repeat("]{grid-template-columns:1fr !important}
  .top .pill{display:none}
  .top .sub{display:none}
  .top{gap:8px}
  .sig .sym{width:auto}
  .sig .desc{display:none}
  .chwin-b,.chwin[data-ch="all"] .chwin-b{max-height:320px}
  #workspace{grid-template-columns:1fr !important}
  /* kawalan borang lebar-tetap (mis. bar penapis admin) → penuh-lebar */
  .wrap .fi,.wrap .ri,.wrap input[style*="width"],.wrap select[style*="width"]{width:100% !important;min-width:0 !important}
}

/* ---- auth pages (login / forgot / reset) ---- */
.lg{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 70%),var(--ground)}
.lgcard{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.lgcard .logo{width:46px;height:46px;font-size:22px;border-radius:12px;margin-bottom:18px}
.lgcard h1{font-size:20px;margin:0 0 4px;letter-spacing:-.02em}
.lgcard .desc{color:var(--muted);font-size:13px;margin:0 0 22px}
.lg label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 6px}
.lg input{width:100%;background:var(--ground);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px}
.lg input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
.lg .btn{display:block;width:100%;text-align:center;margin-top:22px;background:var(--brand);color:var(--brand-ink);border:0;border-radius:10px;padding:12px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.lg .err{background:var(--loss-dim);color:var(--loss);border-radius:9px;padding:10px 12px;font-size:13px;margin-top:14px;font-weight:600}
.lg .ok{background:var(--gain-dim);color:var(--gain);border-radius:9px;padding:12px 14px;font-size:13px;margin-top:14px;font-weight:600}
.lg .foot{margin-top:18px;text-align:center;font-size:13px}
.lg .foot a{color:var(--brand);text-decoration:none;font-weight:600}
.lg .foot a:hover{text-decoration:underline}
.lg .logo-c{background:radial-gradient(120% 120% at 30% 20%,var(--brand-2),var(--brand) 55%,#1D8FA0);display:grid;place-items:center;color:var(--brand-ink);font-weight:800}

/* Sel simbol boleh-klik + ikon carta TradingView (helper sym_link) */
.symcell{display:inline-flex;align-items:center;gap:6px}
.symcell .symname{text-decoration:none}
.symcell .symname:hover{color:var(--brand)!important}
.symcell .tvico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--muted);opacity:.7;transition:color .15s,background .15s,opacity .15s;flex:none}
.symcell .tvico:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);opacity:1}
/* Lencana skor struktur (sym_link + symCell) */
.stbadge{display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:1px 6px;border-radius:100px;line-height:1.5;white-space:nowrap;letter-spacing:.2px}
/* Lencana patuh Syariah (sym_link + symCell) */
.shbadge{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:9.5px;font-weight:800;line-height:1;flex:none}
.sh-ok{background:var(--gain-dim);color:var(--gain)}
.sh-no{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
/* Lencana NEW signal (cantik: gradien + kilauan + denyut; auto-hilang setelah dilihat) */
.newbadge{display:inline-flex;align-items:center;gap:2px;font-size:8.5px;font-weight:800;letter-spacing:.5px;color:#fff;
  background:linear-gradient(100deg,var(--brand),#6ee7ff);padding:2px 7px 2px 5px;border-radius:100px;vertical-align:middle;
  box-shadow:0 1px 6px color-mix(in srgb,var(--brand) 45%,transparent);animation:newpulse 1.9s ease-out infinite}
.newbadge svg{width:9px;height:9px;filter:drop-shadow(0 0 1px rgba(255,255,255,.7))}
@keyframes newpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent),0 1px 6px color-mix(in srgb,var(--brand) 45%,transparent)}
  70%{box-shadow:0 0 0 6px transparent,0 1px 6px color-mix(in srgb,var(--brand) 30%,transparent)}
  100%{box-shadow:0 0 0 0 transparent,0 1px 6px color-mix(in srgb,var(--brand) 45%,transparent)}}
.newbadge.fade{animation:none;transition:opacity .55s ease,transform .55s ease;opacity:0;transform:scale(.5)}
@media (prefers-reduced-motion:reduce){.newbadge{animation:none}}