:root{
  --top:#f5a318;--top2:#e98c05;--nav:#2f6fa8;--nav2:#2f74b5;--accent:#f39a13;
  --page:#edf4fb;--surface:rgba(255,255,255,.88);--surface-strong:rgba(255,255,255,.96);--surface-soft:rgba(247,251,254,.82);
  --text:#26384d;--muted:#6d7f91;--line:#b9d0e2;--line2:#dbe7f1;--danger:#b73a3a;--success:#238254;
  --sidebar:258px;--context:338px;--player:92px;--mobile-nav:70px;--radius:18px;--shadow:0 18px 48px rgba(33,67,93,.14);
  --context-bg:url('../theme_asset.php?slot=home_bg');--frame-bg:url('../theme_asset.php?slot=main_frame_bg');--admin-frame-bg:url('../theme_asset.php?slot=admin_frame_bg');
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--page)}html{color-scheme:light}body{overflow-x:hidden}button,input,select,textarea{font:inherit;color:inherit}button,a{tap-highlight-color:transparent}.hidden{display:none!important}.muted{color:var(--muted)}.ellipsis{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-only{display:none}.small,small{font-size:12px}.section{margin-top:20px}

/* one background layer only */
body:not(.auth-body):not(.admin-body)::before{content:"";position:fixed;inset:0;z-index:-2;background-image:linear-gradient(rgba(237,244,251,.58),rgba(237,244,251,.72)),var(--context-bg);background-size:cover;background-position:center;background-repeat:no-repeat}
body:not(.auth-body):not(.admin-body)::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(255,255,255,.10));pointer-events:none}

/* app shell */
.app-shell{min-height:calc(100dvh - var(--player));padding-bottom:var(--player);display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--context);align-items:start}.now-collapsed .app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr) 0}.app-sidebar{position:sticky;top:0;height:calc(100dvh - var(--player));display:flex;flex-direction:column;z-index:30;background:rgba(255,255,255,.96);border-right:1px solid var(--line2);box-shadow:8px 0 26px rgba(42,75,100,.08);backdrop-filter:blur(16px)}.app-brand{height:78px;display:flex;align-items:center;gap:10px;padding:13px 18px;text-decoration:none;color:#fff;background:linear-gradient(180deg,var(--top),var(--top2));border-bottom:1px solid rgba(0,0,0,.06)}.app-brand img{width:166px;max-width:calc(100% - 50px);max-height:48px;object-fit:contain;object-position:left center}.app-brand span{font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.18)}.nav-scroll{flex:1;overflow:auto;padding:14px 10px 20px}.nav-group{margin-bottom:16px}.nav-group>small{display:block;padding:0 10px 7px;color:#7890a4;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.side-nav{display:grid;gap:3px}.side-nav button,.side-footer button,.side-footer a{width:100%;display:flex;align-items:center;gap:11px;border:1px solid transparent;background:transparent;padding:10px 12px;border-radius:12px;text-decoration:none;cursor:pointer;color:#34506a;text-align:left;font-weight:760}.side-nav button:hover,.side-footer button:hover,.side-footer a:hover{background:#f4f9fd;border-color:#d7e5ef;color:var(--nav)}.side-nav button.active{background:linear-gradient(180deg,#fff,#edf6fc);border-color:#bdd5e7;color:var(--nav);box-shadow:inset 3px 0 0 var(--accent),0 6px 18px rgba(47,111,168,.07)}.side-footer{flex:none;padding:9px;border-top:1px solid var(--line2);background:#fbfdff}.app-main{min-width:0;min-height:calc(100dvh - var(--player));background:transparent}.app-header{position:sticky;top:0;height:78px;z-index:24;display:grid;grid-template-columns:auto minmax(260px,720px) auto;gap:14px;align-items:center;padding:12px 22px;background:linear-gradient(180deg,var(--top),var(--top2));box-shadow:0 10px 28px rgba(54,72,88,.14);border-bottom:1px solid rgba(95,65,0,.12)}.mobile-brand{display:none}.header-left,.header-actions,.section-actions,.player-controls,.player-tools,.now-actions{display:flex;align-items:center;gap:8px}.header-actions{justify-content:flex-end}.nav-circle,.header-btn,.account-btn,.icon-btn,.player-controls button,.player-tools button{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(47,111,168,.18);background:#fff;color:var(--nav);min-width:38px;height:38px;border-radius:999px;padding:0 12px;cursor:pointer;font-weight:850;box-shadow:0 3px 10px rgba(34,66,91,.08)}.nav-circle{padding:0;font-size:22px}.nav-circle:hover,.header-btn:hover,.account-btn:hover,.icon-btn:hover,.player-controls button:hover,.player-tools button:hover{background:#eef6fc;border-color:#8fb7d5}.searchbox{height:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:0 15px;border-radius:999px;background:#fff;border:1px solid rgba(47,111,168,.18);box-shadow:0 7px 20px rgba(44,65,84,.10)}.searchbox input{width:100%;min-width:0;border:0;outline:0;background:transparent}.search-clear{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.status-pill{padding:7px 10px;border-radius:999px;background:#eaf7ef;color:var(--success);font-size:11px;font-weight:900}.status-pill.warn{background:#fff1e8;color:#a44d00}

/* content */
.content{width:min(100%,1500px);margin:0 auto;padding:30px 30px 44px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}.section-head h1{margin:0;color:#244f78;font-size:clamp(30px,3vw,44px);letter-spacing:-.04em;line-height:1.05}.section-head p{margin:7px 0 0;max-width:780px}.content-section{margin:28px 0}.content-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.content-section h2,.panel h2{margin:0 0 12px;color:#285d8b;font-size:20px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr);gap:16px}.hero-card,.mix-card,.panel,.notification-card,.person-card,.profile-hero,.upload-studio,.stat,.stat-pro,.health-card,.auth-card,.patch-panel,.design-card{border:1px solid rgba(181,207,226,.88);border-radius:var(--radius);background-image:linear-gradient(180deg,rgba(255,255,255,.90),rgba(247,251,254,.86)),var(--frame-bg);background-size:auto,cover;background-position:center;box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.08)}.hero-card,.mix-card{padding:28px;position:relative;overflow:hidden}.hero-card h2{margin:7px 0 8px;font-size:30px;color:#244f78}.hero-card.alt{background-image:linear-gradient(180deg,rgba(255,250,240,.90),rgba(255,245,223,.84)),var(--frame-bg)}.eyebrow,.panel-kicker{font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.panel{padding:20px}.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:14px}.media-grid,.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:14px}.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.mix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}.media-card,.artist-card,.playlist-card,.folder-card,.genre-tile{min-width:0;border:1px solid rgba(185,209,226,.88);border-radius:16px;background-image:linear-gradient(180deg,rgba(255,255,255,.91),rgba(247,251,254,.86)),var(--frame-bg);background-size:auto,cover;background-position:center;box-shadow:0 9px 24px rgba(46,78,102,.10);padding:11px;color:var(--text);text-align:left;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s border-color}.media-card:hover,.artist-card:hover,.playlist-card:hover,.folder-card:hover,.genre-tile:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(38,71,99,.16);border-color:#93bad6}.media-cover{aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;background:#dbe9f5}.media-cover img{width:100%;height:100%;object-fit:cover}.media-card strong,.media-card small,.artist-card strong,.artist-card small,.playlist-card strong,.playlist-card small,.folder-card strong,.folder-card small{display:block;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-card small,.artist-card small,.playlist-card small,.folder-card small{color:var(--muted);font-size:12px}.card-play{position:absolute;right:9px;bottom:9px;width:42px;height:42px;border:0;border-radius:50%;background:var(--accent);color:#fff;opacity:0;transform:translateY(5px);transition:.18s;display:grid;place-items:center}.media-card:hover .card-play{opacity:1;transform:none}.explicit{position:absolute;left:8px;top:8px;padding:2px 6px;border-radius:5px;background:#fff;font-size:10px;font-weight:900}.album-placeholder,.playlist-icon,.artist-avatar,.mix-art{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,#deedf8,#fff2d6);color:var(--nav);font-size:44px}.artist-avatar{border-radius:50%}.genre-tile{min-height:92px;padding:16px}.genre-tile strong,.genre-tile small{display:block}.genre-tile small{margin-top:5px;color:var(--muted)}.mix-card{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center}.mix-art{width:76px}.stats,.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat,.stat-pro{padding:20px}.stat strong,.stat-pro strong{display:block;font-size:30px;color:var(--nav);margin-top:6px}.metric-row,.metric-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)}.metric-row:last-child,.metric-list>div:last-child{border-bottom:0}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #c8ddea;border-radius:999px;background:#edf6fc;color:var(--nav);font-size:12px;font-weight:750}.chip.ok{background:#edf8f2;color:#21784d}.chip.warn{background:#fff4e4;color:#995c00}.text-link{border:0;background:none;color:var(--nav);padding:0;cursor:pointer}.text-link:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border:1px solid var(--line);background:#fff;color:var(--nav);padding:9px 14px;border-radius:11px;font-weight:850;cursor:pointer;text-decoration:none}.btn:hover{background:#eef6fc}.btn.primary{background:linear-gradient(180deg,var(--nav2),var(--nav));border-color:var(--nav);color:#fff}.btn.danger{background:#fff2f2;color:var(--danger);border-color:#edbcbc}.btn.warn{background:#fff7e8;color:#8a5700;border-color:#e9c276}

/* tracks, people, messages */
.track-list{display:grid;gap:7px}.track-row{display:grid;grid-template-columns:42px 48px minmax(160px,1.4fr) minmax(110px,1fr) auto auto auto auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid transparent;border-radius:13px;background:rgba(255,255,255,.60);backdrop-filter:blur(8px)}.track-row:hover{background:rgba(255,255,255,.92);border-color:#d7e5ef;box-shadow:0 7px 18px rgba(42,77,105,.07)}.track-row>img{width:48px;height:48px;border-radius:8px;object-fit:cover}.track-index{width:34px;height:34px;border:0;border-radius:50%;background:#eef5fa;color:var(--nav);font-weight:900;cursor:pointer}.track-main{min-width:0}.track-main strong,.track-main button{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.people-list,.notification-list{display:grid;gap:10px}.person-card,.notification-card,.person-row{display:flex;align-items:center;gap:12px;padding:14px}.person-avatar,.profile-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--top),var(--nav));color:#fff;font-weight:900}.profile-hero{display:flex;align-items:center;gap:18px;padding:22px}.profile-avatar{width:88px;height:88px;font-size:32px}.messages-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px}.message-feed{display:grid;gap:10px}.message-bubble{max-width:76%;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid var(--line2)}.message-bubble.mine{justify-self:end;background:#eaf4fb}.message-bubble p{margin:6px 0}.notification-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef6fc;color:var(--nav)}

/* forms */
.stack{display:grid;gap:12px}.stack label,label{font-weight:700}.stack label{display:grid;gap:7px}.stack input,.stack select,.stack textarea,input,select,textarea,.field{width:100%;min-height:42px;border:1px solid #c9dbe9;border-radius:12px;background:#fff;padding:9px 11px;outline:none}.stack input:focus,.stack select:focus,.stack textarea:focus,input:focus,select:focus,textarea:focus{border-color:#75a5ca;box-shadow:0 0 0 4px rgba(47,111,168,.08)}textarea{min-height:110px;resize:vertical}.check-card{display:flex!important;align-items:center;gap:10px;padding:12px;border:1px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.72)}.check-card input{width:auto;min-height:auto}.check-card span{display:grid;gap:2px}.inline-form{display:flex;gap:10px;align-items:end}.alert{border-radius:14px;padding:13px 15px;margin:10px 0;border:1px solid transparent}.alert.ok{background:#edf8f2;border-color:#c6e5d4;color:#236e4b}.alert.error{background:#fff1f1;border-color:#efc1c1;color:#963434}.alert.warn{background:#fff6e6;border-color:#f0d3a1;color:#8f5b00}.empty{padding:34px 22px;background:rgba(255,255,255,.74);border:1px dashed #bdd3e4;border-radius:16px;text-align:center;color:#657c90}.loading{min-height:110px;display:grid;place-items:center}

/* upload: native, no hidden-input tricks */
.upload-pro-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:18px;align-items:start}.upload-main-card,.upload-help-card{min-width:0}.upload-picker{display:grid;gap:12px}.upload-drop{min-height:170px;border:2px dashed #9fbfd6;border-radius:18px;background:rgba(238,247,253,.78);display:grid;place-items:center;text-align:center;padding:24px;color:#45657e}.upload-drop.dragging{border-color:var(--accent);background:#fff7e9}.upload-drop-icon .i{width:38px;height:38px;color:var(--nav)}.upload-native-input{display:block!important;position:static!important;width:100%!important;min-height:52px!important;padding:10px!important;opacity:1!important;pointer-events:auto!important;visibility:visible!important;border:1px solid #b8d0e2!important;border-radius:13px!important;background:#fff!important;color:var(--text)!important}.upload-native-input::file-selector-button{border:0;border-radius:9px;background:var(--nav);color:#fff;padding:9px 13px;margin-right:10px;font-weight:800;cursor:pointer}.upload-choose{display:none!important}.upload-file-list{display:grid;gap:8px}.upload-file{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #d6e4ef;border-radius:12px;background:rgba(255,255,255,.84)}.upload-file-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eef6fc;color:var(--nav)}.upload-file strong,.upload-file small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-file small{color:var(--muted)}.upload-progress{height:9px;border-radius:999px;background:#dbe8f1;overflow:hidden}.upload-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--nav),var(--accent));transition:width .18s}.upload-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.upload-capabilities{display:grid;gap:10px}.upload-capabilities>div{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid #dbe7ef;border-radius:12px;background:rgba(255,255,255,.70)}.upload-capabilities b,.upload-capabilities small{display:block}.upload-capabilities small{color:var(--muted);margin-top:2px}.upload-tip{margin-top:14px;padding:12px;border-radius:12px;background:#fff7e8;border:1px solid #efd29c}.upload-tip p{margin:5px 0 0}

/* player / now */
.now-panel{position:sticky;top:0;height:calc(100dvh - var(--player));overflow:auto;background:rgba(250,253,255,.94);border-left:1px solid var(--line2);box-shadow:-12px 0 30px rgba(43,71,92,.08);backdrop-filter:blur(16px);transition:.2s}.now-collapsed .now-panel{opacity:0;pointer-events:none}.now-close{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border:1px solid var(--line2);background:#fff;border-radius:50%;cursor:pointer}.now-tabs{display:flex;gap:5px;padding:12px 52px 0 12px}.now-tabs button{border:0;background:transparent;padding:9px 11px;border-radius:10px;font-weight:800;cursor:pointer}.now-tabs button.active{background:#eaf4fb;color:var(--nav)}#nowBody{padding:14px}.now-big-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.now-empty{padding:28px;text-align:center;color:var(--muted)}.queue-list{display:grid;gap:8px}.queue-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px;border-radius:10px;background:#fff;border:1px solid var(--line2)}.queue-actions{display:flex;gap:5px}.player{position:fixed;left:0;right:0;bottom:0;height:var(--player);z-index:60;display:grid;grid-template-columns:minmax(260px,1fr) minmax(360px,1.3fr) minmax(320px,1fr);gap:16px;align-items:center;padding:10px 16px;background:rgba(255,255,255,.97);border-top:1px solid var(--line2);box-shadow:0 -12px 32px rgba(35,70,96,.12);backdrop-filter:blur(18px)}.player-track{min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:11px;align-items:center}.player-track img{width:58px;height:58px;border-radius:10px;object-fit:cover}.player-track strong,.player-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track small{color:var(--muted);margin-top:3px}.player-center{display:grid;gap:7px}.player-controls{justify-content:center}.player-controls button{width:38px;padding:0}.player-controls .play-main{width:46px;height:46px;background:var(--nav);color:#fff;border-color:var(--nav);box-shadow:0 9px 20px rgba(47,111,168,.24)}.timeline{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;align-items:center;font-size:11px;color:var(--muted)}.timeline input,#volume{accent-color:var(--accent)}.player-tools{justify-content:flex-end;min-width:0}.player-tools button,.player-tools a{padding:0;width:36px}.player-tools select{width:72px;min-height:36px;padding:4px}.player-tools #volume{width:86px;min-height:auto}.mobile-mini-progress{display:none}.mobile-bottom-nav{display:none}.visualizer-panel{position:fixed;left:0;right:0;bottom:var(--player);z-index:55;background:rgba(255,255,255,.94);border-top:1px solid var(--line2)}.visualizer-panel canvas{width:100%;height:130px;display:block}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(9,28,43,.72);display:grid;place-items:center;padding:20px}.karaoke-shell,.video-shell{width:min(1100px,100%);max-height:92dvh;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.28)}.karaoke-head{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line2)}.karaoke-lyrics{padding:30px;display:grid;gap:18px;text-align:center;font-size:24px;line-height:1.45}.karaoke-line{opacity:.38;transition:.2s}.karaoke-line.active{opacity:1;color:var(--nav);font-weight:900;transform:scale(1.03)}.video-shell{padding:16px}.video-shell video{display:block;width:100%;max-height:78dvh;background:#000;border-radius:14px}.toast{position:fixed;right:20px;bottom:calc(var(--player) + 18px);z-index:120;padding:12px 16px;border-radius:12px;background:#203a50;color:#fff;box-shadow:var(--shadow)}

/* tables/admin */
.table-wrap{width:100%;overflow:auto;border:1px solid var(--line2);border-radius:16px;background:rgba(255,255,255,.88);box-shadow:var(--shadow)}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:12px 13px;text-align:left;border-bottom:1px solid #e5eef5;vertical-align:middle}.table th{position:sticky;top:0;background:#edf6fc;color:#2d5e87;font-size:12px;z-index:1}.table tbody tr:hover td{background:#f9fcff}.admin-app-shell{min-height:100dvh;display:grid;grid-template-columns:270px minmax(0,1fr)}.admin-sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;background:rgba(255,255,255,.97);border-right:1px solid var(--line2);box-shadow:8px 0 28px rgba(41,72,94,.08);z-index:20}.admin-brand{height:78px;padding:13px 17px;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--top),var(--top2));text-decoration:none;color:#fff}.admin-brand img{width:154px;max-height:44px;object-fit:contain}.admin-brand span{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.admin-side-user{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--line2)}.admin-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--nav),var(--top));color:#fff;font-weight:900}.admin-side-user strong,.admin-side-user small{display:block}.admin-side-user small{color:var(--muted);margin-top:2px}.admin-side-nav{flex:1;overflow:auto;padding:10px;display:grid;align-content:start;gap:4px}.admin-side-nav a,.admin-side-footer a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;text-decoration:none;color:#34506a;font-weight:780;border:1px solid transparent}.admin-side-nav a:hover,.admin-side-footer a:hover{background:#f4f9fd;border-color:#d7e5ef;color:var(--nav)}.admin-side-nav a.active{background:#edf6fc;border-color:#bfd6e7;color:var(--nav);box-shadow:inset 3px 0 0 var(--accent)}.admin-side-footer{padding:10px;border-top:1px solid var(--line2)}.admin-main{min-width:0;position:relative;background:transparent}.admin-body{background:var(--page)}.admin-body::before{content:"";position:fixed;inset:0;z-index:-2;background-image:linear-gradient(rgba(237,244,251,.58),rgba(237,244,251,.72)),var(--admin-context-bg,url('../theme_asset.php?slot=admin_dashboard_bg'));background-size:cover;background-position:center;background-repeat:no-repeat}.admin-topbar{position:sticky;top:0;z-index:15;height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;background:linear-gradient(180deg,var(--top),var(--top2));box-shadow:0 10px 28px rgba(54,72,88,.14)}.admin-topbar strong{display:block;color:#fff;font-size:20px}.admin-eyebrow{display:block;font-size:10px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78)}.admin-top-actions{display:flex;align-items:center;gap:8px}.admin-content{width:min(100%,1500px);margin:0 auto;padding:28px 30px 44px}.admin-content .panel,.admin-content .stat,.admin-content .table-wrap{background-image:linear-gradient(180deg,rgba(255,255,255,.91),rgba(247,251,254,.86)),var(--admin-frame-bg);background-size:auto,cover;background-position:center}.admin-nav,.admin-mobile-head{display:none}.admin-filterbar,.bulk-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}.admin-row-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inline-admin-form{display:inline-flex;gap:6px;align-items:center}.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.health-card{padding:14px;display:flex;gap:10px;align-items:center}.health-dot{width:10px;height:10px;border-radius:50%;background:#d6a300}.health-card.is-ok .health-dot{background:#2a9a66}.health-card.is-warn .health-dot{background:#d38818}.patch-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px}.drop-field{display:grid!important;place-items:center;text-align:center;min-height:150px;padding:22px!important;border:2px dashed #a8c5dc!important;border-radius:16px!important;background:#eef7fd;cursor:pointer}.patch-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}.patch-meta>div{padding:12px;border:1px solid #d9e7f1;border-radius:12px;background:#f7fbfe}.patch-file-list{max-height:180px;overflow:auto;display:grid;gap:5px;padding:10px;border-radius:12px;background:#eef6fc;border:1px solid #d9e6f0}.patch-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.safety-grid>div{padding:14px;border-radius:13px;background:#f7fbfe;border:1px solid #dae7f1}.design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:15px}.design-card{padding:15px}.design-preview{height:150px;border-radius:13px;overflow:hidden;border:1px solid var(--line2);position:relative}.design-preview img{width:100%;height:100%;object-fit:cover}.design-badge{position:absolute;top:9px;right:9px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11px;font-weight:850}.design-actions{display:grid;gap:8px}.frame-note{padding:12px 14px;border-radius:13px;background:#f8fbfe;border:1px solid #d7e6f2}

/* auth */
.auth-body{min-height:100dvh;display:grid;place-items:center;padding:24px;background-image:linear-gradient(rgba(18,44,66,.58),rgba(18,44,66,.68)),url('../theme_asset.php?slot=auth_bg');background-size:cover;background-position:center;background-attachment:fixed}.auth-card{width:min(100%,460px);padding:30px;background-image:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,251,254,.91)),var(--frame-bg);background-size:auto,cover}.buddy-brand-image img{max-width:210px;max-height:70px;object-fit:contain}.auth-foot{text-align:center}.auth-foot a{color:var(--nav)}

@media(max-width:1260px){:root{--context:0px}.app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}.now-panel{position:fixed;right:0;top:0;bottom:var(--player);width:min(92vw,360px);height:auto;z-index:70;transform:translateX(0)}.now-collapsed .now-panel{transform:translateX(105%);opacity:1}.content{padding:26px 22px 42px}.player{grid-template-columns:minmax(230px,1fr) minmax(330px,1.2fr) minmax(260px,.9fr)}.player-tools #volume{display:none}.patch-layout{grid-template-columns:1fr}.safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.upload-pro-grid{grid-template-columns:1fr}}
@media(max-width:900px){:root{--player:76px;--mobile-nav:70px}.app-shell{display:block;padding-bottom:calc(var(--player) + var(--mobile-nav))}.app-sidebar{display:none}.app-main{min-height:100dvh}.app-header{height:68px;grid-template-columns:auto minmax(0,1fr) auto;padding:9px 12px;gap:8px}.header-left{display:none}.mobile-brand{display:flex;align-items:center;gap:6px}.mobile-brand img{width:86px;max-height:34px;object-fit:contain}.mobile-brand span{display:none}.searchbox{height:42px;padding:0 11px}.header-actions .status-pill,.header-actions #installAppBtn{display:none}.account-btn{height:36px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{padding:20px 14px 32px}.section-head{align-items:flex-start}.section-head h1{font-size:30px}.hero-grid,.grid2,.grid3,.messages-layout{grid-template-columns:1fr}.stats,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-grid,.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.artist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.genre-grid,.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track-row{grid-template-columns:36px 44px minmax(0,1fr) auto auto;padding:7px}.track-row .album-link,.track-row>.chip,.track-row>.muted{display:none}.track-row>img{width:44px;height:44px}.player{bottom:var(--mobile-nav);height:var(--player);grid-template-columns:1fr auto;padding:8px 10px;border-radius:16px 16px 0 0}.player-track{grid-template-columns:48px minmax(0,1fr) auto}.player-track img{width:48px;height:48px}.player-center{display:flex}.player-center .timeline,.player-center #shuffleBtn,.player-center #prevBtn,.player-center #repeatBtn{display:none}.player-controls{gap:6px}.player-controls #nextBtn,.player-controls #playBtn{display:inline-flex}.player-tools{display:none}.mobile-mini-progress{display:block;position:absolute;left:0;right:0;top:0;height:3px;background:#d7e5ef}.mobile-mini-progress span{display:block;height:100%;width:0;background:var(--accent)}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:var(--mobile-nav);z-index:65;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 8px max(7px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line2);box-shadow:0 -8px 24px rgba(35,70,96,.10)}.mobile-bottom-nav button{border:0;background:transparent;border-radius:11px;display:grid;place-items:center;align-content:center;gap:3px;color:#4d6982;font-size:10px;font-weight:800}.mobile-bottom-nav button.active{background:#eef6fc;color:var(--nav)}.now-panel{bottom:0;width:100vw;top:0;z-index:90;border:0}.now-collapsed .now-panel{transform:translateY(105%)}.mobile-only{display:block}.card-play{opacity:1;transform:none}.admin-app-shell{display:block}.admin-sidebar{display:none}.admin-main{min-height:100dvh}.admin-topbar{height:66px;padding:9px 12px}.admin-content{padding:14px 12px 28px}.admin-mobile-head{display:block}.admin-mobile-brand{display:flex;align-items:center;gap:8px}.admin-mobile-brand img{width:110px;max-height:38px;object-fit:contain}.admin-nav{display:flex;overflow:auto;gap:7px;margin:0 -2px 14px;padding:2px}.admin-nav a{flex:none;padding:9px 11px;border-radius:999px;text-decoration:none;background:#fff;border:1px solid var(--line2);color:var(--nav);font-weight:800}.admin-nav a.active{background:var(--nav);color:#fff}.table{min-width:720px}.upload-drop{min-height:120px}.safety-grid{grid-template-columns:1fr}.design-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.content{padding:16px 10px 28px}.section-head{display:block}.section-actions{margin-top:10px;flex-wrap:wrap}.hero-card,.mix-card,.panel,.notification-card,.person-card,.profile-hero,.upload-studio,.stat,.stat-pro,.health-card,.auth-card,.patch-panel,.design-card{border-radius:15px}.hero-card{padding:20px}.hero-card h2{font-size:26px}.media-grid,.playlist-grid,.artist-grid,.genre-grid,.folder-grid,.design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.media-card,.artist-card,.playlist-card,.folder-card,.genre-tile{padding:8px;border-radius:13px}.media-card strong,.artist-card strong,.playlist-card strong{font-size:13px}.media-card small,.artist-card small,.playlist-card small{font-size:11px}.stats,.stats-grid{grid-template-columns:1fr 1fr}.mix-card{grid-template-columns:60px 1fr;padding:17px}.mix-art{width:60px}.upload-file{grid-template-columns:38px minmax(0,1fr)}.upload-file>.chip{display:none}.upload-native-input{font-size:13px}.upload-actions{display:grid}.upload-actions .btn{width:100%}.karaoke-lyrics{font-size:19px;padding:22px 14px}.admin-top-actions .btn{display:none}.admin-content{padding:12px 9px 24px}.table{min-width:680px}.inline-form{display:grid}.message-bubble{max-width:92%}.toast{left:12px;right:12px;bottom:calc(var(--player) + var(--mobile-nav) + 12px)}}

/* professional icons */
.i{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--svg) center/contain no-repeat;mask:var(--svg) center/contain no-repeat;vertical-align:middle}.search-icon.i{width:20px;height:20px}.play-main .i{width:20px;height:20px}.mobile-bottom-nav .i{width:20px;height:20px}
.i-home{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3l9 8h-3v10h-5v-6H11v6H6V11H3l9-8z'/%3E%3C/svg%3E")}.i-search{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 4a6 6 0 104.47 10.01l4.76 4.76 1.41-1.41-4.76-4.76A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E")}.i-browse{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 5h7v6H4V5zm9 0h7v4h-7V5zM4 13h5v6H4v-6zm7-2h9v8h-9v-8z'/%3E%3C/svg%3E")}.i-mix{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 3l2 2-4.5 4.5-2-2L19 3zM8 8l2.5 2.5L5 16H3v-2l5-6zm10.5 5.5L21 16l-2 2-2.5-2.5L14 13l2-2 2.5 2.5zM7 4h2v5H7V4zm8 11h2v5h-2v-5z'/%3E%3C/svg%3E")}.i-radio{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 7l12-4 .7 1.9-5.3 1.8H20a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2zm2 4a3 3 0 100 6 3 3 0 000-6zm8 0h5v2h-5v-2zm0 4h5v2h-5v-2z'/%3E%3C/svg%3E")}.i-library{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h5v16H4V4zm6 0h4v16h-4V4zm5 0h5v16h-5V4z'/%3E%3C/svg%3E")}.i-heart{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21s-7-4.35-9.33-8.28C.79 9.53 2.22 5 6.67 5c2.1 0 3.4 1.2 4.33 2.4C11.93 6.2 13.23 5 15.33 5 19.78 5 21.2 9.53 21.33 12.72 19 16.65 12 21 12 21z'/%3E%3C/svg%3E")}.i-playlist{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 6h10v2H4V6zm0 5h10v2H4v-2zm0 5h6v2H4v-2zm12-9l4 2.5-4 2.5V7zm0 6l4 2.5-4 2.5V13z'/%3E%3C/svg%3E")}.i-album{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18zm0 4a1 1 0 110 2 1 1 0 010-2zm-1 4h2v5h-2v-5z'/%3E%3C/svg%3E")}.i-artist{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E")}.i-history{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 3a9 9 0 00-9 9H1l4 4 4-4H6a7 7 0 117 7 6.9 6.9 0 01-4.95-2.05l-1.42 1.42A9 9 0 1013 3zm-1 5h2v5l4 2-.8 1.84L12 14V8z'/%3E%3C/svg%3E")}.i-download{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 4h2v8h3l-4 5-4-5h3V4zm-6 14h14v2H5v-2z'/%3E%3C/svg%3E")}.i-podcast{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3a8 8 0 00-5 14.24V21h2v-4h6v4h2v-3.76A8 8 0 0012 3zm0 4a4 4 0 014 4h-2a2 2 0 10-4 0H8a4 4 0 014-4zm-1 10v-2h2v2h-2z'/%3E%3C/svg%3E")}.i-book{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 4h12a2 2 0 012 2v12a1 1 0 01-1.45.9L12 16.1 6.45 18.9A1 1 0 015 18V4z'/%3E%3C/svg%3E")}.i-video{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 6h11a2 2 0 012 2v1l3-2v10l-3-2v1a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z'/%3E%3C/svg%3E")}.i-mic{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm-5-4H5a7 7 0 0014 0h-2a5 5 0 01-10 0zm4 9h2v3h-2v-3z'/%3E%3C/svg%3E")}.i-jam{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 6a3 3 0 100 6 3 3 0 000-6zm10 2a3 3 0 110 6 3 3 0 010-6zM2 18c0-2.2 2.24-4 5-4s5 1.8 5 4v1H2v-1zm10 1v-1c0-.8-.2-1.55-.57-2.22.5-.12 1.04-.18 1.57-.18 2.76 0 5 1.57 5 3.5V19h-6z'/%3E%3C/svg%3E")}.i-buddies{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 11a4 4 0 100-8 4 4 0 000 8zm7 1a3 3 0 100-6 3 3 0 000 6zM2 20c0-3.31 3.13-6 7-6s7 2.69 7 6H2zm14.5-6.91A5.96 5.96 0 0122 19v1h-4v-1c0-2.28-.89-4.37-2.35-5.91.28-.02.56-.03.85-.03z'/%3E%3C/svg%3E")}.i-message{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2H8l-4 3v-3H4a2 2 0 01-2-2V6a2 2 0 012-2z'/%3E%3C/svg%3E")}.i-bell{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 22a2.5 2.5 0 002.45-2h-4.9A2.5 2.5 0 0012 22zm7-5V11a7 7 0 10-14 0v6L3 19v1h18v-1l-2-2z'/%3E%3C/svg%3E")}.i-stats{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 9h3v10H5V9zm5-4h3v14h-3V5zm5 7h3v7h-3v-7z'/%3E%3C/svg%3E")}.i-upload{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 20h2v-8h3l-4-5-4 5h3v8zm-6-2h14v2H5v-2z'/%3E%3C/svg%3E")}.i-cog{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58-1.92-3.32-2.39.96a7.07 7.07 0 00-1.63-.94l-.36-2.54h-3.84l-.36 2.54c-.57.22-1.11.53-1.63.94l-2.39-.96-1.92 3.32 2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L2.72 14.52l1.92 3.32 2.39-.96c.52.41 1.06.72 1.63.94l.36 2.54h3.84l.36-2.54c.57-.22 1.11-.53 1.63-.94l2.39.96 1.92-3.32-2.03-1.58zM12 15.5A3.5 3.5 0 1112 8a3.5 3.5 0 010 7.5z'/%3E%3C/svg%3E")}.i-logout{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 17l1.41-1.41L8.83 13H20v-2H8.83l2.58-2.59L10 7l-5 5 5 5zm-6 5h8v-2H4V4h8V2H4a2 2 0 00-2 2v16a2 2 0 002 2z'/%3E%3C/svg%3E")}.i-play{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}.i-pause{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 5h4v14H7V5zm6 0h4v14h-4V5z'/%3E%3C/svg%3E")}.i-prev{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 6h2v12H6V6zm3 6l9 6V6l-9 6z'/%3E%3C/svg%3E")}.i-next{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 6h2v12h-2V6zM6 18l9-6-9-6v12z'/%3E%3C/svg%3E")}.i-shuffle{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16 3h5v5l-1.8-1.8-4.3 4.3-1.4-1.4 4.3-4.3L16 3zM3 7h4.5l8 10H21v2h-6.5l-8-10H3V7zm10.1 6.5l1.4 1.4-3.1 3.1H3v-2h7.6l2.5-2.5z'/%3E%3C/svg%3E")}.i-repeat{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 7h11V4l4 4-4 4V9H8a2 2 0 00-2 2v1H4v-1a4 4 0 014-4zm10 5h2v1a4 4 0 01-4 4H4v3l-4-4 4-4v3h10a2 2 0 002-2v-1z'/%3E%3C/svg%3E")}.i-repeat1{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 7h11V4l4 4-4 4V9H8a2 2 0 00-2 2v1H4v-1a4 4 0 014-4zm10 5h2v1a4 4 0 01-4 4H4v3l-4-4 4-4v3h10a2 2 0 002-2v-1zM12 9h2v6h-2V9z'/%3E%3C/svg%3E")}.i-bookmark{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 4h12v16l-6-3-6 3V4z'/%3E%3C/svg%3E")}.i-cast{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 18a3 3 0 013 3H3v-3zm0-4a7 7 0 017 7H7a4 4 0 00-4-4v-3zm0-4a11 11 0 0111 11h-3a8 8 0 00-8-8v-3zm2-5h14a2 2 0 012 2v8h-2V7H5v2H3V7a2 2 0 012-2z'/%3E%3C/svg%3E")}.i-moon{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.5 2.5A9.5 9.5 0 1021.5 16 8 8 0 0114.5 2.5z'/%3E%3C/svg%3E")}.i-queue{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 6h12v2H4V6zm0 5h12v2H4v-2zm0 5h8v2H4v-2zm12-6l4 3-4 3v-6z'/%3E%3C/svg%3E")}.i-volume{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 9h4l5-4v14l-5-4H5V9zm11.5 3a3.5 3.5 0 00-2.06-3.19v6.38A3.5 3.5 0 0016.5 12zM16.44 4.8v2.17a5.99 5.99 0 010 10.06v2.17a8 8 0 000-14.4z'/%3E%3C/svg%3E")}.i-volume-muted{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 9h4l5-4v14l-5-4H5V9zm9.59.99L16 11.41l1.41-1.42 1.41 1.42 1.42-1.42L21.66 11l-1.42 1.41 1.42 1.42-1.42 1.41-1.41-1.41L16 15.24l-1.41-1.41L16 12.41l-1.41-1.42z'/%3E%3C/svg%3E")}

/* v8.1 stability */
.side-nav a.side-upload-link{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-align:left;text-decoration:none;cursor:pointer;color:#334d65;font-weight:750}
.side-nav a.side-upload-link:hover{background:#edf5fb;color:var(--nav)}
.loading{min-height:180px;display:grid;place-items:center}
#content{overflow-anchor:none;contain:layout style}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
html{scrollbar-gutter:stable}
body{overflow-y:scroll}
.app-shell,.now-panel,.app-main{transition:none!important}
#content{min-height:calc(100dvh - var(--player) - 90px)}
@media(max-width:760px){.media-card:hover,.artist-card:hover,.playlist-card:hover,.folder-card:hover,.genre-tile:hover{transform:none!important}.content{min-height:calc(100dvh - 150px)}}


/* ===== 8.1.2 Custom background priority ===== */
body[data-context-custom="1"]:not(.auth-body):not(.admin-body)::before{
  background-image:var(--context-bg)!important;
  background-color:transparent!important;
  opacity:1!important;
}
body.admin-body[data-context-custom="1"]::before{
  background-image:var(--admin-context-bg)!important;
  background-color:transparent!important;
  opacity:1!important;
}
body[data-frame-custom="1"] .hero-card,
body[data-frame-custom="1"] .mix-card,
body[data-frame-custom="1"] .panel,
body[data-frame-custom="1"] .notification-card,
body[data-frame-custom="1"] .person-card,
body[data-frame-custom="1"] .profile-hero,
body[data-frame-custom="1"] .upload-studio,
body[data-frame-custom="1"] .stat,
body[data-frame-custom="1"] .stat-pro,
body[data-frame-custom="1"] .health-card,
body[data-frame-custom="1"] .auth-card,
body[data-frame-custom="1"] .patch-panel,
body[data-frame-custom="1"] .design-card,
body[data-frame-custom="1"] .media-card,
body[data-frame-custom="1"] .artist-card,
body[data-frame-custom="1"] .playlist-card,
body[data-frame-custom="1"] .folder-card,
body[data-frame-custom="1"] .genre-tile{
  background-image:var(--frame-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
body.admin-body[data-frame-custom="1"] .admin-content .panel,
body.admin-body[data-frame-custom="1"] .admin-content .stat,
body.admin-body[data-frame-custom="1"] .admin-content .table-wrap{
  background-image:var(--admin-frame-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* ===== 8.2.0 Full Admin Theme Designer ===== */
:root{
  --sidebar-bg:url('../theme_asset.php?slot=sidebar_bg');
  --header-bg:url('../theme_asset.php?slot=header_bg');
  --rightpanel-bg:url('../theme_asset.php?slot=rightpanel_bg');
  --player-bg:url('../theme_asset.php?slot=player_bg');
  --mobile-nav-bg:url('../theme_asset.php?slot=mobile_nav_bg');
  --admin-sidebar-bg:url('../theme_asset.php?slot=admin_sidebar_bg');
  --admin-header-bg:url('../theme_asset.php?slot=admin_header_bg');
  --page-overlay:rgba(237,244,251,.58);--frame-overlay:rgba(255,255,255,.88);--zone-overlay:rgba(255,255,255,.92);
  --right-overlay:rgba(248,251,254,.92);--player-overlay:rgba(255,255,255,.92);--mobile-nav-overlay:rgba(255,255,255,.92);
  --admin-page-overlay:rgba(237,244,251,.64);--admin-frame-overlay:rgba(255,255,255,.90);--admin-sidebar-overlay:rgba(255,255,255,.92);
  --header-overlay-1:rgba(245,163,24,.82);--header-overlay-2:rgba(233,140,5,.86);--design-blur:12px;
}
body:not(.auth-body):not(.admin-body)::before{background-image:linear-gradient(var(--page-overlay),var(--page-overlay)),var(--context-bg)!important}
body[data-context-custom="1"]:not(.auth-body):not(.admin-body)::before{background-image:var(--context-bg)!important}
.app-sidebar{background-color:transparent!important;background-image:linear-gradient(var(--zone-overlay),var(--zone-overlay)),var(--sidebar-bg)!important;background-size:cover!important;background-position:center!important;backdrop-filter:blur(var(--design-blur))!important}
.app-brand,.app-header{background-color:transparent!important;background-image:linear-gradient(180deg,var(--header-overlay-1),var(--header-overlay-2)),var(--header-bg)!important;background-size:cover!important;background-position:center!important}
.now-panel{background-color:transparent!important;background-image:linear-gradient(var(--right-overlay),var(--right-overlay)),var(--rightpanel-bg)!important;background-size:cover!important;background-position:center!important;backdrop-filter:blur(var(--design-blur))}
.player{background-color:var(--player-color,#fff)!important;background-image:linear-gradient(var(--player-overlay),var(--player-overlay)),var(--player-bg),linear-gradient(var(--player-color,#fff),var(--player-color,#fff))!important;background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;backdrop-filter:blur(var(--design-blur))}
.mobile-bottom-nav{background-color:transparent!important;background-image:linear-gradient(var(--mobile-nav-overlay),var(--mobile-nav-overlay)),var(--mobile-nav-bg)!important;background-size:cover!important;background-position:center!important;backdrop-filter:blur(var(--design-blur))}
.hero-card,.mix-card,.panel,.notification-card,.person-card,.profile-hero,.upload-studio,.stat,.stat-pro,.health-card,.auth-card,.patch-panel,.design-card,.media-card,.artist-card,.playlist-card,.folder-card,.genre-tile{background-image:linear-gradient(var(--frame-overlay),var(--frame-overlay)),var(--frame-bg)!important;backdrop-filter:blur(var(--design-blur)) saturate(1.08)!important}
.section-head h1,.content-section h2,.panel h2,.hero-card h2{color:var(--title)!important}.text-link,a:not(.btn):not(.app-brand):not(.admin-brand):not(.side-upload-link){color:var(--link)}
.side-nav button,.side-footer button,.side-footer a{color:var(--text)}.nav-group>small{color:var(--muted)}
.admin-body::before{background-image:linear-gradient(var(--admin-page-overlay),var(--admin-page-overlay)),var(--admin-context-bg)!important}
.admin-body[data-context-custom="1"]::before{background-image:var(--admin-context-bg)!important}
.admin-sidebar{background-color:transparent!important;background-image:linear-gradient(var(--admin-sidebar-overlay),var(--admin-sidebar-overlay)),var(--admin-sidebar-bg)!important;background-size:cover!important;background-position:center!important;backdrop-filter:blur(var(--design-blur))}
.admin-brand,.admin-topbar{background-color:transparent!important;background-image:linear-gradient(180deg,var(--header-overlay-1),var(--header-overlay-2)),var(--admin-header-bg)!important;background-size:cover!important;background-position:center!important}
.admin-content .panel,.admin-content .stat,.admin-content .table-wrap{background-image:linear-gradient(var(--admin-frame-overlay),var(--admin-frame-overlay)),var(--admin-frame-bg)!important;backdrop-filter:blur(var(--design-blur))}
.table-wrap{background-color:var(--surface)}.table th{color:var(--title)}.table td{color:var(--text)}
.searchbox,input,select,textarea{background-color:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.btn{border-color:var(--line);color:var(--nav)}.btn.primary{background:var(--nav)!important;border-color:var(--nav)!important;color:#fff}.btn.danger{color:var(--danger)}
.design-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}.color-control{display:grid;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--surface-soft)}.color-control>span{font-weight:800;font-size:12px}.color-control>div{display:flex;align-items:center;gap:10px}.color-control input[type=color]{width:48px;height:40px;padding:2px;border-radius:10px;cursor:pointer}.color-control code{font-size:11px;color:var(--muted)}
.design-range-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}.design-range-grid label{display:grid;gap:8px;padding:14px;border:1px solid var(--line2);border-radius:14px;background:var(--surface-soft)}.design-range-grid label>span{display:flex;justify-content:space-between;gap:12px;font-weight:800}.design-range-grid input[type=range]{width:100%;accent-color:var(--accent)}
.design-system-form>.content-section-head{margin-top:10px}.design-system-form>.content-section-head:first-of-type{margin-top:0}
@media(max-width:900px){.design-color-grid{grid-template-columns:1fr 1fr}.design-range-grid{grid-template-columns:1fr}.admin-topbar,.app-header{background-position:center}.mobile-bottom-nav{background-size:cover!important}}
@media(max-width:520px){.design-color-grid{grid-template-columns:1fr}}

/* ===== 8.2.1 custom uploads have absolute visual priority ===== */
body[data-sidebar-custom="1"] .app-sidebar{background-image:var(--sidebar-bg)!important;background-color:transparent!important;backdrop-filter:none!important}
body[data-header-custom="1"] .app-brand,body[data-header-custom="1"] .app-header{background-image:var(--header-bg)!important;background-color:transparent!important}
body[data-rightpanel-custom="1"] .now-panel{background-image:var(--rightpanel-bg)!important;background-color:transparent!important;backdrop-filter:none!important}
body[data-player-custom="1"] .player{background-color:var(--player-color,#fff)!important;background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)),var(--player-bg),linear-gradient(var(--player-color,#fff),var(--player-color,#fff))!important;background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;backdrop-filter:none!important}
body[data-mobile-nav-custom="1"] .mobile-bottom-nav{background-image:var(--mobile-nav-bg)!important;background-color:transparent!important;backdrop-filter:none!important}
body.admin-body[data-admin-sidebar-custom="1"] .admin-sidebar{background-image:var(--admin-sidebar-bg)!important;background-color:transparent!important;backdrop-filter:none!important}
body.admin-body[data-admin-header-custom="1"] .admin-brand,body.admin-body[data-admin-header-custom="1"] .admin-topbar{background-image:var(--admin-header-bg)!important;background-color:transparent!important}
body[data-frame-custom="1"] .hero-card,body[data-frame-custom="1"] .mix-card,body[data-frame-custom="1"] .panel,body[data-frame-custom="1"] .notification-card,body[data-frame-custom="1"] .person-card,body[data-frame-custom="1"] .profile-hero,body[data-frame-custom="1"] .upload-studio,body[data-frame-custom="1"] .stat,body[data-frame-custom="1"] .stat-pro,body[data-frame-custom="1"] .health-card,body[data-frame-custom="1"] .patch-panel,body[data-frame-custom="1"] .design-card,body[data-frame-custom="1"] .media-card,body[data-frame-custom="1"] .artist-card,body[data-frame-custom="1"] .playlist-card,body[data-frame-custom="1"] .folder-card,body[data-frame-custom="1"] .genre-tile{background-image:var(--frame-bg)!important;backdrop-filter:none!important}
body.admin-body[data-frame-custom="1"] .admin-content .panel,body.admin-body[data-frame-custom="1"] .admin-content .stat,body.admin-body[data-frame-custom="1"] .admin-content .table-wrap{background-image:var(--admin-frame-bg)!important;backdrop-filter:none!important}
.simple-upload-box{margin-bottom:18px;padding:18px;border:1px solid var(--line2);border-radius:16px;background:rgba(255,255,255,.96)}
.simple-upload-box h2{margin:0 0 6px}.simple-upload-box .grid2{margin-top:12px}.simple-upload-box input[type=file]{width:100%;padding:12px;border:2px dashed #a9c5dc;border-radius:12px;background:#fff}


/* ===== 8.2.3 zone background safety normalization ===== */
.app-sidebar{
  background-color:var(--sidebar-color,#ffffff)!important;
  background-image:linear-gradient(var(--zone-overlay),var(--zone-overlay)),var(--sidebar-bg),linear-gradient(var(--sidebar-color,#ffffff),var(--sidebar-color,#ffffff))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
.app-brand,.app-header{
  background-color:var(--top,#f5a318)!important;
  background-image:linear-gradient(180deg,var(--header-overlay-1),var(--header-overlay-2)),var(--header-bg),linear-gradient(180deg,var(--top,#f5a318),var(--top2,#e98c05))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
.now-panel{
  background-color:var(--rightpanel-color,#f8fbfe)!important;
  background-image:linear-gradient(var(--right-overlay),var(--right-overlay)),var(--rightpanel-bg),linear-gradient(var(--rightpanel-color,#f8fbfe),var(--rightpanel-color,#f8fbfe))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
.mobile-bottom-nav{
  background-color:var(--mobile-nav-color,#ffffff)!important;
  background-image:linear-gradient(var(--mobile-nav-overlay),var(--mobile-nav-overlay)),var(--mobile-nav-bg),linear-gradient(var(--mobile-nav-color,#ffffff),var(--mobile-nav-color,#ffffff))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
.admin-sidebar{
  background-color:var(--admin-sidebar-color,#ffffff)!important;
  background-image:linear-gradient(var(--admin-sidebar-overlay),var(--admin-sidebar-overlay)),var(--admin-sidebar-bg),linear-gradient(var(--admin-sidebar-color,#ffffff),var(--admin-sidebar-color,#ffffff))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
.admin-brand,.admin-topbar{
  background-color:var(--top,#f5a318)!important;
  background-image:linear-gradient(180deg,var(--header-overlay-1),var(--header-overlay-2)),var(--admin-header-bg),linear-gradient(180deg,var(--top,#f5a318),var(--top2,#e98c05))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
body[data-sidebar-custom="1"] .app-sidebar{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--sidebar-bg),linear-gradient(var(--sidebar-color,#fff),var(--sidebar-color,#fff))!important}
body[data-header-custom="1"] .app-brand,body[data-header-custom="1"] .app-header{background-image:linear-gradient(rgba(245,163,24,.16),rgba(233,140,5,.18)),var(--header-bg),linear-gradient(180deg,var(--top,#f5a318),var(--top2,#e98c05))!important}
body[data-rightpanel-custom="1"] .now-panel{background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),var(--rightpanel-bg),linear-gradient(var(--rightpanel-color,#f8fbfe),var(--rightpanel-color,#f8fbfe))!important}
body[data-mobile-nav-custom="1"] .mobile-bottom-nav{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--mobile-nav-bg),linear-gradient(var(--mobile-nav-color,#fff),var(--mobile-nav-color,#fff))!important}
body.admin-body[data-admin-sidebar-custom="1"] .admin-sidebar{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--admin-sidebar-bg),linear-gradient(var(--admin-sidebar-color,#fff),var(--admin-sidebar-color,#fff))!important}
body.admin-body[data-admin-header-custom="1"] .admin-brand,body.admin-body[data-admin-header-custom="1"] .admin-topbar{background-image:linear-gradient(rgba(245,163,24,.16),rgba(233,140,5,.18)),var(--admin-header-bg),linear-gradient(180deg,var(--top,#f5a318),var(--top2,#e98c05))!important}
body[data-frame-custom="1"] .hero-card,body[data-frame-custom="1"] .mix-card,body[data-frame-custom="1"] .panel,body[data-frame-custom="1"] .notification-card,body[data-frame-custom="1"] .person-card,body[data-frame-custom="1"] .profile-hero,body[data-frame-custom="1"] .upload-studio,body[data-frame-custom="1"] .stat,body[data-frame-custom="1"] .stat-pro,body[data-frame-custom="1"] .health-card,body[data-frame-custom="1"] .patch-panel,body[data-frame-custom="1"] .design-card,body[data-frame-custom="1"] .media-card,body[data-frame-custom="1"] .artist-card,body[data-frame-custom="1"] .playlist-card,body[data-frame-custom="1"] .folder-card,body[data-frame-custom="1"] .genre-tile{
  background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--frame-bg),linear-gradient(var(--surface,#fff),var(--surface,#fff))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}
body.admin-body[data-frame-custom="1"] .admin-content .panel,body.admin-body[data-frame-custom="1"] .admin-content .stat,body.admin-body[data-frame-custom="1"] .admin-content .table-wrap{
  background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--admin-frame-bg),linear-gradient(var(--admin-surface-color,#fff),var(--admin-surface-color,#fff))!important;
  background-size:cover,cover,cover!important;background-position:center,center,center!important;background-repeat:no-repeat!important;
}

/* v8.4 stability: navigation and player updates never collapse the center view */
html{scrollbar-gutter:stable}#content[aria-busy="true"]{cursor:progress}#content[aria-busy="true"]>*{visibility:visible}.now-panel [data-now-detail]{min-height:280px}.now-panel [data-now-detail] .now-big-cover{display:block}