:root{--primary:#cf0062;--secondary:#7b304f;--ink:#fff;--surface:#491d34;--line:rgba(255,255,255,.13)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;background:#190b14;color:#fff}button,input{font:inherit}.hidden{display:none!important}.boot,.login{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--primary) 50%,#25101d),#12080e 66%)}.loader{width:48px;height:48px;border:4px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-card{width:min(420px,calc(100% - 32px));padding:34px;border:1px solid #ffffff22;border-radius:24px;background:#ffffff10;box-shadow:0 25px 80px #0008;backdrop-filter:blur(18px)}.login-logo,.brand-logo{display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),#ff3d91);font-weight:900}.login-logo{width:56px;height:56px;border-radius:17px;font-size:26px}.eyebrow{margin:24px 0 4px;color:#ffabd0;font-weight:800;letter-spacing:.12em}.login h1{margin:0;font-size:30px}.muted{color:#d8beca}.login label{display:grid;gap:8px;margin:18px 0;font-weight:700}.login input{width:100%;padding:14px 16px;border:1px solid #ffffff2e;border-radius:12px;background:#fff;color:#171016;outline:none}.login input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent)}.primary{width:100%;padding:14px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),#f22b81);color:white;font-weight:800;cursor:pointer}.error{min-height:22px;color:#ff9cac}.portal{min-height:100dvh;background:linear-gradient(#551d38,#2b1120 520px,#170a12);padding-bottom:82px}header{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:0 max(18px,calc((100vw - 1240px)/2));background:color-mix(in srgb,var(--secondary) 90%,#160811);border-bottom:1px solid #ffffff1f;box-shadow:0 6px 24px #0005}.icon-btn,.logout{border:0;color:white;cursor:pointer}.icon-btn{font-size:25px;background:transparent}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:38px;height:38px;border-radius:10px}.brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.wallet{display:grid;text-align:right}.wallet small{color:#eebaca}.logout{padding:9px 12px;border-radius:9px;background:#ffffff18}main{max-width:1240px;margin:auto;padding:22px}.hero{min-height:230px;display:flex;align-items:center;justify-content:space-between;padding:38px clamp(24px,5vw,68px);overflow:hidden;border-radius:26px;background:radial-gradient(circle at 80% 50%,#ff3c8d80,transparent 28%),linear-gradient(115deg,var(--secondary),var(--primary));box-shadow:0 20px 45px #0005}.hero-tag,.section-title small{font-size:12px;font-weight:900;letter-spacing:.14em;color:#ffd1e4}.hero h1{max-width:600px;margin:8px 0;font-size:clamp(28px,4vw,52px)}.hero p{color:#ffe6f0}.hero-art{font-size:clamp(55px,10vw,115px);display:flex;gap:5px;transform:rotate(-10deg);filter:drop-shadow(0 15px 8px #0005)}.categories{display:flex;gap:12px;margin:20px 0;overflow:auto;padding:3px 1px}.categories button{min-width:112px;padding:13px 18px;border:1px solid var(--line);border-radius:15px;background:#ffffff0c;color:white;font-weight:800;cursor:pointer}.categories button i{font-style:normal;margin-right:7px}.categories button.active{background:var(--primary);box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 45%,transparent)}.hot{padding:22px;border:1px solid var(--line);border-radius:24px;background:#ffffff08}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-title h2{margin:4px 0;font-size:27px}.live{padding:8px 12px;border-radius:20px;background:#16b86c20;color:#7dffbc;font-size:13px}.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2be585}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.provider-card{overflow:hidden;border:1px solid var(--line);border-radius:19px;background:#210e19;transition:.2s}.provider-card:hover{transform:translateY(-4px);box-shadow:0 17px 35px #0006}.cover{height:230px;padding:22px;position:relative;display:flex;align-items:flex-end;overflow:hidden}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#11070ecc)}.cover.dg{background:radial-gradient(circle at 75% 20%,#e9c76899,transparent 24%),linear-gradient(145deg,#12231d,#654725)}.cover.sa{background:radial-gradient(circle at 70% 22%,#ff7f9a99,transparent 25%),linear-gradient(145deg,#401433,#a13d54)}.cover.joker{background:radial-gradient(circle at 75% 15%,#805fffaa,transparent 25%),linear-gradient(145deg,#251648,#7023ba)}.provider-mark{position:absolute;top:20px;right:18px;font-size:34px;font-weight:1000;opacity:.72;transform:rotate(-5deg)}.cover-copy{z-index:1}.cover-copy small{font-weight:800;color:#ffd0e3}.cover h3{font-size:25px;margin:6px 0}.cover p{margin:0;color:#e6ced8}.provider-card>button{width:100%;padding:15px 18px;border:0;background:linear-gradient(100deg,var(--primary),#a00050);color:white;text-align:left;font-weight:900;cursor:pointer}.provider-card>button b{float:right;font-size:21px}.bottom-nav{display:none}#drawer{position:fixed;z-index:40;left:0;top:0;bottom:0;width:290px;padding:28px;background:#180a12;box-shadow:20px 0 60px #0009;transform:translateX(-105%);transition:.25s}.drawer-open #drawer{transform:none}.shade{display:none;position:fixed;z-index:30;inset:0;background:#0009}.drawer-open .shade{display:block}.profile{display:grid;gap:5px;padding:20px;border-radius:18px;background:#ffffff0c}.avatar{font-size:30px}.profile small,.profile span{color:#cdaeba}.profile span{font-size:12px}#drawer nav{display:grid;gap:8px;margin-top:20px}#drawer nav button{padding:14px;border:0;border-radius:12px;background:transparent;color:#fff;text-align:left;font-weight:700;cursor:pointer}#drawer nav button:hover{background:#ffffff12}.toast{position:fixed;z-index:60;left:50%;bottom:95px;max-width:90%;padding:13px 20px;border-radius:12px;background:#111;color:#fff;box-shadow:0 10px 35px #0008;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.portal{padding-bottom:76px}header{height:62px;padding:0 12px}.brand strong{max-width:108px;font-size:14px}.wallet small{display:none}.wallet b{font-size:13px}.logout{display:none}main{padding:12px}.hero{min-height:165px;padding:22px;border-radius:17px}.hero p{font-size:13px}.hero-art{font-size:53px;opacity:.75}.categories{margin:12px 0}.categories button{min-width:87px;padding:11px 12px;font-size:13px}.hot{padding:12px;border-radius:17px}.provider-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cover{height:190px;padding:14px}.cover h3{font-size:18px}.cover p{font-size:12px}.provider-mark{font-size:23px}.bottom-nav{position:fixed;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;padding:7px 8px max(7px,env(safe-area-inset-bottom));background:#080407;border-top:1px solid #ffffff17}.bottom-nav button{display:grid;place-items:center;gap:2px;border:0;background:transparent;color:#a98d9a;font-size:20px}.bottom-nav button span{font-size:10px}.bottom-nav button.active{color:#ff3b8f}}@media(max-width:460px){.hero-art{display:none}.provider-grid{grid-template-columns:1fr 1fr}.cover{height:175px}.cover-copy small{font-size:9px}.cover h3{font-size:16px}.provider-card>button{padding:12px}.section-title h2{font-size:23px}}