@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--bg:#f4f6f8;--ink:#182a2a;--muted:#778582;--teal:#12675c;--line:#e3e9e7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'Noto Sans Thai',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:white;color:var(--ink)}button:hover{filter:brightness(.96)}a{color:inherit;text-decoration:none}.demo{height:38px;background:#e4eee7;display:flex;align-items:center;gap:20px;padding:0 24px;font-size:10px;letter-spacing:1px;color:#356457}.demo span{letter-spacing:0;font-size:11px}.demo button{margin-left:auto;padding:3px 10px;font-size:10px;background:transparent;border-color:#b4ccbf}aside{position:fixed;top:38px;bottom:0;left:0;width:228px;background:white;border-right:1px solid var(--line);padding:30px 20px;z-index:5}.brand{display:block;font:700 32px sans-serif;letter-spacing:-1px;margin:0 14px 44px}.brand b{color:var(--teal)}.brand span{display:block;margin:9px 0 0 40px;font-size:8px;letter-spacing:3px;color:var(--muted)}aside>small{font-size:11px;color:var(--muted);margin:14px}nav a{display:flex;align-items:center;gap:14px;margin:6px 0;padding:12px 15px;border-radius:9px;color:#64716e}nav a.active{background:#eaf3ef;color:var(--teal);font-weight:600}nav a em{font-style:normal;width:20px;font-size:19px}.aside-bottom{position:absolute;bottom:24px;font-size:11px;color:#536a60}.aside-bottom p{font-size:10px;color:#9aa5a1}.online{display:inline-block;width:6px;height:6px;background:#4ea87d;border-radius:50%;margin-right:5px}.shell{margin-left:228px}header{height:86px;background:#fff9;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 40px}.header-right{display:flex;gap:14px;align-items:center;font-size:12px}.header-right small{display:block;font-size:10px;color:var(--muted)}.header-right button{border:0;background:transparent;position:relative;font-size:22px}.header-right i{position:absolute;font:9px sans-serif;background:#d87855;color:white;border-radius:50%;padding:2px 4px;top:4px;right:5px}.avatar{background:#e7eae1;border-radius:50%;display:inline-grid;place-items:center;width:38px;height:38px;color:#6c7750}main{padding:34px 40px;max-width:1400px;margin:auto;min-height:calc(100vh - 178px)}h1{font-size:29px;letter-spacing:-.7px;margin:5px 0 7px;font-weight:600}h2{font-size:17px;margin:0 0 16px}h3{font-size:15px;margin:8px 0}p{line-height:1.8}.muted,.lead{color:var(--muted)}.lead{margin:0 0 26px;font-size:13px}.eyebrow{font-size:10px;letter-spacing:2px;color:#6e8c7f}.row{display:flex;justify-content:space-between;align-items:center;gap:14px}.grid{display:grid;grid-template-columns:1.65fr 1fr;gap:22px}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:25px;margin-bottom:22px}.balance{background:#154d43;color:white;position:relative;overflow:hidden;min-height:245px}.balance:after{content:'◎';position:absolute;right:-10px;top:-85px;font:340px serif;opacity:.06;pointer-events:none}.balance .muted{color:#aac5ba}.balance-value{font:500 44px sans-serif;letter-spacing:-2px;margin:17px 0 22px}.balance-value small{font-size:16px;letter-spacing:0;color:#a4c4b4}.actions{display:flex;gap:10px;flex-wrap:wrap}.primary{background:var(--teal);color:white;border-color:var(--teal)}.balance .primary{background:#d9efb4;color:#244b31;border-color:transparent}.balance .secondary{background:#ffffff12;color:white;border-color:#ffffff25}.tag{display:inline-block;font-size:10px;padding:4px 9px;border-radius:6px;background:#edf4ef;color:#467963}.tag.warn{background:#fff2e6;color:#a67639}.tag.gray{background:#f0f2f3;color:#788481}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.stats>div{padding:14px;background:#f7f9f7;border-radius:10px}.stats strong{display:block;font-size:21px;margin-top:8px}.stats small{color:var(--muted);font-size:11px}.note{padding:13px 16px;background:#f3f7ed;color:#637453;border-radius:10px;font-size:12px;line-height:1.8}.section-heading{margin:12px 0 20px}.link{background:none;border:none;color:var(--teal);padding:0;font-size:12px}.games{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.game{background:white;border:1px solid var(--line);border-radius:13px;overflow:hidden}.art{height:145px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--art);font-size:55px}.art:before{content:'';position:absolute;width:140px;height:140px;border:1px solid #ffffff40;transform:rotate(35deg);border-radius:28px}.art span{z-index:1;text-shadow:0 8px 20px #0002}.game-body{padding:13px}.game-body small{color:var(--muted);font-size:10px}.game-body .row button{padding:4px 9px}.game-body h3{font-size:13px}.game-body>button{width:100%;font-size:11px;margin-top:10px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.tabs button.active{background:#204f43;color:white}.search{display:flex;gap:12px;margin-bottom:22px}.search input{flex:1}.field{margin-bottom:17px}label{display:block;font-size:12px;font-weight:500;margin-bottom:7px}input,select,textarea{width:100%;border:1px solid #dce4df;padding:12px;border-radius:9px;background:#fff;color:var(--ink)}textarea{min-height:100px}.form-wrap{max-width:640px}.amounts{display:flex;gap:8px;margin:10px 0}.amounts button{flex:1;padding:8px;font-size:12px}.wide{width:100%}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:#89928e;font-weight:400;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:17px 12px;border-bottom:1px solid #eff2f0;white-space:nowrap}.positive{color:#2c8a69}.negative{color:#b7734c}.empty{text-align:center;padding:44px;color:var(--muted)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.list-item{padding:18px 0;border-bottom:1px solid var(--line)}.list-item p{font-size:12px;color:var(--muted);margin:6px 0}footer{padding:14px 40px 24px;color:#9aa49e;font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between}footer span{letter-spacing:0}dialog{border:0;border-radius:18px;max-width:460px;width:calc(100% - 32px);padding:30px;box-shadow:0 25px 100px #122b3930}dialog::backdrop{background:#122b3977;backdrop-filter:blur(4px)}dialog .actions{margin-top:25px}#toast{display:none;position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#203e35;color:white;padding:13px 24px;border-radius:12px;z-index:20;font-size:12px}#mobile{display:none}.login-panel{max-width:440px;margin:30px auto}.login-panel .brand{margin:0 0 25px}.check{display:flex;gap:9px;align-items:center;font-size:12px;margin:15px 0}.check input{width:auto}details{border-bottom:1px solid var(--line);padding:16px 0}summary{cursor:pointer}details p{color:var(--muted);font-size:12px}@media(min-width:1500px){main{padding-top:45px}.art{height:180px}}@media(max-width:1050px){.games{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}aside{width:200px}.shell{margin-left:200px}main{padding:25px}.balance{min-height:220px}}@media(max-width:700px){aside{display:none;top:38px;width:228px;box-shadow:10px 0 60px #0002}body.menu aside{display:block}.shell{margin-left:0}header{height:72px;padding:0 20px}#mobile{display:block;padding:5px;border:0;background:none}.header-right>span:last-child{display:none}main{padding:24px 18px}h1{font-size:25px}.games{grid-template-columns:repeat(2,1fr);gap:12px}.art{height:130px}.card{padding:20px}.demo{padding:0 12px;gap:8px;font-size:8px}.demo span{font-size:9px}.demo button{font-size:8px}footer{padding:15px 18px;display:block}footer span{display:block;margin-top:6px}.profile-grid{grid-template-columns:1fr}.search{flex-wrap:wrap}.search input{min-width:180px}}
/* Obsidian / champagne visual direction */
:root{--bg:#0d0e11;--ink:#f0ede5;--muted:#99968c;--teal:#d7b46c;--line:#ffffff12}
body{background:radial-gradient(ellipse at 80% 0%,#30291a55,transparent 48%),var(--bg);color:var(--ink)}
.demo{background:#211e17;color:#c7b582;border-bottom:1px solid #cbb27620}.demo button{color:#c7b582;border-color:#cbb27630}
aside{background:#111215;border-color:#ffffff09;padding-top:35px}.brand{color:#f5eddb;letter-spacing:-1.5px}.brand b{color:#dbb96f}.brand span{color:#9a8356;letter-spacing:3.5px}aside>small{color:#736c5d}nav a{color:#99988f;padding:13px 15px;margin:7px 0}nav a.active{color:#e8ca87;background:linear-gradient(100deg,#d7b46c20,#d7b46c06);box-shadow:inset 2px 0 #d7b46c;border-radius:0 8px 8px 0}nav a:hover{color:#ead9b3;background-color:#ffffff04}.aside-bottom{color:#b3a37e}.aside-bottom p{color:#6d6c64}.online{background:#cfb56f}
header{background:#101114b8;border-color:#ffffff09;backdrop-filter:blur(20px)}.header-right{color:#d9d4c6}.header-right button{color:#c9b581}.header-right i{background:#b78e47;color:#131313}.avatar{background:linear-gradient(140deg,#d4b476,#76613b);color:#161614;border:1px solid #e9ce8c66}
main{padding-top:40px}.eyebrow{color:#a18a57;letter-spacing:3px;font-size:9px}h1{font-size:32px;font-weight:500;letter-spacing:-1px}.lead{color:#8d8d87;margin-top:9px;margin-bottom:30px}.card{background:linear-gradient(140deg,#1c1d21,#17181b);border-color:#ffffff0c;border-radius:14px;box-shadow:0 14px 40px #00000012}.balance{background:radial-gradient(ellipse at 90% 20%,#9f7c3340,transparent 60%),linear-gradient(120deg,#252219,#171919);border:1px solid #b89c4c55;min-height:263px;padding:28px 30px}.balance:after{color:#d4b465;opacity:.085;top:-66px;right:4px}.balance .muted{color:#9b947f}.balance-value{font-size:51px;font-weight:400;color:#f8edcf;margin:22px 0 24px}.balance-value small{color:#a69061;font-size:13px;letter-spacing:2px}.balance .primary,.primary{background:linear-gradient(115deg,#eed297,#bb954f);border-color:#e5c17e;color:#211b10;font-weight:600;box-shadow:0 4px 16px #b9903c18}.balance .secondary{background:#ffffff05;color:#e5d1a3;border-color:#b19a673d}button{background:#25262b;border-color:#ffffff12;color:#ded9ce;border-radius:8px}button:hover{filter:brightness(1.12)}.link{color:#d3b875;background:transparent}.tag{background:#d8b56c16;color:#ddc18b;border:1px solid #d8b56c20;font-size:9px;letter-spacing:.3px}.tag.gray{background:#ffffff05;color:#aaa596;border-color:#ffffff0b}.tag.warn{background:#d5a95215;color:#dbb66e;border-color:#d5a95225}.stats>div{background:#111215;border:1px solid #ffffff06;padding:17px}.stats strong{color:#e3cb94;font-weight:500;font-size:26px}.stats small{color:#8b887c}.note{background:#cfab5810;border:1px solid #c7a96316;color:#b3a68c;font-size:11px}.section-heading{margin:22px 0}.section-heading h2{font-size:18px;font-weight:500}.game{background:#191a1f;border-color:#ffffff0b;transition:transform .2s,border-color .2s}.game:hover{transform:translateY(-4px);border-color:#c6a55a66}.art{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--art) 35%,#1a1b24),#121319);height:170px}.art:before{width:125px;height:125px;border:1px solid #dec58b33;border-radius:50%;box-shadow:0 0 0 20px #dec58b06,0 0 0 42px #dec58b03;transform:rotate(0)}.art:after{content:'ORBIT COLLECTION';position:absolute;bottom:12px;color:#e3d4b36b;letter-spacing:3px;font-size:7px}.art span{font-size:49px;filter:sepia(.3);text-shadow:0 12px 30px #0008}.game-body{padding:16px}.game-body h3{color:#e9e0cc;letter-spacing:.2px}.game-body small{color:#928b79}.game-body>button{background:#ffffff03;border-color:#c8ac6b26;color:#cdb684;padding:9px}.game-body .row button{color:#d2b775;background:transparent;border-color:#ffffff10}.tabs button{background:#17181c;color:#a8a293}.tabs button.active{background:#c5a45e;color:#19160f;border-color:#cfb67a}.search input,input,select,textarea{background:#111216;border-color:#ffffff13;color:#e5ddcc}input::placeholder,textarea::placeholder{color:#615f58}input:focus,select:focus,textarea:focus{outline:1px solid #b69b5d;border-color:#b69b5d}input[type=checkbox]{accent-color:#d2af65}.amounts button{background:#24231e;border-color:#b09a6333;color:#c4ae7c}th{color:#8c8573;border-color:#ffffff0c}td{border-color:#ffffff07;color:#c9c4b9}.positive{color:#bccc98}.negative{color:#c49d71}.list-item,details{border-color:#ffffff0b}footer{color:#625f54}.empty{color:#8c8779}dialog{background:#1a1b1f;color:#e9e1d0;border:1px solid #bba36544;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#040506ba}#toast{background:#d6bc82;color:#211b11;border:1px solid #f0d9a6}.login-panel{padding:38px;background:radial-gradient(ellipse at top right,#a67b2720,transparent 60%),#191a1e;border-color:#bfa0603d}.login-panel h1{font-size:28px}.login-panel .brand{padding-bottom:25px;border-bottom:1px solid #bfa06022}.header-right small{color:#777365}
@media(max-width:700px){h1{font-size:25px}.balance{padding:24px;min-height:245px}.balance-value{font-size:43px}.art{height:145px}.login-panel{padding:25px}.demo span{font-size:8px}main{padding-top:26px}}
@media(max-width:700px){.shell{margin-left:0}aside{display:block;position:static;width:100%;padding:18px 14px;background:#111215}aside .brand,aside>small,aside .aside-bottom{display:none}aside nav{display:flex;gap:6px;overflow:auto}aside nav a{white-space:nowrap;margin:0;padding:9px 12px;font-size:12px}aside nav em{display:none}header{padding:0 18px}.header-right{gap:8px}.header-right button{padding:7px 10px;font-size:11px}}