/* =====================================================================
   VIP PASSPORT — ธีม Black Gold (ใช้ร่วมทั้งหน้าลูกค้าและแอดมิน)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#07070a;
  --bg-2:#0c0c11;
  --panel:#121218;
  --panel-2:#16161e;
  --line:rgba(212,175,55,.20);
  --line-soft:rgba(255,255,255,.06);
  --gold:#d4af37;
  --gold-lt:#f4dd8e;
  --gold-deep:#a07d22;
  --grad-gold:linear-gradient(135deg,#f7e9c0 0%,#f4dd8e 18%,#d4af37 52%,#a07d22 100%);
  --txt:#f5f1e6;
  --mut:#9b9484;
  --green:#5cc28a;
  --red:#e06a70;
  --serif:'Cormorant Garamond',serif;
  --sans:'Noto Sans Thai',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(212,175,55,.06), transparent 55%),
    var(--bg);
  min-height:100vh;
  display:flex;justify-content:center;
  padding:20px 16px 56px;
  -webkit-font-smoothing:antialiased;
}
.app{width:100%;max-width:460px}
.app-wide{max-width:760px}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 22px}
.brand{display:flex;align-items:center;gap:12px}
.crest{
  width:42px;height:42px;border-radius:50%;
  background:var(--grad-gold);
  display:flex;align-items:center;justify-content:center;
  color:#1a1404;font-size:20px;
  box-shadow:0 0 0 1px rgba(212,175,55,.5), 0 6px 20px rgba(212,175,55,.25);
}
.brand .bt{line-height:1.1}
.brand .bt b{font-family:var(--serif);font-size:20px;letter-spacing:2px;font-weight:700;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .bt span{display:block;font-size:9.5px;letter-spacing:4px;color:var(--mut);text-transform:uppercase;margin-top:2px}
.navlink{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);
  text-decoration:none;border:1px solid var(--line);padding:8px 14px;border-radius:30px;transition:.25s}
.navlink:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-soft);
  border-radius:18px;padding:20px;margin-bottom:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  position:relative;
}
.panel-title{font-family:var(--serif);font-size:19px;letter-spacing:.5px;margin-bottom:16px;color:var(--gold-lt);
  display:flex;align-items:center;gap:8px}
.eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--mut);margin-bottom:8px}

/* ---------- gold divider ---------- */
.hr-gold{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:14px 0}

/* ---------- inputs / buttons ---------- */
.field{
  width:100%;padding:15px 16px;border-radius:12px;
  border:1px solid var(--line);background:#0a0a0e;color:var(--txt);
  font-family:var(--sans);font-size:16px;text-align:center;letter-spacing:2px;margin-bottom:12px;
}
.field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.btn-gold{
  width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.5px;color:#1a1404;
  background:var(--grad-gold);
  box-shadow:0 8px 22px rgba(212,175,55,.28);transition:.2s;
}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.hint{font-size:12px;color:var(--mut);margin-top:14px;line-height:1.9;text-align:center}
.chip{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin:3px;
  cursor:pointer;color:var(--gold-lt);font-size:12px;letter-spacing:1px;transition:.2s}
.chip:hover{border-color:var(--gold);background:rgba(212,175,55,.08)}

/* ---------- passport card (hero) ---------- */
.passport{
  position:relative;border-radius:20px;padding:24px 22px;margin-bottom:18px;overflow:hidden;
  background:
    linear-gradient(135deg,#1b1b22 0%,#101015 55%,#0a0a0e 100%);
  border:1px solid var(--line);
  box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.passport:before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(212,175,55,.05) 0 2px, transparent 2px 9px);
  mix-blend-mode:screen;opacity:.5;pointer-events:none;
}
.passport:after{
  content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(244,221,142,.14),transparent);
  transform:skewX(-20deg);animation:shine 6s ease-in-out infinite;pointer-events:none;
}
@keyframes shine{0%,70%{left:-40%}100%{left:130%}}
.pp-top{display:flex;justify-content:space-between;align-items:flex-start}
.pp-label{font-family:var(--serif);letter-spacing:3px;font-size:13px;color:var(--gold-lt);text-transform:uppercase}
.pp-chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#f4dd8e,#a07d22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.pp-name{font-size:13px;color:var(--mut);margin-top:14px;letter-spacing:.5px}
.pp-bal{font-family:var(--serif);font-weight:700;font-size:58px;line-height:1;margin:4px 0 2px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-bal small{font-family:var(--sans);font-size:15px;-webkit-text-fill-color:var(--gold);letter-spacing:1px}
.pp-sub{display:flex;gap:20px;font-size:12.5px;color:var(--mut);margin-top:10px;border-top:1px solid var(--line-soft);padding-top:12px}
.pp-sub b{color:var(--txt)}

/* ---------- reward rows ---------- */
.reward{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.reward:last-child{border-bottom:none}
.r-ic{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:#0a0a0e;border:1px solid var(--line);box-shadow:inset 0 0 12px rgba(212,175,55,.06)}
.r-info{flex:1;min-width:0}
.r-name{font-size:14.5px;font-weight:600}
.r-cost{font-size:12px;color:var(--gold);margin-top:3px;letter-spacing:.5px}
.r-cost .rt{color:var(--mut);margin-left:6px}
.r-btn{padding:9px 16px;border-radius:10px;border:none;cursor:pointer;font-family:var(--sans);
  font-weight:700;font-size:13px;white-space:nowrap;transition:.2s}
.r-btn.ok{background:var(--grad-gold);color:#1a1404;box-shadow:0 6px 16px rgba(212,175,55,.22)}
.r-btn.ok:hover{filter:brightness(1.08)}
.r-btn.no{background:#0a0a0e;color:var(--mut);border:1px solid var(--line-soft);cursor:not-allowed}

/* ---------- history ---------- */
.hist{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);
  padding:10px 0;border-bottom:1px dashed var(--line-soft)}
.hist:last-child{border-bottom:none}
.hist b{color:var(--txt);font-weight:500}
.empty{text-align:center;color:var(--mut);font-size:13px;padding:14px}

/* ---------- admin stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.stat{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line-soft);
  border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold)}
.stat .v{font-family:var(--serif);font-weight:700;font-size:30px;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:11px;color:var(--mut);letter-spacing:1px;margin-top:4px;text-transform:uppercase}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);
  text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 8px;border-bottom:1px solid var(--line-soft)}
.tbl tr:last-child td{border-bottom:none}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;letter-spacing:.5px;
  border:1px solid var(--line);color:var(--gold-lt)}
.tag.warn{border-color:rgba(224,106,112,.5);color:var(--red)}
.tag.ok{border-color:rgba(92,194,138,.4);color:var(--green)}
.buylink{display:inline-block;padding:4px 12px;border-radius:8px;font-size:11.5px;letter-spacing:.5px;
  white-space:nowrap;text-decoration:none;color:#0a0a0e;font-weight:600;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));border:1px solid var(--gold-deep);transition:.2s}
.buylink:hover{filter:brightness(1.08);box-shadow:0 2px 10px rgba(212,175,55,.25)}

/* ---------- footer ---------- */
.foot{text-align:center;font-size:11px;letter-spacing:2px;color:var(--mut);margin-top:24px;text-transform:uppercase}
.foot a{color:var(--gold);text-decoration:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140px);
  background:var(--grad-gold);color:#1a1404;font-weight:700;font-size:14px;
  padding:14px 22px;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.5);transition:.4s;z-index:50}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:linear-gradient(135deg,#e06a70,#a83b41);color:#fff}

.hide{display:none !important}