:root{
  --bg:#0b1017;
  --panel:#161d29;
  --card:#1e2836;
  --sunk:#121a25;
  --line:#33415a;
  --ink:#f4f7fc;
  --dim:#b3c0d4;
  --faint:#8d9bb0;
  --up:#4ade80;
  --upbg:rgba(74,222,128,.16);
  --down:#f87171;
  --downbg:rgba(248,113,113,.16);
  --accent:#7cb2ff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.5;
  font-family:"Segoe UI","Noto Sans Thai",system-ui,-apple-system,sans-serif;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1500px;margin:0 auto;padding:20px 16px 70px}

/* ── header ── */
header{margin-bottom:16px}
.titlerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
h1{font-size:23px;margin:0;letter-spacing:-.3px}
.sub{color:var(--dim);font-size:13.5px}
.meta{color:var(--dim);font-size:13.5px;margin:6px 0 0}
.meta b{color:var(--ink);font-weight:600}
.dim{color:var(--faint)}

/* ── controls ── */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.seg{display:flex;align-items:center;gap:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;flex-wrap:wrap}
.lab{color:var(--dim);font-size:12px;margin-right:4px;white-space:nowrap}
.btn{color:var(--dim);border-radius:7px;padding:4px 11px;font-size:13px;
  border:1px solid transparent;white-space:nowrap}
.btn:hover{color:var(--ink);background:#16203300}
.btn.on{background:#2a4370;border-color:var(--accent);color:#fff;font-weight:600}
.btn.up.on{background:var(--upbg);border-color:var(--up);color:var(--up)}
.btn.down.on{background:var(--downbg);border-color:var(--down);color:var(--down)}
.hint{color:var(--dim);font-size:13px;margin:0 0 16px 2px}

/* ── group box ── */
.group{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px 15px;margin-bottom:13px;position:relative;overflow:hidden}
.group::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--faint)}
.group.pos::before{background:var(--up)}
.group.neg::before{background:var(--down)}

.ghead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.gtitle{display:flex;flex-direction:column;gap:1px;min-width:0}
.ghead h2{font-size:16.5px;margin:0;letter-spacing:-.1px}
.gdesc{color:var(--dim);font-size:12.5px}
.gstats{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tally{font-size:13.5px;color:var(--dim);
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.tally b{font-weight:600}
.median{font-size:15px;font-weight:700;padding:3px 11px;border-radius:8px;
  background:var(--sunk);color:var(--dim);
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.median.up{color:var(--up);background:var(--upbg)}
.median.down{color:var(--down);background:var(--downbg)}
.up{color:var(--up)} .down{color:var(--down)}

/* ── stock cards ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr));gap:7px}
.card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:9px;padding:8px 10px;display:block;transition:background .12s,transform .12s}
.card:hover{background:#26344a;transform:translateY(-1px)}
.card.up{border-left-color:var(--up)}
.card.down{border-left-color:var(--down)}
.row1{display:flex;align-items:baseline;gap:8px}
.tk{font-size:14.5px;font-weight:700;letter-spacing:.3px}
.pct{margin-left:auto;font-size:14px;font-weight:700;
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.card.up .pct{color:var(--up)}
.card.down .pct{color:var(--down)}
.card.flat .pct{color:var(--dim)}
.row2{display:flex;align-items:baseline;gap:8px;margin-top:1px}
.nm{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px{margin-left:auto;color:var(--ink);font-size:12px;
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.none{color:var(--faint);font-size:13px;margin:2px 0 0;padding:6px 0}

/* ── notice ── */
.notice{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.notice p{margin:0 0 8px;color:var(--dim);font-size:14px}
.notice p b{color:var(--ink)}
pre{background:var(--sunk);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;color:var(--accent);font-size:13.5px;overflow-x:auto;margin:0 0 14px}

/* ── stock detail ── */
.back{color:var(--accent);font-size:13.5px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:9px;margin:16px 0}
.pcell{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.pcell .k{color:var(--faint);font-size:11.5px}
.pcell .v{font-size:19px;font-weight:700;margin-top:2px;
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.soon{background:var(--panel);border:1px dashed var(--line);border-radius:12px;
  padding:16px 18px;color:var(--faint);font-size:13.5px}
.soon ul{margin:8px 0 0;padding-left:20px}
.soon li{margin:4px 0}

/* ── footer ── */
footer{margin-top:30px;padding-top:15px;border-top:1px solid var(--line);
  color:var(--dim);font-size:13px}
footer p{margin:0 0 6px}
footer b{color:var(--dim)}
.disc{margin-top:11px;color:var(--faint)}

@media(max-width:600px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gstats{margin-left:0;width:100%}
  h1{font-size:20px}
}

/* ── แท็บสลับหน้า ── */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);
  padding-bottom:0}
.tabs a{padding:8px 16px;color:var(--dim);font-size:14px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* ── แผงตัวกรองหน้า EMA ── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.panel .line{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=search],select{background:var(--sunk);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:8px 11px;font-size:14px;
  font-family:inherit;outline:none;max-width:100%}
input[type=search]{flex:1 1 190px;min-width:0}
select{cursor:pointer}
input[type=search]:focus,select:focus{border-color:var(--accent)}
.slider{display:flex;align-items:center;gap:9px;background:var(--sunk);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px;flex:1 1 250px}
input[type=range]{flex:1;min-width:80px;accent-color:var(--accent);height:20px}
#tolOut{color:var(--accent);font-weight:700;font-size:14px;min-width:46px;text-align:right;
  font-family:ui-monospace,Consolas,monospace}
.seg button{background:transparent;border:1px solid transparent;color:var(--dim);
  border-radius:6px;padding:3px 10px;font-size:13px;font-family:inherit;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#2a4370;border-color:var(--accent);color:#fff;font-weight:600}
.seg.lines button{min-width:36px;text-align:center}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.stat .k{color:var(--dim);font-size:11.5px}
.stat .v{font-size:19px;font-weight:700;margin-top:1px;
  font-family:ui-monospace,Consolas,monospace}
.resultbar{display:flex;align-items:center;justify-content:space-between;
  margin:0 2px 10px;color:var(--dim);font-size:13px}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:7px;padding:5px 12px;font-size:12.5px;font-family:inherit;cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--faint)}

/* ── การ์ดหน้า EMA ── */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:11px}
.ecard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:12px;padding:12px 13px 11px;display:block;transition:background .12s}
.ecard:hover{background:#26344a}
.ecard.up{border-left-color:var(--up)}
.ecard.down{border-left-color:var(--down)}
.ecard .row1{display:flex;align-items:baseline;gap:7px}
.ecard .tk{font-size:16.5px;font-weight:700;letter-spacing:.3px}
.ecard .chg{font-size:12px;font-weight:600;font-family:ui-monospace,Consolas,monospace}
.ecard .chg.p{color:var(--up)} .ecard .chg.n{color:var(--down)}
.ecard .px{margin-left:auto;font-size:15px;font-weight:600;
  font-family:ui-monospace,Consolas,monospace}
.ecard .nm{color:var(--dim);font-size:12.5px;margin:1px 0 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.b{font-size:11.5px;padding:2px 8px;border-radius:6px;background:#2b3850;color:var(--ink)}
.b.up{background:rgba(74,222,128,.2);color:var(--up)}
.b.down{background:rgba(248,113,113,.2);color:var(--down)}
.b.sig{background:rgba(124,178,255,.2);color:var(--accent)}
.emas{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.e{text-align:center;background:var(--sunk);border:1px solid transparent;
  border-radius:6px;padding:4px 1px}
.e .lb{font-size:10.5px;color:var(--dim);line-height:1.3}
.e .dv{font-size:11.5px;color:var(--ink);line-height:1.35;
  font-family:ui-monospace,Consolas,monospace}
.e.hit{border-color:#fbbf24;background:rgba(251,191,36,.2)}
.e.hit .lb{color:#fbbf24}
.e.hit .dv{color:var(--ink);font-weight:600}
.e.off{opacity:.32}
.efoot{display:flex;gap:11px;margin-top:9px;font-size:12px;color:var(--dim)}
.efoot b{color:var(--ink);font-family:ui-monospace,Consolas,monospace}
@media(max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .egrid{grid-template-columns:1fr}
  /* จอแคบ: ช่องเลือกยาว ๆ ให้ขึ้นบรรทัดใหม่เต็มความกว้าง ไม่ดันจนล้นจอ */
  .panel select{flex:1 1 100%;width:100%;min-width:0}
  .panel .line{gap:8px}
  .slider{flex:1 1 100%}
  .seg{flex:1 1 100%}
}

/* ── แท็บแบบปุ่ม (เว็บ static ไม่มีการโหลดหน้าใหม่) ── */
/* แท็บมี 5 อัน จอมือถือใส่ไม่พอ จึงให้เลื่อนแนวนอนได้ในแถบตัวเอง
   แทนที่จะดันเนื้อหาทั้งหน้าจนล้น */
.tabs{display:flex;gap:4px;align-items:center;margin-bottom:16px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:none;border-bottom:2px solid transparent;
  padding:9px 15px;color:var(--dim);font-size:14.5px;font-weight:600;
  font-family:inherit;cursor:pointer;margin-bottom:-1px;
  white-space:nowrap;flex:0 0 auto}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs .badge{margin-left:auto;font-size:11px;padding:2px 9px;border-radius:20px;
  background:rgba(251,191,36,.14);color:#fbbf24;border:1px solid rgba(251,191,36,.4);
  white-space:nowrap;flex:0 0 auto}

.tally .of{color:var(--faint);font-weight:400;font-family:inherit}

/* การ์ดเป็นปุ่ม จึงต้องรีเซ็ตสไตล์ปุ่มเริ่มต้นของเบราว์เซอร์ */
button.card,button.ecard{font-family:inherit;text-align:left;cursor:pointer;width:100%}
button.card{border:1px solid var(--line);border-left:3px solid var(--faint)}
button.card.up{border-left-color:var(--up)}
button.card.down{border-left-color:var(--down)}

/* ── หน้าต่างรายละเอียดหุ้น ── */
/* สำคัญ: ต้องเขียน display:none ให้ [hidden] ด้วย
   เพราะ display:flex ด้านล่างจะทับคำสั่งซ่อนของ HTML ทำให้ modal เปิดค้าง */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;background:rgba(3,6,12,.82);z-index:50;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 14px;
  overflow-y:auto;backdrop-filter:blur(3px)}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px 24px;max-width:640px;width:100%;position:relative}
.sheet .x{position:absolute;top:12px;right:14px;background:transparent;border:none;
  color:var(--faint);font-size:17px;cursor:pointer;padding:6px 9px;border-radius:8px}
.sheet .x:hover{color:var(--ink);background:var(--sunk)}
.mhead{display:flex;align-items:baseline;gap:12px}
.mhead h2{font-size:24px;margin:0;letter-spacing:.3px}
.mprice{font-size:20px;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.mname{color:var(--ink);font-size:13.5px;margin:2px 0 14px}
.mspark{display:block;width:100%;height:64px;margin-bottom:4px}
.mnote{color:var(--dim);font-size:12.5px;margin:0 0 16px}
.mnote b{color:var(--dim)}
.sheet h3{font-size:13.5px;color:var(--dim);font-weight:600;margin:18px 0 8px;
  text-transform:none;letter-spacing:.3px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr));gap:7px}
.pcell{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.pcell .k{color:var(--dim);font-size:11.5px}
.pcell .v{font-size:16px;font-weight:700;margin-top:1px;
  font-family:ui-monospace,Consolas,monospace}
.emas.big{grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:8px}
.emas.big .e{padding:7px 2px}
.emas.big .lb{font-size:10.5px}
.emas.big .dv{font-size:12.5px}
@media(max-width:600px){
  .emas.big{grid-template-columns:repeat(3,1fr)}
  .sheet{padding:18px 16px 20px}
}


/* กันปัญหาเดียวกันกับส่วนอื่นที่ใช้ attribute hidden */
[hidden]{display:none !important}

/* ── ส่วนข้อมูลพื้นฐานในหน้าต่างรายละเอียด ── */
.verdict{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:9px;padding:10px 13px;font-size:13.5px;color:var(--ink);margin-bottom:11px}
.verdict.up{border-left-color:var(--up)}
.verdict.down{border-left-color:var(--down)}

.ftable{display:flex;flex-direction:column;gap:6px}
.frow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.fk{font-size:13px;color:var(--dim);display:flex;flex-direction:column;line-height:1.35}
.fh{font-size:10.5px;color:var(--faint);font-weight:400}
.fv{font-size:14.5px;font-weight:700;white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace}
.fc{display:flex;flex-direction:column;align-items:flex-end;min-width:104px;line-height:1.35}
.cmp{font-size:11.5px;font-weight:600;color:var(--dim)}
.cmp.up{color:var(--up)} .cmp.down{color:var(--down)}
.medv{font-size:10.5px;color:var(--faint);white-space:nowrap}

.pcell .k{display:flex;flex-direction:column;line-height:1.3}
.pcell .v.sm{font-size:14.5px}
.pcell .v.up{color:var(--up)} .pcell .v.down{color:var(--down)}

/* แถบช่วงราคา 52 สัปดาห์ */
.range{margin:4px 0 2px}
.range .bar{position:relative;height:7px;border-radius:6px;
  background:linear-gradient(90deg,var(--down) 0%,#8d9bb0 50%,var(--up) 100%);opacity:.75}
.range .dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid var(--bg);transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.rends{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11.5px;color:var(--faint);font-family:ui-monospace,Consolas,monospace}

@media(max-width:600px){
  .frow{grid-template-columns:1fr auto;row-gap:5px}
  .fc{grid-column:1 / -1;align-items:flex-start;flex-direction:row;gap:9px;min-width:0}
}

/* ช่องที่มีตัวเลขยาว เช่น มูลค่าบริษัท ต้องกว้างกว่าปกติ ไม่ให้ตกบรรทัด */
.pgrid.wide{grid-template-columns:repeat(auto-fit,minmax(min(136px,100%),1fr))}
.pgrid.wide .v.sm{font-size:14px;white-space:nowrap}

/* ป้ายเตือนข้อมูลจำลองในหน้าต่างรายละเอียด */
.demowarn{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.5);
  border-radius:9px;padding:9px 13px;margin-bottom:14px;font-size:13px;color:#fbbf24}
.demowarn b{color:#fde68a}

/* ป้ายเลขเวอร์ชัน ใช้ยืนยันว่าเบราว์เซอร์โหลดโค้ดใหม่แล้ว */
.ver{color:var(--faint);font-size:11.5px;border:1px solid var(--line);
  border-radius:20px;padding:1px 9px;margin-left:6px;white-space:nowrap}

/* ปุ่มขยาย/ย่อกล่องกลุ่ม */
.more{display:block;width:100%;margin-top:9px;background:var(--sunk);
  border:1px solid var(--line);color:var(--dim);border-radius:9px;
  padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer}
.more:hover{color:var(--ink);border-color:var(--faint);background:#1b2536}

/* ── หน้าหุ้นโตแรง ── */
.toplist{display:flex;flex-direction:column;gap:6px}
.toprow{display:grid;
  grid-template-columns:34px minmax(150px,1.5fr) 92px minmax(120px,1fr) 76px 84px 108px 92px;
  align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:10px;padding:9px 13px;font-family:inherit;color:var(--ink)}
.toprow:hover{background:#26344a}
.toprow.up{border-left-color:var(--up)}
.toprow.down{border-left-color:var(--down)}
.rank{color:var(--faint);font-size:13px;text-align:center;
  font-family:ui-monospace,Consolas,monospace}
.tinfo{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.tinfo b{font-size:14.5px;letter-spacing:.3px}
.tnm{color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tspark{height:26px;width:100%;opacity:.85}
.tcell{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}
.tsec{font-family:inherit}
.tpct{font-size:15px;font-weight:700;text-align:right;
  font-family:ui-monospace,Consolas,monospace}
.toprow.up .tpct{color:var(--up)}
.toprow.down .tpct{color:var(--down)}

@media(max-width:900px){
  .toprow{grid-template-columns:28px 1fr 84px;grid-template-areas:
    "rank info pct";row-gap:6px}
  .rank{grid-area:rank} .tinfo{grid-area:info} .tpct{grid-area:pct}
  .tspark,.tsec,.tmc{display:none}
  .tcell{grid-column:2 / -1;font-size:12px}
}

/* ข้อความอธิบายไทม์เฟรม */
.tfnote{color:var(--faint);font-size:12px;line-height:1.4;flex:1 1 240px;min-width:0}
.tfnote b{color:var(--dim)}

/* ── หน้าน่าจับตามอง ── */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:11px}
.wcard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:12px;padding:12px 13px 11px;display:block;width:100%;text-align:left;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.wcard:hover{background:#26344a}
.wcard.up{border-left-color:var(--up)}
.wcard.down{border-left-color:var(--down)}
.wstats{color:var(--dim);font-size:12.5px;margin:2px 0 9px;
  font-family:ui-monospace,Consolas,monospace}
.wstats b{font-family:ui-monospace,Consolas,monospace}
.wstats .up{color:var(--up)} .wstats .down{color:var(--down)}
.wsigs{display:flex;flex-direction:column;gap:5px}
.wsig{background:var(--sunk);border:1px solid var(--line);border-left:2px solid var(--faint);
  border-radius:7px;padding:6px 9px;display:flex;flex-direction:column;line-height:1.4}
.wsig.up{border-left-color:var(--up)}
.wsig.down{border-left-color:var(--down)}
.wsig.watch{border-left-color:#fbbf24}
.wname{font-size:12.5px;font-weight:600}
.wsig.up .wname{color:var(--up)}
.wsig.down .wname{color:var(--down)}
.wsig.watch .wname{color:#fbbf24}
.wdetail{font-size:11.5px;color:var(--dim);
  font-family:ui-monospace,Consolas,monospace}
#wSignal button:disabled{cursor:default}
@media(max-width:600px){.wgrid{grid-template-columns:1fr}}

/* ── หน้าผลประกอบการ ── */
.egrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:11px}
.ecard2{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--faint);
  border-radius:12px;padding:12px 13px 11px;display:block;width:100%;text-align:left;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.ecard2:hover{background:#26344a}
.ecard2.gA{border-left-color:var(--up)}
.ecard2.gB{border-left-color:#7dd3a0}
.ecard2.gC{border-left-color:#fbbf24}
.ecard2.gD{border-left-color:var(--down)}
.egrade{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:3px 0 9px}
.gbadge{font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px}
.gbadge.gA{background:rgba(74,222,128,.2);color:var(--up)}
.gbadge.gB{background:rgba(125,211,160,.18);color:#7dd3a0}
.gbadge.gC{background:rgba(251,191,36,.2);color:#fbbf24}
.gbadge.gD{background:rgba(248,113,113,.2);color:var(--down)}
.qbadge{font-size:11.5px;padding:2px 9px;border-radius:6px;border:1px solid}
.qbadge.gd{color:#7cb2ff;border-color:#7cb2ff;background:rgba(124,178,255,.12)}
.qbadge.gu{color:var(--up);border-color:var(--up);background:rgba(74,222,128,.1)}
.qbadge.bu{color:#fbbf24;border-color:#fbbf24;background:rgba(251,191,36,.1)}
.qbadge.bd{color:var(--down);border-color:var(--down);background:rgba(248,113,113,.1)}
.p3{margin-left:auto;font-size:12px;color:var(--dim);
  font-family:ui-monospace,Consolas,monospace}
.ebars{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ebar{background:var(--sunk);border:1px solid var(--line);border-left:2px solid var(--faint);
  border-radius:7px;padding:5px 9px;display:flex;flex-direction:column;line-height:1.35}
.ebar.p2{border-left-color:var(--up)}
.ebar.p1{border-left-color:#fbbf24}
.ebar.p0{border-left-color:var(--down)}
.ek{font-size:11px;color:var(--dim)}
.ev{font-size:13px;font-weight:600;font-family:ui-monospace,Consolas,monospace}
.efoot2{margin-top:9px;font-size:11.5px;color:var(--faint)}
@media(max-width:600px){.egrid2{grid-template-columns:1fr}}

@media(max-width:640px){
  .tab{padding:9px 12px;font-size:13.5px}
  .tabs .badge{margin-left:8px}
}

/* ── หน้าเทียบในหมวด ── */
.ldwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:13px}
.ldhead{font-size:14px;font-weight:600;margin-bottom:10px}
.ldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:7px}
.ldcell{background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;display:flex;flex-direction:column;line-height:1.4;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--ink)}
.ldcell:hover{background:#26344a;border-color:var(--faint)}
.ldk{font-size:11.5px;color:var(--dim)}
.ldv{font-size:13.5px;font-family:ui-monospace,Consolas,monospace}
.ldv b{font-size:14.5px;color:var(--accent)}
.ldnote{margin:10px 0 0;font-size:12px;color:var(--faint)}

.rankwarn{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.45);
  border-radius:12px;padding:13px 16px;margin-bottom:13px;font-size:13px;color:var(--dim)}
.rankwarn b{color:#fbbf24}
.rankwarn ul{margin:8px 0;padding-left:20px}
.rankwarn li{margin:4px 0}

.cwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);-webkit-overflow-scrolling:touch}
.ctable{border-collapse:collapse;width:100%;min-width:900px;font-size:13px}
.ctable th{position:sticky;top:0;background:var(--panel);text-align:right;
  padding:10px 12px;color:var(--dim);font-weight:600;font-size:12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ctable th:first-child{text-align:left}
.ctable td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);
  white-space:nowrap;font-family:ui-monospace,Consolas,monospace}
.ctable tr{cursor:pointer}
.ctable tbody tr:hover td{background:#26344a}
.csym{text-align:left !important;font-family:inherit !important}
.csym b{font-size:14px;letter-spacing:.3px}
.csym span{display:block;color:var(--dim);font-size:11.5px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis}
.bestb{font-size:10px;background:rgba(124,178,255,.2);color:var(--accent);
  padding:1px 6px;border-radius:5px;font-family:inherit}

.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:11px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink)}
.rcard:hover{background:#26344a}
.rrank{background:#2a4370;color:#fff;font-size:12.5px;font-weight:700;
  min-width:24px;height:24px;border-radius:6px;display:inline-grid;place-items:center;
  font-family:ui-monospace,Consolas,monospace}
.rscore{margin-left:auto;font-size:20px;font-weight:700;color:var(--accent);
  font-family:ui-monospace,Consolas,monospace}
.rscore small{font-size:11px;color:var(--faint);font-weight:400}
.pbars{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.pbrow{display:grid;grid-template-columns:112px 1fr 30px;gap:8px;align-items:center;
  font-size:11.5px}
.pbk{color:var(--dim)}
.pbbar{background:var(--sunk);border-radius:5px;height:7px;overflow:hidden}
.pbbar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.pbv{text-align:right;color:var(--ink);font-family:ui-monospace,Consolas,monospace}
.pbn{grid-column:2 / -1;color:var(--faint);font-size:10.5px;margin-top:-2px}
@media(max-width:600px){
  .rgrid{grid-template-columns:1fr}
  .pbrow{grid-template-columns:96px 1fr 28px}
}

/* กันการ์ดกว้างเกินจอบนหน้าจอแคบมาก (เช่น iPhone SE 360px)
   min-width:0 จำเป็นเพราะ grid item มีค่าเริ่มต้นเป็น auto ซึ่งไม่ยอมหด */
.ecard2,.wcard,.rcard,.ecard,.card,.ldcell{max-width:100%;min-width:0}
.egrid2,.wgrid,.rgrid,.egrid,.cards,.ldgrid,.pgrid{min-width:0}

/* ป้ายผลทดสอบย้อนหลังข้างชื่อสัญญาณ */
.btb{font-size:10.5px;padding:1px 6px;border-radius:5px;margin-left:5px;
  font-family:ui-monospace,Consolas,monospace;font-weight:600;white-space:nowrap}
.btb.bt-good{background:rgba(74,222,128,.18);color:var(--up)}
.btb.bt-bad{background:rgba(248,113,113,.18);color:var(--down)}
.btb.bt-none{background:#2b3850;color:var(--faint)}

/* ── ปุ่มดาว ── */
.star{cursor:pointer;font-size:15px;line-height:1;color:var(--faint);
  padding:1px 3px;border-radius:5px;user-select:none;flex:0 0 auto}
.star:hover{color:#fbbf24;background:rgba(251,191,36,.12)}
.star.on{color:#fbbf24}
.star:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.csym .star{margin-right:5px;vertical-align:-1px}
.toprow .star{text-align:center}

/* การ์ดเปลี่ยนจาก button เป็น div ต้องคุมสไตล์เอง */
.card,.ecard,.wcard,.ecard2,.rcard,.toprow{cursor:pointer}
.card:focus-visible,.ecard:focus-visible,.wcard:focus-visible,
.ecard2:focus-visible,.rcard:focus-visible,.toprow:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ── หน้าที่ติดดาว ── */
.stars{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:11px}
.scard{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--faint);border-radius:12px;padding:12px 13px 11px;min-width:0}
.scard.up{border-left-color:var(--up)}
.scard.down{border-left-color:var(--down)}
.scard.gone{opacity:.7}
.scard .tk{cursor:pointer}
.scard .tk:hover{color:var(--accent)}
.sgone{margin-left:auto;font-size:11.5px;color:var(--faint)}
.smeta{display:flex;flex-wrap:wrap;gap:10px;margin:7px 0 8px;
  font-size:11.5px;color:var(--dim);font-family:ui-monospace,Consolas,monospace}
.ssince{font-weight:700}
.ssince.up{color:var(--up)} .ssince.down{color:var(--down)}
.snote textarea{width:100%;background:var(--sunk);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:7px 10px;font-size:12.5px;
  font-family:inherit;resize:vertical;outline:none;min-height:44px}
.snote textarea:focus{border-color:var(--accent)}
.snote textarea::placeholder{color:var(--faint)}

/* ปุ่มกรองเฉพาะที่ติดดาว */
.starfilter{background:var(--panel);border:1px solid var(--line);color:var(--dim);
  border-radius:10px;padding:7px 13px;font-size:13px;font-family:inherit;
  cursor:pointer;white-space:nowrap}
.starfilter:hover:not(:disabled){color:#fbbf24;border-color:rgba(251,191,36,.5)}
.starfilter.on{background:rgba(251,191,36,.14);border-color:#fbbf24;color:#fbbf24;
  font-weight:600}
.starfilter:disabled{opacity:.4;cursor:default}

/* ข้อความสรุปในหน้าที่ติดดาว — อยู่ใน .panel ซึ่งเป็น flex แนวตั้ง
   จึงห้ามใช้ flex-grow ไม่งั้นจะยืดสูงจนเกิดช่องว่างใหญ่ */
.snote-sum{flex:0 0 auto;margin:0;color:var(--dim);font-size:12.5px;line-height:1.5}
.snote-sum b{color:var(--ink)}
.snote-sum .up{color:var(--up)} .snote-sum .down{color:var(--down)}

/* ── หน้าเช้านี้ ── */
.tdsec{margin-bottom:20px}
.tdhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.tdhead h2{font-size:17px;margin:0}
.tdn{background:#2a4370;color:#fff;font-size:12px;padding:1px 9px;border-radius:20px;
  font-family:ui-monospace,Consolas,monospace;font-weight:700}
.tdwhy{color:var(--dim);font-size:12.5px;flex:1 1 260px;line-height:1.45}
.tdwhy b{color:var(--ink)}
.tdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.tdcard{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px 10px;cursor:pointer;min-width:0}
.tdcard:hover{background:#26344a}
.tdcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tdscore{margin-left:8px;background:var(--sunk);border:1px solid var(--line);
  color:var(--accent);font-size:13px;font-weight:700;padding:1px 8px;border-radius:6px;
  font-family:ui-monospace,Consolas,monospace}
.tdextra{font-size:12px;color:#fbbf24;margin:4px 0 2px}
.tdlines{display:flex;gap:4px;margin:7px 0 6px;flex-wrap:wrap}
.tdl{font-size:11px;min-width:26px;text-align:center;padding:2px 5px;border-radius:5px;
  background:var(--sunk);color:var(--faint);border:1px solid transparent;
  font-family:ui-monospace,Consolas,monospace}
.tdl.hit{border-color:var(--line);color:var(--ink);background:#2b3850}
.tdl.new{border-color:#fbbf24;background:rgba(251,191,36,.2);color:#fbbf24;font-weight:700}
.tdfoot{font-size:11.5px;color:var(--faint);margin-top:7px;
  font-family:ui-monospace,Consolas,monospace}
.tdcard .badges{margin:0}

/* เตือนเมื่องบชุดที่แสดงน่าจะล้าสมัยแล้ว */
.staleq{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.45);
  border-radius:8px;padding:6px 10px;margin-top:8px;font-size:11.5px;color:#fbbf24;
  line-height:1.45}

/* ── ปฏิทินประกาศงบ ── */
.ecal{margin-bottom:18px}
.ecalhead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.ecalhead h2{font-size:16px;margin:0;display:flex;align-items:center;gap:7px}
.ecicon{font-size:15px}
.erows{display:flex;flex-direction:column;gap:5px}
.erow{background:var(--card);border:1px solid var(--line);border-radius:10px;
  overflow:hidden}
.erow.open{border-color:var(--faint)}
.erhead{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;
  flex-wrap:wrap}
.erhead:hover{background:#26344a}
.erhead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.erwhen{font-size:11.5px;color:var(--dim);min-width:74px;
  font-family:ui-monospace,Consolas,monospace}
.erwhen.now{color:#fbbf24;font-weight:700}
.erwhen.late{color:var(--down)}
.erhead .tk{font-size:14.5px;font-weight:700;letter-spacing:.3px;min-width:56px}
.erhead .tk:hover{color:var(--accent)}
.ernm{color:var(--dim);font-size:12px;flex:1 1 150px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erhead .chg{font-size:12.5px;font-weight:600;min-width:58px;text-align:right;
  font-family:ui-monospace,Consolas,monospace}
.erhead .px{font-size:12.5px;min-width:72px;text-align:right;color:var(--ink);
  font-family:ui-monospace,Consolas,monospace}
.er3{font-size:11.5px;color:var(--dim);min-width:104px;text-align:right;
  font-family:ui-monospace,Consolas,monospace}
.ercar{color:var(--faint);font-size:10px;margin-left:2px}
.erdetail{padding:0 12px 11px;border-top:1px solid var(--line)}
.erdetail .ebars{margin-top:9px}
@media(max-width:760px){
  .erhead{gap:7px}
  .ernm,.er3{display:none}
  .erwhen{min-width:66px;font-size:11px}
}

/* มุมมองปฏิทินเรียงกลุ่มลงมาเป็นแถว ไม่ใช่กริดหลายคอลัมน์แบบมุมมองการ์ด */
.ecallist{display:block}

/* ป้ายเตือนงบเก่าบนแถวปฏิทิน */
.qwarn{font-size:10.5px;padding:1px 7px;border-radius:5px;white-space:nowrap;
  background:rgba(251,191,36,.16);color:#fbbf24;border:1px solid rgba(251,191,36,.45)}

/* ── หน้าแตะเส้น × มูลค่าบริษัท ── */
.capsec{margin-bottom:22px}
.capgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.capcard{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--faint);border-radius:12px;padding:11px 13px;
  cursor:pointer;min-width:0}
.capcard:hover{background:#26344a}
.capcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.capcard.up{border-left-color:var(--up)}
.capcard.down{border-left-color:var(--down)}
.capmc{margin-left:auto;font-size:12.5px;color:var(--accent);font-weight:600;
  font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.capcard .emas{margin-top:7px}
.capcard .efoot{margin-top:8px}

/* แถบเลื่อนบนจอแคบมาก (360px) ต้องไม่ดันจนล้น
   min-width:0 จำเป็นเพราะ flex item ไม่ยอมหดต่ำกว่าเนื้อหาโดยปริยาย */
.slider{min-width:0;max-width:100%;flex-wrap:wrap}
.slider input[type=range]{min-width:0;flex:1 1 120px}
.slider output{flex:0 0 auto}
@media(max-width:420px){
  .slider .lab{flex:1 1 100%}
}

/* แท็บย่อยในหน้าหาเส้น EMA */
.subtabs{display:flex;gap:6px;margin-bottom:13px;flex-wrap:wrap}
.subtab{background:var(--panel);border:1px solid var(--line);color:var(--dim);
  border-radius:20px;padding:7px 16px;font-size:13.5px;font-family:inherit;
  cursor:pointer;white-space:nowrap}
.subtab:hover{color:var(--ink);border-color:var(--faint)}
.subtab.on{background:#2a4370;border-color:#3b5a94;color:#fff;font-weight:600}

/* ── หน้าเพิ่งเข้ากระแส ── */
.buzzlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:10px}
.bzcard{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--faint);border-radius:12px;padding:11px 13px;
  cursor:pointer;min-width:0}
.bzcard:hover{background:#26344a}
.bzcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bzcard.up{border-left-color:var(--up)}
.bzcard.down{border-left-color:var(--down)}
.bzvr{margin-left:auto;font-size:12.5px;font-weight:700;padding:1px 8px;border-radius:6px;
  background:var(--sunk);color:var(--dim);font-family:ui-monospace,Consolas,monospace}
.bzvr.hot{background:rgba(251,191,36,.2);color:#fbbf24}
.bzsigs{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.bzsig{background:var(--sunk);border:1px solid var(--line);border-left:2px solid var(--faint);
  border-radius:7px;padding:6px 9px;display:flex;flex-direction:column;line-height:1.4}
.bzsig.up{border-left-color:var(--up)}
.bzsig.down{border-left-color:var(--down)}
.bzsig.flat{border-left-color:#fbbf24}
.bzname{font-size:12.5px;font-weight:600}
.bzsig.up .bzname{color:var(--up)}
.bzsig.down .bzname{color:var(--down)}
.bzsig.flat .bzname{color:#fbbf24}
.bzdetail{font-size:11.5px;color:var(--dim);font-family:ui-monospace,Consolas,monospace}

/* ป้ายเตือนเมื่อค่ากลางหมวดคิดจากตัวอย่างน้อย */
.thin{color:#fbbf24;background:rgba(251,191,36,.14);padding:0 6px;border-radius:4px;
  font-size:10.5px;white-space:nowrap}

/* ── รายละเอียดงบแบบขยาย ── */
.exbox{background:var(--sunk);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-top:9px}
.exhead{font-size:12.5px;font-weight:700;color:var(--dim);margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.exrow{font-size:12.5px;line-height:1.6;padding:6px 10px;border-radius:8px;
  border-left:2px solid var(--faint);background:var(--card);margin-bottom:5px}
.exrow:last-of-type{margin-bottom:0}
.exrow.up{border-left-color:var(--up)}
.exrow.down{border-left-color:var(--down)}
.exrow b{color:var(--ink)}
.exnote{margin:7px 0 0;font-size:11px;color:var(--faint);line-height:1.5}

.mrow{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--faint);
  border-radius:8px;padding:7px 10px;margin-bottom:5px}
.mrow:last-child{margin-bottom:0}
.mrow.p2{border-left-color:var(--up)}
.mrow.p1{border-left-color:#fbbf24}
.mrow.p0{border-left-color:var(--down)}
.mtop{display:flex;align-items:baseline;gap:9px}
.mlabel{font-size:12.5px;color:var(--dim);min-width:118px}
.mval{font-size:15px;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.mword{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:5px;
  background:#2b3850;color:var(--dim)}
.mrow.p2 .mword{background:rgba(74,222,128,.18);color:var(--up)}
.mrow.p1 .mword{background:rgba(251,191,36,.18);color:#fbbf24}
.mrow.p0 .mword{background:rgba(248,113,113,.18);color:var(--down)}
.mwhy{font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.5}

.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:6px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;display:flex;flex-direction:column;line-height:1.4}
.fk{font-size:11px;color:var(--faint)}
.fv{font-size:13.5px;font-weight:600;font-family:ui-monospace,Consolas,monospace}
@media(max-width:600px){.mlabel{min-width:0}}

/* แถวที่เพิ่งได้งบชุดใหม่ */
.erwhen.fresh{color:var(--up);font-weight:700}