/* VIRAZO 0.3: petrol ink, local Vazir, sound-inspired cyan and violet accents. */
:root{--bg:#f3f6fb;--surface:#fff;--ink:#17344c;--muted:#64788c;--border:#e2e9f2;--accent:#087f8b;--accent-ink:#086b78;--accent-soft:#e7f5f6;--hover:#edf3f9;--music:#7560bf;--music-soft:#f0ecfa;--ease:cubic-bezier(.22,1,.36,1);--fast:140ms;--normal:240ms;--radius:20px}
:root[data-theme=dark]{--bg:#101c29;--surface:#172738;--ink:#eef5ff;--muted:#a2b6ca;--border:#2c425a;--accent:#76dbdf;--accent-ink:#94e8ec;--accent-soft:#1d3d49;--hover:#21364b;--music:#c2b2fb;--music-soft:#312a4b}
::selection{background:#bce8ee;color:#103142}.site-header{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px)}.header-inner{padding-block:15px}.brand{letter-spacing:-1px}.brand img{border-radius:13px;box-shadow:0 6px 14px #087f8b19}.desktop-nav{gap:22px}.desktop-nav a{display:inline-flex;align-items:center;gap:7px;position:relative}.desktop-nav a::after{content:'';position:absolute;bottom:0;right:0;left:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform var(--normal) var(--ease)}.desktop-nav a:hover::after{transform:scaleX(1)}.header-actions{gap:6px}.header-actions>.icon-button{background:var(--bg);border:1px solid var(--border);border-radius:13px}.header-search{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}.home-intro{position:relative;padding-block:30px}.home-intro h1{font-weight:700;letter-spacing:-1.1px;line-height:1.75}.today{color:var(--accent-ink)}.status-dot{background:var(--music);width:4px;height:4px}.search-box{border-radius:16px;padding:8px 13px;box-shadow:0 5px 15px #17344c03;transition:border-color var(--normal),box-shadow var(--normal)}.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}.search-box button{border-radius:11px;width:44px;height:44px}.topic-wrap{border-block:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,var(--bg))}.topics{gap:9px}.topics a{gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:12px;font-size:12px;transition:border-color var(--normal),background var(--normal),color var(--normal)}.topics a svg{color:var(--accent);opacity:.9}.topics a.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}.topics a.active svg{color:inherit}.topics a:hover:not(.active){border-color:var(--accent);background:var(--accent-soft)}.section-heading h2{font-weight:700;gap:8px}.section-heading h2>svg{color:var(--accent)}.section-heading>span{border:1px solid var(--border);border-radius:7px;padding:3px 9px;background:var(--surface);font-size:11px}.content-card{isolation:isolate;border-radius:var(--radius);box-shadow:0 4px 12px #183d6203;position:relative;transition:border-color var(--normal),box-shadow var(--normal);transform:none}.content-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid var(--accent);opacity:0;transition:opacity var(--normal)}.card-visual{background:var(--hover)}.card-visual>img{transition:transform 450ms var(--ease),filter 350ms}.card-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff36 49%,transparent 68%);transform:translateX(120%);transition:transform 650ms var(--ease);pointer-events:none}.visual-placeholder{background:color-mix(in srgb,var(--topic-color) 8%,var(--surface));color:var(--topic-color)}.visual-placeholder>svg{border:1px solid color-mix(in srgb,currentColor 20%,transparent);padding:12px;width:64px;height:64px;border-radius:19px;background:color-mix(in srgb,var(--surface) 75%,transparent)}.visual-lines{box-shadow:0 0 0 25px currentColor,0 0 0 55px currentColor;opacity:.055}.is-music .visual-placeholder{background:var(--music-soft);color:var(--music)}.card-content h2 a{background:linear-gradient(var(--accent),var(--accent)) no-repeat right bottom;background-size:0 1px;transition:background-size 260ms var(--ease),color var(--normal)}.card-bottom{border-color:color-mix(in srgb,var(--border) 70%,transparent)}.play-button{color:var(--music);font-weight:700}.play-button svg{background:var(--music-soft)}.play-button.is-playing svg{background:var(--music);color:var(--surface)}.type-badge{border:1px solid #ffffff5c;background:#fffffff2;border-radius:8px}.save-button[aria-pressed=true] svg{animation:bookmark-pop 300ms var(--ease)}.save-button[aria-pressed=true]{background:var(--accent-soft)}.read-link svg{color:var(--accent);transition:transform var(--normal) var(--ease)}.button{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;box-shadow:0 5px 14px #087f8b12;transition:background var(--normal),box-shadow var(--normal),border-color var(--normal)}.button::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff30 50%,transparent 80%);transform:translateX(120%);transition:transform 550ms var(--ease)}.button:hover::after{transform:translateX(-120%)}.button:active{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}.icon-button{transition:background var(--normal),color var(--normal),box-shadow var(--normal)}.icon-button:active svg{transform:scale(.9)}.icon-button svg{transition:transform var(--fast) var(--ease)}.aside-card{border-radius:20px;box-shadow:0 5px 16px #17344c03}.music-aside{border-top:3px solid var(--music)}.music-aside h2{color:var(--music)}.music-aside .mini-track>.icon-button{color:var(--music);background:var(--music-soft)}.discovery{position:relative;overflow:hidden;background:var(--accent-soft)}.discovery-symbol{display:grid;place-items:center;width:65px;height:65px;border-radius:20px;background:var(--surface);font-size:0}.discovery p{line-height:2}.empty-state{border-style:dashed;background:color-mix(in srgb,var(--surface) 80%,var(--bg))}.empty-art{border-radius:24px;background:var(--music-soft);color:var(--music)}.mobile-nav{background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(14px);padding-inline:14px;box-shadow:0 -5px 20px #17344c04}.mobile-nav a{position:relative;min-width:64px;border-radius:14px;transition:background var(--normal),color var(--normal)}.mobile-nav a.active{background:var(--accent-soft)}.mobile-nav a.active::before{content:'';position:absolute;top:1px;left:24px;right:24px;height:3px;background:var(--accent);border-radius:3px}.toast{animation:toast-in 180ms var(--ease);border:1px solid color-mix(in srgb,var(--surface) 20%,transparent)}.article-panel{border-radius:22px;box-shadow:0 7px 22px #17344c03}.article-label{display:inline-flex;align-items:center;background:var(--accent-soft);padding:4px 11px;border-radius:7px}.song-detail{border:1px solid color-mix(in srgb,var(--music) 15%,var(--border));background:var(--music-soft);border-radius:20px}.song-play{background:var(--music)}.song-info>span{color:var(--music)}.song-cover{border-radius:19px}.album-label{display:block;font-size:12px;margin-top:9px}.lyrics-panel{border:1px solid var(--border);border-radius:16px;margin-block:24px;padding:22px;background:var(--bg)}.lyrics-panel h2{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--music)}.lyrics-panel>div{white-space:pre-wrap;line-height:2.4;font-size:15px}.faq details[open]>p{animation:fade-in 180ms ease-out}.prose h2{border-right:3px solid var(--accent);padding-right:12px}.pagination a{border-radius:11px}.site-footer{border-top:1px solid var(--border)}
/* State-driven motion. No endless animation while the player is paused. */
.player{background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px);box-shadow:0 -10px 35px #16334e0c;animation:player-in 240ms var(--ease);--progress:0}.player::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--music);transform-origin:left;transform:scaleX(var(--progress));transition:transform 180ms linear}.player-cover{border-radius:12px;box-shadow:0 3px 10px #183c5f10}.player-track{position:relative}.player-track>span:not(.equalizer){color:var(--muted)}.play-main{background:var(--music);box-shadow:0 0 0 4px var(--music-soft);transition:box-shadow var(--normal),background var(--normal)}.play-main:hover{box-shadow:0 0 0 6px var(--music-soft)}.equalizer{position:absolute;left:0;bottom:0;height:14px;width:20px;display:flex!important;gap:2px;align-items:center;opacity:0;transition:opacity var(--normal);pointer-events:none}.equalizer i{display:block;background:var(--music);width:3px;height:13px;border-radius:2px;transform:scaleY(.3);transform-origin:center;animation:eq-bar 900ms ease-in-out infinite;animation-play-state:paused}.equalizer i:nth-child(2){animation-delay:-200ms}.equalizer i:nth-child(3){animation-delay:-450ms}.equalizer i:nth-child(4){animation-delay:-650ms}.player.is-playing .equalizer{opacity:1}.player.is-playing .equalizer i{animation-play-state:running}.player.is-playing .player-cover{outline:2px solid color-mix(in srgb,var(--music) 50%,transparent);outline-offset:2px}.queue-panel{border-radius:19px;box-shadow:0 14px 50px #10294122;animation:queue-in 160ms var(--ease)}.queue-options{display:flex;gap:7px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:12px}.queue-options .icon-button[aria-pressed=true]{background:var(--music-soft);color:var(--music)}.queue-options select{font-size:12px;min-width:0;width:100%;flex:1;padding:6px}.queue-panel>button{border-radius:9px}.queue-panel>strong{color:var(--music)}.page-loading{opacity:.75;position:relative}.page-loading::before{content:'';height:3px;background:var(--accent);position:absolute;top:0;left:0;width:35%;transform:translateX(-100%);animation:load-rail 1s ease-in-out infinite;z-index:10}.collection-page{padding-block:30px}.collection-heading{display:flex;align-items:center;gap:16px;margin-bottom:30px}.collection-heading h1{font-size:27px;margin:0 0 7px}.collection-heading p{color:var(--muted);font-size:14px;margin:0}.collection-mark{width:62px;height:62px;display:grid;place-items:center;background:var(--music-soft);color:var(--music);border:1px solid color-mix(in srgb,var(--music) 15%,transparent);border-radius:20px;flex-shrink:0}.playlist-grid{display:grid;grid-template-columns:1fr;gap:22px}.playlist-card{background:var(--surface);border:1px solid var(--border);padding:18px;border-radius:22px;transition:border-color var(--normal),box-shadow var(--normal)}.playlist-card h2{margin:18px 0 5px;font-size:19px}.playlist-card p{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.playlist-card>span{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--music)}.playlist-card>span>svg:last-child{margin-right:auto}.playlist-art{height:160px;display:flex;align-items:center;justify-content:center;gap:24px;background:var(--music-soft);color:var(--music);border-radius:16px;position:relative;overflow:hidden}.playlist-art::before,.playlist-art::after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid currentColor;opacity:.08;left:-40px;bottom:-75px}.playlist-art::after{width:230px;height:230px;left:-75px;bottom:-110px}.sound-lines{display:flex;gap:5px;height:40px;align-items:center}.sound-lines i{display:block;width:5px;height:22px;background:currentColor;border-radius:8px}.sound-lines i:nth-child(2){height:40px}.sound-lines i:nth-child(3){height:30px}.playlist-hero{padding:25px;border:1px solid var(--border);background:var(--surface);border-radius:24px;display:flex;flex-direction:column;gap:25px;margin-bottom:28px}.playlist-hero>.playlist-art{height:190px;min-width:190px}.playlist-hero h1{margin-block:10px;font-size:29px}.playlist-hero p{font-size:14px;color:var(--muted)}.playlist-hero .button{display:flex;width:fit-content;margin-top:16px;background:var(--music)}.feature-label{display:inline-flex;align-items:center;gap:7px;color:var(--music);font-size:12px}
/* Management UI */
.admin-sidebar{background:var(--surface);padding-top:28px}.admin-sidebar nav a{border:1px solid transparent;gap:13px}.admin-sidebar nav a svg{width:19px;height:19px}.admin-sidebar nav a.active{border-color:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 4px 12px #087f8b05}.admin-sidebar nav a:hover:not(.active){border-color:var(--border)}.admin-top .eyebrow{font-size:10px}.admin-user{padding:5px 10px 5px 5px;border-radius:24px;background:var(--surface);border:1px solid var(--border)}.welcome-panel{background:var(--accent-soft);border-radius:20px;position:relative;overflow:hidden}.welcome-panel::after{content:'';position:absolute;left:-35px;bottom:-80px;width:220px;height:220px;border:25px solid color-mix(in srgb,var(--accent) 4%,transparent);border-radius:50%;pointer-events:none}.welcome-panel .actions{position:relative;z-index:1}.panel{border-radius:18px;box-shadow:0 3px 12px #17344c03}.stat-card{border-radius:18px;transition:border-color var(--normal),box-shadow var(--normal)}.stat-card:nth-child(2) .stat-icon{background:var(--accent-soft)}.stat-card:nth-child(3) .stat-icon{background:#fff4e3;color:#aa7025}.stat-card:nth-child(4) .stat-icon{background:var(--music-soft);color:var(--music)}.stat-icon{width:44px;height:44px;border-radius:14px}.stat-card strong{font-size:29px}.admin-top h1{letter-spacing:-.7px}.panel h2 svg{color:var(--accent)}.editor-top{position:sticky;top:70px;z-index:12;background:var(--bg);padding-block:10px;border-bottom:1px solid var(--border);margin-top:-10px}.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus{border-color:var(--accent)}.form-panel input,.form-panel textarea,.form-panel select{transition:box-shadow var(--normal),border-color var(--normal),background var(--normal)}.form-panel input:focus-visible,.form-panel textarea:focus-visible,.form-panel select:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:2px}.form-panel h2{border-bottom:1px solid var(--border);padding-bottom:15px}.editor-toolbar{background:var(--bg);padding:7px}.editor-toolbar button{border:1px solid transparent}.editor-toolbar button:hover{border-color:var(--border)}.badge{border:1px solid color-mix(in srgb,currentColor 10%,transparent);border-radius:7px}.notice{border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);animation:fade-in 180ms ease-out}.variant-editor{margin-top:25px;padding-top:20px;border-top:1px solid var(--border)}.variant-editor h3{font-size:13px;margin:0}.variant-editor .button{font-size:11px;padding:6px 9px}.variant-row{position:relative;border:1px solid var(--border);border-radius:11px;padding:12px;margin-bottom:12px;background:var(--bg)}.variant-row label{font-size:11px}.variant-row>.icon-button{position:absolute;top:3px;left:3px;width:32px;min-width:32px;height:32px;min-height:32px}.variant-row>label:first-child{padding-left:30px}.connect-emblem{width:75px;height:75px;border-radius:23px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:25px}.consent-panel{max-width:750px}.consent-panel p{font-size:14px;color:var(--muted)}.scope-list{padding:0;list-style:none;margin-block:25px}.scope-list li{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:14px}.scope-list svg{color:var(--accent)}.consent-panel small{display:block;margin-top:22px;color:var(--muted);font-size:12px}.endpoint-box{padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:11px;overflow-wrap:anywhere;font:12px/1.8 monospace;color:var(--ink);user-select:all}.permission-cards{display:grid;gap:12px}.permission-cards>div{display:grid;grid-template-columns:35px 1fr;gap:2px 8px;padding:12px;background:var(--bg);border-radius:12px}.permission-cards svg{grid-row:1/3;align-self:center;color:var(--accent)}.permission-cards strong{font-size:12px}.permission-cards small{font-size:10px;color:var(--muted)}.setup-steps{font-size:13px;color:var(--muted);line-height:2.5;padding-right:23px}.connection-welcome>svg{color:var(--accent);opacity:.55}.settings-grid .panel>p.muted{font-size:12px;line-height:2}.playlist-select{max-height:360px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:10px}.playlist-select .check-label{border-bottom:1px solid var(--border);padding-bottom:8px;margin:8px 0}.playlist-select small{display:block;font-size:11px;color:var(--muted)}.playlist-admin-row{display:flex;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.playlist-admin-row>div:nth-child(2){flex:1;min-width:0}.playlist-admin-row strong{font-size:13px;display:block;overflow-wrap:anywhere}.playlist-admin-row small{display:block;font-size:11px;color:var(--muted)}.album-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--music-soft);color:var(--music);border-radius:12px}.login-panel{box-shadow:0 20px 70px #17344c0a;border-radius:25px}.login-body{background:var(--bg)}
@keyframes bookmark-pop{0%{transform:scale(.8)}55%{transform:scale(1.16)}100%{transform:scale(1)}}@keyframes fade-in{from{opacity:.2}to{opacity:1}}@keyframes toast-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@keyframes player-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes queue-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes eq-bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes load-rail{0%{transform:translateX(-100%)}100%{transform:translateX(390%)}}
@media(hover:hover) and (pointer:fine){.content-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 9px 25px #17344c0a}.content-card:hover::after{opacity:.2}.content-card:hover .card-visual>img{transform:scale(1.035)}.content-card:hover .card-visual::after{transform:translateX(-120%)}.content-card:hover h2 a{background-size:100% 1px}.read-link:hover svg{transform:translateX(-3px)}.playlist-card:hover,.stat-card:hover{border-color:var(--accent);box-shadow:0 8px 24px #17344c0a}}
@media(min-width:640px){.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.playlist-hero{flex-direction:row;align-items:center}.playlist-hero>.playlist-art{width:230px;height:230px}.collection-heading h1{font-size:31px}}
@media(min-width:1000px){.playlist-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-top{top:0}.home-intro{padding-block:40px}.home-intro h1{font-size:34px}.collection-page{padding-block:38px}.desktop-nav{font-size:12px;gap:20px;margin-right:20px}}
@media(max-width:559px){.content-card{border-radius:17px}.card-visual{border-radius:12px;width:96px;height:112px}.card-content h2{font-size:16px;line-height:1.9}.card-meta{font-size:10px}.visual-placeholder>svg{width:53px;height:53px;padding:10px}.type-badge{font-size:9px}.home-intro{padding-block:23px}.home-intro h1{font-size:25px}.topics{padding-block:10px}.topics a{font-size:12px;padding-inline:12px}.player-track .equalizer{display:none!important}.collection-heading{gap:12px}.collection-heading h1{font-size:23px}.collection-mark{width:52px;height:52px;border-radius:16px}.playlist-hero{padding:20px}.stat-icon{width:35px;height:35px}.stat-card strong{font-size:25px}.connection-welcome>svg{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.page-loading::before{transform:none;width:100%;opacity:.5}.player.is-playing .equalizer i{transform:scaleY(.6)}}