.mex-app{--bg:#0a0c10;--surface:#13161c;--surface-2:#171b22;--surface-3:#1d222b;--fg:#f4f5f7;--muted:#8b919c;--muted-2:#b4b9c3;--border:#ffffff14;--brand:#e53935;--brand-dark:#b71c1c;--gold:#d4af37;--tier-S:#d4af37;--tier-S-soft:#d4af3724;--tier-S-dark:#8b5a1e;--tier-A:#e9b949;--tier-A-soft:#e9b94924;--tier-A-dark:#8b5a1e;--tier-B:#c5cdd9;--tier-B-soft:#c5cdd924;--tier-B-dark:#586270;--tier-C:#d08a4e;--tier-C-soft:#d08a4e24;--tier-C-dark:#6f3b14;--tier-D:#8e97a6;--tier-D-soft:#8e97a624;--tier-D-dark:#3a424f;--success:#28a86c;--info:#8b8ef2;--warning:#ffc857;--danger:#dc3545;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 10px 30px #00000080;--font-thai:"Noto Sans Thai", "Inter", system-ui, sans-serif;--font-latin:"Inter", "Noto Sans Thai", system-ui, sans-serif;background:var(--bg);color:var(--fg);font-family:var(--font-thai);-webkit-font-smoothing:antialiased;min-height:100vh;font-size:15px;line-height:1.5}.mex-app *{box-sizing:border-box}.mex-app{width:100%;max-width:100%;overflow-x:clip}:root:has(.mex-app){background:#0a0c10;overflow-x:clip}body:has(.mex-app){background:#0a0c10;overflow-x:clip}.mex-app a{color:var(--gold);text-decoration:none}.mex-app a:hover{text-decoration:underline}.app-shell{max-width:1280px;min-height:100vh;margin:0 auto;padding:0 16px}.page{padding:16px 0 96px}@media (min-width:768px){.page{padding:24px 0 32px}}.top-nav{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 0;display:flex}.brand{letter-spacing:.2px;font-size:18px;font-weight:800}.brand .x{color:var(--brand)}.top-nav-links{display:none}.top-nav-actions{align-items:center;gap:8px;display:flex}@media (min-width:768px){.top-nav-links{gap:24px;display:flex}.top-nav-links a{color:var(--muted-2);font-weight:500}.top-nav-links a.active{color:var(--fg)}}.bottom-nav{background:var(--surface);border-top:1px solid var(--border);z-index:40;justify-content:space-around;padding:8px 0 14px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav a{color:var(--muted);flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px 12px;font-size:11px;display:flex}.bottom-nav a.active{color:var(--gold)}.bottom-nav a i{font-size:18px}@media (min-width:768px){.bottom-nav{display:none}}.eyebrow{letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;font-size:11px}.heading{margin:4px 0;font-size:clamp(24px,5vw,36px);font-weight:800;line-height:1.1}.sub{color:var(--muted-2);font-size:14px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:12px;padding:16px}.card-lg{border-radius:var(--r-xl);padding:24px}.btn{border-radius:var(--r-md);cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;padding:12px 18px;font-family:inherit;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.mex-app .btn-primary{background:var(--brand);color:#fff}.mex-app .btn-primary:hover{background:var(--brand-dark)}.mex-app .btn-gold{background:var(--gold);color:#0a0c10}.mex-app .btn-outline{color:var(--fg);border:1px solid var(--border);background:0 0}.mex-app .btn-outline:hover{background:var(--surface-2)}.mex-app .btn-ghost{color:var(--muted-2);background:0 0}.mex-app a.btn,.mex-app a.btn:hover{text-decoration:none}.btn-full{width:100%}.btn-sm{padding:8px 12px;font-size:13px}.form-group{margin-bottom:16px}.form-label{color:var(--muted-2);margin-bottom:6px;font-size:13px;display:block}.form-input{background:var(--surface-2);width:100%;color:var(--fg);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;font-family:inherit;font-size:15px}.form-input:focus{border-color:var(--gold);outline:none}.form-help{color:var(--muted);margin-top:6px;font-size:12px}.form-error{color:var(--danger);margin-top:6px;font-size:13px}.tier-gem{background:var(--tier-soft,var(--tier-A-soft));width:88px;height:88px;color:var(--tier-color,var(--tier-A));border-radius:24px;flex-shrink:0;place-items:center;font-size:32px;font-weight:800;display:grid;box-shadow:inset 0 0 0 1px #ffffff0d}.tier-gem.lg{border-radius:28px;width:120px;height:120px;font-size:44px}.tier-pill{background:var(--tier-soft,var(--tier-A-soft));color:var(--tier-color,var(--tier-A));letter-spacing:.4px;text-transform:uppercase;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-flex}.tier-pill .dot{background:currentColor;border-radius:50%;width:6px;height:6px}.hero{grid-template-columns:1fr;gap:12px;display:grid}@media (min-width:768px){.hero{grid-template-columns:1.25fr 1fr;gap:16px}}.tier-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);align-items:center;gap:20px;padding:24px;display:flex;position:relative;overflow:hidden}.tier-card:before{content:"";background:radial-gradient(closest-side, var(--tier-soft,transparent), transparent);pointer-events:none;width:60%;height:180%;position:absolute;top:-40%;right:-10%}.tier-card .info{flex:1;min-width:0}.tier-card h2{margin:6px 0;font-size:36px;font-weight:800}.tier-tagline{color:var(--muted-2);font-size:14px}.points-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);flex-direction:column;gap:12px;padding:24px;display:flex}.points-num{font-size:44px;font-weight:800;line-height:1}.points-row{border-top:1px solid var(--border);gap:24px;padding-top:12px;display:flex}.points-row .col{flex:1}.points-row .col-label{letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;font-size:11px}.points-row .col-val{margin-top:3px;font-size:17px;font-weight:700}.stat-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;display:grid}.stat-row .card{margin:0;padding:12px}.stat-row .label{letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;font-size:10px}.stat-row .val{margin-top:2px;font-size:18px;font-weight:700}.benefits{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}@media (min-width:640px){.benefits{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.benefits{grid-template-columns:repeat(5,1fr)}}.benefit-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);flex-direction:column;gap:6px;padding:14px;display:flex;position:relative}.benefit-card.locked{opacity:.55}.benefit-icon{width:36px;height:36px;color:var(--gold);background:#d4af371f;border-radius:8px;place-items:center;font-size:16px;display:grid}.benefit-cat{letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;font-size:9px}.benefit-title-en{font-size:13px;font-weight:700}.benefit-title-th{color:var(--muted-2);font-size:11px}.benefit-desc{color:var(--muted-2);margin-top:auto;font-size:11px}.member-card{background:linear-gradient(135deg, var(--tier-color,var(--gold)), var(--tier-dark,#8b5a1e));color:#0a0c10;border-radius:var(--r-xl);padding:24px;position:relative;overflow:hidden}.member-card .label{letter-spacing:2px;opacity:.7;text-transform:uppercase;font-size:11px}.member-card .code{font-size:22px;font-weight:800;font-family:var(--font-latin);letter-spacing:1px;margin-top:4px}.member-card .qr-box{border-radius:var(--r-md);background:#fff;margin-top:16px;padding:12px;display:inline-block}.text-muted{color:var(--muted)}.text-right{text-align:right}.text-center{text-align:center}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.flex{display:flex}.flex-1{flex:1}.gap-1{gap:8px}.gap-2{gap:16px}.justify-between{justify-content:space-between}.items-center{align-items:center}.mex-app .notif-badge{color:#fff;text-align:center;background:#e53935;border-radius:9px;min-width:18px;height:18px;margin-left:6px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;display:inline-block}.mex-app .bottom-nav .notif-dot{color:#fff;text-align:center;background:#e53935;border-radius:8px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:700;line-height:16px;position:absolute;top:4px;left:50%;transform:translate(3px)}