@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");:root{--font-body:"Manrope","Trebuchet MS","Lucida Sans Unicode","Lucida Grande",sans-serif;--font-display:"Space Grotesk","Trebuchet MS","Lucida Sans Unicode","Lucida Grande",sans-serif;--bg:#f4f7fb;--bg-soft:#eef2f7;--panel:#fff;--panel-2:#f6f8fb;--ink:#10233d;--muted:#5c6b7a;--border:rgba(15,23,42,.12);--border-strong:rgba(15,23,42,.18);--primary:#0b4a6f;--primary-2:#083a57;--accent:#00a8d6;--accent-strong:#007bac;--accent-glow:#5ad8f0;--sidebar-bg:#0a1c38;--sidebar-bg-2:#114a82;--sidebar-surface:hsla(0,0%,100%,.08);--sidebar-border:rgba(191,219,254,.22);--sidebar-text:#f8fbff;--sidebar-muted:rgba(226,237,248,.82);--input-bg:#f5f7fb;--input-border:rgba(15,23,42,.18);--input-focus:rgba(11,74,111,.25);--shadow:0 8px 16px rgba(15,23,42,.06);--shadow-soft:0 12px 30px rgba(15,23,42,.08);--shadow-card:0 18px 40px rgba(15,23,42,.12)}*{box-sizing:border-box}body{margin:0;font-family:var(--font-body);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.45;background:radial-gradient(1200px 600px at 10% -10%,rgba(14,165,233,.12),transparent 45%),radial-gradient(900px 600px at 90% 5%,rgba(16,185,129,.1),transparent 45%),linear-gradient(180deg,#f9fafc,#eef2f7)}h1,h2,h3,h4{font-family:var(--font-display);margin:0}a{color:inherit;text-decoration:none}.layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{position:-webkit-sticky;position:sticky;top:0;min-height:100dvh;align-self:stretch;background:radial-gradient(280px 200px at 18% 0,rgba(125,211,252,.16),transparent 58%),radial-gradient(460px 320px at 100% 100%,rgba(14,165,233,.12),transparent 56%),linear-gradient(180deg,var(--sidebar-bg) 0,#0b2f58 48%,#0c3f6d 100%);color:var(--sidebar-text);padding:14px 10px;display:flex;flex-direction:column;gap:10px;border-right:1px solid rgba(148,193,235,.2);box-shadow:inset -1px 0 0 hsla(0,0%,100%,.05);overflow-y:auto;overflow-x:hidden}.sidebar-brand{position:relative;padding:12px 14px;border-radius:20px;background:radial-gradient(120px 90px at 85% 20%,rgba(125,211,252,.18),transparent 60%),linear-gradient(180deg,hsla(0,0%,100%,.08),hsla(0,0%,100%,.03));border:1px solid var(--sidebar-border);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.12),0 14px 28px rgba(4,18,39,.24);overflow:hidden;isolation:isolate}.sidebar-brand-logo{display:flex;justify-content:center;padding:6px 0}.sidebar-brand:before{content:"";position:absolute;inset:auto -18% -48% 26%;height:120px;background:radial-gradient(circle at center,rgba(103,232,249,.22),transparent 62%);pointer-events:none;z-index:-1}.sidebar-nav-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(191,219,254,.78);padding:8px 10px 2px}.brand-logo{width:210px;max-width:100%;height:auto;object-fit:contain}.brand-mark{width:32px;height:32px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#38bdf8);display:grid;place-items:center;font-weight:700;color:#fff}.sidebar-nav{display:flex;flex-direction:column;gap:6px;padding:4px}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--sidebar-muted);font-weight:600;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;font-size:13px;white-space:nowrap;border:1px solid transparent}.sidebar-nav-badge{min-width:24px;text-align:center;border-radius:999px;padding:2px 7px;font-size:9px;letter-spacing:.06em;color:var(--sidebar-text);border:1px solid rgba(191,219,254,.24);background:hsla(0,0%,100%,.12)}.sidebar-nav a:hover{background:var(--sidebar-surface);color:var(--sidebar-text);border-color:rgba(191,219,254,.18)}.sidebar-nav a.active{background:linear-gradient(180deg,hsla(0,0%,100%,.16),hsla(0,0%,100%,.1));color:var(--sidebar-text);border-color:rgba(191,219,254,.32);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.12),0 10px 20px rgba(4,18,39,.16)}.main{display:flex;flex-direction:column;min-height:100vh}.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:5;background:hsla(0,0%,100%,.9);border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(15,23,42,.05),0 4px 10px rgba(15,23,42,.05);padding:10px 16px;justify-content:space-between;gap:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar,.topbar-title{display:flex;align-items:center}.topbar-title h1{font-size:20px;font-weight:700}.topbar-actions{display:flex;gap:12px;align-items:center}.content{padding:28px 32px 60px;display:flex;flex-direction:column;gap:20px}.panel{background:radial-gradient(1200px 600px at 110% -20%,rgba(14,165,233,.12),transparent 45%),radial-gradient(800px 500px at -10% -10%,rgba(11,74,111,.08),transparent 50%),var(--panel);padding:22px;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);animation:panelEnter .26s ease}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:16px;gap:16px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.playlist-row{justify-content:space-between}.playlist-row input{flex:1 1 auto}.icon-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}.list-item .icon-group{min-width:140px;justify-content:flex-end}button,input,select,textarea{font-family:var(--font-body)}input,select{padding:8px 10px;border-radius:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--ink);font-size:13px;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.7)}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--input-focus)}button{padding:8px 12px;border-radius:10px;border:1px solid transparent;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;cursor:pointer;font-weight:600;box-shadow:0 6px 12px rgba(11,74,111,.22);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;font-size:13px}button:hover{background:linear-gradient(180deg,#0c5a86,var(--primary))}button:active{transform:translateY(1px)}button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}button.secondary{background:var(--panel-2);color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-soft)}button.secondary:hover{background:#eef2f7;border-color:var(--border-strong)}button.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);box-shadow:none}button.ghost:hover{color:var(--ink);border-color:var(--border-strong);background:rgba(11,74,111,.06)}.icon-button{width:32px;height:32px;padding:0;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:#334155;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}.icon-button:hover{background:#eef2f7;border-color:var(--border-strong);color:#0f172a}.icon-button.danger{color:#b91c1c;border-color:#fecaca;background:#fee2e2}.icon-button.danger:hover{background:#fecaca;color:#991b1b}.icon-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}a.secondary{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:var(--panel-2);color:var(--ink);font-weight:600;border:1px solid var(--border);font-size:13px;box-shadow:var(--shadow-soft)}.status-pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase}.status-online{background:#dcfce7;color:#15803d}.status-offline{background:#fee2e2;color:#b91c1c}.list{display:flex;flex-direction:column;gap:10px}.list-item{padding:14px;border-radius:12px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}.list-item.active{border-color:rgba(37,99,235,.6);box-shadow:0 0 0 2px rgba(37,99,235,.12)}.list-item.active-secondary{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 2px rgba(239,68,68,.12)}.hero{display:flex;flex-direction:column;gap:12px}.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(circle at 8% 12%,rgba(0,168,214,.14),transparent 36%),radial-gradient(circle at 90% 12%,rgba(32,114,217,.12),transparent 42%),linear-gradient(120deg,#ecf4ff,#f7fbff 45%,#edf4fc)}.login-stage{width:min(1120px,100%);display:grid;grid-template-columns:1.15fr .85fr;grid-gap:24px;gap:24px;align-items:stretch}.login-brand-panel{border-radius:24px;padding:24px;background:linear-gradient(145deg,#071d33,#0a2949 50%,#10345d);color:#e8f6ff;border:1px solid rgba(153,199,243,.3);box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:space-between;gap:16px;overflow:hidden}.login-brand-image{border-radius:16px;overflow:hidden;border:1px solid rgba(187,219,249,.24);background:rgba(5,17,31,.38);min-height:220px;display:grid;place-items:center}.login-brand-image img{width:100%;height:auto;display:block}.login-brand-copy p{margin:0;color:rgba(227,242,255,.88);max-width:46ch;font-size:16px}.login-card{width:100%;padding:32px;border-radius:24px;background:#fff;box-shadow:var(--shadow-card);border:1px solid var(--border);display:flex;flex-direction:column;gap:16px;justify-content:center;max-width:460px;justify-self:end}.login-card h2{margin:0;font-size:clamp(26px,2.6vw,34px)}.login-card p{margin:0;color:var(--muted)}.login-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:#263b5a}.login-card input{padding:10px 12px;background:#f4f8ff}.login-link-button{border:none;background:transparent;color:var(--accent-strong);font-weight:700;padding:0;align-self:flex-start;cursor:pointer}.login-link-button:hover{color:var(--accent)}.login-inline-form{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(148,163,184,.28);background:#f8fbff}.login-inline-actions{display:flex;gap:8px;flex-wrap:wrap}.login-info{border-radius:10px;border:1px solid #bae6fd;background:#ecfeff;color:#0f5d75}.login-error,.login-info{padding:10px 12px;font-weight:600}.login-error{border-radius:10px;border:1px solid #fecaca;background:#fff1f2;color:#b91c1c}.reset-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 8% 12%,rgba(0,168,214,.14),transparent 36%),radial-gradient(circle at 90% 12%,rgba(32,114,217,.12),transparent 42%),linear-gradient(120deg,#ecf4ff,#f7fbff 45%,#edf4fc)}.reset-card{width:min(460px,100%);padding:28px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:14px}.reset-card h2{margin:0;font-size:30px}.reset-card p{margin:0;color:var(--muted)}.reset-card label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:#263b5a}.reset-card input{padding:10px 12px;background:#f4f8ff}.reset-footer{text-align:center}.reset-footer a{color:var(--accent-strong);font-weight:700}@media (max-width:980px){.login{padding:20px}.login-stage{grid-template-columns:1fr;gap:16px}.login-brand-panel{order:2}.login-card{order:1;padding:24px}}@media (max-width:880px){.layout{grid-template-columns:1fr}.sidebar{position:-webkit-sticky;position:sticky;top:0;z-index:20;flex-direction:column;gap:8px;align-items:stretch;border-bottom:1px solid rgba(148,163,184,.2);padding:10px}.sidebar-brand{flex:0 0 auto;min-width:0;max-width:340px}.sidebar-nav-title{display:none}.sidebar-nav{flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.sidebar-nav a{background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);padding:8px 12px}.sidebar-nav-badge{display:none}.topbar{padding:16px 18px}.content{padding:18px 18px 38px}}@media (max-width:560px){.login{padding:14px}.login-brand-panel{padding:16px;border-radius:18px}.login-brand-copy p{font-size:14px}.login-card{padding:20px;border-radius:18px}.reset-card{padding:22px;border-radius:16px}.topbar-title h1{font-size:17px}}.screen{min-height:100vh;display:flex;align-items:center;justify-content:center}.media-explorer{display:grid;grid-template-columns:160px 1fr;grid-gap:12px;gap:12px}.media-sidebar{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:10px;min-height:520px}.media-sidebar-header{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.media-sidebar-actions{display:flex;gap:8px}.media-folder-list{display:flex;flex-direction:column;gap:6px}.media-folder{text-align:left;padding:6px 8px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);font-weight:600;font-size:13px}.media-folder:hover{background:#f1f5f9}.media-folder.active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.3);color:var(--accent-strong)}.media-content{display:flex;flex-direction:column;gap:12px}.media-header{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-soft)}.media-breadcrumbs{display:flex;align-items:center;gap:8px;font-weight:600}.media-sep{color:var(--muted)}.media-header-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.media-header-actions input{min-width:160px;background:#f8fafc}.media-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px 10px;box-shadow:var(--shadow-soft)}.media-toolbar-left,.media-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.media-toolbar-right{margin-left:auto}.media-message{color:var(--accent);font-weight:600}.media-table{border:1px solid var(--border);border-radius:16px;background:#fff;overflow-x:auto;box-shadow:var(--shadow-soft);animation:panelEnter .26s ease}.media-row{display:grid;grid-template-columns:36px minmax(280px,2fr) minmax(100px,1fr) minmax(120px,1fr) minmax(100px,1fr) minmax(160px,1fr);grid-gap:0;gap:0;padding:10px 14px;border-bottom:1px solid var(--border);align-items:center;font-size:14px}.media-row:last-child{border-bottom:none}.media-row:hover{background:#f8fafc}.media-head{font-weight:700;background:#f1f5f9;text-transform:uppercase;font-size:11px;letter-spacing:.8px;color:#334155}.media-name{display:flex;align-items:center;gap:10px}.media-icon{width:28px;height:28px;border-radius:10px;background:#e2e8f0;color:#1e293b;display:grid;place-items:center;font-weight:700}.media-icon-button{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border-radius:10px;border:1px solid var(--border);background:#f8fafc;color:#334155}.media-icon-button svg{width:16px;height:16px;fill:currentColor}.media-icon-button.danger{color:#b91c1c;border-color:#fecaca;background:#fee2e2}.media-icon-button.danger:hover{background:#fecaca;color:#991b1b}.media-sub{font-size:12px;color:var(--muted)}.media-check{display:flex;align-items:center;justify-content:center}.media-row-actions{display:flex;gap:8px;flex-wrap:wrap}.media-empty{padding:24px;text-align:center;color:var(--muted)}@keyframes panelEnter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}