:root{--bg:#071225;--bg2:#0b1a35;--panel:#0f2142;--panel2:#142b55;--line:#223f73;--sky:#5b9df5;--sky2:#8cc0ff;--ice:#d6e7ff;--text:#e8f0ff;--muted:#8ba4cb;--danger:#ff7b8c;--ok:#58e0a3;--warn:#ffcf70;--code:#101b30;--code-line:#1d2c4a;--sans:"Sarabun","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;--mono:ui-monospace,"JetBrains Mono",Consolas,Menlo,monospace}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--sky2);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--sky2);outline-offset:2px}::selection{background:#2c5aa8}.wrap{max-width:1040px;margin:0 auto;padding:0 20px}.hdr{position:-webkit-sticky;position:sticky;top:0;z-index:30;background:rgba(7,18,37,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.hdr .wrap{gap:20px;height:60px}.brand,.hdr .wrap{display:flex;align-items:center}.brand{gap:10px;color:var(--text);font-weight:800;font-style:italic;letter-spacing:.04em;font-size:18px}.brand:hover{text-decoration:none}.brand img{width:26px;height:auto}.nav{display:flex;gap:4px;margin-left:8px}.nav a{padding:6px 12px;border-radius:8px;color:var(--muted);font-weight:600}.nav a:hover{color:var(--text);background:var(--panel);text-decoration:none}.nav a.on{color:var(--text);background:var(--panel2)}.sp{flex:1 1}.me{display:flex;align-items:center;gap:8px}.me img{width:28px;height:28px;border-radius:50%}.me span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel);padding:8px 14px;border-radius:10px;cursor:pointer;font-weight:600;transition:background .15s,border-color .15s,transform .1s}.btn:hover:not(:disabled){background:var(--panel2);border-color:#35599a;text-decoration:none}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.pri{background:linear-gradient(135deg,#4f93f2,#7db6ff);border-color:transparent;color:#04142e}.btn.pri:hover:not(:disabled){background:linear-gradient(135deg,#6aa4f6,#9bc7ff)}.btn.dng{color:var(--danger)}.btn.sm{padding:5px 9px;font-size:13px;border-radius:8px}.btn.ico{padding:0;width:34px;height:34px}.btn svg{width:16px;height:16px;flex:none}.field{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}.field:focus{border-color:var(--sky);outline:none}textarea.field{font-family:var(--mono);font-size:13px;line-height:1.55;min-height:220px;resize:vertical}label.l{display:block;margin:14px 0 6px;color:var(--muted);font-size:13px;font-weight:600}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}.muted{color:var(--muted)}.row{display:flex;gap:10px;align-items:center}.err{color:var(--danger)}.hero{position:relative;overflow:hidden;padding:56px 0 36px}.hero:before{content:"";position:absolute;right:-60px;top:-30px;width:420px;height:500px;background:url(/images/logo.png) 50%/contain no-repeat;opacity:.9;filter:drop-shadow(0 0 60px rgba(91,157,245,.45));pointer-events:none}.hero .in{position:relative;max-width:560px}.hero h1{margin:0 0 10px;font-size:clamp(32px,6vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.01em}.hero p{margin:0 0 24px;color:var(--muted);max-width:46ch}.check{display:flex;gap:8px}.check .field{font-size:16px;padding:13px 14px}.check .btn{padding:0 22px}@media(max-width:760px){.hero:before{right:-120px;opacity:.28;width:340px}}.tabs{display:flex;gap:6px;margin:34px 0 14px;flex-wrap:wrap;align-items:center}.tab{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--muted);font-weight:600}.tab.on{background:var(--panel2);color:var(--text);border-color:#35599a}.search{max-width:260px;margin-left:auto}.genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:10px;gap:10px;margin-bottom:6px}.genre{position:relative;text-align:left;padding:16px;border-radius:12px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);cursor:pointer;overflow:hidden}.genre:hover{border-color:#35599a}.genre b{display:block;font-size:16px}.genre small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-gap:12px;gap:12px}.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 12px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.card.playing{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky),0 0 28px rgba(91,157,245,.25)}.card img.th{width:68px;height:68px;border-radius:10px;object-fit:cover;background:var(--bg2);margin-bottom:6px}.card .nm{font-weight:700;font-size:14px}.card .cr,.card .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .cr{font-size:12px;color:var(--muted)}.card .idl{display:flex;align-items:center;gap:6px;font:12px var(--mono);color:var(--sky2);margin:6px 0 8px;cursor:pointer;background:none;border:0}.card .acts{display:flex;gap:6px;width:100%}.card .acts .btn{flex:1 1}.card .corner{position:absolute;top:8px;right:8px}.card .corner.l{left:8px;right:auto}.star{background:none;border:0;cursor:pointer;color:#35517f;padding:2px}.star.on{color:var(--warn)}.star svg{width:18px;height:18px}.tag{font-size:11px;padding:1px 8px;border-radius:999px;background:var(--panel2);color:var(--sky2)}.bad{color:var(--warn);font-size:12px}.result{margin-top:18px;max-width:560px}.result .card{flex-direction:row;text-align:left;gap:12px;padding:12px}.result .card .meta{flex:1 1;min-width:0}.result .card .idl{margin:2px 0 0}.empty{grid-column:1/-1;text-align:center;padding:40px 0;color:var(--muted)}.player{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;width:min(480px,calc(100% - 24px));padding:8px 10px;background:rgba(15,33,66,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #35599a;border-radius:14px;box-shadow:0 10px 40px #0008}.player img{width:38px;height:38px;border-radius:8px;object-fit:cover}.player .t{flex:1 1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eq{display:flex;gap:2px;align-items:end;height:16px}.eq i{width:3px;background:var(--sky2);height:4px;border-radius:2px}.eq.on i{animation:eq .8s ease-in-out infinite}.eq.on i:nth-child(2){animation-delay:.2s}.eq.on i:nth-child(3){animation-delay:.4s}@keyframes eq{0%,to{height:4px}50%{height:16px}}@media(prefers-reduced-motion:reduce){.eq.on i{animation:none;height:10px}}body.has-player main{padding-bottom:84px}.toasts{position:fixed;top:72px;right:14px;z-index:60;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100% - 28px))}.toast{padding:11px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 8px 30px #0007;animation:tin .2s ease}.toast.error{border-color:#8a3a4a}.toast.success{border-color:#2f7d5f}.toast b{display:block}.toast span{color:var(--muted);font-size:13px}@keyframes tin{0%{opacity:0;transform:translateY(-6px)}}.modal{position:fixed;inset:0;z-index:50;background:#030a16cc;display:flex;align-items:center;justify-content:center;padding:16px}.modal .box{width:100%;max-width:680px;max-height:92dvh;overflow:auto}.vgrid{display:grid;grid-template-columns:1fr 1fr;grid-gap:18px;gap:18px;margin-top:28px;align-items:start}@media(max-width:860px){.vgrid{grid-template-columns:1fr}}.vitem{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);margin-bottom:8px}.vitem .m{flex:1 1;min-width:0}.vitem .m b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vitem .m small{color:var(--muted);font-family:var(--mono)}.vitem img{width:36px;height:36px;border-radius:8px;object-fit:cover}.ro{font-family:var(--mono);font-size:13px}.viewer{max-width:760px;margin:36px auto;background:var(--code);border:1px solid var(--line);border-radius:14px;overflow:hidden}.viewer .bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--code-line);flex-wrap:wrap}.viewer .fn{font:13px var(--mono);color:var(--muted);flex:1 1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:2px}.seg button{border:0;background:transparent;padding:5px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:600}.seg button.on{background:var(--panel2);color:var(--text)}.viewer pre{margin:0;padding:16px;max-height:62dvh;overflow:auto;font:13.5px/1.65 var(--mono);white-space:pre-wrap;word-break:break-word}.hljs-keyword{color:#7cb7ff}.hljs-string{color:#f0b38a}.hljs-number{color:#b5e3a8}.hljs-comment{color:#6b86ad}.hljs-built_in,.hljs-literal{color:#8fe0d4}.hljs-title{color:#ffe08a}.views{font:13px var(--mono);color:var(--muted);padding:5px 10px;border:1px solid var(--line);border-radius:10px}.vwrap{min-height:100dvh;display:grid;place-items:center;padding:20px}.vbox{width:100%;max-width:400px;text-align:center}.vbox img{width:90px;margin:0 auto 12px;display:block;filter:drop-shadow(0 0 34px rgba(91,157,245,.55))}.vbox h1{margin:0 0 6px;font-size:24px}.cf{display:flex;justify-content:center;min-height:70px;margin:22px 0 8px}footer{margin:60px 0 30px;color:var(--muted);font-size:13px;text-align:center}