/* ═══════════════════════════════════════════════════════════
   SabDark Smart Trading - Public Theme
   SabDark Smart Trading v2.0
   ═══════════════════════════════════════════════════════════ */
@import url("tokens-v1b.css?v=1.27.4");
:root { --sidebar-width: 250px; }

/* V1b Master — tokens moved to tokens-v1b.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Prompt", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s, border-color .3s;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--box-pad);
  box-shadow: var(--layer-2-shadow);
  transition: box-shadow .3s, border-color .3s, background .3s;
}
.card:hover { box-shadow: var(--layer-3-shadow); }
/* การ์ดซ้อนต้องลดชั้น (TASK-20261030-ELEV · §2.1) */
.card .table-card, .card .card{box-shadow:var(--layer-1-shadow)}
.card .card:hover{box-shadow:var(--layer-3-shadow)}

/* Button — unified touch 44px */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: var(--btn-font);
  line-height: var(--btn-line-height);
  min-height: var(--btn-min-height);
  min-width: var(--btn-min-width);
  cursor: pointer;
  border: none;
  color: var(--text);
  box-shadow: var(--layer-1-shadow);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { box-shadow: var(--layer-2-shadow); }
.btn:active { box-shadow: var(--layer-press-shadow); transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast,#fff); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast,#fff); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-green { background: var(--green); color: var(--green-contrast,#fff); }
.btn-red { background: var(--red); color: var(--red-contrast,#fff); }
.btn-gold { background: var(--gold); color: var(--gold-contrast,#fff); }
.btn-gray { background: var(--text2); color: var(--card); }
.btn-sm { padding: var(--btn-padding-sm); font-size: var(--btn-font-sm); border-radius: var(--btn-radius-sm); min-height: var(--ctl-height-sm); min-width: var(--ctl-height-sm); justify-content: center; }

/* Badge */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.badge-blue { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.badge-amber { background: var(--badge-amber-bg); color: var(--badge-amber-text); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
/* ── MKT3 s4: badge ทองสถานะตลาด (scoped เฉพาะ #mktBadge) — var(--gold-bg)/var(--gold) 100% ไม่กระทบ badge อื่น · 60fps (no anim) · Dark ใช้ vars อัตโนมัติ ── */
.badge.mkt-gold, #mktBadge.mkt-gold { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold); }

/* Status Dot */
.status-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
.status-dot.green { background: var(--green); }
.status-dot.red { background: var(--red); }
.status-dot.amber { background: var(--gold); animation: pulse 1.5s infinite; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Header — unified topbar */
.header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: var(--topbar-padding);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}
.header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Form */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text2);
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  box-shadow: var(--layer-inset-shadow);
  transition: border-color .2s, box-shadow .2s, background .2s;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

/* Table */
.table-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--layer-2-shadow); }
.table-card h3 { padding: 16px 20px; font-size: 15px; border-bottom: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; font-size: 13px; }
th { background: var(--ticker-bg); color: var(--text2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
td { border-bottom: 1px solid var(--border); }
tr:hover td { background: var(--ticker-bg); }

.text-green { color: var(--green) !important; }
.text-red { color: var(--red) !important; }
.text-dim { color: var(--text2) !important; }
.text-right { text-align: right; }

/* Countdown */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ticker-bg);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* Toast — unified z */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease-out;
  max-width: 400px;
}
.toast.success { background: var(--green); color: var(--green-contrast,#fff); }
.toast.error { background: var(--red); color: var(--red-contrast,#fff); }
.toast.warning { background: var(--gold); color: var(--gold-contrast,#fff); }
.toast-success { background: var(--green); color: var(--green-contrast,#fff); }
.toast-error { background: var(--red); color: var(--red-contrast,#fff); }
.toast-warn { background: var(--gold); color: var(--gold-contrast,#fff); }
.toast-info { background: var(--accent); color:var(--accent-contrast,#fff); }
.toast-gold { background: var(--gold); color: var(--gold-contrast,#fff); }

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Utility */
.container { max-width: var(--content-max); margin: 0 auto; padding: var(--page-pad); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 22px; }
.text-2xl { font-size: 26px; }

/* Grid — FIX: grid-4 ตรงสเปก 4→3→2→1 (900px/600px) ไม่ต้องแก้มาก ใช้ var(--box-gap) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--box-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--box-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--box-gap); }

@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }



/* SYSUX-SB (27/10/2026): กัน scrollbar แนวนอนก้น sidebar — logo แบรนด์ 2 บรรทัด กันการตัดชื่อ + คืนปุ่มธีม */
/* ── User Sidebar (shared across user pages) ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: var(--z-sidebar);
  transition: transform var(--sidebar-anim) var(--sidebar-ease), width var(--sidebar-anim) var(--sidebar-ease);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 1px 0 8px rgba(0,0,0,0.08);
}
.sidebar-logo {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
  min-width: 0;
}
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-contrast,#fff); font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.sidebar-logo .logo-text { color: var(--text); font-weight: 600; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.sidebar-logo .logo-sub { color: var(--sidebar-text2); font-size: 10px; }
.sidebar-theme {
  margin-left: auto;
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; opacity: 0.75; color: var(--text);
  padding: 4px; border-radius: 8px; transition: all 0.2s;
  flex-shrink: 0;
  flex: 0 0 auto;
}
.sidebar-theme:hover { opacity: 1; background: var(--sidebar-hover); }
.sidebar-nav {
  flex: 1;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: all 0.2s;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: var(--text); }
.sidebar-nav a.active { background: var(--accent); color: var(--accent-contrast,#fff); }
.sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 11px; color: var(--sidebar-footer-text);
  text-align: center;
  margin-top: auto;
}
.sidebar-footer .logout-link {
  display: block;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(239,68,68,0.08);
  color: var(--red);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  text-align: center;
  transition: all 0.2s;
}
.sidebar-footer .logout-link:hover { background: rgba(239,68,68,0.15); color: var(--red); }

/* ── Sidebar Credit (กรอบสวย เล็ก — card+border+shadow-sm · label10/amt13/link11 · posเขียว negแดง var(--*)100%) ── */
.sidebar-credit { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 10px 12px; margin: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-credit-label { font-size: 10px; font-weight: 600; color: var(--text2); line-height: 1.3; }
.sidebar-credit-amt { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-credit.pos .sidebar-credit-amt { color: var(--green); }
.sidebar-credit.neg .sidebar-credit-amt { color: var(--red); }
.sidebar-credit-link { font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; align-self: flex-start; line-height: 1.3; }
.sidebar-credit-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── Sidebar Accounts block (สร้างจาก user-sidebar-accounts.js) ── */
.sidebar-sub-title { padding: 6px 14px 2px; font-size: 11px; font-weight: 600; color: var(--text2); }
.sidebar-accounts { display: flex; flex-direction: column; gap: 4px; }
.acct-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acc-type { flex-shrink: 0; font-size: 9px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 6px; background: var(--sidebar-hover); color: var(--text2); }
.sidebar-nav a.sidebar-add-acct { border: 1px dashed var(--sidebar-border); justify-content: center; color: var(--accent); }
.sidebar-login-again { padding: 6px 14px; font-size: 12px; color: var(--gold); line-height: 1.6; }

/* ── User Main (shared) — Auto Fill ย้ายไปด้านล่าง ── */
.sec { padding: var(--section-pad); }

/* ── Hamburger — unified 44px ── */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  min-width: var(--hamburger-size); height: var(--hamburger-size);
  padding: 0 var(--hamburger-padding);
  flex-direction: row; align-items: center; justify-content: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.hb-bars { display: flex; flex-direction: column; gap: var(--hamburger-gap); }
.hb-bars span {
  display: block; width: 20px; height: 2.5px;
  background: var(--text); border-radius: 2px;
  transition: all 0.3s;
}

/* ── Sidebar Overlay (mobile backdrop) — unified ── */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-sidebar-overlay);
  display: none;
  opacity: 0;
  transition: opacity var(--sidebar-anim) var(--sidebar-ease);
  backdrop-filter: blur(var(--overlay-blur));
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ── Sidebar Collapse (PC) — เหมือน Admin 1:1 (USER-SIDEBAR-ADMIN-PARITY-20260903-001) ── */
.sidebar.collapsed { width: 48px; overflow: hidden; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 14px 0; gap: 0; }
.sidebar.collapsed .sidebar-logo .logo-text { font-size: 0; }
.sidebar.collapsed .sidebar-logo .logo-sub { font-size: 0; }
.sidebar.collapsed .sidebar-theme { display: none; }
.sidebar.collapsed .sidebar-nav { padding: 8px 6px; }
.sidebar.collapsed .sidebar-nav a { justify-content: center; padding: 10px 0; gap: 0; font-size: 0; }
.sidebar.collapsed .sidebar-nav a svg { flex-shrink: 0; }
.sb-acc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.sb-acc-dot.ok { background: var(--green, #22c55e); }
.sb-acc-dot.gold { background: var(--gold, #eab308); }
.sb-acc-dot.err { background: var(--red, #ef4444); }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed a .sb-acc-dot { margin: 0 auto; }
.sidebar.collapsed .sidebar-nav a span.acct-name,
.sidebar.collapsed .sidebar-nav a span.sb-acc-type,
.sidebar.collapsed .sidebar-credit,
.sidebar.collapsed .sidebar-sub-title { display: none; }
.sidebar.collapsed .sidebar-footer { padding: 10px 0; }
.sidebar.collapsed .sb-full { display: none; }
.sb-mini { display: none; font-size: 10px; color: var(--sidebar-text); text-align: center; white-space: nowrap; }
.sidebar.collapsed .sb-mini { display: block; }
.sidebar.collapsed .sidebar-footer a { display: block; font-size: 0; text-align: center; padding-top: 2px; }
body.sb-collapsed .main { margin-left: 48px; }
.sb-collapse-btn {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  width: 24px; height: 64px;
  padding: 0;
  background: var(--sidebar-bg); border: 1px solid var(--border); border-left: none;
  border-radius: 0 10px 10px 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sidebar-text); font-size: 14px;
  opacity: 0.85;
  cursor: pointer; z-index: 150;
  box-shadow: 2px 0 10px rgba(0,0,0,.18);
  transition: all 0.2s;
}
.sb-collapse-btn:hover { opacity: 1; color: var(--accent); }
body.sb-collapsed .sb-collapse-btn { display: none; }
.sb-tab {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 60px;
  background: var(--card); border: 1px solid var(--border); border-left: none;
  border-radius: 0 10px 10px 0;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 150;
  color: var(--text2); font-size: 12px;
  box-shadow: 2px 0 10px rgba(0,0,0,.18);
  transition: all 0.2s;
  flex-direction: column; gap: 2px; padding: 0;
}
.sb-tab:hover { color: var(--accent); width: 24px; }
.sb-tab .tab-bar { display: block; width: 4px; height: 22px; background: currentColor; border-radius: 2px; opacity: .85; }
body.sb-collapsed .sb-tab { display: flex; }
@media (max-width: 768px) {
  .sb-tab, .sb-collapse-btn { display: none !important; }
}

/* ── Main Auto Fill — แก้บัง ── */
.main { margin-left: var(--sidebar-width); min-width: 0; padding: var(--page-pad); max-width: var(--content-max); box-sizing: border-box; transition: margin var(--sidebar-anim) var(--sidebar-ease); }

.page-head h2 { flex: 1 1 auto; min-width: 120px; font-size: 20px; }
@media (max-width: 768px) { .page-head h2 { flex: 1 1 100%; font-size: 18px; } }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
  .main { margin-left: 0; padding: var(--page-pad-mobile); }
  .hamburger { display: flex; }
  .sidebar-overlay { display: none; }
  .sidebar-overlay.show { display: block; }
}
@media (max-width: 480px) {
  .main { padding: var(--page-pad-mobile); }
}

/* ── Mobile cards (billing table) ── */
@media (max-width: 768px) {
  .mobile-cards thead { display: none; }
  .mobile-cards, .mobile-cards tbody, .mobile-cards tr, .mobile-cards td { display: block; width: 100%; }
  .mobile-cards tr { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
  .mobile-cards td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: right; position: relative; }
  .mobile-cards td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text2); font-size: 11px; text-transform: uppercase; }
  .mobile-cards td:last-child { border-bottom: none; }
}

/* ── Connectivity Offline Overlay (connectivity.js) ── */
.sabdark-offline {
  position: fixed;
  inset: 0;
  z-index: 999990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fxFadeIn 0.2s ease;
}
.sabdark-offline.hidden { display: none; }
.sabdark-offline-panel {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.sabdark-offline-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 8px;
}
.sabdark-offline-msg {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
}
.sabdark-offline-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid rgba(148,163,184,0.2);
  border-top-color: var(--accent, #f59e0b);
  border-radius: 50%;
  animation: sdSpin 0.9s linear infinite;
}
@keyframes sdSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   Public Pages (landing / dashboard / account_detail)
   ย้ายมาจาก inline <style> เดิมของ 3 หน้า
   ═══════════════════════════════════════════════════════════ */

/* ── Shared components (ใช้ร่วม 2+ หน้า) ── */
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; text-decoration:none; color:inherit; }
.brand .logo { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--purple)); display:flex; align-items:center; justify-content:center; color:#fff; }
.hdr-tag { font-size:11px; font-weight:600; color:var(--gold); background:rgba(245,158,11,.12); padding:3px 12px; border-radius:20px; }
.empty { font-size:12px; color:var(--text2); padding:10px 0; text-align:center; }
.ch-t { font-size:10px; font-weight:600; padding:3px 10px; border-radius:5px; white-space:nowrap; }
.ch-t.real { background:rgba(245,158,11,.12); color:var(--gold); }
.ch-t.demo { background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.ch-t.sys { background:rgba(167,139,250,.12); color:var(--purple); }
.ch-t.ok { background:rgba(34,197,94,.12); color:var(--green); }
.green { color:var(--green); }
.red { color:var(--red); }
.gold { color:var(--gold); }
.accent { color:var(--accent); }
.footer { border-top:1px solid var(--border); margin-top:40px; padding:18px 24px; background:var(--card); text-align:center; font-size:10px; color:var(--text2); }

/* ── Landing page ── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; padding:48px 0 40px; overflow:hidden; }
@media (max-width:950px) { .split { grid-template-columns:1fr; } }
.slide-stage { position:relative; min-height:auto; display:grid; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--border); cursor:pointer; transition:all .3s; border:none; padding:0; }
.dot.active { background:var(--accent); width:26px; border-radius:6px; }
.slide { position:relative; top:auto; left:auto; right:auto; grid-column:1; grid-row:1; opacity:0; transform:translateX(36px); pointer-events:none; transition:opacity .6s ease,transform .6s ease; }
.slide.active { opacity:1; transform:none; pointer-events:auto; }
.slide .tag { display:inline-flex; align-items:center; gap:8px; background:rgba(var(--accent-rgb),.1); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.22); padding:7px 18px; border-radius:30px; font-size:12px; font-weight:600; margin-bottom:18px; }
.slide h1 { font-size:38px; font-weight:900; line-height:1.25; margin-bottom:16px; }
.slide h1 .hl { background:linear-gradient(135deg,var(--accent),var(--green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--hl-ink); }
/* landing เป็นพื้นเข้มถาวร (body.lndg) — ธีมสว่างต้องใช้ gradient โทนสว่างจึงอ่านออก */
body:not(.dark) .slide h1 .hl { background:linear-gradient(135deg,var(--lndg-cy),var(--fixed-ok)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.slide p { font-size:15px; color:var(--text2); margin-bottom:12px; max-width:480px; }
.slide .bullets { display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.bul { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text); }
.bul .ico { width:24px; height:24px; border-radius:50%; background:rgba(74,222,128,.14); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.slide .cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.mock { position:relative; overflow:hidden; }
.mock-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.mock-bar { padding:10px 14px; border-bottom:1px solid var(--border); background:rgba(6,11,20,.5); display:flex; gap:6px; }
.mock-bar i { width:10px; height:10px; border-radius:50%; background:var(--border); }
.mock-bar i:nth-child(1) { background:var(--red); }
.mock-bar i:nth-child(2) { background:var(--gold); }
.mock-bar i:nth-child(3) { background:var(--green); }
.mock-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.mock-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mock-cell { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.mock-cell .l { font-size:9px; color:var(--text2); }
.mock-cell .v { font-size:18px; font-weight:800; color:var(--green); }
.mock-hero { background:linear-gradient(135deg,rgba(250,204,21,.12),rgba(108,140,255,.08)); border:1px solid rgba(250,204,21,.3); border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; }
.mock-hero .av { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#facc15,#6c8cff); display:flex; align-items:center; justify-content:center; font-weight:800; color:#241a00; }
.mock-hero .info { flex:1; min-width:0; }
.mock-hero .info .n { font-size:13px; font-weight:700; }
.mock-hero .info .m { font-size:9px; color:var(--text2); }
.mock-hero .info .chip { display:flex; gap:5px; margin-top:3px; }
.mock-hero .info .chip span { font-size:8px; font-weight:600; padding:2px 7px; border-radius:4px; }
.mock-hero .info .chip .ct { background:rgba(250,204,21,.15); color:var(--gold); }
.mock-hero .info .chip .cs { background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.mock-hero .megaval { font-size:20px; font-weight:900; color:var(--green); text-align:right; line-height:1.1; }
.mock-hero .megaval .sub { font-size:9px; color:var(--text2); font-weight:400; }
.mock-hero .sub { font-size:9px; color:var(--text2); font-weight:400; text-align:right; }
.mock-hero .megaval-wrap { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; }
.mock-list { display:flex; flex-direction:column; gap:6px; }
.mock-item { display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:10px; }
.mock-item .rk { font-weight:800; width:16px; text-align:center; }
.mock-item .rk.s2 { color:var(--gold); }
.mock-item .rk.s3 { color:var(--gold); }
.mock-item .n { flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-item .v { font-weight:700; color:var(--green); }
.mock-float { position:absolute; bottom:0; right:0; background:var(--card); border:1px solid var(--gold); border-radius:12px; padding:14px 20px; box-shadow:0 12px 36px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; animation:floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.mock-float .ic { width:24px; height:24px; color:var(--gold); }
.mock-float .t { font-size:10px; color:var(--text2); }
.mock-float .s { font-size:14px; font-weight:800; color:var(--green); }
.why-stage { position:relative; min-height:300px; margin-bottom:50px; display:grid; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; top:auto; left:auto; right:auto; grid-column:1; grid-row:1; opacity:0; transform:translateX(30px); pointer-events:none; transition:opacity .55s ease,transform .55s ease; }
.why-grid.active { opacity:1; transform:none; pointer-events:auto; }
@media (max-width:1200px) { .why-grid { grid-template-columns:repeat(3,1fr); } .split { gap:28px; padding:36px 0 30px; } .slide h1 { font-size:32px; } }
@media (max-width:900px) { .why-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .why-grid { grid-template-columns:1fr; } }
@media (max-width:500px) { .why-grid { grid-template-columns:1fr; } }
@media (min-width:2000px) { .why-grid { grid-template-columns:repeat(4,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } }
.why { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; transition:all .3s; opacity:0; transform:translateY(18px); }
.why-grid.active .why { animation:cardIn .55s ease forwards; }
@keyframes cardIn { to { opacity:1; transform:none; } }
.why-grid.active .why:nth-child(1) { animation-delay:.05s; }
.why-grid.active .why:nth-child(2) { animation-delay:.15s; }
.why-grid.active .why:nth-child(3) { animation-delay:.25s; }
.why:hover { border-color:var(--accent); transform:translateY(-3px); }
.why .icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.why h3 { font-size:14px; font-weight:700; margin-bottom:6px; }
.why p { font-size:12px; color:var(--text2); }
.cta-block { margin:0 0 60px; background:linear-gradient(135deg,rgba(108,140,255,.08),rgba(74,222,128,.06)); border:1px solid rgba(108,140,255,.2); border-radius:20px; padding:48px 40px; text-align:center; }
.cta-block h2 { font-size:28px; font-weight:900; margin-bottom:10px; background:linear-gradient(135deg,var(--accent),var(--green),var(--gold),var(--accent)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.cta-block p { color:var(--text2); font-size:15px; margin-bottom:26px; animation:fadeUp .8s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.cta-block .btn-green { animation:btnPulse 2.5s ease-in-out infinite; }
@keyframes btnPulse { 0%,100% { box-shadow:0 4px 14px rgba(74,222,128,.2); } 50% { box-shadow:0 6px 24px rgba(74,222,128,.45); } }
.fixed-cta { display:flex; justify-content:center; margin:0 0 6px; }
.fixed-cta .btn { min-width:220px; text-align:center; justify-content:center; }
.hero-slogan { text-align:center; font-size:28px; font-weight:800; margin:44px 0 6px; color:var(--text2); }
.hero-slogan .kw { color:var(--gold); font-weight:900; display:inline-block; }
.hero-slogan b:nth-of-type(1) { animation:bounce 1.2s ease-in-out infinite; }
.hero-slogan b:nth-of-type(2) { animation:sway 1.6s ease-in-out infinite .2s; }
.hero-slogan b:nth-of-type(3) { animation:kneelift 1.4s ease-in-out infinite .4s; }
.hero-slogan b:nth-of-type(4) { animation:roll 1.8s ease-in-out infinite .6s; }
@keyframes bounce { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-7px); } 60% { transform:translateY(0); } }
@keyframes sway { 0%,100% { transform:translateX(0) rotate(0); } 25% { transform:translateX(4px) rotate(5deg); } 50% { transform:translateX(0) rotate(0); } 75% { transform:translateX(-4px) rotate(-5deg); } }
@keyframes kneelift { 0%,100% { transform:scaleY(1); } 40% { transform:scaleY(1.25) translateY(-3px); } 70% { transform:scaleY(1); } }
@keyframes roll { 0%,100% { transform:rotate(0); } 25% { transform:rotate(6deg); } 50% { transform:rotate(0); } 75% { transform:rotate(-6deg); } }
.cta-block .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.foot-about { max-width:960px; margin:0 auto; text-align:center; }
.foot-brand { font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.foot-brand .logo { width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--accent),var(--purple)); display:flex; align-items:center; justify-content:center; color:#fff; }
.foot-desc { font-size:11px; color:var(--text2); line-height:1.6; max-width:960px; margin:0 auto 8px; text-align:justify; }
.foot-desc strong { color:var(--text); font-weight:700; }
.foot-note { font-size:10px; color:var(--text3); line-height:1.5; max-width:960px; margin:12px auto 0; text-align:justify; border-top:1px dashed var(--border); padding-top:10px; }
.foot-copy { font-size:10px; color:var(--text2); text-align:center; margin-top:14px; }
@media (max-width:950px) {
  .header { flex-wrap:wrap; gap:10px; }
  .header-actions { flex-wrap:wrap; }
  .split { grid-template-columns:1fr; gap:30px; padding:36px 0 20px; }
  .slide-stage { min-height:0; }
  .slide { position:relative; display:none; opacity:1; transform:none; pointer-events:auto; transition:none; }
  .slide.active { display:block; animation:slideFade .45s ease; }
  @keyframes slideFade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  .slide .tag { margin-bottom:14px; }
  .slide h1 { font-size:28px; margin-bottom:12px; }
  .slide p { font-size:14px; margin-bottom:10px; }
  .slide .bullets { gap:7px; margin-bottom:16px; }
  .slide .cta-row { gap:10px; }
  .slide .btn { padding:11px 20px; font-size:13px; }
  .mock { width:100%; overflow:hidden; }
  .mock-float { right:8px; bottom:0; }
  .mock-float .s { font-size:12px; }
  .mock-hero .megaval { font-size:17px; }
  .mock-body { padding:12px; }
  .mock-stat-row { gap:6px; }
  .mock-cell { padding:9px; }
  .mock-cell .v { font-size:15px; }
  .why-stage { min-height:0; }
  .why-grid { position:relative; display:none; opacity:1; transform:none; pointer-events:auto; transition:none; }
  .why-grid.active { display:grid; }
  .why-grid { gap:10px; }
  .why { padding:14px; }
  .why .icon { width:38px; height:38px; margin-bottom:8px; }
  .why h3 { font-size:13px; }
  .why p { font-size:11px; }
  .cta-block { padding:30px 20px; margin:0 0 40px; }
  .cta-block h2 { font-size:22px; }
  .fixed-cta { margin-bottom:16px; }
  .fixed-cta .btn { min-width:200px; font-size:13px; padding:11px 22px; }
  .cta-block p { font-size:13px; }
  .hero-slogan { font-size:16px; line-height:1.35; max-width:340px; margin:20px auto 0; text-align:center; }
}

/* ── Dashboard page ── */
.hdr-actions { display:flex; gap:10px; align-items:center; }
.w1 { grid-area:w1; } .w2 { grid-area:w2; } .w3 { grid-area:w3; } .w4 { grid-area:w4; } .w5 { grid-area:w5; }
.bottom { grid-area:bottom; display:grid; grid-template-columns:1fr 1fr; gap:var(--box-gap); }
@media (max-width:1200px) { .bottom { grid-template-columns:1fr; } }
@media (max-width:700px) { .bottom { grid-template-columns:1fr; } }
@media (min-width:1600px) { .bottom { gap:var(--box-gap); } }
@media (min-width:2000px) { .bottom { gap:var(--box-gap); } }
.sec-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; margin:4px 0 8px; }
.sec-title .sub { font-size:10px; color:var(--text2); font-weight:400; }
.wid { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot.green { background:var(--green); }
.dot.gold { background:var(--gold); }
.dot.orange { background:var(--orange); }
.dot.gray { background:var(--text3); }
.rows { display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.lr { display:flex; align-items:center; gap:8px; font-size:11px; padding:6px 8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; position:relative; }
.lr.locked { cursor:not-allowed; opacity:.75; }
.lr.verified { cursor:pointer; transition:border-color .15s; }
.lr.verified:hover { border-color:var(--accent); }
.lr .rk { width:20px; text-align:center; font-weight:800; color:var(--text2); flex-shrink:0; }
.lr .rk.gold { color:var(--gold); }
.lr .rk.silver { color:var(--text2); }
.lr .rk.bronze { color:var(--gold); }
.lr .n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.lr .v { font-weight:700; white-space:nowrap; }
.lr .lock-mini { position:absolute; inset:0; background:rgba(6,11,20,.5); display:none; align-items:center; justify-content:center; border-radius:6px; z-index:2; }
.lr.locked:hover .lock-mini { display:flex; }
.lr .lock-mini .lk { width:20px; height:20px; border-radius:50%; background:var(--red); color:var(--red-contrast,#fff); font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.lr .ch-lv { font-size:8px; font-weight:700; color:var(--gold); background:rgba(245,158,11,.1); padding:1px 6px; border-radius:8px; white-space:nowrap; }
.hero-13 { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--box-gap); }
.hero-c { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:8px; position:relative; }
.hero-c.rank-1 { border-color:rgba(245,158,11,.35); box-shadow:0 0 18px rgba(245,158,11,.07); }
.hero-c.locked { cursor:not-allowed; opacity:.8; }
.hero-c.verified { cursor:pointer; transition:all .2s; }
.hero-c.verified:hover { border-color:var(--accent); transform:translateY(-2px); }
.hero-c .lock-overlay { position:absolute; inset:0; background:rgba(6,11,20,.55); backdrop-filter:blur(1.5px); display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:var(--radius); z-index:3; }
.hero-c.locked:hover .lock-overlay { display:flex; }
.hero-c .lock-overlay .lock-ic { width:30px; height:30px; border-radius:50%; background:var(--red); color:var(--red-contrast,#fff); display:flex; align-items:center; justify-content:center; }
.hero-c .lock-overlay .lock-txt { font-size:9px; color:#fff; font-weight:600; }
.hc-top { display:flex; align-items:center; gap:8px; }
.rk-badge { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
.rk-badge.r1 { background:rgba(245,158,11,.15); color:var(--gold); }
.rk-badge.r2 { background:rgba(148,163,184,.15); color:var(--text2); }
.rk-badge.r3 { background:rgba(205,127,50,.15); color:var(--gold); }
.hc-name { font-weight:700; font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hc-sub { font-size:10px; color:var(--text2); }
.hc-val { font-size:22px; font-weight:800; color:var(--green); line-height:1.1; }
.hc-spark { width:100%; height:24px; display:block; }
.hc-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.hc-metrics .hm { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:5px 3px; text-align:center; }
.hc-metrics .hm .hl { font-size:8px; color:var(--text2); }
.hc-metrics .hm .hv { font-size:11px; font-weight:700; }
.sys-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--box-gap); overflow:hidden; }
@media (max-width:1200px) { .sys-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .sys-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1600px) { .sys-grid { gap:var(--box-gap); } }
@media (min-width:2000px) { .sys-grid { grid-template-columns:repeat(4,1fr); gap:var(--box-gap); } }
.sys { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.sys .sn { font-size:10px; font-weight:600; color:var(--text2); }
.sys .sv { font-size:16px; font-weight:800; color:var(--green); }
.sys .sbar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:2px; }
.sys .sbar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--green)); border-radius:3px; }
.cloud-summary { font-size:12px; font-weight:600; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cloud-summary .num { font-size:16px; font-weight:800; padding:0 2px; }
.cloud-summary .num.green { color:var(--green); }
.cloud-summary .num.red { color:var(--red); }
.cloud-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--box-gap); }
@media (max-width:1200px) { .cloud-list { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1600px) { .cloud-list { gap:var(--box-gap); } }
@media (min-width:2000px) { .cloud-list { grid-template-columns:repeat(4,1fr); gap:var(--box-gap); } }
.cm { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; align-items:center; gap:10px; font-size:11px; }
.cm .c-icon { width:32px; height:32px; flex-shrink:0; color:var(--accent); position:relative; display:flex; align-items:center; justify-content:center; }
.cm .c-icon .ring { position:absolute; inset:-4px; border:2px dashed var(--accent); border-radius:50%; animation:spin 3s linear infinite; opacity:.55; }
.cm .c-icon .ring.stop { animation:none; border-color:var(--text3); opacity:.4; }
.cm .c-icon svg { width:20px; height:20px; }
@keyframes spin { to { transform:rotate(360deg); } }
.cm .c-info { flex:1; min-width:0; }
.cm .c-name { font-weight:600; }
.cm .c-sub { font-size:9px; color:var(--text2); }
.cm .c-status { font-size:9px; font-weight:600; white-space:nowrap; }
.cm .c-status.run { color:var(--green); }
.cm .c-status.stop { color:var(--text3); }
.cm .c-cd { font-size:9px; color:var(--text2); white-space:nowrap; }
.cm .c-cd b { color:var(--gold); font-family:Consolas,monospace; font-size:11px; }

/* ── Account detail page ── */
.back-link { color:var(--text2); font-size:12px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.back-link:hover { color:var(--accent); }
.sec { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-top:14px; }
.sec h3 { font-size:13px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.acc-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.acc-av { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--purple)); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; }
.acc-title { flex:1; min-width:0; }
.acc-name { font-size:19px; font-weight:800; }
.acc-meta { font-size:11px; color:var(--text2); }
.acc-id { font-size:10px; color:var(--text3); font-family:Consolas,monospace; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (max-width:700px) { .metrics { grid-template-columns:repeat(2,1fr); } }
.metric { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; text-align:center; }
.metric .ml { font-size:9px; color:var(--text2); }
.metric .mv { font-size:16px; font-weight:700; margin-top:2px; }
.metric .mv.big { font-size:22px; }
.chart-box { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; margin-top:10px; }
.chart-box svg { width:100%; display:block; }
.tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.tab { padding:6px 16px; border-radius:7px; border:1px solid var(--border); background:transparent; color:var(--text2); font-size:12px; cursor:pointer; font-family:Prompt,sans-serif; font-weight:600; transition:all .2s; }
.tab.active { background:var(--accent); color:var(--accent-contrast,#fff); border-color:var(--accent); }
.sym-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); font-size:12px; }
.sym-row:last-child { border-bottom:none; }
.sym-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sym-name { font-weight:700; width:110px; }
.sym-pct { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.sym-pct i { display:block; height:100%; border-radius:4px; }
.sym-pctval { width:44px; text-align:right; font-size:11px; color:var(--text); }
.sym-cnt { color:var(--text2); font-size:11px; width:70px; text-align:right; }
.sym-pnl { font-weight:700; width:80px; text-align:right; }

/* ── Billing: พอยท์และเลเวล Compact Pro กลางๆ (ย้ายจาก inline billing.html — เลือก B + กลางๆ) ── */
.points-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.point-card{border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center;background:var(--card);min-width:0;overflow:hidden}
.point-card .pv{font-size:18px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#pointsNext{font-size:10px}
@media (max-width:768px){
  .points-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .point-card{padding:8px 6px}
  .point-card .pv{font-size:14px}
  .point-card .bl-label{font-size:10px}
  .point-card .bl-sub{font-size:9.5px}
}
@media (max-width:400px){
  .points-grid{gap:4px}
  .point-card{padding:6px 4px;border-radius:6px}
  .point-card .pv{font-size:13px}
}
/* ── Billing: ชาเลนจ์ (ย้ายจาก inline billing.html) ── */
.challenge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
@media (max-width:768px){.challenge-grid{grid-template-columns:1fr}}
.challenge-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:13px}
.challenge-item.done{border-color:var(--green);background:rgba(34,197,94,0.08)}
.challenge-item .ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;border:1px solid var(--border)}
.challenge-item.done .ck{background:var(--green);color:var(--green-contrast,#fff);border-color:var(--green)}
/* ── Billing: เกจบาร์ 4 สี ต่อชาเลนจ์ (แทนวงกลมเดิม) ── */
.challenge-bar-wrap{width:110px;flex-shrink:0;display:flex;flex-direction:column;gap:3px;align-items:stretch}
.challenge-bar-pct{font-size:10px;font-weight:800;line-height:1;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.challenge-bar-track{height:8px;background:var(--border2,#e5e7eb);border-radius:999px;overflow:hidden;position:relative}
.challenge-bar-track i{display:block;height:100%;border-radius:999px;transition:width .4s ease,background .3s ease}
@media (max-width:768px){.challenge-bar-wrap{width:96px}}
/* legacy — คงไว้เผื่อ cache เก่า (ซ่อน) */
.challenge-gauge{display:none !important}
/* ── Billing: Celebration — Balloon + Confetti + Firework ── */
.celebrate-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.balloon{position:absolute;bottom:-80px;width:38px;height:52px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;opacity:.9;animation:balloonFloat 4.2s ease-in forwards}
.balloon::after{content:'';position:absolute;left:50%;bottom:-12px;width:2px;height:14px;background:rgba(0,0,0,.2);transform:translateX(-50%)}
.confetti{position:absolute;top:-12px;width:8px;height:12px;opacity:.95;animation:confettiFall 3s linear forwards}
.firework{position:absolute;width:4px;height:4px;border-radius:50%;animation:fireworkPop 900ms ease-out forwards}
@keyframes balloonFloat{0%{transform:translateY(0) scale(.85);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(-110vh) scale(1.05);opacity:0}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0deg) translateX(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg) translateX(30px);opacity:0}}
@keyframes fireworkPop{0%{transform:scale(0);opacity:1;box-shadow:0 0 0 0 var(--fw-c, #22c55e)}50%{opacity:1}100%{transform:scale(1);opacity:0;box-shadow:0 0 0 18px transparent, 0 0 0 32px transparent}}

/* ═══════════════════════════════════════════════════════════
   Billing — Compact Pro v2 (S5+S6 · TASK-20260921-155000-CHAL)
   ย้าย inline style ทั้งหน้า billing.html → คลาส .bl-* ที่นี่ที่เดียว (ไม่แตะ app.css)
   ใช้ var(--*) 100% · PC จัดกลุ่ม 2-3 คอลัมน์ · มือถือ ≤768 = 1 คอลัมน์ (ข้อมูลย่อย 2×2) · ≤400 กระชับขึ้นอีกขั้น
   ═══════════════════════════════════════════════════════════ */

/* ── โครงหน้า + แบรนด์ใน sidebar (ย้ายจาก <style> ในหน้า) ── */
.bl-page-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bl-logo{justify-content:space-between}
.bl-logo-name{font-weight:800;font-size:15px;white-space:nowrap;cursor:pointer}
.bl-brand-a{color:var(--accent)}
.bl-brand-b{color:var(--text)}

/* ── การ์ด/หัวข้อ/แถว (Compact Pro) ── */
.bl-card{padding:var(--box-pad);min-width:0}
.bl-h3{font-size:14px;font-weight:700;margin-bottom:10px}
.bl-h4{font-size:13px;font-weight:700;margin:14px 0 8px}
.bl-mt{margin-top:12px}
.bl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bl-spread{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.bl-metric{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-label{font-size:11px;color:var(--text2);font-weight:600}
.bl-sub{font-size:10.5px;color:var(--text2)}
.bl-hint{font-size:10.5px;color:var(--text2)}
.bl-bal{font-size:24px;font-weight:800;color:var(--accent);line-height:1.15;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-bal.green{color:var(--green)}
.bl-amt{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.bl-amt.gold{color:var(--gold)}
/* กระเป๋า: PC 2 คอลัมน์ (เครดิต | เงินสด) · ในบัญชี PC 3 ช่อง ข้อมูลย่อยมือถือ 2×2 */
.bl-wallets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--box-gap);align-items:start}
.bl-wallet-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
@media (max-width:900px){.bl-wallets{grid-template-columns:1fr}}
@media (max-width:768px){
  .bl-wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bl-wallet-grid .bl-span2{grid-column:1/-1}
}
.bl-btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bl-btn-row .btn{margin:0}
@media (max-width:768px){
  .bl-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .bl-btn-row .btn{width:100%;text-align:center}
  .bl-btn-row .bl-ref-url{grid-column:1/-1}
}

/* ── พอยท์และเลเวล ── */
.point-card .pv.accent{color:var(--accent)}
.point-card .pv.gold{color:var(--gold)}
.point-card .pv.green{color:var(--green)}
.bl-rule{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;padding:6px 10px;border:1px dashed var(--border);border-radius:8px;background:var(--gray-bg);font-size:11px;color:var(--text2)}
.bl-rule b{color:var(--text)}
.bl-chal{margin-top:12px}
.bl-chal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bl-chal-head .bl-h4{margin:0;font-size:13px}
.bl-chal-sum{font-size:10.5px;color:var(--text2);margin-left:auto;font-variant-numeric:tabular-nums}
.bl-progress{margin-top:8px;height:8px;background:var(--border2);border-radius:4px;overflow:hidden}
.bl-progress-fill{height:100%;width:0;background:var(--green);transition:width .3s}

/* ── การ์ดชาเลนจ์วนรอบ 14 ตัว (contract S2) ── */
.bl-empty{grid-column:1/-1;text-align:center;color:var(--text2);font-size:11px;padding:8px}
.bl-empty.error{color:var(--red)}
.challenge-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:8px 10px;font-size:12px}
.challenge-item.capped{border-color:var(--gold)}
.challenge-item.disabled{opacity:.55}
.ci-main{min-width:0}
.ci-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.ci-title{font-weight:700;font-size:12.5px;overflow-wrap:break-word}
.ci-desc{font-size:10.5px;color:var(--text2);line-height:1.45;overflow-wrap:break-word;margin-top:1px}
.ci-meta{font-size:10px;color:var(--text2);margin-top:2px;font-variant-numeric:tabular-nums}
.ci-tag{display:inline-block;padding:1px 6px;border-radius:5px;font-size:9.5px;font-weight:700;background:var(--gray-bg);color:var(--text2);white-space:nowrap}
.ci-tag.scope{background:var(--accent-bg);color:var(--accent2)}
.ci-tag.ready{background:var(--green-bg);color:var(--green)}
.ci-tag.capped{background:var(--gold-bg);color:var(--gold)}
.ci-tag.off{background:var(--red-bg);color:var(--red)}
.ci-acc{grid-column:2/-1;display:grid;gap:3px;margin-top:2px;padding-top:5px;border-top:1px dashed var(--border)}
.ci-acc-row{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text2);min-width:0}
.ci-acc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.ci-acc-metric{font-variant-numeric:tabular-nums;white-space:nowrap}
.ci-acc-rounds{color:var(--gold);font-weight:700;white-space:nowrap}
.ci-acc-more{font-size:9.5px;color:var(--text2);text-align:right}

/* ── เติมเครดิต + QR + สลิป ── */
.bl-form{display:grid;gap:10px;max-width:440px}
.bl-form-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bl-flabel{display:block;font-size:12px;font-weight:600;margin-bottom:4px}
.bl-flabel-sm{display:block;font-size:11px;color:var(--text2);margin-bottom:2px}
.bl-input{margin-top:4px}
.bl-input-sm{margin-top:2px}
.bl-msg{margin-left:10px;font-size:12px}
.bl-msg-solo{font-size:12px}
.bl-verify{font-size:11px}
.bl-qr{display:none;text-align:center;padding:10px;border:1px solid var(--border2);border-radius:10px}
.bl-qr img{max-width:200px;width:100%;border-radius:8px;margin:0 auto}
.bl-qr-payee{font-size:12px;margin-top:6px}
.bl-qr-pid{font-size:11px;color:var(--text2)}
.bl-qr-amt{font-size:14px;font-weight:700;margin-top:2px}
.bl-qr-note{font-size:10px;color:var(--green);margin-top:4px}
.bl-notify{display:none;margin-top:8px;padding:12px;border:1px solid var(--gold);border-radius:10px;background:var(--card)}
.bl-notify-title{font-weight:700;font-size:12.5px;margin-bottom:8px}
.bl-grid{display:grid;gap:8px}
.bl-slip{display:none;margin-top:6px;max-width:160px;max-height:160px;border-radius:8px}

/* ── คอมมิชชั่นค่าแนะนำ + ตาราง ── */
.bl-ref-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bl-stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-ref-code{font-size:16px;font-weight:800;letter-spacing:.4px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-ref-bal{font-size:16px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-ref-count{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.bl-ref-url{font-size:10.5px;color:var(--accent);word-break:break-all;flex:1 1 220px;max-width:100%}
.bl-note{font-size:10.5px;color:var(--text2);margin-top:8px;line-height:1.5}
.bl-scroll{overflow-x:auto}
.bl-table th,.bl-table td{padding:7px 10px}
.bl-td-mono{font-family:monospace}
.bl-td-strong{font-weight:600}
.bl-td-dim{font-size:10.5px;color:var(--text2)}
.bl-td-red{font-weight:700;color:var(--red)}

/* ── จอเล็กมาก ≤400 — กระชับขึ้นอีกขั้น ── */
@media (max-width:400px){
  .bl-card{padding:10px}
  .bl-bal{font-size:19px}
  .bl-ref-code,.bl-ref-bal{font-size:14px}
  .challenge-item{padding:7px 8px;gap:5px 6px}
  .challenge-bar-wrap{width:84px}
}

/* ═══════════════════════════════════════════════════════════
   User Dashboard — เครดิต + การ์ดบัญชี + สถานะ dropdown
   ใช้ var(--*) 100% ห้าม hardcode — แชร์ User+Public
   ═══════════════════════════════════════════════════════════ */
.credit-box { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); margin-bottom:16px; }
.credit-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.credit-label { font-size:11px; color:var(--text2); font-weight:600; }
.credit-value { font-size:19px; font-weight:800; color:var(--text); line-height:1.2; font-variant-numeric:tabular-nums; }
.credit-value.pos { color:var(--green); }
.credit-value.neg { color:var(--red); }
.credit-sub { font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.credit-action { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-contrast,#fff); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; box-shadow:var(--shadow); transition:all .2s; white-space:nowrap; flex-shrink:0; border:1px solid var(--accent); }
.credit-action:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-contrast,#fff); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
@media (max-width:480px){ .credit-box{ padding:10px 12px; } .credit-value{ font-size:16px; } .credit-action{ padding:6px 10px; font-size:11px; } }

.acs-wrap { cursor:default; display:flex; flex-direction:column; gap:4px; }
.acs-wrap .acc { cursor:default; }
.acc-detail-bar { display:inline-flex; justify-content:flex-end; padding:2px 0 2px; }
.acc-detail-btn { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--accent-contrast,#fff); padding:3px 8px; border-radius:6px; font-size:10px; font-weight:700; text-decoration:none; box-shadow:var(--shadow); transition:all .18s; border:1px solid var(--accent); }
.acc-detail-btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-contrast,#fff); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.cfg-sum { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:9.5px; color:var(--text2); box-shadow:var(--shadow-sm); display:flex; flex-wrap:wrap; gap:3px 6px; align-items:center; line-height:1.4; }
.cfg-sum .cfg-item { white-space:nowrap; display:inline-flex; gap:4px; align-items:center; }
.cfg-sum .cfg-key { color:var(--text2); font-weight:500; font-size:8.5px; }
.cfg-sum .cfg-val { color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; font-size:9.5px; }
.cfg-divider { margin:0 4px; color:var(--text3); }

.status-dd-wrap { position:relative; display:inline-flex; }
.status-dd { display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); min-width:132px; z-index:15; padding:6px; flex-direction:column; gap:2px; }
.status-dd-wrap.open .status-dd { display:flex; }
.status-dd .dd-item { display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; color:var(--text); font-size:12px; padding:7px 10px; border-radius:7px; cursor:pointer; text-align:left; font-family:inherit; transition:background .15s; white-space:nowrap; }
.status-dd .dd-item:hover { background:var(--accent-glass); }
.status-dd .dd-item.active { background:var(--accent-bg); color:var(--accent); font-weight:700; }
.menu-dd hr { border:none; border-top:1px solid var(--border); margin:4px 0; }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Trade Config Popup (กลาง — User: add_account + dashboard) ── */
/* z-index ต่ำกว่า .fx-overlay (999999) ของ fx-popup — ให้ fxAlert/fxConfirm แสดงทับได้เสมอ */
.fx-overlay[data-tc="trade-config"] { z-index: 999000; }
.fx-panel.trade-cfg { max-width: 640px; max-height: 88vh; overflow-y: auto; text-align: left; }
.tc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.tc-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--fx-text, var(--text)); }
.fx-panel.trade-cfg .tc-close { flex: 0 0 auto; padding: 4px 12px; font-size: 14px; line-height: 1.4; }
.tc-section { font-size: 12px; font-weight: 800; color: var(--accent); margin: 14px 0 8px; }
.tc-head + .tc-section { margin-top: 4px; }
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.tc-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .tc-grid { grid-template-columns: 1fr; } }
.tc-field { min-width: 0; }
.tc-label { display: block; color: var(--fx-text2, var(--text2)); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.tc-hint { display: block; font-size: 11px; line-height: 1.45; color: var(--fx-text2, var(--text2)); margin-top: 4px; }
.tc-hint-danger { color: var(--red); }
.tc-foot { display: flex; gap: 10px; margin-top: 18px; }

/* ── B2: แถบสถานะคิว (static/js/queue-status.js) — User + Public ──
   banner มุมล่างกลางจอ · pointer-events:none = ไม่บล็อกการใช้งานทั้งหน้า (ไม่ใช่ modal)
   z-index 999800 = เหนือ topbar/toast แต่ต่ำกว่า overlay ออฟไลน์ (999990) และ fx-popup (999999)
   ใช้ token ของ tokens-v1b.css ทั้งหมด — ห้าม hardcode สี */
.sdq-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:999800;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:10px 14px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-lg);pointer-events:none;animation:sdqIn .22s ease}
.sdq-bar.sdq-hide{display:none}
.sdq-spin{flex:0 0 auto;width:16px;height:16px;border:2px solid rgba(var(--accent-rgb),.25);border-top-color:var(--accent);border-radius:50%;animation:sdqSpin .9s linear infinite}
.sdq-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.sdq-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
.sdq-sub{font-size:11px;color:var(--text2);line-height:1.45}
.sdq-track{height:4px;border-radius:2px;background:var(--gray-bg);overflow:hidden}
.sdq-fill{height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .45s linear}
.sdq-bar.sdq-indet .sdq-fill{width:35%;animation:sdqIndet 1.1s ease-in-out infinite}
@keyframes sdqSpin{to{transform:rotate(360deg)}}
@keyframes sdqIndet{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes sdqIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:600px){.sdq-bar{left:8px;right:8px;bottom:8px;transform:none;width:auto;max-width:none;padding:8px 10px;gap:8px;animation:none}.sdq-title{font-size:12px}.sdq-sub{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sdq-spin,.sdq-bar.sdq-indet .sdq-fill{animation:none}}

/* ═══════════════════════════════════════════════════════════
   User — หน้ารายละเอียดบัญชี (templates/user/account/detail.html)
   ย้ายคลาสที่เดิมฝังใน <style> ของเทมเพลตมาไว้ที่ไฟล์กลาง + ใช้ token var(--*) 100%
   (ตาม docs/UI-GUIDE.md §2 "ห้าม hardcode สี" และ §4 "ใช้คลาสที่มีอยู่ ไม่สร้างซ้ำ")
   คลาสทั้งหมดขึ้นต้นด้วย ad- / cal- → ไม่ชนกับหน้าอื่น · ตารางใช้ .table-card + .mobile-cards ของกลาง
   ═══════════════════════════════════════════════════════════ */

/* ── แถบหัวเรื่อง + การ์ดหัวบัญชี ── */
.ad-topbar { display:flex; align-items:center; gap:var(--box-gap); flex-wrap:wrap; margin-bottom:var(--box-gap); }
.ad-title { flex:1; min-width:0; font-size:26px; font-weight:700; }
.ad-head { display:flex; align-items:center; justify-content:space-between; gap:var(--box-gap); flex-wrap:wrap; }
.ad-head-l { display:flex; align-items:center; gap:var(--box-gap); min-width:0; }
.ad-av { width:46px; height:46px; border-radius:var(--radius); background:var(--accent-glass); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.ad-name { font-size:18px; font-weight:800; }
.ad-meta { font-size:12px; color:var(--text2); }
.ad-id { font-size:11px; color:var(--text3); }
.ad-actions { display:flex; gap:var(--scale-8); flex-wrap:wrap; }

/* ── เมตริก 8 ช่อง (ใช้ .metrics/.metric ของกลาง — เติมสีค่าตามสถานะ) ── */
.ad-metrics-card { margin-bottom:var(--box-gap); }
.metric.mc-click { cursor:pointer; }
.metric .mv.pos { color:var(--green); }
.metric .mv.neg { color:var(--red); }
.metric .mv.acc { color:var(--accent); }

/* ── แบนเนอร์ AI ── */
.ai-banner { margin:var(--box-gap) 0; background:var(--accent-bg); border:1px solid var(--border2); border-radius:var(--radius); padding:var(--box-pad); display:flex; gap:var(--box-gap); align-items:center; }
.ai-banner .ab-tag { background:var(--accent); color:var(--accent-contrast,#fff); padding:6px 10px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; white-space:nowrap; }
.ai-banner .ab-text { font-size:12px; color:var(--text2); flex:1; }

/* ── กราฟ + สถิติขั้นสูง ── */
.chart-stats { display:grid; grid-template-columns:2fr 1fr; gap:var(--box-gap); }
@media (max-width:900px) { .chart-stats { grid-template-columns:1fr; } }
.ad-chart-head { display:flex; justify-content:space-between; align-items:center; gap:var(--scale-8); flex-wrap:wrap; margin-bottom:var(--scale-8); }
.ad-chart-head h3 { font-size:14px; font-weight:700; }
.ad-chart-tabs { margin-bottom:0; }
.ad-chart-wrap { height:220px; position:relative; }
.ad-chart-foot { font-size:10px; color:var(--text3); margin-top:var(--scale-8); }
.ad-stats { padding:0; overflow:hidden; }
.ad-stats-h { padding:var(--box-pad); border-bottom:1px solid var(--border); font-weight:700; font-size:14px; }
.adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.adv-grid .cell { padding:10px 12px; border-bottom:1px solid var(--border); min-width:0; }
.adv-grid .cell .cl { font-size:10px; color:var(--text2); }
.adv-grid .cell .cv { font-size:14px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.adv-grid .cell .cv.pos { color:var(--green); }
.adv-grid .cell .cv.neg { color:var(--red); }
.ad-wr { padding:var(--box-pad); border-bottom:1px solid var(--border); }
.ad-wr-row { display:flex; justify-content:space-between; gap:var(--scale-8); font-size:11px; color:var(--text2); }
.ad-wr-row b { color:var(--green); font-variant-numeric:tabular-nums; }
.ad-bar { height:6px; background:var(--bg); border-radius:6px; overflow:hidden; margin-top:6px; }
.ad-bar-fill { height:100%; background:var(--green); width:0%; transition:width .3s; }

/* ── แถบหัวเรื่องหน้า (ย้ายจาก inline <style> ของ detail.html) ── */
.ad-page-head { display:flex; align-items:center; gap:var(--scale-8); flex-wrap:wrap; margin-bottom:var(--box-gap); }
.ad-page-head h2 { flex:1 1 auto; min-width:0; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ad-ph-actions { display:flex; gap:var(--scale-8); flex-wrap:wrap; }
@media (max-width:768px) { .ad-page-head h2 { flex:1 1 auto; font-size:18px; } .ad-ph-actions { flex:1 1 100%; } }

/* ── ตารางออเดอร์ 4 ถาด (ใช้ .table-card/.mobile-cards ของกลาง) ── */
.ad-orders { padding:0; overflow:hidden; margin-top:var(--box-gap); }
.ad-orders .tabs { margin-bottom:0; padding:var(--box-pad); border-bottom:1px solid var(--border); }
.ad-pane { padding:var(--box-pad); }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.orders-table { width:100%; border-collapse:collapse; min-width:860px; font-size:12px; }
.orders-table th { padding:8px 10px; text-align:left; font-size:10px; font-weight:700; color:var(--text2); background:var(--ticker-bg); border-bottom:1px solid var(--border); white-space:nowrap; letter-spacing:.03em; text-transform:uppercase; }
.orders-table td { padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; font-variant-numeric:tabular-nums; vertical-align:middle; }
.orders-table tr:last-child td { border-bottom:none; }
.orders-table tr:hover td { background:var(--ticker-bg); }
.orders-table td.wrap { white-space:normal; max-width:180px; overflow:hidden; text-overflow:ellipsis; word-break:break-word; }
.profit-pos { color:var(--green); font-weight:700; }
.profit-neg { color:var(--red); font-weight:700; }
.muted { color:var(--text2); }
.badge-type { display:inline-block; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; border:1px solid transparent; }
/* BDG1: ป้ายที่เซ็ต hidden ต้องซ่อนจริง — กัน display ของคลาสทับ [hidden] ของเบราว์เซอร์ */
.badge-type[hidden] { display:none; }
.badge-type.buy { background:var(--green-bg); color:var(--green); border-color:rgba(var(--green-rgb),.18); }
.badge-type.sell { background:var(--red-bg); color:var(--red); border-color:rgba(var(--red-rgb),.18); }
.badge-type.pending { background:var(--gold-bg); color:var(--gold); border-color:var(--gold); }
.badge-state { display:inline-block; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.02em; border:1px solid transparent; }
.empty-row { text-align:center; padding:18px 12px; color:var(--text2); font-size:13px; }
.empty-row.err { color:var(--red); }
.foot-note-table { padding:8px 12px; font-size:10px; color:var(--text3); border-top:1px solid var(--border); background:var(--bg); text-align:right; }
/* ── 3 ถาดออเดอร์: ยกเลิก min-width 860px เฉพาะถาด (บีบด้วย tier + ซ่อนคอลัมน์ตาม breakpoint — กัน scrollbar ใน .table-wrap) ── */
#openTable .orders-table, #pendingTable .orders-table, #historyTable .orders-table { min-width:0; }
/* UACC5: ตัวพิมพ์หัวตารางเปิด/ประวัติตามที่ผู้ใช้กำหนด (Time/Ticket/Symbol/… — ห้าม UPPERCASE) */
#openTable .orders-table th, #historyTable .orders-table th { text-transform:none; }
/* ── หัวคอลัมน์กดเรียงได้ (sort): ลูกศร .sort-ind โผล่เฉพาะหัว active · สีสืบทอด token เดิมของ th (ห้าม hardcode) ── */
.orders-table th.th-sort { cursor:pointer; user-select:none; }
.orders-table .sort-ind { margin-left:3px; font-size:.85em; }
.orders-table th.th-sort:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (max-width:768px) {
  .orders-table { min-width:0; }
  .orders-table th, .orders-table td { padding:6px 8px; font-size:11px; }
  .orders-table td.wrap { max-width:none; }
}
@media (max-width:480px) { .ad-orders .tabs { padding:var(--scale-8); } }

/* ── มือถือ: 1 ออเดอร์ = 1 แถว (override การ์ดของ .mobile-cards กลาง — เฉพาะโซน .ad-orders) ── */
/* index = ลำดับคอลัมน์จริง (1-based) ที่ render ใน detail.html — renderOpenTable/renderPendingTable/renderHistoryTable
   #openTable=9: 1 Time · 2 Ticket · 3 Symbol · 4 Type · 5 Lots · 6 Open · 7 TP · 8 SL · 9 Profit (ซ่อน ≤1024: idx 2,6 · ≤400: idx 7,8)
   #pendingTable=8: 1 Ticket · 2 คู่เงิน · 3 ประเภท · 4 Lot · 5 ราคา · 6 SL · 7 TP · 8 เวลาตั้ง (ซ่อน ≤900: idx 5,6,7 · ≤400: idx 1)
   #historyTable=9: 1 Time · 2 Ticket · 3 Symbol · 4 Type · 5 Lots · 6 Open · 7 TP · 8 SL · 9 Profit (ซ่อน ≤1024: idx 2,6 · ≤400: idx 7,8)
   ⚠️ เปลี่ยนลำดับคอลัมน์ใน detail.html → ต้องอัปเดต nth-child ของ hide-list ด้านล่างพร้อมกันเสมอ */
@media (max-width:768px) {
  .ad-orders .mobile-cards { display:table; }
  .ad-orders .mobile-cards tbody { display:table-row-group; }
  .ad-orders .mobile-cards thead { display:table-header-group; }
  .ad-orders .mobile-cards tr { display:table-row; margin:0; border:none; border-radius:0; overflow:visible; background:none; }
  .ad-orders .mobile-cards td { display:table-cell; width:auto; padding:6px 4px; text-align:left; font-size:10px; border-bottom:1px solid var(--border); }
  .ad-orders .mobile-cards td::before { display:none; }
  .ad-orders .mobile-cards td.wrap { white-space:nowrap; max-width:none; overflow:visible; }
}
/* ซ่อนคอลัมน์ตามถาดด้วย nth-child scope ตาม id (ดัชนีชนกันข้ามถาด — ห้ามใช้ hide-list รวม) — แยก media ตาม breakpoint ของแต่ละถาด */
@media (max-width:1024px) {
  #openTable .orders-table th:nth-child(2), #openTable .orders-table td:nth-child(2),
  #openTable .orders-table th:nth-child(6), #openTable .orders-table td:nth-child(6),
  #historyTable .orders-table th:nth-child(2), #historyTable .orders-table td:nth-child(2),
  #historyTable .orders-table th:nth-child(6), #historyTable .orders-table td:nth-child(6) { display:none; }
}
@media (max-width:900px) {
  #pendingTable .orders-table th:nth-child(5), #pendingTable .orders-table td:nth-child(5),
  #pendingTable .orders-table th:nth-child(6), #pendingTable .orders-table td:nth-child(6),
  #pendingTable .orders-table th:nth-child(7), #pendingTable .orders-table td:nth-child(7) { display:none; }
}
/* จอแคบมาก ≤400px: ซ่อน Ticket เพิ่มเฉพาะ pending + ซ่อน TP/SL ของ open/history (วัดจริง: 7 คอลัมน์ยังล้น 20-44px ที่ 320-390) */
@media (max-width:400px) {
  #openTable .orders-table th:nth-child(7), #openTable .orders-table td:nth-child(7),
  #openTable .orders-table th:nth-child(8), #openTable .orders-table td:nth-child(8),
  #historyTable .orders-table th:nth-child(7), #historyTable .orders-table td:nth-child(7),
  #historyTable .orders-table th:nth-child(8), #historyTable .orders-table td:nth-child(8),
  #pendingTable .orders-table th:nth-child(1), #pendingTable .orders-table td:nth-child(1) { display:none; }
}
/* UACC1: ลดฟอนต์โซนออเดอร์ลง 1 สเต็ป (เฉพาะหน้า /user/account) — ต้องอยู่ "ก่อน" tier เพื่อให้ tier จอเล็ก (≤1150) ชนะตามลำดับ
   หมายเหตุ: ต้องยิงที่ td ตรง ๆ — global `th, td{font-size:13px}` (เฉพาะ element) ชนะ font ของ table-level เสมอ */
.ad-orders .orders-table td{font-size:11px}
.ad-orders .tabs .tab{font-size:11px}
/* ── tier บีบตัวอักษร/ช่องไฟตามความกว้าง — ต้องอยู่หลังบล็อก mobile-cards ด้านบน (แฟ้มหลังชนะเมื่อ specificity เท่ากัน) ── */
@media (max-width:1150px) { .ad-orders .orders-table th, .ad-orders .orders-table td { font-size:10px; padding:6px 6px; } }
/* ≤1030: sidebar ยังแสดง (content = หน้าจอ-326) ทำให้ 769-830 และ 1001-1030 แคบผิดปกติ → ใช้ tier 10px เร็วกว่าปกติ */
@media (max-width:1030px) { .ad-orders .orders-table th, .ad-orders .orders-table td { font-size:9px; padding:6px 4px; } }
@media (max-width:768px) { .ad-orders .orders-table th, .ad-orders .orders-table td { font-size:9px; padding:6px 4px; } }
@media (max-width:480px) { .ad-orders .orders-table th, .ad-orders .orders-table td { font-size:8px; padding:4px 2px; } }
@media (max-width:360px) { .ad-orders .orders-table th, .ad-orders .orders-table td { font-size:8px; padding:3px 1px; } }

/* ── Drawer: 📅 ปฏิทินกำไร (grid รายวัน + เลือกเดือน) ── */
.drawer { position:fixed; top:0; bottom:0; right:0; width:min(420px,100vw); background:var(--card); border-left:1px solid var(--border); transform:translateX(100%); transition:transform .3s var(--sidebar-ease); z-index:50; display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.backdrop { position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(var(--overlay-blur)); z-index:40; display:none; }
.backdrop.show { display:block; }
.drawer-head { padding:var(--box-pad); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:var(--scale-8); }
.drawer-head h3 { font-size:14px; font-weight:700; }
.drawer-body { padding:var(--box-pad); overflow:auto; flex:1; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--scale-8); margin-bottom:var(--scale-8); }
.cal-title { font-size:13px; font-weight:700; }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.cal-dow span { text-align:center; font-size:10px; color:var(--text3); font-weight:600; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day { min-height:46px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 3px; text-align:center; background:var(--bg); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.cal-day.blank { border-color:transparent; background:transparent; cursor:default; }
.cal-day.has:hover { border-color:var(--accent); }
.cal-day.sel { border-color:var(--accent); background:var(--accent-glass); }
.cal-day .dn { font-size:10px; color:var(--text2); font-variant-numeric:tabular-nums; }
.cal-day .dv { font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.cal-day .dv.pos { color:var(--green); }
.cal-day .dv.neg { color:var(--red); }
.cal-day .dv.zero { color:var(--text3); }
.cal-sum { margin-top:var(--box-gap); padding:var(--box-pad); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; color:var(--text2); line-height:1.65; }
.cal-sum .cs-h { font-weight:700; color:var(--text); margin-bottom:2px; }
.cal-sum b.pos { color:var(--green); font-variant-numeric:tabular-nums; }
.cal-sum b.neg { color:var(--red); font-variant-numeric:tabular-nums; }
.cal-total { margin-top:var(--box-gap); padding:var(--box-pad); background:var(--bg); border-radius:var(--radius-sm); display:flex; justify-content:space-between; gap:var(--scale-8); font-size:12px; color:var(--text2); }
.cal-total b { font-variant-numeric:tabular-nums; }
.cal-total b.pos { color:var(--green); }
.cal-total b.neg { color:var(--red); }
.cal-note { font-size:10px; color:var(--text3); margin-top:var(--scale-8); text-align:center; }

/* ── แถบ Open Beta — บนสุดทุกหน้า (TASK-20261016-111208-B7F3 · tokens ล้วน ห้าม hardcode สี) ── */
.openbeta-bar { text-align:center; font-size:13px; font-weight:600; padding:8px 12px; background:var(--accent-glass); color:var(--accent2); border-bottom:1px solid var(--card-border); }
.openbeta-bar.inline { border:1px solid var(--card-border); border-radius:var(--radius-sm); margin-bottom:var(--box-gap); }
@media(max-width:768px){ .openbeta-bar { font-size:12px; padding:7px 8px; } }
/* OBFIX (TASK-20261016-170500-UIAC): dark = ขาวนวล อ่านชัดทุก accent — ห้ามลบ */
body.dark .openbeta-bar{ color:var(--text); }
body.lndg .openbeta-bar{ color:var(--fixed-ink); }
/* FIX3: ชนะ inline #aiBtn (1,0,0) ใน strategies.html — accent2 บน tint ≥4.5 (dark ใช้กฎ body.dark ใน template เดิม) */
body #aiBtn{ color:var(--accent2); }
/* VFLSH (TASK-20261023-161121-FLSH): value-flash 1.15s — tokens ล้วน ห้าม hardcode */
@keyframes sdFlashUp{0%{background-color:transparent}12%,55%{background-color:var(--sd-flash-up-bg);color:var(--sd-flash-up-ink)}100%{background-color:transparent}}
@keyframes sdFlashDown{0%{background-color:transparent}12%,55%{background-color:var(--sd-flash-down-bg);color:var(--sd-flash-down-ink)}100%{background-color:transparent}}
.sd-flash-up{animation:sdFlashUp var(--sd-flash-dur) cubic-bezier(.4,0,.2,1) 1;border-radius:var(--radius-sm)}
.sd-flash-down{animation:sdFlashDown var(--sd-flash-dur) cubic-bezier(.4,0,.2,1) 1;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: reduce){.sd-flash-up,.sd-flash-down{animation:none}}

/* SD logo mark v2 (TASK-20261026-LOGO-SD2) */
.sd-logo{display:block;flex:0 0 auto;color:var(--text);--sd-logo-cut:var(--card)}
.sd-logo .sd-bars line{stroke:currentColor;stroke-width:1.6}
.sd-logo .sd-bars rect{fill:currentColor}
.sd-logo .sd-text{fill:var(--green);stroke:var(--sd-logo-cut);stroke-width:4.5;paint-order:stroke;font-weight:800;letter-spacing:-1px}
.sd-logo.on-bg{--sd-logo-cut:var(--bg)}
.sd-logo.on-sidebar{--sd-logo-cut:var(--sidebar-bg,var(--card))}
.brand .logo.logo-sd,.foot-brand .logo.logo-sd{background:none;border-radius:0;box-shadow:none;border:0}
.brand .logo.logo-sd{width:36px;height:36px}
.brand .logo.logo-sd .sd-logo{width:36px;height:36px}
.foot-brand .logo.logo-sd{width:28px;height:28px}
.foot-brand .logo.logo-sd .sd-logo{width:28px;height:28px}
.sidebar-logo .sd-logo{width:36px;height:36px}
.sidebar-header .sd-logo{width:36px;height:36px}
.sidebar.collapsed .sidebar-logo .sd-logo{width:30px;height:30px}
.sidebar.collapsed .sidebar-header .sd-logo{width:30px;height:30px}
.sidebar.collapsed .sidebar-logo .logo-text{display:none}
.sidebar.collapsed .sidebar-logo{overflow:hidden}
/* SD brand box (TASK-20261026-LOGO-SDBOX) — กล่องไล่สีสไตล์เดิม + ตัวอักษร SD */
.sd-box{--sd-box:32px;width:var(--sd-box);height:var(--sd-box);border-radius:calc(var(--sd-box) * .28);background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--sd-box) * .375);letter-spacing:.5px;line-height:1;flex:0 0 auto}
.brand .logo.logo-sd{width:32px;height:32px}
.brand .logo.logo-sd .sd-box{--sd-box:32px}
.foot-brand .logo.logo-sd{width:26px;height:26px}
.foot-brand .logo.logo-sd .sd-box{--sd-box:26px}
.sidebar.collapsed .sidebar-logo .sd-box,.sidebar.collapsed .sidebar-header .sd-box{width:30px;height:30px;font-size:11.25px;border-radius:8px}

/* ── LOOPETA (TASK-20261028-LOOPETA): ตัวนับถอยหลังรอบทำงานของบัญชี ──
   ใช้ร่วม 2 หน้า: การ์ด Acc (user/dashboard) + หน้ารายละเอียดบัญชี (user/account/detail)
   NOTE 28/10/2026: ไม่มีกรอบ/พื้นหลัง (ผู้ใช้สั่งเอาวงรีออก — ประหยัดพื้นที่) คงเหลือข้อความล้วน
   ค่าเริ่มต้นซ่อนไว้ — JS เป็นคนเติม data-state="run"/"work" แล้ว CSS จึงแสดง (กัน layout กระโดด) */
.loop-eta{display:none;align-items:center;gap:4px;font-size:10.5px;line-height:1.6;color:var(--text2);font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.loop-eta[data-state="run"]{display:inline-flex}
.loop-eta[data-state="work"]{display:inline-flex;color:var(--gold);animation:loopEtaPulse 1.8s ease-in-out infinite}
@keyframes loopEtaPulse{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.loop-eta[data-state="work"]{animation:none}}

/* ── Mobile compact Pro (TASK-20261030-MOBILE-P0P1 · Stage A · ท้ายสุด — ชนะทุก MQ768 เดิม · เดสก์ท็อปห้ามแตะ) ── */
@media (max-width:768px){
  .btn{min-height:var(--m-ctl-h);padding:0 10px;font-size:11.5px;border-radius:8px}
  .btn-sm{min-height:var(--m-ctl-h-sm);padding:0 8px;font-size:11px}
  .ch-t,.badge{height:var(--m-chip-h);min-height:var(--m-chip-h);font-size:10.5px;padding:0 7px}
  .card{padding:var(--m-card-pad);border-radius:var(--m-radius)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-gap)}
  .metric{padding:8px 10px}
  .metric .ml{font-size:10.5px}
  .metric .mv{font-size:16px}
  .page-head h2{font-size:16px}
  .tabs .tab{min-height:30px;font-size:11.5px;padding:0 10px}
  .form-input{min-height:var(--m-input-h);height:var(--m-input-h);padding:6px 10px;font-size:12px}
  .table-card{padding:10px 12px}
  .sset-search{align-items:center}
}