/*
* PrusCMS v1.1.0
* Copyright (c) 2024 Achmad Muhyiddin
* Lisensi: MIT License
* Email: nguprus@gmail.com
* Izin diberikan tanpa biaya untuk menggunakan, menyalin, mengubah, menggabungkan, menerbitkan, mendistribusikan, menampilkan,
* dengan syarat tetap menyertakan salinan hak cipta yang tertera.
*/
/* Mendefinisikan gaya tata letak halaman publik. */
body{min-height:100vh;background:radial-gradient(ellipse at 88% 0,#f4eaff 0,transparent 32%),var(--bg)}.topbar{height:76px;display:flex;align-items:center;gap:18px;padding:0 clamp(16px,4vw,64px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px);position:sticky;top:0;z-index:40}.brand{display:inline-flex;align-items:center;gap:11px;min-width:max-content}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:15px;background:linear-gradient(135deg,var(--purple),#a37af3);color:white;font-size:24px;box-shadow:0 8px 24px #7047d733}.brand b{display:block;font-size:19px;letter-spacing:-.7px}.brand small{display:block;margin-top:3px;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.13em}.top-search{display:flex;align-items:center;gap:9px;width:min(420px,38vw);margin-left:auto;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--muted)}.top-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.top-actions{display:flex;gap:8px}.icon-btn{display:grid;place-items:center;width:41px;height:41px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:19px}.icon-btn:hover{border-color:var(--purple);color:var(--purple)}.menu-toggle{display:none}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 224px;max-width:1600px;margin:auto;min-height:calc(100vh - 76px)}.sidebar{grid-column:2;grid-row:1;position:sticky;top:76px;align-self:start;height:calc(100vh - 76px);overflow:auto;padding:27px 15px;border-right:0;border-left:1px solid var(--line);background:color-mix(in srgb,var(--surface) 50%,transparent)}.side-label{padding:0 12px;margin:0 0 11px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.16em}.side-nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid transparent;border-radius:13px;color:var(--muted);font-size:13px;font-weight:700}.nav-item span{width:20px;text-align:center;font-size:18px}.nav-item b{margin-left:auto;color:var(--purple);font-size:11px}.nav-item:hover,.nav-item.active{background:#7047d714;border-color:#7047d725;color:var(--purple)}.genre-label{margin-top:29px}.genre-list{display:flex;flex-wrap:wrap;gap:7px;padding:0 5px}.genre-chip{border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:var(--surface);color:var(--muted);font-size:10px}.genre-chip.active,.genre-chip:hover{border-color:var(--purple);background:#7047d714;color:var(--purple)}.sidebar-note{margin:30px 4px 0;padding:15px;border:1px solid #7047d722;border-radius:17px;background:linear-gradient(140deg,#7047d714,#ff8a3d0d)}.note-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--surface3);color:var(--purple);font-size:20px;margin-bottom:10px}.sidebar-note b{font-size:12px}.sidebar-note p{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:0}.main-content{grid-column:1;grid-row:1;width:100%;min-width:0;padding:clamp(18px,3vw,44px) clamp(16px,3.5vw,54px) 90px}.hero-banner{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:300px;padding:clamp(25px,4vw,48px);border-radius:30px;background:linear-gradient(110deg,#f0e8ff 0%,#f9efff 50%,#ffe8d8 100%);color:#2d2046}.hero-copy{position:relative;z-index:2;max-width:570px}.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #7047d72b;border-radius:999px;background:#ffffffa3;color:#7047d7;font-size:9px;font-weight:900;letter-spacing:.1em}.pulse-dot{width:7px;height:7px;border-radius:50%;background:#ff8a3d;box-shadow:0 0 0 4px #ff8a3d22}.hero-banner h1{margin:18px 0 13px;font-size:clamp(31px,4.4vw,54px);line-height:1.04;letter-spacing:-.055em}.hero-banner h1 span{color:var(--purple)}.hero-banner p{max-width:460px;color:#766a87;font-size:13px;line-height:1.7}.hero-cta{display:inline-flex;align-items:center;gap:22px;margin-top:12px;padding:13px 17px;border-radius:13px;background:var(--purple);color:white;font-size:12px;font-weight:800;box-shadow:0 10px 20px #7047d733}.hero-art{position:relative;width:270px;height:240px;flex:0 0 270px}.orbit{position:absolute;border:1px dashed #9c7ce8a1;border-radius:50%;transform:rotate(-22deg)}.orbit-one{inset:12px 0}.orbit-two{inset:32px -14px;transform:rotate(40deg)}.vinyl-disc{position:absolute;top:36px;left:42px;width:174px;height:174px;border-radius:50%;background:repeating-radial-gradient(circle at center,#30243e 0 4px,#463452 5px 7px,#2c203b 8px 11px);box-shadow:0 20px 30px #30243e30;display:grid;place-items:center;transform:rotate(-13deg)}.vinyl-label{display:grid;place-content:center;text-align:center;width:68px;height:68px;border-radius:50%;background:var(--orange);color:white;font-weight:950;font-size:20px;line-height:1.1}.vinyl-label small{font-size:20px}.float-emoji{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#fff;box-shadow:0 10px 20px #4d2a7720;font-size:25px;animation:bob 3s ease-in-out infinite}.emoji-one{top:5px;right:20px}.emoji-two{right:0;bottom:27px;animation-delay:.5s}.emoji-three{bottom:9px;left:16px;animation-delay:1s}.hero-spark{position:absolute;top:20px;left:18px;color:#ff8a3d;font-size:29px}@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}.quote-section{display:flex;align-items:center;gap:15px;margin:22px 0;padding:17px 20px;border:1px solid #ff8a3d38;border-radius:19px;background:linear-gradient(100deg,#fff0e4,var(--surface));box-shadow:0 8px 25px #ff8a3d0b}.quote-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#ff8a3d1b;color:#f07829;font-size:22px}.section-kicker{display:block;color:var(--purple);font-size:9px;font-weight:900;letter-spacing:.16em}.quote-copy p{margin:5px 0 0;font-size:14px;font-weight:800}.quote-emoji{margin-left:auto;font-size:27px;animation:bob 2.5s ease-in-out infinite}.quote-next{width:35px;height:35px;border:1px solid #ff8a3d44;border-radius:12px;background:white;color:#c76b2d;font-size:20px}.quick-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:24px 0 38px}.quick-card{display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1px solid transparent;border-radius:18px;text-align:left;transition:transform .18s}.quick-card:hover,.playlist-card:hover,.genre-tile:hover{transform:translateY(-3px)}.quick-purple{background:#eee6ff;border-color:#dfd1ff}.quick-orange{background:#ffebdd;border-color:#ffd8c0}.quick-mint{background:#e2f8ee;border-color:#c7eedc}.quick-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#ffffffb8;font-size:22px;color:var(--purple)}.quick-card b,.quick-card small{display:block}.quick-card b{font-size:12px;color:#352648}.quick-card small{margin-top:4px;color:#877b95;font-size:10px}.quick-arrow{margin-left:auto;font-size:17px;color:#65517e}.section-block{margin:0 0 39px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:17px}.section-heading h2{margin:6px 0 4px;font-size:clamp(22px,2.5vw,29px);letter-spacing:-.045em}.section-heading h2 span{color:var(--orange)}.section-heading p{margin:0;color:var(--muted);font-size:11px}.section-link{padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--purple);font-size:11px;font-weight:800;white-space:nowrap}.playlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.playlist-card{display:grid;grid-template-columns:70px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-align:left;min-width:0;transition:transform .18s}.playlist-art{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;width:70px;height:76px;padding:9px;border-radius:13px;color:#fff}.playlist-art i{font-size:16px;font-style:normal}.playlist-art b{font-size:10px;line-height:1.05;letter-spacing:.05em}.playlist-art em{position:absolute;right:5px;bottom:-4px;font-size:33px;font-style:normal;opacity:.65}.art-lilac{background:linear-gradient(140deg,#9470eb,#5531b9)}.art-peach{background:linear-gradient(140deg,#ffb77d,#f06a46)}.art-mint{background:linear-gradient(140deg,#80d8b7,#329a87)}.art-yellow{background:linear-gradient(140deg,#f7d96c,#e7a42d)}.playlist-meta{min-width:0}.playlist-meta b,.playlist-meta small{display:block;overflow:hidden;text-overflow:ellipsis}.playlist-meta b{font-size:11px}.playlist-meta small{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.4}.playlist-play{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;background:#7047d714;color:var(--purple);font-size:11px}.genre-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.genre-tile{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:17px;background:var(--surface);text-align:left;transition:transform .18s}.genre-tile>span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#7047d714;font-size:20px}.genre-tile b{font-size:11px;overflow-wrap:anywhere}.genre-tile small{color:var(--muted);font-size:9px}.genre-tone-1>span{background:#ff8a3d1b}.genre-tone-2>span{background:#9ce5c655}.genre-tone-3>span{background:#ffd34e66}.genre-tone-4>span{background:#f1e6ff}.catalog-section{padding-top:5px}.sort-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.sort-control select{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);max-width:130px}.catalog-tools{display:flex;align-items:center;gap:15px;margin:18px 0 15px}.catalog-search{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--muted)}.catalog-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:12px}.catalog-count{color:var(--muted);font-size:11px;white-space:nowrap}.catalog-count strong{color:var(--text);font-size:15px}.active-filters{display:flex;align-items:center;gap:12px;margin:8px 0;color:var(--purple);font-size:11px}.active-filters[hidden]{display:none}.active-filters button{border:0;background:none;color:var(--orange);font-weight:800}.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.song-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:11px;border:1px solid var(--line);border-radius:19px;background:var(--surface);box-shadow:0 5px 16px #4d2a7706;transition:transform .18s,border-color .18s}.song-card:hover{transform:translateY(-2px);border-color:#bda9ed}.song-card[hidden]{display:none}.song-cover{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:1.5;border-radius:13px;background:linear-gradient(140deg,#e8dcff,#ffdec6);color:var(--purple)}.song-cover img{width:100%;height:100%;object-fit:cover}.cover-glyph{font-size:44px}.cover-deco{position:absolute;right:15px;bottom:-15px;color:#ff8a3d;font-size:60px;opacity:.65}.song-card-info{padding:12px 3px 8px;min-width:0}.song-genre{display:inline-block;padding:5px 8px;border-radius:999px;background:#7047d712;color:var(--purple);font-size:9px;font-weight:800}.song-card-info h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:9px 0 4px;font-size:13px}.song-card-info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;color:var(--muted);font-size:11px}.song-card-actions{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:4px}.play-btn,.archive-btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:12px;background:var(--purple);color:white;font-size:13px}.archive-btn{background:#ff8a3d;color:#fff}.more-btn{margin-left:auto;width:34px;height:34px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--muted);font-size:19px}.is-favorite .song-card-info h3:after{content:' ♥';color:var(--orange)}.is-playing{border-color:var(--purple);box-shadow:0 0 0 2px #7047d71a}.empty-state{padding:34px 20px;border:1px dashed #cbb9ed;border-radius:19px;background:var(--surface);text-align:center;color:var(--muted)}.empty-state[hidden]{display:none}.empty-state>span{font-size:32px}.empty-state h3{margin:8px 0;color:var(--text)}.empty-state p,.empty-note{font-size:12px;line-height:1.6}.catalog-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;color:var(--muted);font-size:10px}.text-btn{border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:var(--surface);color:var(--purple);font-size:10px;font-weight:800}.site-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:44px;padding-top:23px;border-top:1px solid var(--line);color:var(--muted)}.site-footer b{color:var(--purple);font-size:14px}.site-footer p{font-size:11px}.site-footer small{max-width:280px;font-size:10px;line-height:1.6}.drawer-scrim{display:none}.mobile-nav{display:none}.toast{position:fixed;z-index:100;bottom:24px;left:50%;transform:translate(-50%,20px);padding:12px 18px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;font-size:12px}.toast.show{opacity:1;transform:translate(-50%,0)}.mini-player{position:fixed;z-index:35;left:calc(224px + 25px);right:25px;bottom:15px;display:grid;grid-template-columns:minmax(170px,1fr) auto minmax(180px,1.4fr);align-items:center;gap:16px;padding:12px 16px;border:1px solid #7047d733;border-radius:19px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 40px #2f174a22;backdrop-filter:blur(20px)}.mini-player[hidden]{display:none}.mini-track{display:flex;align-items:center;gap:10px;min-width:0}.mini-cover{display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;border-radius:12px;background:linear-gradient(135deg,#7047d7,#ff8a3d);color:white}.mini-track b,.mini-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-track b{font-size:11px}.mini-track small{margin-top:4px;color:var(--muted);font-size:9px}.player-controls{display:flex;align-items:center;gap:7px}.player-controls button{width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:11px}.player-controls #togglePlayback{background:var(--purple);color:white;border-color:var(--purple)}.player-progress{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px}.player-progress input{width:100%;accent-color:var(--purple)}.queue-label{grid-column:1/-1;color:var(--muted);font-size:9px}.maintenance-card{max-width:540px;margin:10vh auto;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
@media(max-width:1200px){.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.genre-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-art{transform:scale(.85);transform-origin:center right;margin-left:-20px}.mini-player{left:250px;grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)}}
@media(max-width:820px){.topbar{height:66px;padding:0 15px;gap:10px}.menu-toggle{display:grid}.brand-mark{width:38px;height:38px}.brand b{font-size:16px}.brand small{font-size:7px}.top-search{display:none}.top-actions{margin-left:auto}.top-actions #searchToggle{display:grid}.app-shell{display:block;min-height:calc(100vh - 66px)}.sidebar{grid-column:auto;grid-row:auto;position:fixed;z-index:60;top:66px;right:0;left:auto;bottom:0;width:min(300px,86vw);height:auto;border-left:1px solid var(--line);border-right:0;transform:translateX(105%);transition:transform .22s;background:var(--surface);box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.drawer-scrim.open{display:block;position:fixed;inset:66px 0 0;z-index:55;border:0;background:#20142f88}.main-content{padding:18px 15px 145px}.hero-banner{min-height:270px;padding:25px 22px;border-radius:24px}.hero-copy{max-width:100%}.hero-banner h1{font-size:clamp(31px,7vw,44px)}.hero-banner p{max-width:400px;font-size:12px}.hero-art{position:absolute;right:-70px;bottom:-25px;opacity:.24;transform:scale(.9)}.hero-cta{position:relative}.quote-section{gap:10px;padding:13px}.quote-icon{width:36px;height:36px;flex-basis:36px}.quote-copy p{font-size:12px}.quote-emoji{font-size:23px}.quick-links{gap:8px;margin:18px 0 31px}.quick-card{display:grid;grid-template-columns:35px minmax(0,1fr);gap:8px;padding:11px;border-radius:15px}.quick-icon{width:34px;height:34px;flex-basis:34px;font-size:18px}.quick-card b{font-size:10px}.quick-card small{font-size:8px}.quick-arrow{display:none}.section-heading h2{font-size:24px}.section-heading p{max-width:300px;font-size:10px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.playlist-card{grid-template-columns:55px minmax(0,1fr) 24px;gap:8px;padding:8px}.playlist-art{width:55px;height:65px;padding:7px}.playlist-art b{font-size:8px}.playlist-meta b{font-size:10px}.playlist-meta small{font-size:8px}.playlist-play{width:24px;height:24px}.genre-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.genre-tile{padding:12px;gap:6px}.genre-tile b{font-size:10px}.genre-tile small{font-size:8px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.song-card{padding:9px;border-radius:16px}.song-cover{aspect-ratio:1.3}.song-card-info{padding:10px 2px 7px}.song-card-info h3{font-size:12px}.song-card-info p{font-size:10px}.song-genre{font-size:8px}.mini-player{left:10px;right:10px;bottom:69px;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px;border-radius:16px}.player-progress{grid-column:1/-1;grid-row:2}.queue-label{grid-column:1/-1;grid-row:3}.mobile-nav{position:fixed;z-index:45;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 6px max(8px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(16px)}.mobile-nav a{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;min-height:44px;padding:4px 2px;color:var(--muted);font-size:10px;font-weight:700;text-align:center;border-radius:12px;transition:color .16s,background .16s}.mobile-nav a>span:first-child{font-size:20px;line-height:1.1}.mobile-nav .mobile-nav-label{font-size:10px;line-height:1.2}.mobile-nav a.active{color:var(--purple);background:#7047d710}.mobile-nav a.active:before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--purple)}.mobile-nav a:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.mobile-nav a:active{background:#7047d71c}.site-footer{display:block}.site-footer small{display:block}.catalog-bottom{font-size:9px}}
@media(max-width:390px){.topbar{gap:7px}.brand{gap:7px}.brand b{font-size:14px}.brand small{letter-spacing:.05em}.icon-btn{width:35px;height:35px}.hero-banner{padding:22px 17px}.hero-banner h1{font-size:30px}.hero-pill{font-size:8px}.quote-copy p{font-size:11px}.quote-emoji{font-size:19px}.quick-card{grid-template-columns:1fr;justify-items:start}.quick-card small{display:none}.quick-icon{width:30px;height:30px}.playlist-card{grid-template-columns:48px minmax(0,1fr);}.playlist-art{width:48px;height:59px}.playlist-play{display:none}.genre-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-tools{gap:8px}.catalog-count{font-size:9px}.song-card{padding:7px}.song-card-actions .play-btn,.archive-btn{width:32px;height:32px}.mini-player{left:7px;right:7px}.player-controls{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Responsive non-navigational playlist rows (v5 patch) */
.song-grid{display:flex;flex-direction:column;gap:8px}
.song-card.playlist-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:15px;min-height:68px;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}
.song-card.playlist-row:hover{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 90%,var(--accent) 10%)}
.song-card.playlist-row:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:3px}
.song-card.playlist-row[aria-disabled="true"]{cursor:not-allowed;opacity:.72}
.song-card.playlist-row.is-playing{border-color:var(--accent);background:color-mix(in srgb,var(--surface) 86%,var(--accent) 14%)}
.playlist-row.is-playing .playlist-row-info h3{color:var(--accent)}
.playlist-row .playlist-row-cover{width:48px;height:48px;aspect-ratio:1;border-radius:11px;flex:none;text-decoration:none}
.playlist-row .playlist-row-cover img{width:100%;height:100%;object-fit:cover}
.playlist-row .song-card-info{min-width:0;padding:0}
.playlist-row .song-card-info h3{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 5px;font-size:13px;line-height:1.35}
.playlist-row .playlist-dash{color:var(--muted);font-weight:500}
.playlist-row .song-card-info p{font-size:11px}
.playlist-row .song-card-actions{margin:0;padding:0;gap:0}
@media(max-width:820px){.song-grid{gap:7px}.song-card.playlist-row{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:9px 10px;min-height:62px}.playlist-row .playlist-row-cover{width:42px;height:42px}.playlist-row .song-card-info h3{font-size:12px}.playlist-row .song-card-info p{font-size:10px}}
@media(max-width:390px){.song-card.playlist-row{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:8px}.playlist-row .playlist-row-cover{width:38px;height:38px}.playlist-row .song-card-info h3{font-size:11px}}

/* Regression fix: playlist-row's grid display must not override the hidden attribute. */
.song-card.playlist-row[hidden] {
  display: none !important;
}

/* Public catalog pagination and adjustable page size */
.page-size-control{display:flex;align-items:center;gap:7px;flex:0 0 auto;color:var(--muted);font-size:10px}.page-size-control select{max-width:112px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-size:11px}.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 8px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.catalog-pagination[hidden]{display:none}.catalog-pagination span{color:var(--muted);font-size:11px;text-align:center}.pagination-btn{min-height:38px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:11px;font-weight:800}.pagination-btn:not(:disabled):hover{border-color:var(--purple);color:var(--purple)}.pagination-btn:disabled{opacity:.45;cursor:not-allowed}.catalog-tools{flex-wrap:wrap}.catalog-count{white-space:nowrap}@media(max-width:560px){.catalog-tools{align-items:stretch}.catalog-search{flex:1 1 100%;min-width:0}.page-size-control{margin-left:auto}.catalog-pagination{gap:7px;padding:9px}.pagination-btn{padding:8px 9px;font-size:10px}.catalog-pagination span{font-size:10px}}


/* Patch 5: public header menu toggle sits at the far right and controls the right drawer. */
@media(max-width:820px){
  .topbar .top-actions{margin-left:auto;flex:0 0 auto;align-items:center}
  .topbar .menu-toggle{display:grid;flex:0 0 41px;order:10}
}
@media(max-width:390px){
  .topbar .menu-toggle{flex-basis:35px}
}


/* Patch 13 — font-independent music note mark for playlist artwork */
.song-cover .music-note-icon{width:44px;height:44px;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.playlist-art .playlist-music-mark{display:inline-grid;place-items:center;width:20px;height:20px;margin-bottom:1px}.playlist-art .playlist-music-mark .music-note-icon{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* Patch 14 — font-independent icon for the homepage featured playlist */
.playlist-art .playlist-music-mark{display:grid;place-items:center;width:24px;height:24px;margin:0 0 2px;flex:0 0 24px;color:currentColor;line-height:1}
.playlist-art .playlist-music-mark svg{display:block;width:24px;height:24px;fill:currentColor;stroke:none}
.playlist-art .playlist-music-mark svg path{fill:currentColor}


/* Patch 17: PRUS header hierarchy, accessible search form, and responsive spacing. */
.brand-wordmark{display:block;min-width:0}.brand-wordmark b{display:block;font-size:19px;font-weight:950;letter-spacing:.08em}.brand-wordmark small{display:block;margin-top:3px;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.13em}.top-search{flex:1 1 320px;width:auto;max-width:460px;min-width:160px;margin-left:auto}.top-search-label{flex:0 0 auto;font-size:20px;line-height:1}.top-search input{min-width:0;flex:1}.top-search-submit{flex:0 0 auto;border:0;border-radius:9px;padding:7px 10px;background:var(--surface2);color:var(--text);font-size:10px;font-weight:800}.top-search-submit:hover{background:var(--surface3)}.top-actions{align-items:center;flex:0 0 auto}.admin-shortcut{color:var(--purple)}
@media(max-width:820px){.topbar{gap:9px}.brand{gap:8px}.brand-wordmark b{font-size:16px}.brand-wordmark small{font-size:7px}.top-search{display:flex;flex:1 1 auto;min-width:0;max-width:none;margin-left:0;padding:8px 9px;gap:6px}.top-search input{font-size:11px}.top-search-submit{display:none}.top-actions{gap:5px}.topbar .icon-btn{width:36px;height:36px}.topbar .menu-toggle{flex:0 0 36px}}
@media(max-width:520px){.topbar{padding:0 10px;gap:7px}.brand{gap:6px}.brand-mark{width:34px;height:34px;border-radius:12px;font-size:20px}.brand-wordmark b{font-size:14px;letter-spacing:.04em}.brand-wordmark small{display:none}.top-search{padding:7px 8px;border-radius:11px}.top-search-label{font-size:17px}.top-search input{font-size:10px}.topbar .icon-btn{width:32px;height:32px;border-radius:11px;font-size:16px}.topbar .menu-toggle{flex-basis:32px}}
@media(max-width:390px){.topbar{padding:0 7px;gap:5px}.brand-mark{width:30px;height:30px}.brand-wordmark b{font-size:12px}.top-search{gap:4px;padding:6px}.top-search input{font-size:9px}.topbar .icon-btn{width:29px;height:29px}.topbar .menu-toggle{flex-basis:29px}}


/* Patch 22 — reserve a fifth bottom-nav slot only for an authenticated owner. */
@media(max-width:820px){.mobile-nav .mobile-admin-link{color:var(--accent);font-weight:850}.mobile-nav .mobile-admin-link.active{background:color-mix(in srgb,var(--accent) 8%,transparent)}}

/* Patch 23: local default music artwork for rows and mini-player. */
.mini-cover{overflow:hidden;padding:0}.mini-cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.playlist-row-cover img{display:block;width:100%;height:100%;object-fit:cover}

/* Patch 24 — public homepage theme consistency, readable type, and mobile spacing. */
.hero-banner{
  background:linear-gradient(110deg,var(--surface2) 0%,var(--bg) 52%,var(--surface3) 100%);
  color:var(--text);
}
.hero-banner p{color:var(--muted)}
.hero-banner .hero-pill{
  border-color:var(--line);
  background:var(--surface);
  color:var(--accent);
}
.hero-banner .hero-pill .pulse-dot{background:var(--accent2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 15%,transparent)}
.hero-banner .hero-cta{background:var(--accent);color:var(--on-accent)}
.quote-section{border-color:var(--line);background:linear-gradient(100deg,var(--surface2),var(--surface))}
.quote-icon{background:var(--surface3);color:var(--accent)}
.quote-next{border-color:var(--line);background:var(--surface);color:var(--accent)}
.quick-purple,.quick-orange,.quick-mint{
  background:var(--surface2);
  border-color:var(--line);
}
.quick-card b{color:var(--text)}
.quick-card small{color:var(--muted)}
.quick-arrow{color:var(--accent)}
.nav-item:hover,.nav-item.active,.genre-chip.active,.genre-chip:hover{
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  color:var(--accent);
}
.playlist-play,.genre-tile>span{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.mobile-nav a.active{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.mobile-nav a.active:before{background:var(--accent)}

/* Keep supporting text readable without changing the established page structure. */
.side-label{font-size:11px}
.sidebar-note p{font-size:12px}
.section-kicker{font-size:10px}
.hero-pill{font-size:10px}
.top-search input{font-size:13px}
.quick-card b{font-size:13px}
.quick-card small{font-size:11px}
.playlist-meta b{font-size:12px}
.playlist-meta small{font-size:11px}
.genre-tile b{font-size:12px}
.genre-tile small{font-size:11px}
.mobile-nav a,.mobile-nav .mobile-nav-label{font-size:11px}

@media(max-width:520px){
  .hero-banner{gap:10px;min-height:0;border-radius:22px}
  .hero-banner p{font-size:14px;line-height:1.65}
  .hero-pill{font-size:10px;letter-spacing:.06em}
  .quick-links{gap:9px}
  .quick-card{padding:12px;gap:8px}
  .quick-card b{font-size:12px;line-height:1.35}
  .quick-card small{font-size:11px;line-height:1.4}
  .section-heading p,.sort-control,.page-size-control{font-size:12px}
  .catalog-search input,.top-search input{font-size:12px}
  .mobile-nav a,.mobile-nav .mobile-nav-label{font-size:11px}
}
@media(max-width:390px){
  .topbar{gap:6px}
  .brand-wordmark b{font-size:12px;letter-spacing:0}
  .top-search{min-width:0;flex:1 1 auto}
  .top-search input{font-size:12px;min-width:0}
  .topbar .icon-btn{width:32px;height:32px}
  .topbar .menu-toggle{flex-basis:32px}
  .hero-banner{padding:20px 15px}
  .hero-banner h1{font-size:clamp(28px,8vw,32px)}
  .hero-art{transform:scale(.82);transform-origin:center right;margin-left:-35px;margin-right:-20px}
  .quote-copy p{font-size:13px;line-height:1.45}
  .quick-card{padding:10px;gap:7px}
  .quick-card small{display:block;font-size:10px}
  .playlist-meta b{font-size:12px}
  .playlist-meta small{font-size:11px}
  .genre-tile small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.float-emoji,.quote-emoji{animation:none!important}}

/* NG unified music identity */
.brand-logo-img{object-fit:contain;display:block;background:transparent!important;padding:0;border:0;box-shadow:none;}
.sidebar-brand-mark.brand-logo-img{width:42px;height:42px;flex:0 0 42px;border-radius:12px;}
.admin-top-brand-mark.brand-logo-img{object-fit:contain;background:transparent!important;border:0;}

/* PATCH 2: search lives in the catalog section, not the page header. */
.catalog-search-form{display:flex;max-width:680px;margin:0 0 18px;position:relative;z-index:1}
.catalog-search-form[hidden]{display:none}
/* Deter casual image long-press/save; this is not a security boundary for public image URLs. */
.public-cover-protected,.public-cover-protected img,.brand-logo-img,.concert-feature-photo{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.public-cover-protected img,.brand-logo-img,.concert-feature-photo{pointer-events:none}