:root{--bg:#030914;--bg2:#061126;--surface:#0a1730;--surface2:#0e2042;--line:#1d3d70;--text:#f7fbff;--muted:#8fa8c8;--cyan:#27d7ff;--blue:#3b82ff;--violet:#8b5cf6;--good:#34d399;--warn:#fbbf24;--bad:#fb7185;--shadow:0 24px 70px rgba(0,0,0,.35);font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 70% -10%,#173f86 0,rgba(12,34,77,.35) 28%,transparent 48%),var(--bg);color:var(--text)}body{min-height:100vh}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}.boot{min-height:100vh;display:grid;place-content:center;gap:18px;text-align:center;color:var(--muted)}.boot img{width:180px;border-radius:28px;box-shadow:0 0 70px rgba(39,215,255,.15)}
a{color:var(--cyan);text-decoration:none}.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px 20px;border-right:1px solid rgba(111,165,255,.16);background:linear-gradient(180deg,rgba(5,14,32,.97),rgba(3,9,20,.96));backdrop-filter:blur(18px);z-index:20}.brand{display:flex;align-items:center;gap:12px;margin:2px 8px 24px}.brand img{width:56px;height:56px;object-fit:cover;border-radius:16px}.brand strong{font-size:18px;letter-spacing:.18em}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em;margin-top:4px}.nav{display:grid;gap:7px}.nav a{display:flex;align-items:center;gap:12px;color:#c6d8ef;padding:12px 14px;border-radius:13px;border:1px solid transparent}.nav a.active,.nav a:hover{color:white;background:linear-gradient(90deg,rgba(31,145,255,.22),rgba(102,55,255,.13));border-color:rgba(58,154,255,.36);box-shadow:inset 0 0 24px rgba(28,157,255,.07)}.nav .ico{width:22px;text-align:center}.gpu-mini{margin-top:22px;padding:14px;border:1px solid rgba(62,147,255,.32);background:linear-gradient(180deg,rgba(10,33,70,.88),rgba(8,18,39,.9));border-radius:16px}.gpu-mini h4{margin:0 0 10px;color:#cbeeff;font-size:12px;letter-spacing:.12em}.gpu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{min-width:0}.metric b{display:block;font-size:13px}.metric span{color:var(--muted);font-size:10px}.main{min-width:0}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(112,165,255,.12);background:rgba(4,12,28,.62);backdrop-filter:blur(16px);position:sticky;top:0;z-index:15}.topbar .title{display:flex;align-items:center;gap:12px}.topbar h1{font-size:18px;margin:0}.status-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;border:1px solid rgba(64,158,255,.28);background:#081a34;color:#b9dfff;font-size:12px}.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 14px var(--good)}.content{padding:26px;max-width:1500px;margin:auto}.hero{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:20px}.hero h2{font-size:clamp(26px,3vw,38px);margin:0 0 7px}.hero p{margin:0;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--cyan)}
.card{background:linear-gradient(180deg,rgba(10,28,59,.82),rgba(5,15,34,.88));border:1px solid rgba(92,151,236,.22);border-radius:18px;box-shadow:var(--shadow)}.card.pad{padding:18px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stack{display:grid;gap:14px}.field{display:grid;gap:7px}.field label,.label{font-weight:700;font-size:13px}.hint{color:var(--muted);font-size:11px}.input,.textarea,.select{width:100%;background:#07152d;border:1px solid #254a7c;border-radius:12px;padding:12px 13px;outline:none}.textarea{resize:vertical;min-height:220px;line-height:1.55}.input:focus,.textarea:focus,.select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(39,215,255,.1)}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}.btn{border:1px solid rgba(77,164,255,.42);background:#0b2147;border-radius:12px;padding:11px 15px;font-weight:750}.btn:hover{border-color:var(--cyan)}.btn.primary{background:linear-gradient(100deg,#16c4f5,#3679ff 52%,#8059ff);border:0;box-shadow:0 10px 34px rgba(37,126,255,.25)}.btn.danger{border-color:rgba(251,113,133,.45);background:rgba(93,21,39,.4)}.btn.good{border-color:rgba(52,211,153,.4);background:rgba(13,79,61,.4)}.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed}.generate{width:100%;padding:15px;font-size:16px;margin-top:16px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 12px}.section-title h3{margin:0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{padding:16px}.stat b{font-size:22px;display:block}.stat span{color:var(--muted);font-size:12px}.list{overflow:hidden}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(115,165,230,.12)}.row:last-child{border-bottom:0}.row h4{margin:0 0 4px}.row p{margin:0;color:var(--muted);font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;background:#142a4f;color:#bad6ff}.badge.good{background:rgba(16,110,78,.35);color:#92f1cb}.badge.warn{background:rgba(116,82,5,.35);color:#ffe18c}.badge.bad{background:rgba(127,29,45,.35);color:#ffb1be}.empty{padding:48px 20px;text-align:center;color:var(--muted)}.empty b{display:block;color:white;font-size:18px;margin-bottom:7px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.toolbar .input,.toolbar .select{width:auto;min-width:180px}.notice{padding:12px 14px;border-radius:12px;border:1px solid rgba(251,191,36,.35);background:rgba(95,65,7,.2);color:#ffe8a3;font-size:12px}.notice.info{border-color:rgba(39,215,255,.28);background:rgba(8,70,94,.2);color:#bdefff}.notice.good{border-color:rgba(52,211,153,.28);background:rgba(9,78,59,.2);color:#b7f7dd}.notice.bad{border-color:rgba(251,113,133,.3);background:rgba(95,20,38,.24);color:#ffc0ca}.progress-stage{display:flex;gap:7px;align-items:center}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--cyan);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.player{position:fixed;left:280px;right:20px;bottom:18px;z-index:40;padding:12px 16px;display:flex;align-items:center;gap:14px;background:rgba(4,14,32,.93);border:1px solid rgba(71,162,255,.28);border-radius:16px;backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.45)}.player audio{width:100%}.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(320px,560px) minmax(0,1fr)}.auth-panel{display:flex;align-items:center;padding:clamp(24px,6vw,70px);background:rgba(3,9,20,.9);border-right:1px solid rgba(86,150,255,.15)}.auth-panel .inner{width:100%;max-width:430px;margin:auto}.auth-logo{width:210px;display:block;margin:0 auto 28px;border-radius:28px;box-shadow:0 0 70px rgba(53,119,255,.15)}.auth-panel h1{font-size:32px;margin:0 0 8px}.auth-panel p{color:var(--muted);line-height:1.6}.auth-art{position:relative;overflow:hidden;background:radial-gradient(circle at 45% 35%,rgba(43,126,255,.45),transparent 26%),radial-gradient(circle at 70% 55%,rgba(139,92,246,.33),transparent 30%),#040c1c}.auth-art:before,.auth-art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);border:1px solid rgba(63,217,255,.18);width:60vw;height:60vw;left:15%;top:10%;box-shadow:0 0 120px rgba(46,139,255,.12),inset 0 0 100px rgba(92,46,255,.08)}.auth-art:after{width:34vw;height:34vw;left:29%;top:24%;border-color:rgba(174,116,255,.2)}.art-copy{position:absolute;inset:auto 10% 12%;z-index:2}.art-copy b{font-size:clamp(34px,5vw,70px);letter-spacing:.06em}.art-copy span{display:block;color:#a7c8ef;letter-spacing:.22em;margin-top:12px}.legal{max-width:900px;margin:0 auto;padding:40px 24px 80px;line-height:1.75}.legal .brand{margin:0 0 30px}.legal h1{font-size:34px}.legal h2{margin-top:32px}.legal p,.legal li{color:#c2d2e6}.legal-nav{display:flex;gap:10px;flex-wrap:wrap}.table-wrap{overflow:auto;border-radius:16px;border:1px solid rgba(91,151,232,.18)}table{width:100%;border-collapse:collapse;min-width:800px;background:rgba(5,16,36,.72)}th,td{text-align:left;padding:12px;border-bottom:1px solid rgba(114,161,226,.12);font-size:12px}th{color:#9fc8f8;background:#0a1b39;position:sticky;top:0}.mobile-top,.bottom-nav{display:none}.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:100;display:grid;place-items:center;padding:18px}.modal>.card{max-width:560px;width:100%;max-height:90vh;overflow:auto}.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-word}.codebox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#020a16;border:1px dashed #3a73b5;border-radius:12px;padding:12px;word-break:break-all;color:#bceaff}.checkbox{display:flex;gap:10px;align-items:flex-start}.checkbox input{margin-top:4px}.footer-links{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;margin-top:20px}
@media(max-width:1050px){.app-shell{grid-template-columns:220px 1fr}.stats{grid-template-columns:repeat(2,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}.player{left:240px}}
@media(max-width:760px){body{padding-bottom:76px}.app-shell{display:block}.sidebar{display:none}.topbar{height:60px;padding:0 14px}.topbar .title h1{font-size:15px}.content{padding:16px 14px 100px}.mobile-top{display:flex;align-items:center;gap:9px}.mobile-top img{width:36px;height:36px;border-radius:11px}.grid2,.grid3,.controls{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr);gap:9px}.stat{padding:13px}.stat b{font-size:18px}.hero{align-items:flex-start;flex-direction:column}.hero h2{font-size:27px}.textarea{min-height:180px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:50;background:rgba(3,10,23,.96);border-top:1px solid rgba(93,154,235,.24);padding:7px 6px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(18px)}.bottom-nav a{display:grid;place-items:center;gap:3px;color:#8ba8ca;font-size:9px;padding:5px 2px}.bottom-nav a.active{color:var(--cyan)}.bottom-nav span:first-child{font-size:18px}.player{left:10px;right:10px;bottom:77px;padding:10px}.auth-page{grid-template-columns:1fr}.auth-panel{min-height:100vh;border:0;padding:24px 18px}.auth-art{display:none}.auth-logo{width:170px}.toolbar .input,.toolbar .select{width:100%}.row{grid-template-columns:1fr}.actions{justify-content:flex-start}.kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:9px}.grid4{grid-template-columns:1fr 1fr}}