:root{color-scheme:dark;--bg:#101315;--surface:#191d20;--surface2:#22272a;--line:#30373a;--text:#edf1ef;--muted:#9daaa5;--accent:#b1e89f;--accent-dark:#173023;--danger:#f2a5a3;--radius:18px;font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 10% 0%,#1c2720 0,transparent 28%),var(--bg);color:var(--text);min-height:100vh}
button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:wait}
a{color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.04em}h2{font-size:1.24rem;letter-spacing:-.025em}h3{font-size:1rem}p{margin-bottom:1rem}
.muted{color:var(--muted)}.mini{font-size:.78rem;color:var(--muted);line-height:1.45}.eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--accent);margin-bottom:.55rem}.error{color:var(--danger);min-height:1.2em;font-size:.85rem}.reason{color:var(--danger);margin-top:.25rem}
.topbar{height:76px;border-bottom:1px solid var(--line);background:rgba(16,19,21,.83);backdrop-filter:blur(18px);position:sticky;top:0;z-index:3}.topbar-inner{max-width:1440px;height:100%;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:1.18rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}.brand small{display:block;font-size:.54rem;letter-spacing:.19em;color:var(--muted);margin-top:4px}.brand-mark{width:58px;height:58px;display:grid;place-items:center;background:var(--accent);color:#17251a;border-radius:16px;font-size:2.1rem;line-height:1}.brand-mark.small{width:35px;height:35px;font-size:1.25rem;border-radius:10px}.top-actions{display:flex;align-items:center;gap:18px}.text-button{background:none;border:0;color:var(--muted);padding:7px}.text-button:hover{color:var(--text)}
.layout{max-width:1440px;margin:auto;padding:32px 28px 80px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:0 16px 50px rgba(0,0,0,.08)}.panel+.panel{margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.section-heading h1,.section-heading h2{margin-bottom:0}.status-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #435047;border-radius:100px;padding:6px 10px;font-size:.73rem;color:#c4d1c7;background:#253029}.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#8f9e94}.status-pill.online{color:var(--accent);border-color:#42604a;background:#1d3123}.status-pill.online::before{background:var(--accent)}
.hero{padding:31px;margin-bottom:20px;background:linear-gradient(135deg,#1d2921,#191d20 55%)}.now-body{display:flex;align-items:center;gap:18px;min-height:106px;margin:25px 0}.now-thumb{width:166px;height:94px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.now-meta p{margin:.3rem 0}.controls{display:flex;flex-wrap:wrap;gap:9px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:41px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text);text-decoration:none;font-weight:700;white-space:nowrap}.button:hover{border-color:#668070;background:#2a3430}.button.primary{background:var(--accent);color:#15251a;border-color:var(--accent)}.button.primary:hover{background:#c8f6b9}.button.ghost{background:transparent}.button.danger-ghost{background:transparent;color:var(--danger);border-color:#624240}.button.danger-ghost:hover{background:#3b2525}.button.wide{width:100%}.mini-button{min-height:30px;font-size:.74rem;padding:5px 9px;border-radius:8px}.count{display:inline-flex;align-items:center;justify-content:center;background:#2b3530;color:var(--accent);font-size:.78rem;min-width:23px;height:23px;padding:0 5px;border-radius:7px;vertical-align:middle;margin-left:4px}
.main-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:20px}.sidebar>.panel+.panel{margin-top:18px}.track-list{margin-top:18px}.track{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:center}.track:first-child{border-top:0}.track-thumb{width:76px;height:56px;object-fit:cover;border-radius:8px;background:var(--surface2);flex:0 0 auto}.track-info{min-width:0;flex:1}.track-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;font-weight:700}.track-title:hover{text-decoration:underline}.track-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px;max-width:300px}.history-badge{font-size:.73rem;color:var(--muted);border:1px solid var(--line);padding:4px 8px;border-radius:100px}.empty{color:var(--muted);font-size:.87rem;padding:13px 0 3px;margin:0}.form-stack{display:flex;flex-direction:column;gap:9px}.form-stack .mini{margin:0}.form-stack label,label{font-size:.8rem;font-weight:700;color:#c8d2cc}input,textarea,select{width:100%;border:1px solid #424d47;border-radius:9px;padding:10px 12px;background:#111617;color:var(--text);outline:0}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(177,232,159,.12)}textarea{resize:vertical}.stack-buttons{display:grid;gap:8px}.trust-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:8px 0}.trust-row:first-child{border-top:0}.trust-row span{overflow:hidden;text-overflow:ellipsis}.subheading{margin:22px 0 7px;padding-top:17px;border-top:1px solid var(--line)}.settings-panel{margin-top:20px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:20px}.code-line{font-family:ui-monospace,Consolas,monospace;font-size:.72rem;background:#111617;padding:10px;border-radius:8px;overflow-wrap:anywhere;color:var(--accent)}details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}summary{cursor:pointer;font-size:.8rem;color:var(--muted)}details button{margin-top:4px}
.toast{position:fixed;bottom:22px;right:22px;background:#2b3e31;color:#dcf7dc;border:1px solid #5b8264;border-radius:12px;padding:12px 16px;box-shadow:0 16px 36px #0007;max-width:min(420px,calc(100vw - 44px));opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s;z-index:5}.toast.show{opacity:1;transform:translateY(0)}.toast.error-toast{background:#432728;border-color:#8b4b4e;color:#ffd1d2}
.brand-link{text-decoration:none}.history-layout{max-width:1100px}.history-intro{margin:10px 0 0}.history-pager{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.widget-settings-grid{gap:36px}.widget-check{display:flex;align-items:center;gap:9px;cursor:pointer}.widget-check input{width:auto;accent-color:var(--accent)}#widget-accent{height:46px;padding:4px}#widget-opacity{padding:0;accent-color:var(--accent)}.widget-preview-block{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}.widget-preview-surface{width:min(100%,740px);min-height:192px;padding:8px;border-radius:14px;background-color:#28302b;background-image:linear-gradient(45deg,#303934 25%,transparent 25%),linear-gradient(-45deg,#303934 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#303934 75%),linear-gradient(-45deg,transparent 75%,#303934 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.widget-preview-surface iframe{width:100%;height:176px;border:0;background:transparent}.widget-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}.widget-links details{margin:0;padding:0;border:0}.widget-links details button{margin-top:8px}
.login-page{display:grid;place-items:center;padding:24px}.login-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:0 30px 90px #0005}.login-card .brand-mark{margin-bottom:28px}.login-card h1{margin-bottom:12px}.login-card form{display:grid;gap:13px;margin-top:30px}.login-card form .error{margin:0}
.player-page{background:#0c0f10}.player-shell{width:min(900px,100%);margin:0 auto;padding:20px}.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.video-frame{position:relative;width:100%;aspect-ratio:16/9;min-height:270px;background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden}.video-frame #yt-player,.video-frame iframe{width:100%;height:100%;border:0}.player-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-weight:700;background:#111617;text-align:center;padding:20px}.player-empty[hidden],.video-frame [hidden]{display:none!important}.player-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px}.player-footer h1{font-size:1.4rem;margin-bottom:4px}.player-footer p{margin-bottom:0}
@media(max-width:900px){.main-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sidebar>.panel+.panel{margin:0}.settings-grid{gap:24px}.sidebar>.panel:last-child{grid-column:1/-1}}
@media(max-width:620px){.topbar-inner{padding:0 16px}.layout{padding:16px 12px 60px}.panel{padding:18px}.hero{padding:20px}.section-heading{flex-wrap:wrap}.controls .button{flex:1}.controls .button span{display:none}.sidebar,.settings-grid{display:block}.sidebar>.panel+.panel{margin-top:18px}.settings-grid>div+div{margin-top:30px}.track{align-items:flex-start}.track-thumb{width:56px;height:45px}.track-actions{max-width:120px}.player-shell{padding:8px}.player-footer{display:block}.player-footer button{margin-top:12px}}