:root{--bg:#060f1c;--bg2:#091829;--panel:#0d1a2b;--panel2:#102238;--line:#1d3c5b;--line2:#27527a;--blue:#158de9;--blue2:#286fe5;--cyan:#57d0ff;--text:#f6f9ff;--muted:#8ea4bc;--muted2:#6f88a3;--green:#35daa2;--red:#ff6d78;--amber:#ffca61;--radius:20px;--shadow:0 24px 70px rgba(0,0,0,.28)}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}.bg{position:fixed;inset:0;background:radial-gradient(circle at 77% -16%,rgba(31,88,170,.46) 0,transparent 37%),radial-gradient(circle at -10% 95%,rgba(0,105,143,.25) 0,transparent 34%),linear-gradient(180deg,#07111f 0%,#06101d 100%);pointer-events:none}.shell{width:min(1180px,calc(100% - 48px));margin:0 auto;position:relative;padding-bottom:28px}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between}.brand{color:#fff;text-decoration:none;font-size:24px;font-weight:850;display:flex;align-items:center;gap:12px;letter-spacing:.01em}.brand b{color:var(--cyan);font-weight:750}.mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#4867f3,#8757f4);box-shadow:0 0 26px rgba(94,98,255,.35);font-size:24px}.top-actions{display:flex;align-items:center;gap:18px}.secure{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--green)}.secure i{width:7px;height:7px;border-radius:99px;background:currentColor;box-shadow:0 0 10px currentColor}.link-btn{border:0;background:transparent;color:#a9c1d9;font:inherit;font-size:13px;cursor:pointer;padding:6px}.link-btn:hover{color:var(--cyan)}.view{display:none}.view.active{display:block}.login-layout{min-height:calc(100vh - 155px)}#loginView.active{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);gap:76px;align-items:center}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:.16em;font-weight:850}.hero{padding-bottom:40px}.hero h1,.dash-head h1{font-size:clamp(42px,5vw,62px);line-height:1.03;letter-spacing:-.045em;margin:14px 0 20px}.hero h1 em{font-style:normal;color:var(--cyan)}.hero>p,.dash-head p{color:var(--muted);font-size:18px;line-height:1.6;max-width:610px}.card,.stat,.playlist,.modal-card,.responsibility-card{background:linear-gradient(180deg,rgba(15,31,51,.98),rgba(8,21,35,.98));border:1px solid var(--line);box-shadow:var(--shadow)}.form-card{padding:34px;border-radius:24px}.card-kicker{font-size:11px;color:var(--cyan);font-weight:850;letter-spacing:.16em}.form-card h2{font-size:29px;letter-spacing:-.025em;margin:7px 0 8px}.card-copy{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 27px}label{display:block;font-size:13px;font-weight:760;color:#c3d4e6;margin-bottom:18px}label small{font-weight:500;color:var(--muted)}input{display:block;width:100%;margin-top:9px;border:1px solid #294a6a;background:#071522;color:#fff;border-radius:13px;padding:15px 16px;font-size:16px;outline:none;transition:border .15s,box-shadow .15s,background .15s}input::placeholder{color:#637991}input:focus{border-color:var(--cyan);background:#081827;box-shadow:0 0 0 3px rgba(85,208,255,.1)}.primary,.ghost,.x{border:0;cursor:pointer;font-weight:800}.primary{width:100%;min-height:52px;padding:14px 20px;border-radius:13px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:15px;box-shadow:0 12px 28px rgba(12,115,216,.28);display:flex;justify-content:center;align-items:center;gap:12px;transition:transform .15s,filter .15s}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.primary.small{width:auto;min-height:46px;padding:12px 18px}.primary b{font-size:18px}.ghost{background:#11243a;color:#cfe0f1;border:1px solid #2a4b69;padding:11px 18px;border-radius:11px}.ghost:hover{border-color:#3a6a93}.form-foot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(43,75,104,.6);display:grid;gap:7px}.form-foot span{font-size:12px;color:#83afc7}.form-foot small,.notice{color:#7890aa;font-size:12px;line-height:1.55}.message{min-height:18px;font-size:13px;color:var(--red);margin:12px 0 0}.message.ok{color:var(--green)}.compact-notice{margin-top:30px;max-width:620px}.player-notice{display:flex;gap:14px;align-items:flex-start;border:1px solid rgba(44,85,117,.75);background:rgba(11,28,45,.72);border-radius:16px;padding:16px 18px}.notice-icon{display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,#18466b,#12304e);color:var(--cyan);font-size:12px}.player-notice strong{display:block;font-size:14px;margin:1px 0 5px}.player-notice span{display:block;color:var(--muted);font-size:13px;line-height:1.5}.dashboard-view{padding-top:34px}.dash-head{display:flex;justify-content:space-between;align-items:center}.dash-head h1{font-size:38px;margin:7px 0 5px}.dash-head p{font-size:15px;margin:0}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 46px}.stat{border-radius:18px;padding:22px;display:flex;align-items:center;gap:17px}.stat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#0d2b45;color:var(--cyan);font-size:20px}.stat span{display:block;color:#7790aa;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.stat strong{font-size:25px;display:block;margin:5px 0;color:#fff}.stat small{color:#829ab2}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-title h2{margin:5px 0 5px;font-size:27px}.section-title p{margin:0;color:var(--muted);font-size:13px}.playlist-list{display:grid;gap:12px}.playlist{border-radius:17px;padding:19px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:border .15s,transform .15s}.playlist:hover{border-color:#2d5f88;transform:translateY(-1px)}.playlist-main{min-width:0}.playlist h3{margin:0 0 7px;font-size:17px}.playlist-meta{color:#829ab2;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:650px}.badge{display:inline-block;padding:4px 8px;border-radius:7px;font-size:9px;font-weight:850;margin-left:8px;background:#183d58;color:#74d9ff;vertical-align:2px}.badge.default{background:#123e36;color:#5ee2b2}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.actions button{background:#13263d;color:#c9d9e9;border:1px solid #294663;border-radius:9px;padding:9px 11px;cursor:pointer;font-weight:700}.actions button:hover{border-color:#3d6f99}.actions button.danger{color:#ff9298}.empty{text-align:center;border:1px dashed #27435f;border-radius:18px;padding:50px 20px;color:#8199b1}.empty-icon{font-size:36px;color:var(--cyan)}.empty h3{color:#dbe8f5;margin:8px 0}.empty p{margin:0 auto 18px;max-width:450px;line-height:1.5}.responsibility-card{margin-top:26px;border-radius:17px;padding:17px 18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;box-shadow:none}.responsibility-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#0c324e;color:var(--cyan);font-weight:900}.responsibility-card strong{font-size:13px}.responsibility-card p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.55}.footer{min-height:60px;margin-top:34px;border-top:1px solid rgba(35,63,87,.7);display:flex;align-items:center;gap:9px;color:#658099;font-size:11px}.modal{position:fixed;inset:0;background:rgba(1,6,13,.82);backdrop-filter:blur(9px);display:grid;place-items:center;padding:25px;z-index:50}.hidden{display:none}.modal-card{width:min(650px,94vw);max-height:calc(100vh - 40px);overflow:auto;border-radius:22px;padding:27px}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:20px}.modal-head h2{margin:5px 0 4px;font-size:25px}.modal-head p{margin:0;color:var(--muted);font-size:13px}.x{background:transparent;color:#9eb1c6;font-size:30px;line-height:1;padding:0 4px}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.notice{background:#091522;border:1px solid #1c3852;padding:13px 14px;border-radius:11px;margin:0 0 16px;display:flex;gap:11px}.notice strong{display:block;color:#cfe0ef;margin-bottom:3px}.notice p{margin:0}.check-row{display:flex;gap:10px;align-items:flex-start;background:#0a1827;border:1px solid #19344d;border-radius:11px;padding:12px 13px;font-weight:500;line-height:1.45}.check-row input{width:18px;height:18px;flex:0 0 18px;padding:0;margin:1px 0 0;accent-color:var(--blue)}.legal-card{width:min(760px,94vw)}.legal-copy>p{color:#b2c4d6;line-height:1.65;font-size:14px}.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0}.legal-grid>div{border:1px solid #1c3a56;background:#091725;border-radius:13px;padding:14px}.legal-grid b{display:block;font-size:13px;margin-bottom:5px;color:#e7f1fb}.legal-grid span{display:block;font-size:12px;line-height:1.5;color:#7f97af}.legal-muted{border-top:1px solid #1c354d;padding-top:16px;color:#7e94ab!important;font-size:12px!important}
@media(max-width:900px){.shell{width:min(100% - 32px,740px)}#loginView.active{grid-template-columns:1fr;gap:28px;align-items:start;min-height:0}.hero{padding:34px 0 0}.hero h1{font-size:48px}.form-card{max-width:620px;width:100%;margin:0 auto}.dashboard-view{padding-top:22px}.responsibility-card{grid-template-columns:auto 1fr}.responsibility-card .link-btn{grid-column:2;justify-self:start;padding-left:0}.playlist-meta{max-width:420px}}
@media(max-width:640px){.shell{width:100%;padding:0 16px 20px}.topbar{height:76px}.brand{font-size:20px}.mark{width:40px;height:40px;border-radius:12px;font-size:21px}.top-actions .link-btn{display:none}.secure{font-size:11px}.hero{padding-top:25px}.hero h1{font-size:39px;margin-bottom:14px}.hero>p{font-size:15px;line-height:1.55}.compact-notice{margin-top:20px}.player-notice{padding:13px 14px}.form-card{padding:23px 18px;border-radius:19px}.form-card h2{font-size:25px}.card-copy{margin-bottom:22px}.primary{min-height:54px;font-size:15px}input{min-height:52px;font-size:16px}.dashboard-view{padding-top:22px}.dash-head{align-items:flex-start;gap:16px}.dash-head h1{font-size:25px;letter-spacing:-.025em;word-break:break-all}.dash-head .ghost{font-size:12px;padding:9px 11px;white-space:nowrap}.status-grid{grid-template-columns:1fr;gap:10px;margin:22px 0 34px}.stat{padding:17px}.stat-icon{width:42px;height:42px}.stat strong{font-size:21px}.section-title{display:block}.section-title h2{font-size:24px}.section-title .primary{margin-top:16px;width:100%}.playlist{display:block;padding:17px}.playlist-meta{white-space:normal;max-width:none;word-break:break-word;line-height:1.45}.actions{margin-top:15px;display:grid;grid-template-columns:1fr 1fr}.actions button{min-height:43px}.actions button:last-child:nth-child(3){grid-column:1/-1}.empty{padding:38px 16px}.empty .ghost{width:100%;min-height:46px}.responsibility-card{grid-template-columns:auto 1fr;margin-top:20px}.responsibility-card .link-btn{grid-column:1/-1;justify-self:start;padding-left:0}.footer{flex-wrap:wrap;justify-content:center;text-align:center;padding:15px 0;margin-top:24px}.modal{padding:0;align-items:end}.modal-card{width:100%;max-height:94vh;border-radius:22px 22px 0 0;padding:22px 17px calc(20px + env(safe-area-inset-bottom))}.modal-head h2{font-size:22px}.two,.legal-grid{grid-template-columns:1fr}.legal-grid{gap:8px}.check-row{font-size:12px}.playlist-modal-card .primary,.legal-card .primary{position:sticky;bottom:0}.brand-text b{display:inline}}
@media(max-width:390px){.shell{padding-inline:13px}.hero h1{font-size:35px}.brand-text{font-size:18px}.secure{display:none}.actions{grid-template-columns:1fr}.actions button:last-child:nth-child(3){grid-column:auto}.dash-head{display:block}.dash-head .ghost{margin-top:13px}}