/* =========================================================================
   design-tokens.css  —  MaxPlus-style theme (แบบ C + ส่วน Dashboard/Modal)
   ทอง accent + ม่วง  ·  responsive (clamp)  ·  compact density
   v2 เพิ่ม: Contact Modal · Stats Cards · Session Rows · Profile Card
   --------------------------------------------------------------------------
   วิธีใช้:
     1) วางไฟล์นี้ไว้ เช่น /theme/design-tokens.css
     2) ใน index.html ใส่ <link rel="stylesheet" href="theme/design-tokens.css">
        ให้โหลดหลัง tailwind/ธีมเดิม เพื่อ override ได้
   ========================================================================= */

/* =========================================================================
   TOKENS
   ========================================================================= */
:root{
  /* ===== ACCENT: ทอง → ม่วง (แบบ C) ===== */
  --grad-accent:  linear-gradient(to right,#dfba6b,#c59e51);
  --grad-secondary: linear-gradient(95deg,#a855f7,#d946ef 55%,#ec4899);
  --grad-head:    linear-gradient(to right,#dfba6b,#c59e51 50%,#a855f7);
  --grad-teal:    linear-gradient(90deg,#22d3ee,#14b8a6);
  --grad-purple:  linear-gradient(90deg,#a855f7,#7c3aed);
  --grad-green:   linear-gradient(90deg,#22c55e,#16a34a);
  --ring-glow:    0 0 0 1px rgba(197,158,81,.4), 0 8px 26px rgba(197,158,81,.25);

  /* ===== SURFACE ===== */
  --surface:        rgba(255,255,255,.045);
  --surface-border: rgba(255,255,255,.10);
  --inset:          rgba(255,255,255,.05);
  --inset-border:   rgba(255,255,255,.09);
  --text-0: #f4f2ea;
  --text-1: #c9c4b4;
  --text-2: #938d7c;

  /* ===== TYPE SCALE — responsive ===== */
  --fs-label: clamp(11px, 1.3vw, 12px);
  --fs-body:  clamp(13px, 1.6vw, 15px);
  --fs-input: clamp(14px, 1.8vw, 15px);
  --fs-h3:    clamp(16px, 2.2vw, 20px);
  --fs-h2:    clamp(20px, 3vw,   26px);
  --fs-h1:    clamp(24px, 4.5vw, 38px);
  --fs-stat:  clamp(26px, 4vw,   40px);

  /* ===== DENSITY — compact ===== */
  --gap-xs:    6px;
  --gap-sm:   10px;
  --gap-md:   14px;
  --gap-lg:   20px;
  --pad-card:  16px;
  --pad-modal: 20px;
  --pad-input: 9px 12px;
  --row-gap:   7px;

  /* ===== SHAPE & SHADOW ===== */
  --card-radius:  16px;
  --input-radius: 10px;
  --badge-radius: 999px;
  --card-shadow:       0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.20);
  --card-shadow-hover: 0 20px 48px rgba(212,175,55,.20);
}

/* =========================================================================
   CORE UTILITIES
   ========================================================================= */

/* CARD */
.ui-card{
  position:relative; border-radius:var(--card-radius); padding:var(--pad-card);
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:var(--card-shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  overflow:hidden;
}
.ui-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-accent);
}
.ui-card:hover{ transform:translateY(-5px); box-shadow:var(--card-shadow-hover); border-color:rgba(245,183,60,.35); }

/* HEADINGS */
.ui-h1{ font-size:var(--fs-h1); font-weight:800; line-height:1.15; letter-spacing:-.01em; margin:0; }
.ui-h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.2; margin:0; }
.ui-h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.25; margin:0; }
.ui-grad-text{ background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* LABEL */
.ui-label{ display:block; font-size:var(--fs-label); font-weight:600; color:var(--text-1); margin:0 0 4px; letter-spacing:.01em; text-transform:uppercase; }

/* INPUT */
.ui-input{
  width:100%; font-size:var(--fs-input); padding:var(--pad-input);
  border-radius:var(--input-radius); background:var(--inset);
  border:1px solid var(--inset-border); color:var(--text-0);
  transition:border-color .2s, box-shadow .2s;
}
.ui-input::placeholder{ color:var(--text-2); }
.ui-input:focus{ outline:0; border-color:rgba(245,183,60,.6); box-shadow:0 0 0 3px rgba(245,183,60,.18); }

/* BUTTONS */
.ui-btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:11px; border:0; cursor:pointer;
  font-size:var(--fs-body); font-weight:700; color:#1a1206;
  background:var(--grad-accent); box-shadow:0 8px 20px rgba(197,158,81,.4);
  transition:transform .2s, box-shadow .2s;
}
.ui-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(197,158,81,.55); }

/* SECONDARY BUTTON — ม่วง→ชมพู (สำหรับ CTA รอง เช่นปุ่ม "เริ่มต้นใช้งานฟรี" ใน Hero) */
.ui-btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:11px; border:0; cursor:pointer;
  font-size:var(--fs-body); font-weight:700; color:#fff;
  background:var(--grad-secondary);
  box-shadow:0 8px 22px rgba(217,70,239,.35);
  transition:transform .2s, box-shadow .2s;
}
.ui-btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(217,70,239,.55);
}

.ui-btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:11px; cursor:pointer;
  font-size:var(--fs-body); font-weight:700; color:var(--text-0);
  background:var(--surface); border:1px solid var(--surface-border);
  transition:transform .2s, background .2s;
}
.ui-btn-ghost:hover{ transform:translateY(-2px); background:rgba(245,183,60,.10); }

/* สีฟ้า Telegram */
.ui-btn-telegram{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:11px; border:0; cursor:pointer;
  font-size:var(--fs-body); font-weight:700; color:#fff;
  background:linear-gradient(95deg,#0ea5e9,#2563eb);
  box-shadow:0 8px 20px rgba(14,165,233,.32);
  transition:transform .2s, box-shadow .2s;
}
.ui-btn-telegram:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(14,165,233,.45); }

/* MODAL (base) */
.ui-modal{
  border-radius:var(--card-radius); padding:var(--pad-modal);
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}

/* LIST ROWS */
.ui-list{ display:flex; flex-direction:column; gap:var(--row-gap); }
.ui-list .ui-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-sm); padding:10px 12px; border-radius:10px;
  background:var(--inset); border:1px solid var(--inset-border);
  transition:background .2s, transform .2s;
}
.ui-list .ui-row:hover{ transform:translateX(3px); background:rgba(245,183,60,.08); }

/* REVEAL */
.ui-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.7,.2,1), transform .6s cubic-bezier(.22,.7,.2,1);
}
.ui-reveal.is-in{ opacity:1; transform:none; }

/* =========================================================================
   CONTACT MODAL  (Telegram QR card)
   ========================================================================= */

/* backdrop */
.ui-contact-modal-bg{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
/* card */
.ui-contact-modal{
  position:relative; width:100%; max-width:400px;
  border-radius:22px; padding:28px 24px 24px;
  background:linear-gradient(160deg,#181426,#0f0c1e);
  border:1px solid rgba(168,85,247,.35);
  box-shadow:0 30px 70px rgba(76,29,149,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  text-align:center;
}
.ui-contact-modal__close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; cursor:pointer; color:var(--text-1);
  transition:background .2s, color .2s;
}
.ui-contact-modal__close:hover{ background:rgba(255,255,255,.15); color:var(--text-0); }
/* icon avatar */
.ui-contact-modal__icon{
  width:72px; height:72px; border-radius:20px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  display:grid; place-items:center; margin:0 auto 12px;
  box-shadow:0 10px 28px rgba(14,165,233,.4);
  position:relative;
}
.ui-contact-modal__icon::after{
  content:""; position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:#22c55e; border:2px solid #181426;
  box-shadow:0 0 0 3px rgba(34,197,94,.25);
}
/* status badge */
.ui-status-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:var(--badge-radius);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  font-size:13px; font-weight:600; color:var(--text-1); margin-bottom:10px;
}
.ui-status-badge__dot{
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.25);
}
/* QR frame */
.ui-qr-frame{
  display:inline-block; padding:10px;
  border-radius:14px; border:2px solid rgba(99,102,241,.5);
  background:#fff; margin:14px 0;
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.ui-qr-frame img{ display:block; width:160px; height:160px; }
/* username pill */
.ui-username-pill{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  font-size:var(--fs-body); font-weight:600; color:var(--text-0);
  margin-bottom:12px;
}
/* button row */
.ui-contact-btn-row{ display:flex; gap:10px; }
.ui-contact-btn-row > *{ flex:1; justify-content:center; }
/* topics */
.ui-topics{
  margin-top:14px; border-radius:13px; padding:12px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.ui-topics__title{ font-size:var(--fs-label); color:var(--text-2); margin-bottom:8px; }
.ui-topics__item{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; font-size:var(--fs-body); color:var(--text-1);
}
.ui-topics__icon{
  width:30px; height:30px; border-radius:9px;
  background:var(--grad-purple); display:grid; place-items:center; flex:0 0 auto;
}

/* =========================================================================
   STATS CARDS (Usage Analytics)
   ========================================================================= */

.ui-stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:var(--gap-md);
}
.ui-stat-card{
  position:relative; border-radius:var(--card-radius); padding:18px;
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:var(--card-shadow); overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.ui-stat-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.ui-stat-card__label{
  font-size:var(--fs-label); font-weight:700; letter-spacing:.12em;
  color:var(--text-2); text-transform:uppercase; margin-bottom:8px;
}
.ui-stat-card__value{
  font-size:var(--fs-stat); font-weight:800; line-height:1.1;
  color:var(--text-0); letter-spacing:-.01em;
}
.ui-stat-card__sub{
  margin-top:4px; font-size:var(--fs-label); color:var(--text-2);
}
/* สีขอบบนต่างกันแต่ละ card */
.ui-stat-card--purple::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-purple); }
.ui-stat-card--teal::before{   content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-teal); }
.ui-stat-card--gold::before{   content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-accent); }
.ui-stat-card--green::before{  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-green); }

/* ===== FILTER TABS ===== */
.ui-tabs{
  display:inline-flex; align-items:center; gap:3px;
  padding:4px; border-radius:12px;
  background:var(--inset); border:1px solid var(--inset-border);
}
.ui-tab{
  padding:6px 14px; border-radius:9px; cursor:pointer;
  font-size:var(--fs-label); font-weight:600; color:var(--text-1);
  border:0; background:transparent; transition:color .2s, background .2s;
}
.ui-tab:hover{ color:var(--text-0); background:rgba(255,255,255,.06); }
.ui-tab.active{
  color:var(--text-0); background:var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* ===== SESSION / LOG ROWS ===== */
.ui-session-group{
  border-radius:var(--card-radius); overflow:hidden;
  border:1px solid var(--surface-border); margin-bottom:var(--gap-md);
}
.ui-session-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-sm); padding:12px 14px;
  background:var(--surface); border-bottom:1px solid var(--inset-border);
  font-size:var(--fs-label); color:var(--text-1);
}
.ui-session-id{
  font-size:13px; font-weight:700;
  padding:3px 9px; border-radius:6px;
  background:rgba(168,85,247,.18); color:#c084fc;
  font-family:monospace; letter-spacing:.04em;
}
.ui-log-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-sm); padding:10px 14px; font-size:13px;
  border-bottom:1px solid var(--inset-border); flex-wrap:wrap;
  background:transparent; transition:background .15s;
}
.ui-log-row:last-child{ border-bottom:0; }
.ui-log-row:hover{ background:rgba(255,255,255,.025); }
.ui-log-row__dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.25);
}
.ui-log-row__dot--purple{ background:#a855f7; }
.ui-log-row__dot--gold{   background:#f6b73c; }
.ui-log-row__model{ font-weight:600; color:var(--text-0); flex:1 1 auto; min-width:0; }
.ui-log-row__pool-badge{
  padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700;
  background:rgba(168,85,247,.18); color:#c084fc; white-space:nowrap;
}
.ui-log-row__latest{
  padding:2px 8px; border-radius:6px; font-size:11px; font-weight:800;
  background:rgba(245,183,60,.2); color:#f6b73c; white-space:nowrap;
}
.ui-log-row__tokens{ font-size:12px; color:var(--text-2); white-space:nowrap; }
.ui-log-row__cost{ font-weight:700; color:var(--text-0); white-space:nowrap; }

/* ===== PAGINATION ===== */
.ui-pagination{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-sm); padding:12px 0; font-size:13px; color:var(--text-1);
  flex-wrap:wrap;
}
.ui-page-btn{
  padding:7px 14px; border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text-0);
  background:var(--surface); border:1px solid var(--surface-border);
  transition:background .2s, transform .15s;
}
.ui-page-btn:hover{ background:rgba(245,183,60,.10); transform:translateY(-1px); }
.ui-page-input{
  width:48px; text-align:center; font-weight:700;
  font-size:13px; padding:6px 4px; border-radius:8px;
  background:var(--inset); border:1px solid var(--inset-border); color:var(--text-0);
}

/* =========================================================================
   PROFILE / ACCOUNT CARD
   ========================================================================= */

.ui-profile-card{
  position:relative; border-radius:var(--card-radius); padding:var(--pad-card);
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:var(--card-shadow); overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-lg); flex-wrap:wrap;
}
.ui-profile-card__avatar{
  width:64px; height:64px; border-radius:16px; flex:0 0 auto;
  display:grid; place-items:center;
  font-size:26px; font-weight:800; color:#fff;
  background:var(--grad-purple);
  position:relative;
}
.ui-profile-card__avatar-edit{
  position:absolute; bottom:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  background:#22c55e; border:2px solid #0f0c1e;
  display:grid; place-items:center; cursor:pointer;
}
.ui-profile-card__info{ flex:1 1 180px; }
.ui-profile-card__name{ font-size:var(--fs-h3); font-weight:800; color:var(--text-0); margin:0 0 3px; }
.ui-profile-card__email{ font-size:13px; color:var(--text-2); }
.ui-profile-card__since{ font-size:12px; color:var(--text-2); margin-top:2px; }
.ui-credit-badge{
  padding:10px 18px; border-radius:14px;
  background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25);
  text-align:center;
}
.ui-credit-badge__label{ font-size:var(--fs-label); color:#4ade80; font-weight:700; }
.ui-credit-badge__value{
  font-size:clamp(22px,3vw,28px); font-weight:800; color:#22c55e;
  margin-top:2px; display:block;
}

/* ===== TOKEN DISTRIBUTION BAR ===== */
.ui-token-bar{
  height:10px; border-radius:999px; overflow:hidden;
  display:flex; gap:2px; background:var(--inset); padding:0;
}
.ui-token-bar__seg{ height:100%; border-radius:0; transition:width .4s; }
.ui-token-bar__seg:first-child{ border-radius:999px 0 0 999px; }
.ui-token-bar__seg:last-child{  border-radius:0 999px 999px 0; }
.ui-token-legend{
  display:flex; gap:var(--gap-lg); flex-wrap:wrap;
  margin-top:10px; font-size:13px;
}
.ui-token-legend__item{ display:flex; align-items:center; gap:6px; }
.ui-token-legend__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

/* ===== MODEL BREAKDOWN LIST ===== */
.ui-model-row{
  padding:10px 0; border-bottom:1px solid var(--inset-border);
}
.ui-model-row:last-child{ border-bottom:0; }
.ui-model-row__top{
  display:flex; justify-content:space-between; gap:var(--gap-sm);
  margin-bottom:5px;
}
.ui-model-row__name{ font-size:var(--fs-body); font-weight:700; color:var(--text-0); font-family:monospace; }
.ui-model-row__cost{ font-size:var(--fs-body); font-weight:800; color:var(--text-0); }
.ui-model-row__bar{ height:4px; border-radius:999px; margin-bottom:4px; background:var(--grad-accent); }
.ui-model-row__sub{ font-size:12px; color:var(--text-2); }

/* ===== CONCURRENCY CARD ===== */
.ui-concurrency-card{
  border-radius:var(--card-radius); padding:16px 18px;
  background:var(--surface); border:1px solid var(--surface-border);
  display:flex; align-items:center; gap:var(--gap-md);
}
.ui-concurrency-card__icon{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:var(--grad-purple); display:grid; place-items:center;
}
.ui-concurrency-card__body{ flex:1; }
.ui-concurrency-card__title{ font-size:var(--fs-body); font-weight:700; color:var(--text-0); }
.ui-concurrency-card__sub{ font-size:12px; color:var(--text-2); margin-top:2px; }
.ui-concurrency-card__num{
  font-size:clamp(24px,3.5vw,32px); font-weight:800;
  background:var(--grad-purple); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}

/* =========================================================================
   มือถือ — บีบ density ลงอีก + ปิด hover-lift
   ========================================================================= */
@media (max-width:640px){
  :root{
    --pad-card:13px; --pad-modal:16px; --pad-input:8px 11px;
    --gap-lg:14px; --row-gap:6px; --card-radius:13px;
  }
  .ui-card:hover,
  .ui-stat-card:hover,
  .ui-profile-card:hover{ transform:none; }
  .ui-list .ui-row:hover{ transform:none; }
  .ui-stats-grid{ grid-template-columns:1fr; }
  .ui-log-row{ font-size:12px; }
  .ui-contact-modal{ padding:22px 16px 18px; }
  .ui-qr-frame img{ width:130px; height:130px; }
  .ui-contact-btn-row{ flex-direction:column; }
}



/* =========================================================================
   LEADERBOARD — Hall of Fame / Podium / Rank Rows
   ========================================================================= */

/* ===== HALL OF FAME badge (top pill) ===== */
.ui-hof-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 16px; border-radius:var(--badge-radius);
  background:rgba(245,183,60,.12); border:1px solid rgba(245,183,60,.35);
  font-size:var(--fs-label); font-weight:800; letter-spacing:.10em;
  color:#f6b73c; text-transform:uppercase;
}

/* ===== SUMMARY STAT CARDS (ผู้เข้าแข่ง / ค่าใช้จ่าย ฯลฯ) ===== */
.ui-lb-stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-sm);
  margin:var(--gap-md) 0;
}
.ui-lb-stat{
  border-radius:14px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:var(--card-shadow);
}
.ui-lb-stat__icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; margin-bottom:8px; flex:0 0 auto;
}
.ui-lb-stat__icon--purple{ background:linear-gradient(135deg,#7c3aed,#a855f7); }
.ui-lb-stat__icon--pink{   background:linear-gradient(135deg,#db2777,#ec4899); }
.ui-lb-stat__icon--gold{   background:linear-gradient(135deg,#d97706,#f59e0b); }
.ui-lb-stat__icon--teal{   background:linear-gradient(135deg,#0d9488,#14b8a6); }
.ui-lb-stat__label{ font-size:var(--fs-label); color:var(--text-2); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ui-lb-stat__value{ font-size:clamp(16px,2.2vw,22px); font-weight:800; color:var(--text-0); margin-top:2px; line-height:1.1; }

/* ===== PODIUM (Top 3) ===== */
.ui-podium{
  display:grid; grid-template-columns:1fr 1.18fr 1fr;
  gap:var(--gap-sm); align-items:end; margin:var(--gap-md) 0;
}
.ui-podium-card{
  position:relative; border-radius:18px; padding:20px 16px 16px;
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:var(--card-shadow); text-align:center; overflow:visible;
}
/* rank circle */
.ui-podium-card__rank{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-size:16px; font-weight:800; color:#fff;
  border:2px solid var(--surface);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.ui-podium-card__rank--1{
  width:44px; height:44px; font-size:20px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  box-shadow:0 6px 20px rgba(249,115,22,.45);
}
.ui-podium-card__rank--2{ background:linear-gradient(135deg,#6b7280,#9ca3af); }
.ui-podium-card__rank--3{ background:linear-gradient(135deg,#b45309,#d97706); }
/* highlight #1 */
.ui-podium-card--1{
  border-color:rgba(245,183,60,.5);
  box-shadow:0 20px 52px rgba(245,183,60,.20);
  transform:translateY(-8px);
}
.ui-podium-card__name{ font-size:15px; font-weight:700; color:var(--text-0); margin:16px 0 4px; }
.ui-podium-card__cost{ font-size:clamp(17px,2.5vw,22px); font-weight:800; }
.ui-podium-card__cost--gold{ color:#f97316; }
.ui-podium-card__cost--silver{ color:var(--text-0); }
.ui-podium-card__cost--bronze{ color:var(--text-0); }
.ui-podium-card__accent-bar{
  height:4px; border-radius:999px; margin:10px 0 8px;
}
.ui-podium-card__accent-bar--gold{   background:linear-gradient(90deg,#f59e0b,#f97316); }
.ui-podium-card__accent-bar--silver{ background:linear-gradient(90deg,#6b7280,#9ca3af); }
.ui-podium-card__accent-bar--bronze{ background:linear-gradient(90deg,#b45309,#d97706); }
.ui-podium-card__meta{
  display:flex; justify-content:space-around; gap:var(--gap-xs);
  font-size:11px; color:var(--text-2); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.ui-podium-card__meta span{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.ui-podium-card__meta strong{ font-size:13px; font-weight:800; color:var(--text-1); letter-spacing:0; }
/* podium bar at bottom */
.ui-podium-bar{
  border-radius:10px 10px 0 0; height:48px;
  display:grid; place-items:center;
  font-size:20px; font-weight:900; color:#fff;
}
.ui-podium-bar--1{ background:linear-gradient(180deg,#f59e0b,#f97316); height:64px; }
.ui-podium-bar--2{ background:linear-gradient(180deg,#6b7280,#9ca3af); }
.ui-podium-bar--3{ background:linear-gradient(180deg,#b45309,#d97706); }

/* ===== LEADERBOARD ROW (rank 4+) ===== */
.ui-lb-row{
  border-radius:14px; overflow:hidden;
  background:var(--surface); border:1px solid var(--surface-border);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  margin-bottom:var(--row-gap); transition:box-shadow .2s;
}
.ui-lb-row:hover{ box-shadow:0 4px 18px rgba(168,85,247,.14); }
.ui-lb-row__header{
  display:flex; align-items:center; gap:var(--gap-sm);
  padding:12px 14px; flex-wrap:wrap;
}
.ui-rank-badge{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  background:var(--inset); border:1px solid var(--inset-border);
  display:grid; place-items:center;
  font-size:11px; font-weight:800; color:var(--text-2);
  letter-spacing:.04em;
}
.ui-lb-row__main{ flex:1 1 180px; min-width:0; }
.ui-lb-row__username{ font-size:15px; font-weight:700; color:var(--text-0); margin-bottom:4px; }
.ui-lb-row__bar-wrap{ height:4px; border-radius:999px; background:var(--inset); overflow:hidden; margin-bottom:4px; }
.ui-lb-row__bar-fill{ height:100%; border-radius:999px; background:var(--grad-accent); }
.ui-lb-row__meta{ font-size:11.5px; color:var(--text-2); }
.ui-lb-row__right{ text-align:right; white-space:nowrap; }
.ui-lb-row__cost{ font-size:16px; font-weight:800; color:var(--text-0); }
.ui-lb-row__tokens{ font-size:12px; color:var(--text-2); margin-top:1px; }

/* sub-stats grid (expandable detail row) */
.ui-lb-row__detail{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  border-top:1px solid var(--inset-border);
}
.ui-lb-sub{
  padding:8px 12px;
}
.ui-lb-sub__label{
  font-size:10px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; margin-bottom:3px;
}
.ui-lb-sub__value{ font-size:14px; font-weight:800; }

/* 4 สี sub-stat */
.ui-lb-sub--input{
  background:rgba(99,102,241,.10);
}
.ui-lb-sub--input .ui-lb-sub__label,
.ui-lb-sub--input .ui-lb-sub__value{ color:#818cf8; }

.ui-lb-sub--output{
  background:rgba(236,72,153,.10);
}
.ui-lb-sub--output .ui-lb-sub__label,
.ui-lb-sub--output .ui-lb-sub__value{ color:#f472b6; }

.ui-lb-sub--cache-write{
  background:rgba(245,158,11,.10);
}
.ui-lb-sub--cache-write .ui-lb-sub__label,
.ui-lb-sub--cache-write .ui-lb-sub__value{ color:#fbbf24; }

.ui-lb-sub--cache-read{
  background:rgba(20,184,166,.10);
}
.ui-lb-sub--cache-read .ui-lb-sub__label,
.ui-lb-sub--cache-read .ui-lb-sub__value{ color:#2dd4bf; }

/* มือถือ: ปรับ leaderboard ให้แสดงผลดีบนจอแคบ */
@media (max-width:640px){
  .ui-lb-stat-grid{ grid-template-columns:1fr 1fr; }
  .ui-podium{ grid-template-columns:1fr 1.1fr 1fr; gap:6px; }
  .ui-lb-row__detail{ grid-template-columns:1fr 1fr; }
  .ui-lb-row__header{ gap:8px; }
}
@media (max-width:400px){
  .ui-podium{ gap:4px; }
  .ui-podium-card{ padding:14px 10px 12px; }
}


/* =========================================================================
   MOUSE SPOTLIGHT / CURSOR GLOW
   เอฟเฟกต์แสงไล่ตามเมาส์บนการ์ด (ต้องมี design-spotlight.js คู่กัน)
   -------------------------------------------------------------------------
   วิธีใช้:
     1) เพิ่ม class "ui-spotlight" ให้การ์ดที่ต้องการเอฟเฟกต์
        <div class="ui-card ui-spotlight"> ... </div>
     2) โหลด design-spotlight.js ก่อนปิด </body>
   ========================================================================= */

.ui-spotlight{
  /* ตัวแปรตำแหน่งเมาส์ — JS จะอัปเดตทุก mousemove */
  --mx: 50%;
  --my: 50%;
  --spotlight-color: rgba(245,183,60,.13);   /* ปรับสีแสงได้ที่นี่ */
  --spotlight-size: 380px;
  position:relative;
  isolation:isolate;
}

/* แสงที่ไล่ตามเมาส์ */
.ui-spotlight::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  border-radius:inherit;
  background: radial-gradient(
    var(--spotlight-size) circle at var(--mx) var(--my),
    var(--spotlight-color),
    transparent 65%
  );
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.ui-spotlight:hover::after{ opacity:1; }

/* เนื้อหาใน card ต้องอยู่เหนือแสง */
.ui-spotlight > *{ position:relative; z-index:1; }

/* variant สี (เปลี่ยนโทนแสงตามประเภทการ์ด) */
.ui-spotlight--purple{ --spotlight-color: rgba(168,85,247,.16); }
.ui-spotlight--teal{   --spotlight-color: rgba(20,184,166,.16); }
.ui-spotlight--pink{   --spotlight-color: rgba(236,72,153,.14); }
.ui-spotlight--gold{   --spotlight-color: rgba(245,183,60,.15); }
.ui-spotlight--white{  --spotlight-color: rgba(255,255,255,.09); }

/* ปิดบนมือถือ (ไม่มีเมาส์) */
@media (hover:none){
  .ui-spotlight::after{ display:none; }
}

/* =========================================================================
   ALIAS สำหรับคลาสเดิมของแอป (เปิดคอมเมนต์เมื่อพร้อม)
   -------------------------------------------------------------------------
   .glass-panel{
     position:relative; border-radius:var(--card-radius);
     padding:var(--pad-card); box-shadow:var(--card-shadow);
     transition:transform .25s, box-shadow .25s;
   }
   .glass-panel::before{
     content:""; position:absolute; top:0; left:0; right:0; height:3px;
     background:var(--grad-accent);
   }
   .glass-panel:hover{ transform:translateY(-5px); box-shadow:var(--card-shadow-hover); }

   .themed-input{
     font-size:var(--fs-input); padding:var(--pad-input);
     border-radius:var(--input-radius);
   }
   ========================================================================= */