:root {
    --bg: #09090b;
    --card: rgba(24, 24, 27, .78);
    --border: rgba(255, 255, 255, .10);
    --muted: #a1a1aa;
    --primary: #8b5cf6;
    --primary-2: #6366f1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans Thai", sans-serif; background: var(--bg); color: #fafafa; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 8%, rgba(124,58,237,.16), transparent 28%), radial-gradient(circle at 87% 18%, rgba(37,99,235,.12), transparent 24%); z-index: -2; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glass-nav { background: rgba(9,9,11,.76); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.navbar-brand { font-size: 1rem; font-weight: 800; letter-spacing: .08em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow: 0 0 28px rgba(139,92,246,.3); }
.text-gradient { background: linear-gradient(90deg,#a78bfa,#60a5fa); color: transparent; background-clip: text; -webkit-background-clip: text; }
.nav-link { color: #a1a1aa; font-size: .92rem; }
.nav-link:hover { color: #fff; }
.btn { border-radius: 9px; font-weight: 600; }
.btn-discord { color:#fff; background:#5865f2; border-color:#5865f2; }
.btn-discord:hover { color:#fff; background:#4752c4; border-color:#4752c4; }
.btn-primary { background: linear-gradient(135deg,var(--primary),var(--primary-2)); border: 0; box-shadow: 0 8px 28px rgba(99,102,241,.2); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-outline-light { border-color: var(--border); }
.btn-user { color:#fff; border:1px solid var(--border); background:#18181b; padding:.35rem .7rem .35rem .4rem; }
.avatar { width:28px; height:28px; object-fit:cover; border-radius:7px; }
.avatar-initial { width:28px;height:28px;display:inline-grid;place-items:center;border-radius:7px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:.78rem;font-weight:800; }
.avatar-initial.avatar-lg { width:42px;height:42px;border-radius:11px;font-size:1rem; }
.avatar-image { width:28px;height:28px;display:inline-block;object-fit:cover;border-radius:7px;border:1px solid var(--border);background:#18181b;flex:0 0 auto; }
.avatar-image.avatar-lg { width:42px;height:42px;border-radius:11px; }
.profile-avatar-preview { width:104px;height:104px;display:grid;place-items:center;flex:0 0 auto;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 14px 38px rgba(99,102,241,.25);font-size:2rem;font-weight:800; }
.profile-avatar-preview img { width:100%;height:100%;object-fit:cover; }
.auth-shell { min-height:calc(100vh - 76px);display:grid;place-items:center;padding:3rem 0; }
.auth-card { width:100%;max-width:460px;padding:2rem; }
.auth-divider { display:flex;align-items:center;gap:1rem;color:#52525b;font-size:.75rem;margin:1.5rem 0; }
.auth-divider::before,.auth-divider::after { content:"";height:1px;background:var(--border);flex:1; }
.simple-guide { display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);color:#d4d4d8;font-size:.82rem;font-weight:600; }
.simple-guide span,.step-pill { width:25px;height:25px;display:inline-grid;place-items:center;border-radius:8px;background:rgba(139,92,246,.16);color:#c4b5fd;font-size:.78rem;font-weight:800;flex:0 0 auto; }
.simple-guide i { color:#52525b;font-size:.7rem; }
.simple-guide-wide { justify-content:flex-start; }
.kid-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.8rem;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025); }
.kid-steps div { position:relative;display:flex;align-items:center;justify-content:center;gap:.45rem;text-align:center;color:#d4d4d8;font-weight:600; }
.kid-steps div:not(:last-child)::after { content:"";position:absolute;right:-.35rem;width:.12rem;height:60%;background:var(--border); }
.kid-steps span { width:25px;height:25px;display:inline-grid;place-items:center;border-radius:8px;background:rgba(139,92,246,.16);color:#c4b5fd;font-size:.78rem;font-weight:800;flex:0 0 auto; }
.kid-steps small { font-size:.78rem; }
.kid-steps-four { grid-template-columns:repeat(4,1fr); }
.player-step { padding:1rem;border:1px solid var(--border);border-radius:13px;background:rgba(9,9,11,.38); }
.player-step .form-label { display:flex;align-items:center;gap:.65rem;margin-bottom:.75rem; }
.next-action { display:flex;align-items:center;gap:1rem;padding:1.15rem;border:1px solid rgba(139,92,246,.28);border-radius:14px;background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(59,130,246,.06)); }
.next-action-icon { width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:1.35rem;flex:0 0 auto; }
.help-card { text-align:center;background:linear-gradient(160deg,rgba(88,101,242,.11),rgba(24,24,27,.8)); }
.help-icon { width:48px;height:48px;display:grid;place-items:center;margin:0 auto 1rem;border-radius:50%;background:rgba(88,101,242,.18);color:#a5b4fc;font-size:1.2rem; }
.easy-list { padding-left:1.4rem;display:grid;gap:.7rem;color:#d4d4d8;font-size:.9rem; }
.payment-method-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem; }
.payment-choice { min-width:0; }
.payment-option { position:relative;display:block;padding:.65rem;border:2px solid var(--border);border-radius:14px;background:#111113;cursor:pointer;transition:.18s ease;overflow:hidden; }
.payment-option:hover { border-color:rgba(139,92,246,.45);transform:translateY(-1px); }
.payment-option:has(input:checked),.payment-option.selected { border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.13); }
.payment-option input { position:absolute;opacity:0;pointer-events:none; }
.payment-option-title { display:flex;align-items:center;gap:.55rem;padding:.25rem .2rem .65rem;font-size:.86rem; }
.payment-check { width:23px;height:23px;display:grid;place-items:center;border-radius:50%;border:1px solid #52525b;color:transparent;flex:0 0 auto; }
.payment-option:has(input:checked) .payment-check,.payment-option.selected .payment-check { background:#8b5cf6;border-color:#8b5cf6;color:#fff; }
.payment-option img { width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:9px;background:#fff;display:block; }
.hero { padding: 7.5rem 0 5.5rem; position:relative; overflow:hidden; }
.eyebrow { display:inline-flex; gap:.5rem; align-items:center; padding:.42rem .75rem; border:1px solid rgba(139,92,246,.3); border-radius:999px; background:rgba(139,92,246,.08); color:#c4b5fd; font-size:.8rem; font-weight:600; }
.hero h1 { font-size:clamp(2.7rem,7vw,5.3rem); line-height:1.03; letter-spacing:-.045em; font-weight:800; }
.hero-copy { color:var(--muted); font-size:1.1rem; max-width:620px; line-height:1.9; }
.hero-orb { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.24),transparent 68%); right:-80px; top:0; filter:blur(8px); }
.stat-row { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat { padding:1.3rem; text-align:center; }
.stat strong { display:block; font-size:1.4rem; }
.stat span { color:var(--muted); font-size:.8rem; }
.section { padding:5.5rem 0; }
.section-kicker { color:#a78bfa; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; }
.section-title { font-size:clamp(1.85rem,4vw,3rem); font-weight:750; letter-spacing:-.035em; }
.surface { background:var(--card); border:1px solid var(--border); border-radius:16px; backdrop-filter:blur(12px); }
.step-card { padding:1.5rem; height:100%; }
.step-number { width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:rgba(139,92,246,.13);color:#c4b5fd;font-weight:800;margin-bottom:1.2rem; }
.step-card h3 { font-size:1.05rem;font-weight:700; }
.step-card p { color:var(--muted);font-size:.9rem;line-height:1.75;margin:0; }
.package-card { padding:1.75rem; height:100%; position:relative; transition:.2s ease; }
.package-card:hover { transform:translateY(-4px); border-color:rgba(139,92,246,.4); }
.package-card.featured { border-color:rgba(139,92,246,.5); box-shadow:0 22px 65px rgba(76,29,149,.2); }
.package-badge { position:absolute;right:1rem;top:1rem;padding:.28rem .55rem;border-radius:999px;background:rgba(139,92,246,.14);color:#c4b5fd;font-size:.72rem;font-weight:700; }
.price { font-size:2.7rem;font-weight:800;letter-spacing:-.05em; }
.price small { font-size:.9rem;color:var(--muted);letter-spacing:0;font-weight:500; }
.feature-list { list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.8rem;color:#d4d4d8;font-size:.9rem; }
.feature-list i { color:#a78bfa;margin-right:.55rem; }
.alert-dark-soft { background:rgba(39,39,42,.7); border:1px solid var(--border); color:#d4d4d8; }
.form-control,.form-select { background:#09090b;border-color:var(--border);color:#fafafa;border-radius:9px;padding:.72rem .85rem; }
.form-control:focus,.form-select:focus { background:#09090b;color:#fff;border-color:#8b5cf6;box-shadow:0 0 0 .2rem rgba(139,92,246,.14); }
.form-control::placeholder { color:#52525b; }
.form-select option { background:#18181b; }
.form-label { font-size:.87rem;font-weight:600;color:#d4d4d8; }
.form-text { color:#71717a; }
.dashboard-wrap { padding:3.5rem 0 6rem; }
.queue-card { padding:1.4rem; }
.badge-soft-warning,.badge-soft-info,.badge-soft-primary,.badge-soft-purple,.badge-soft-success,.badge-soft-secondary { padding:.48rem .7rem;border-radius:999px;font-weight:600;font-size:.75rem; }
.badge-soft-warning{background:rgba(245,158,11,.13);color:#fbbf24}.badge-soft-info{background:rgba(6,182,212,.13);color:#67e8f9}.badge-soft-primary{background:rgba(59,130,246,.13);color:#93c5fd}.badge-soft-purple{background:rgba(139,92,246,.13);color:#c4b5fd}.badge-soft-success{background:rgba(34,197,94,.13);color:#86efac}.badge-soft-secondary{background:rgba(113,113,122,.15);color:#d4d4d8}
.queue-number { font-size:2rem;font-weight:800;letter-spacing:-.04em; }
.queue-position { display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:6px solid rgba(139,92,246,.18);background:#111113; }
.queue-position strong {font-size:1.6rem}.queue-position small{color:var(--muted);font-size:.68rem}
.table { --bs-table-bg:transparent;--bs-table-color:#e4e4e7;--bs-table-border-color:var(--border);font-size:.86rem; }
.table thead th { color:#71717a;font-size:.73rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap; }
.table td { vertical-align:middle; }
.empty-state { text-align:center;padding:3.5rem 1.5rem;color:var(--muted); }
.empty-state i { font-size:2.5rem;color:#52525b;display:block;margin-bottom:1rem; }
.queue-rank { width:38px;height:38px;display:inline-grid;place-items:center;border-radius:11px;background:#27272a;color:#d4d4d8;font-weight:800; }
.queue-rank.top { background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 6px 20px rgba(99,102,241,.25); }
.queue-rank.active { width:48px;height:48px;color:#c4b5fd;background:rgba(139,92,246,.14);font-size:1.2rem; }
.live-dot { width:9px;height:9px;display:inline-block;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12);animation:pulse 1.8s infinite; }
.queue-board-table td { padding-top:.85rem;padding-bottom:.85rem; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(34,197,94,0); } }
.toast-container { z-index:1090; }
.dropdown-menu { background:#18181b;border-color:var(--border); }
.modal-content { background:#18181b;border:1px solid var(--border); }
.text-muted { color:var(--muted)!important; }
@media(max-width:767px){
    .hero{padding:5rem 0 3.5rem}.section{padding:4rem 0}.dashboard-wrap{padding-top:2rem}.table-responsive{border-radius:12px}.hero-orb{opacity:.6}
    .auth-shell { align-items:start;padding:1.25rem 0; }
    .auth-card { padding:1.3rem; }
    .simple-guide { flex-wrap:wrap;gap:.4rem;font-size:.75rem; }
    .simple-guide-wide { justify-content:center; }
    .kid-steps { gap:.25rem;padding:.7rem .45rem; }
    .kid-steps-four { grid-template-columns:repeat(4,1fr); }
    .kid-steps div { flex-direction:column;gap:.3rem; }
    .kid-steps small { font-size:.7rem; }
    .payment-method-grid { grid-template-columns:1fr; }
    .payment-option { padding:.6rem; }
    .payment-option img { max-height:430px; }
    .player-step { padding:.9rem; }
    .next-action { align-items:flex-start;flex-wrap:wrap; }
    .next-action .btn { width:100%;padding:.7rem 1rem; }
    .dashboard-wrap .btn { min-height:44px;display:inline-flex;align-items:center;justify-content:center; }
    .queue-board-table thead { display:none; }
    .queue-board-table,.queue-board-table tbody,.queue-board-table tr,.queue-board-table td { display:block;width:100%; }
    .queue-board-table tr { position:relative;padding:.9rem 1rem .9rem 4.25rem;border-bottom:1px solid var(--border); }
    .queue-board-table td { padding:.18rem 0;border:0; }
    .queue-board-table td:first-child { position:absolute;left:.85rem;top:1rem;width:auto; }
    .queue-board-table td:nth-child(3),.queue-board-table td:nth-child(4) { display:inline-block;width:auto;margin-right:.65rem;font-size:.78rem; }
    .queue-board-table td:last-child { margin-top:.45rem; }
}
/* PDPA and privacy */
.privacy-consent-box { padding: 1rem; border: 1px solid rgba(34,197,94,.35); border-radius: 1rem; background: rgba(34,197,94,.06); }
.privacy-policy h2 { margin-top: 2rem; margin-bottom: .75rem; font-size: 1.15rem; font-weight: 700; }
.privacy-policy p, .privacy-policy li { line-height: 1.85; }
.privacy-policy ul { color: var(--muted); }
.scroll-anchor { scroll-margin-top: 100px; }
.cookie-notice { position: fixed; z-index: 1090; right: 1rem; bottom: 1rem; width: min(520px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(24,24,27,.97); box-shadow: 0 18px 55px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-notice[hidden] { display: none !important; }
@media (max-width: 575.98px) { .cookie-notice { align-items: stretch; flex-direction: column; } }