/* ============================================================================
 *  SignalNB — theme.css  ชั้นยกระดับดีไซน์พรีเมียม (โหลดทับ inline styles ทุกหน้า)
 *  ผู้พัฒนา: ครูราเมนทร์ สมใจ (ครูอินดี้) · LINE: hfb0262q
 * ----------------------------------------------------------------------------
 *  แนวคิด: คงเอกลักษณ์ "เทรดดิ้งเทอร์มินอลทองเข้ม" แต่ยกระดับให้ล้ำสมัย มีชีวิตชีวา
 *  - พื้นหลัง aurora เคลื่อนไหวช้า ๆ ให้มิติ  - การ์ด hover ยกตัว+เรืองทอง
 *  - ปุ่ม CTA มีแสงกวาด (sheen)  - เลื่อนแล้วเนื้อหาค่อย ๆ ปรากฏ (scroll reveal)
 *  - สโครลบาร์/โฟกัส/ทรานสิชันทั้งเว็บให้เนียนขึ้น  - เคารพ prefers-reduced-motion
 *  ทุกอย่างเป็น "ส่วนเสริม" ไม่แตะ layout/box-model เดิม → ปลอดภัยกับทุกหน้า
 * ==========================================================================*/

:root{
  --snb-ease:cubic-bezier(.22,.68,.28,1);
  --snb-shadow:0 10px 34px -12px rgba(0,0,0,.55);
  --snb-glow-gold:0 0 0 1px rgba(232,179,57,.35), 0 12px 40px -14px rgba(232,179,57,.35);
}

/* ---------- พื้นฐานทั้งเว็บ ---------- */
html{scroll-behavior:smooth}
*{ -webkit-tap-highlight-color:transparent }
a,button,.navtab,.tab,.hz,.card,.stat-card,.ledger,.step,.kpi,.livecell,.tf-btn,.mode3 button,.lot-presets button,.seg button{
  transition:transform .22s var(--snb-ease), box-shadow .22s var(--snb-ease),
             border-color .22s var(--snb-ease), background-color .22s var(--snb-ease),
             color .22s var(--snb-ease), opacity .22s var(--snb-ease);
}
:focus-visible{ outline:2px solid var(--gold,#e8b339); outline-offset:2px; border-radius:6px }

/* สโครลบาร์ทอง (WebKit + Firefox) */
*{scrollbar-width:thin;scrollbar-color:rgba(232,179,57,.4) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(232,179,57,.5),rgba(184,133,31,.5));border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(246,207,106,.7),rgba(232,179,57,.7));background-clip:content-box}
::selection{background:rgba(232,179,57,.32);color:#fff}

/* ---------- พื้นหลัง aurora (ฉีดโดย theme.js) ---------- */
#snb-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#snb-aurora .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;will-change:transform}
#snb-aurora .b1{width:46vw;height:46vw;left:-8vw;top:-12vw;background:radial-gradient(circle,rgba(232,179,57,.30),transparent 62%);animation:snbFloat1 26s ease-in-out infinite}
#snb-aurora .b2{width:40vw;height:40vw;right:-10vw;top:6vh;background:radial-gradient(circle,rgba(31,209,138,.22),transparent 62%);animation:snbFloat2 32s ease-in-out infinite}
#snb-aurora .b3{width:38vw;height:38vw;left:22vw;bottom:-16vw;background:radial-gradient(circle,rgba(77,159,255,.20),transparent 62%);animation:snbFloat3 30s ease-in-out infinite}
@keyframes snbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes snbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vh) scale(1.08)}}
@keyframes snbFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-5vh) scale(1.14)}}
/* เนื้อหาอยู่เหนือ aurora เสมอ */
body>.wrap, body>.grain{position:relative;z-index:2}
body>header,body>main,body>footer{position:relative;z-index:2}

/* ---------- แถบนำทางแบบกระจก (glass) เมื่อเลื่อนลง ---------- */
.mainnav .navtab, .nav a, .navtab{
  position:relative;overflow:hidden;
}
.navtab:hover{ transform:translateY(-2px); box-shadow:var(--snb-glow-gold) }
/* แสงกวาดบนปุ่มนำทาง */
.navtab::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);transition:left .55s var(--snb-ease);pointer-events:none}
.navtab:hover::after{left:130%}

/* ---------- การ์ด: hover ยกตัว + เรืองทองบาง ๆ ---------- */
.card:hover, .stat-card:hover, .ledger:hover, .step:hover, .kpi:hover, .livecell:hover{
  transform:translateY(-3px);
  box-shadow:var(--snb-shadow), 0 0 0 1px rgba(232,179,57,.18);
}
/* การ์ดกราฟ/สัญญาณหลัก ไม่ต้องยกตัว (มี interaction ภายใน) */
.card.chart-card:hover,.card.sigpanel:hover,.card.pro:hover{transform:none}

/* ---------- ปุ่ม CTA หลัก: แสงกวาด + กดแล้วยุบ ---------- */
.place-btn, .btn-add, .bbtn.gold, .applybtn, .tf-btn.on, .seg button.on,
button.buy, button.sell, #bt-run{position:relative;overflow:hidden}
.place-btn::before, .btn-add::before, .bbtn.gold::before, .applybtn::before{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--snb-ease);pointer-events:none}
.place-btn:hover::before, .btn-add:hover::before, .bbtn.gold:hover::before, .applybtn:hover::before{left:140%}
.place-btn:active, .btn-add:active, .bbtn:active, .applybtn:active{transform:translateY(1px) scale(.99)}

/* แท็บกลยุทธ์ + horizon: ยกตัวตอน hover */
.tab:hover{transform:translateY(-2px)}
.hz:hover{transform:translateY(-3px)}
.tab.active{box-shadow:0 6px 20px -8px rgba(232,179,57,.5)}

/* ---------- ป้าย/ตัวเลขสำคัญ: เรืองแสงนุ่ม ---------- */
.price-float, #price, .stat-v, .kpi .v, .livecell .v{text-shadow:0 0 22px rgba(232,179,57,.12)}

/* ---------- scroll reveal (เปิดใช้ผ่าน theme.js) ---------- */
.snb-reveal{opacity:0;transform:translateY(18px)}
.snb-reveal.snb-in{opacity:1;transform:none;
  transition:opacity .6s var(--snb-ease), transform .6s var(--snb-ease);
  transition-delay:calc(var(--snb-i, 0) * 60ms)}

/* ---------- Hero (index.php เท่านั้น) ---------- */
.snb-hero{position:relative;margin:6px 0 22px;padding:34px 30px;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,rgba(21,32,46,.92),rgba(12,18,27,.92));
  border:1px solid var(--line,#223144);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.7)}
.snb-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(680px 300px at 88% -20%,rgba(232,179,57,.20),transparent 60%),
    radial-gradient(520px 280px at 6% 120%,rgba(31,209,138,.12),transparent 60%)}
.snb-hero>*{position:relative;z-index:1}
.snb-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono,monospace);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2,#f6cf6a);
  background:rgba(232,179,57,.08);border:1px solid rgba(232,179,57,.28);border-radius:20px;padding:6px 14px;margin-bottom:16px}
.snb-hero .eyebrow .ld{width:8px;height:8px;border-radius:50%;background:var(--green,#1fd18a);box-shadow:0 0 8px var(--green,#1fd18a);animation:snbPulse 1.6s infinite}
@keyframes snbPulse{0%,100%{opacity:1}50%{opacity:.35}}
.snb-hero h2{font-family:var(--disp,sans-serif);font-size:clamp(26px,4.4vw,44px);line-height:1.12;
  font-weight:700;letter-spacing:-.5px;margin:0 0 14px;max-width:20ch;text-wrap:balance}
.snb-hero h2 .grad{background:linear-gradient(100deg,#f6cf6a,#e8b339 40%,#26e89c);-webkit-background-clip:text;background-clip:text;color:transparent}
.snb-hero p.lead{font-size:15px;color:var(--dim,#8499b0);line-height:1.75;max-width:56ch;margin-bottom:22px}
.snb-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.snb-cta{font-family:var(--disp,sans-serif);font-weight:700;font-size:15px;border:none;border-radius:13px;padding:13px 24px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden;transition:transform .2s var(--snb-ease),box-shadow .2s var(--snb-ease)}
.snb-cta.primary{background:linear-gradient(135deg,#f6cf6a,#e8b339 55%,#c89227);color:#1a1205;box-shadow:0 12px 30px -10px rgba(232,179,57,.6)}
.snb-cta.primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -12px rgba(232,179,57,.7)}
.snb-cta.ghost{background:rgba(255,255,255,.04);color:var(--text,#eef3f9);border:1px solid var(--line2,#2d4156)}
.snb-cta.ghost:hover{border-color:var(--gold,#e8b339);color:var(--gold2,#f6cf6a);transform:translateY(-2px)}
.snb-cta::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s var(--snb-ease)}
.snb-cta:hover::before{left:140%}
.snb-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06)}
.snb-trust .t{text-align:center}
.snb-trust .t .n{font-family:var(--mono,monospace);font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--gold2,#f6cf6a);font-variant-numeric:tabular-nums;line-height:1}
.snb-trust .t .l{font-size:11.5px;color:var(--dim,#8499b0);margin-top:6px;line-height:1.4}
@media(max-width:620px){.snb-trust{grid-template-columns:repeat(2,1fr);gap:16px}}

/* ---------- ปุ่มสลับภาษา (i18n) ให้เข้าธีมพรีเมียม ---------- */
#snb-lang-switch{backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.5)!important}

/* ---------- ลดการเคลื่อนไหวถ้าผู้ใช้ตั้งค่าไว้ ---------- */
@media (prefers-reduced-motion: reduce){
  *,#snb-aurora .blob{animation:none!important}
  .snb-reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
  a,button,.card,.navtab,.tab,.hz{transition:none!important}
}