:root{
  --paper:#efede6;--paper-2:#e3e0d8;--ink:#11110f;--ink-2:#20201c;--muted:#74736d;--line:#c8c4b9;
  --white:#fbfaf5;--red:#f13a2f;--red-dark:#b72620;--signal:#f13a2f;--danger:#cc2e25;
  --sidebar:246px;--player:92px;--radius:14px;--radius-lg:24px;--shadow:0 18px 70px rgba(17,17,15,.09);
  font-family:Arial,Helvetica,sans-serif;color-scheme:light;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{color:inherit}button,input,textarea,select{outline:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--red);outline-offset:2px}button{cursor:pointer}
.noise{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.micro{font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.micro.red{color:var(--red)}
.wordmark{display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font:700 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em}.glyph{display:grid;place-items:center;width:31px;height:31px;border:1.5px solid currentColor;border-radius:50%;font-size:13px;letter-spacing:0}.version{font:700 9px/1 ui-monospace,monospace;color:#949189;letter-spacing:.1em}

/* Auth */
.auth-body{min-height:100vh;overflow-x:hidden}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)}.auth-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:50px 62px 58px;border-right:1px solid var(--line);overflow:hidden}.auth-copy{position:relative;z-index:2;max-width:760px}.auth-copy h1{margin:22px 0 28px;font-size:clamp(64px,7vw,118px);line-height:.86;letter-spacing:-.075em;font-weight:700}.auth-copy h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.auth-copy>p:last-child{max-width:520px;color:#66645e;font-size:16px;line-height:1.6}.dot-grid{position:absolute;right:-140px;bottom:-160px;width:520px;height:520px;background-image:radial-gradient(var(--ink) 1.15px,transparent 1.15px);background-size:12px 12px;mask-image:radial-gradient(circle at center,#000 10%,transparent 72%);opacity:.24;transform:rotate(-9deg)}.auth-panel{display:grid;place-items:center;padding:60px;background:var(--ink)}.auth-form{width:min(390px,100%);color:var(--white);display:grid;gap:21px}.auth-form h2{font-size:38px;letter-spacing:-.05em;margin:8px 0 12px}.auth-form label,.small-modal label{display:grid;gap:8px;font:700 10px/1.2 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.auth-form input{height:54px;border:1px solid #4a4943;border-radius:8px;background:#1d1d1a;color:white;padding:0 15px;font-size:15px}.auth-form input:focus{border-color:#77756d}.auth-error{padding:12px 14px;border:1px solid rgba(241,58,47,.5);background:rgba(241,58,47,.1);color:#ff8b83;border-radius:8px;font-size:13px}.auth-note{color:#85837c;font-size:11px;line-height:1.5}.red-button{height:54px;border:0;border-radius:8px;background:var(--red);color:white;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:12px;letter-spacing:.04em;transition:transform .15s ease,background .15s ease}.red-button:hover{transform:translateY(-1px);background:#ff463b}

/* Layout */
.app-body{min-height:100vh;padding-bottom:var(--player);overflow-x:hidden}.app-shell{min-height:calc(100vh - var(--player));display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto var(--player) 0;width:var(--sidebar);display:flex;flex-direction:column;padding:28px 22px 22px;background:var(--ink);color:#f4f1e9;border-right:1px solid #292923;z-index:50}.sidebar-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid #34332e}.main-nav{display:grid;margin-top:27px}.nav-item{height:47px;width:100%;display:grid;grid-template-columns:28px 1fr 8px;align-items:center;gap:9px;border:0;border-bottom:1px solid #292923;background:transparent;color:#85837b;text-align:left;font-size:13px;transition:color .15s,transform .15s}.nav-item:hover{color:#dedbd3}.nav-item.active{color:#fff}.nav-item.active .nav-dot{background:var(--red)}.nav-num{font:600 9px/1 ui-monospace,monospace;color:#55534d}.nav-dot{width:5px;height:5px;border-radius:50%;background:transparent}.sidebar-lower{margin-top:auto;display:grid;gap:16px}.server-card{padding:15px;border:1px solid #393832;border-radius:11px;background:#181816}.server-line{display:flex;gap:8px;align-items:center;font:700 9px/1 ui-monospace,monospace;letter-spacing:.12em;color:#88867f}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px rgba(241,58,47,.10)}.server-card strong{display:block;margin-top:16px;font-size:22px;letter-spacing:-.05em}.server-card small{display:block;margin-top:3px;color:#68665f;font-size:10px}.owner-row{height:47px;display:grid;grid-template-columns:34px 1fr 28px;gap:10px;align-items:center}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e4e1d8;color:#161613;font-weight:800;font-size:12px}.owner-row strong,.owner-row small{display:block}.owner-row strong{font-size:11px}.owner-row small{margin-top:4px;color:#5f5d57;font:700 8px ui-monospace,monospace;letter-spacing:.12em}.logout-btn{border:0;background:transparent;color:#65635d;font-size:16px}.logout-btn:hover{color:white}
.main-stage{grid-column:2;min-width:0}.topbar{position:sticky;top:0;z-index:40;height:76px;display:grid;grid-template-columns:minmax(240px,540px) auto;justify-content:space-between;align-items:center;gap:24px;padding:0 38px;background:rgba(239,237,230,.91);backdrop-filter:blur(18px);border-bottom:1px solid rgba(200,196,185,.85)}.global-search{height:43px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.32)}.global-search input{min-width:0;border:0;background:transparent;font-size:13px;color:var(--ink)}.global-search input::placeholder{color:#87847d}.global-search kbd{font:700 8px ui-monospace,monospace;border:1px solid #c6c2b7;border-bottom-width:2px;border-radius:4px;padding:4px 6px;color:#817e76;background:#f6f4ed}.search-icon{font-size:19px;color:#64625c;transform:rotate(-10deg)}.primary-add{height:43px;padding:0 15px;border:0;border-radius:8px;background:var(--red);color:white;display:flex;align-items:center;gap:16px;font:800 10px ui-monospace,monospace;letter-spacing:.08em}.primary-add span:first-child{font-size:18px;font-weight:400}.primary-add:hover{background:#ff463b}.mobile-menu{display:none;border:0;background:transparent;font-size:20px}.content-wrap{padding:0 38px 90px;max-width:1560px;margin:0 auto}.view{display:none;animation:fadeIn .22s ease}.view.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Home */
.home-hero{min-height:390px;padding:74px 0 58px;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:60px;align-items:end;border-bottom:1px solid var(--line)}.hero-copy h1{margin:22px 0 25px;max-width:1000px;font-size:clamp(58px,6.7vw,108px);line-height:.87;letter-spacing:-.077em;font-weight:720}.hero-copy h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.05em}.hero-copy p{max-width:620px;margin:0;color:#66645e;font-size:15px;line-height:1.6}.hero-meter{justify-self:end;display:grid;justify-items:center;gap:12px}.meter-ring{width:142px;height:142px;border:1px solid #9b9890;border-radius:50%;display:grid;place-items:center;position:relative}.meter-ring:before,.meter-ring:after{content:"";position:absolute;inset:10px;border:1px dotted #b8b4aa;border-radius:50%}.meter-ring:after{inset:23px;border-style:solid;border-color:#d4d0c6}.meter-ring span{font:700 32px ui-monospace,monospace;letter-spacing:-.08em;z-index:1}.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.stat-strip>div{min-height:102px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-left:1px solid var(--line)}.stat-strip>div:first-child{border-left:0;padding-left:0}.stat-value{font:700 32px/1 ui-monospace,monospace;letter-spacing:-.07em}.section-block{padding:58px 0 14px}.section-heading{min-height:56px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.section-heading>div{display:flex;align-items:baseline;gap:15px}.section-heading h2{margin:0;font-size:28px;letter-spacing:-.045em}.section-index{font:700 9px ui-monospace,monospace;color:var(--red)}.text-button{border:0;background:transparent;color:#747169;font:700 9px ui-monospace,monospace;letter-spacing:.1em}.text-button:hover{color:var(--ink)}
.cover-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.media-tile{min-width:0;text-align:left;border:0;background:transparent;padding:0}.cover-art{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#d3d0c8;border:1px solid #d1cdc2}.cover-art img{width:100%;height:100%;object-fit:cover;display:block}.cover-fallback{background-color:#1c1c19;background-image:radial-gradient(#484741 1px,transparent 1px);background-size:8px 8px;color:#c3c0b7}.cover-fallback>span{position:absolute;inset:auto auto 10px 12px;font:700 38px/1 ui-monospace,monospace;color:rgba(255,255,255,.28)}.media-tile .cover-art:after,.album-card .cover-art:after{content:"▶";position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:white;font-size:11px;opacity:0;transform:translateY(6px);transition:.18s}.media-tile:hover .cover-art:after{opacity:1;transform:none}.tile-title{display:block;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:700}.tile-sub{display:block;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#77746d;font-size:10px}.track-stack{border-top:1px solid var(--line)}.compact-track{height:62px;display:grid;grid-template-columns:42px minmax(0,1.2fr) minmax(120px,.7fr) 80px;gap:12px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}.compact-track:hover{background:rgba(255,255,255,.27)}.compact-track .tiny-cover{width:36px;height:36px;border-radius:5px;object-fit:cover;background:#cbc8bf}.compact-track strong,.compact-track span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-track strong{font-size:12px}.compact-track span{font-size:10px;color:#79766f}.album-rail,.podcast-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}.album-card{border:0;background:transparent;text-align:left;padding:0;min-width:0}.album-card .tile-title{font-size:13px}.album-card .cover-art{border-radius:4px}.podcast-card{min-width:200px;display:grid;grid-template-columns:70px 1fr;gap:12px;padding:13px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.2);text-align:left}.podcast-card img,.podcast-card .podcast-fallback{width:70px;height:70px;border-radius:7px;object-fit:cover}.podcast-card strong{display:block;font-size:12px;margin-bottom:6px}.podcast-card span{font-size:10px;color:#77746d}

/* Pages */
.page-head{min-height:210px;padding:68px 0 36px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.page-head h1{margin:11px 0 7px;font-size:clamp(48px,5vw,78px);line-height:.9;letter-spacing:-.065em}.page-head p:last-child{margin:0;color:#77746d;font-size:13px}.page-controls{display:flex;gap:8px;align-items:center}.outline-button,.select-control{height:41px;border:1px solid #aaa69c;border-radius:7px;background:transparent;padding:0 13px;font:700 9px ui-monospace,monospace;letter-spacing:.09em}.outline-button:hover{background:var(--ink);color:white;border-color:var(--ink)}.select-control{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 11px) 17px;background-size:4px 4px;background-repeat:no-repeat}.transfer-badge{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;font:700 8px ui-monospace,monospace;letter-spacing:.1em}.track-table-wrap{padding-top:18px}.track-table-head,.track-row{display:grid;grid-template-columns:34px minmax(240px,1.4fr) minmax(150px,.8fr) 92px 62px 74px;gap:10px;align-items:center}.track-table-head{height:35px;border-bottom:1px solid var(--line);color:#85827a;font:700 8px ui-monospace,monospace;letter-spacing:.12em}.track-row{min-height:62px;border-bottom:1px solid var(--line);transition:background .12s}.track-row:hover{background:rgba(255,255,255,.3)}.track-num{color:#9a978f;font:600 10px ui-monospace,monospace}.row-main{min-width:0;border:0;background:transparent;display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:center;text-align:left;padding:5px 0}.row-cover{position:relative;width:40px;height:40px;border-radius:5px;overflow:hidden;background:#c8c5bc;background-size:7px 7px}.row-cover img{width:100%;height:100%;object-fit:cover}.row-cover>span{font-size:18px;left:7px;bottom:5px}.row-main strong,.row-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-main strong{font-size:12px}.row-main span{margin-top:4px;color:#79766f;font-size:10px}.row-album{min-width:0;border:0;background:transparent;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6f6d66;font-size:10px}.row-date,.row-duration{color:#85827b;font:600 9px ui-monospace,monospace}.row-actions{display:flex;justify-content:flex-end;gap:4px;opacity:.2}.track-row:hover .row-actions{opacity:1}.row-actions button,.mini-action{width:30px;height:30px;border:0;background:transparent;border-radius:50%}.row-actions button:hover,.mini-action:hover{background:rgba(0,0,0,.06)}.like-button.liked,.player .liked{color:var(--red)}
.big-cover-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 16px;padding:32px 0 70px}.big-cover-grid .album-card .cover-art{box-shadow:0 9px 30px rgba(0,0,0,.07)}.collection-list{padding:25px 0}.collection-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);text-align:left}.collection-row button{border:0;background:transparent;text-align:left}.collection-icon{width:58px;height:58px;border-radius:8px;display:grid;place-items:center;background:#1c1c19;color:white;background-image:radial-gradient(#4b4a43 1px,transparent 1px);background-size:7px 7px;font:700 18px ui-monospace,monospace}.collection-row strong{display:block;font-size:14px}.collection-row span{display:block;margin-top:5px;color:#79766f;font-size:10px}.collection-row .chev{font-size:18px;color:#77746d}.podcast-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:32px 0 70px}.podcast-tile{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.2);overflow:hidden;text-align:left}.podcast-tile .podcast-art{aspect-ratio:1;overflow:hidden;background:#1c1c19}.podcast-tile img{width:100%;height:100%;object-fit:cover}.podcast-tile-copy{padding:15px}.podcast-tile-copy strong{display:block;font-size:14px}.podcast-tile-copy span{display:block;margin-top:7px;color:#77746d;font-size:10px}.job-list{padding:25px 0 70px}.job-row{display:grid;grid-template-columns:42px minmax(0,1fr) 90px;gap:13px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.job-icon{width:36px;height:36px;border:1px solid #aaa69c;border-radius:50%;display:grid;place-items:center;font:700 11px ui-monospace,monospace}.job-row h3{margin:0;font-size:13px}.job-row p{margin:5px 0 8px;color:#77746d;font-size:10px}.job-progress{height:3px;background:#d4d1c8;overflow:hidden}.job-progress span{display:block;height:100%;background:var(--red);width:0}.job-percent{text-align:right;font:700 10px ui-monospace,monospace}.job-row.error .job-icon{color:var(--danger);border-color:var(--danger)}.job-row.error .job-progress span{background:var(--danger)}

/* Detail pages */
.detail-hero{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:end;padding:55px 0 36px;border-bottom:1px solid var(--line)}.detail-cover{width:260px;aspect-ratio:1;object-fit:cover;border-radius:5px;background:#1d1d1a;box-shadow:0 18px 50px rgba(0,0,0,.12)}.detail-cover.fallback{display:grid;place-items:center;background-image:radial-gradient(#4c4b44 1px,transparent 1px);background-size:9px 9px;color:#aaa79e;font-size:60px}.detail-copy h1{margin:12px 0 14px;font-size:clamp(48px,6vw,92px);line-height:.88;letter-spacing:-.07em}.detail-copy p{max-width:650px;color:#706d66;font-size:12px;line-height:1.6}.detail-meta{display:flex;gap:15px;align-items:center;margin-top:19px;font:700 9px ui-monospace,monospace;color:#6e6b64;letter-spacing:.08em}.detail-actions{display:flex;gap:8px;margin-top:24px}.circle-play{width:52px;height:52px;border:0;border-radius:50%;background:var(--red);color:#fff;font-size:14px}.detail-list{padding-top:16px}.episode-row{display:grid;grid-template-columns:minmax(0,1fr) 105px 82px;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);align-items:center}.episode-row h3{margin:0 0 6px;font-size:13px}.episode-row p{margin:0;color:#77746d;font-size:10px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.episode-meta{font:600 9px ui-monospace,monospace;color:#77746d}.episode-actions{display:flex;justify-content:flex-end;gap:5px}.episode-actions button{height:32px;border:1px solid var(--line);border-radius:6px;background:transparent;font:700 8px ui-monospace,monospace}.episode-actions button:hover{background:var(--ink);color:white}.episode-actions .downloaded{color:#3f6e24}.search-section{padding:30px 0;border-bottom:1px solid var(--line)}.search-section h2{margin:0 0 16px;font-size:22px;letter-spacing:-.035em}.empty-state{padding:45px 0;color:#79766f}.empty-state strong{display:block;color:var(--ink);font-size:18px;margin-bottom:8px}

/* Player */
.player{position:fixed;left:0;right:0;bottom:0;height:var(--player);z-index:80;display:grid;grid-template-columns:minmax(250px,1fr) minmax(380px,1.2fr) minmax(210px,1fr);align-items:center;padding:0 24px;background:#0d0d0c;color:#f4f1ea;border-top:1px solid #31302b}.player-track{min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr) 32px;gap:11px;align-items:center}.player-cover{position:relative;width:52px;height:52px;border-radius:7px;overflow:hidden;background-size:7px 7px}.player-cover img{width:100%;height:100%;object-fit:cover}.player-cover>span:not(.cover-playing-ring){font-size:22px;left:8px;bottom:6px}.player-copy{min-width:0}.player-copy strong,.player-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-copy strong{font-size:11px}.player-copy span{margin-top:5px;color:#78766f;font-size:9px}.player-center{display:grid;gap:8px}.player-controls{display:flex;justify-content:center;align-items:center;gap:18px}.player-controls button{border:0;background:transparent;color:#87857e;width:28px;height:28px}.player-controls button:hover,.player-controls button.active{color:#fff}.player-controls .play-button{width:36px;height:36px;border-radius:50%;background:#f1eee5;color:#111;font-size:11px}.player-controls .play-button:hover{color:#111;transform:scale(1.03)}.timeline{display:grid;grid-template-columns:38px 1fr 38px;gap:8px;align-items:center;color:#77746d;font:600 8px ui-monospace,monospace}.timeline span:last-child{text-align:right}input[type=range]{appearance:none;height:3px;background:#45443f;border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#f1eee5;opacity:0;transition:.1s}.timeline:hover input[type=range]::-webkit-slider-thumb,.player-right:hover input[type=range]::-webkit-slider-thumb{opacity:1}.player-right{display:flex;justify-content:flex-end;align-items:center;gap:9px;color:#74726c;font:700 8px ui-monospace,monospace}.player-right input{width:90px}.player .mini-action{color:#8d8a83}
.queue-drawer{position:fixed;right:0;top:0;bottom:var(--player);width:min(390px,92vw);z-index:90;background:#181816;color:#f2efe7;transform:translateX(102%);transition:transform .22s ease;border-left:1px solid #33322d;padding:23px;box-shadow:-20px 0 60px rgba(0,0,0,.18)}.queue-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid #33322d}.drawer-head h2{margin:6px 0 0;font-size:28px;letter-spacing:-.05em}.close-button{width:36px;height:36px;border:1px solid currentColor;border-radius:50%;background:transparent;font-size:20px;line-height:1}.queue-items{padding-top:10px;overflow:auto;height:calc(100% - 90px)}.queue-item{display:grid;grid-template-columns:38px minmax(0,1fr) 28px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #2d2c28}.queue-item img,.queue-item .queue-cover{width:38px;height:38px;border-radius:4px;object-fit:cover}.queue-item strong,.queue-item span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item strong{font-size:10px}.queue-item span{margin-top:4px;color:#77756f;font-size:8px}.queue-item.current strong{color:var(--red)}

/* Modals */
.modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(12,12,10,.62);backdrop-filter:blur(7px);display:grid;place-items:center;padding:24px}.modal-backdrop[hidden]{display:none}.add-modal{width:min(850px,100%);max-height:90vh;overflow:auto;border-radius:17px;background:var(--paper);box-shadow:0 30px 100px rgba(0,0,0,.28)}.modal-head{min-height:88px;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.modal-head h2{margin:5px 0 0;font-size:27px;letter-spacing:-.045em}.modal-tabs{height:48px;display:flex;padding:0 25px;border-bottom:1px solid var(--line);gap:24px}.modal-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#77746d;font:700 9px ui-monospace,monospace;letter-spacing:.1em}.modal-tabs button.active{color:var(--ink);border-bottom-color:var(--red)}.modal-panel{display:none;padding:25px}.modal-panel.active{display:block}.utility-panel{padding:24px;border-radius:12px;background:#171715;color:#f7f4ec;display:grid;grid-template-columns:50px 1fr;gap:17px}.utility-number{width:42px;height:42px;border:1px solid #55534c;border-radius:50%;display:grid;place-items:center;color:var(--red);font:700 10px ui-monospace,monospace}.utility-copy label{font-size:19px;font-weight:700;letter-spacing:-.025em}.utility-copy p{margin:6px 0 0;color:#77756e;font-size:11px;line-height:1.5}.utility-panel textarea,.utility-panel input{grid-column:1/-1;width:100%;border:1px solid #45443e;border-radius:8px;background:#242420;color:white;padding:14px 15px;resize:vertical;font-size:13px}.utility-action{grid-column:1/-1;height:49px;border:0;border-radius:8px;background:var(--red);color:white;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font:800 10px ui-monospace,monospace;letter-spacing:.08em}.utility-action:disabled{opacity:.5;cursor:wait}.support-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;color:#77746d;font:700 8px ui-monospace,monospace;letter-spacing:.08em}.drop-zone{min-height:300px;border:1px dashed #aaa69b;border-radius:12px;display:grid;place-items:center;align-content:center;text-align:center;padding:30px}.drop-zone.drag{border-color:var(--red);background:rgba(241,58,47,.04)}.drop-zone h3{margin:10px 0 5px;font-size:23px;letter-spacing:-.04em}.drop-zone p{margin:0 0 18px;color:#77746d;font-size:11px}.drop-icon{font-size:34px;color:var(--red)}.outline-light{height:38px;border:1px solid #aaa69b;background:transparent;border-radius:7px;font:700 9px ui-monospace,monospace;letter-spacing:.08em;padding:0 14px}.small-modal{width:min(480px,100%);background:var(--paper);border-radius:15px;overflow:hidden}.small-modal form{padding:24px;display:grid;gap:16px}.small-modal input,.small-modal textarea{width:100%;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.4);padding:12px;font-size:13px}.small-modal .red-button{margin-top:3px}
.toast-stack{position:fixed;right:22px;bottom:calc(var(--player) + 18px);z-index:150;display:grid;gap:8px;pointer-events:none}.toast{min-width:260px;max-width:370px;padding:13px 15px;border-radius:8px;background:#191917;color:#f6f3eb;box-shadow:0 12px 50px rgba(0,0,0,.2);display:grid;grid-template-columns:7px 1fr;gap:10px;align-items:start;animation:toastIn .2s ease}.toast:before{content:"";width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--signal)}.toast.error:before{background:var(--red)}.toast strong{display:block;font-size:11px}.toast span{display:block;color:#88867f;margin-top:4px;font-size:9px;line-height:1.45}@keyframes toastIn{from{transform:translateY(6px);opacity:0}}

@media(max-width:1200px){:root{--sidebar:210px}.content-wrap{padding-left:28px;padding-right:28px}.topbar{padding-left:28px;padding-right:28px}.cover-grid{grid-template-columns:repeat(4,1fr)}.big-cover-grid{grid-template-columns:repeat(4,1fr)}.podcast-grid{grid-template-columns:repeat(3,1fr)}.track-table-head,.track-row{grid-template-columns:30px minmax(220px,1.4fr) minmax(110px,.7fr) 62px 70px}.track-table-head span:nth-child(4),.row-date{display:none}}
@media(max-width:900px), (pointer:coarse) and (hover:none){:root{--sidebar:260px;--player:82px}.app-shell{display:block}.sidebar{transform:translateX(-102%);transition:transform .22s ease;bottom:var(--player);box-shadow:20px 0 70px rgba(0,0,0,.25)}.sidebar.open{transform:none}.main-stage{display:block}.mobile-menu{display:block}.topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:0 18px;gap:10px}.global-search kbd{display:none}.primary-add span:last-child{display:none}.primary-add{width:43px;justify-content:center;padding:0}.content-wrap{padding-left:18px;padding-right:18px}.home-hero{grid-template-columns:1fr;min-height:0;padding-top:55px}.hero-meter{display:none}.hero-copy h1{font-size:clamp(52px,11vw,80px)}.stat-strip>div{padding:0 12px;display:grid;align-content:center;gap:5px}.stat-strip>div:first-child{padding-left:0}.stat-value{font-size:25px}.cover-grid{grid-template-columns:repeat(3,1fr)}.big-cover-grid{grid-template-columns:repeat(3,1fr)}.podcast-grid{grid-template-columns:repeat(2,1fr)}.player{grid-template-columns:minmax(0,1fr) auto;height:var(--player);padding:0 14px}.player-center{display:flex}.player-center .timeline,.player-controls button:not(.play-button){display:none}.player-right{display:none}.detail-hero{grid-template-columns:180px minmax(0,1fr);gap:24px}.detail-cover{width:180px}.track-table-head,.track-row{grid-template-columns:26px minmax(0,1fr) 55px 55px}.track-table-head span:nth-child(3),.row-album{display:none}.row-actions{opacity:1}.track-table-head span:nth-child(6){display:block}.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.auth-panel{min-height:100vh}}
@media(max-width:620px){.content-wrap{padding-bottom:65px}.topbar{height:68px}.global-search{height:39px}.home-hero{padding:42px 0}.hero-copy h1{font-size:48px}.hero-copy p{font-size:13px}.stat-strip{grid-template-columns:repeat(2,1fr)}.stat-strip>div{border-bottom:1px solid var(--line);min-height:78px}.stat-strip>div:nth-child(3){border-left:0}.cover-grid{grid-template-columns:repeat(2,1fr)}.big-cover-grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}.podcast-grid{grid-template-columns:1fr}.page-head{min-height:165px;padding-top:42px;align-items:flex-start;flex-direction:column}.page-head h1{font-size:52px}.page-controls{width:100%}.select-control{flex:1}.track-table-head,.track-row{grid-template-columns:24px minmax(0,1fr) 52px}.track-table-head span:nth-child(5),.row-duration{display:none}.row-actions{gap:0}.row-actions .like-button{display:none}.detail-hero{grid-template-columns:1fr;padding-top:30px}.detail-cover{width:min(78vw,280px)}.detail-copy h1{font-size:52px}.episode-row{grid-template-columns:minmax(0,1fr) 72px}.episode-meta{display:none}.utility-panel{grid-template-columns:42px 1fr;padding:18px}.modal-panel{padding:16px}.modal-head{padding:18px}.modal-tabs{padding:0 18px;gap:14px}.player-track{grid-template-columns:45px minmax(0,1fr)}.player-cover{width:45px;height:45px}.player-track .mini-action{display:none}.compact-track{grid-template-columns:38px minmax(0,1fr) 60px}.compact-track span:nth-child(3){display:none}.auth-panel{padding:28px}.toast-stack{left:12px;right:12px;bottom:calc(var(--player) + 12px)}.toast{min-width:0;max-width:none}}
/* Dynamic pickers / menus */
.picker-modal{width:min(720px,100%);max-height:84vh;display:flex;flex-direction:column;background:var(--paper);border-radius:15px;overflow:hidden}.picker-tools{display:grid;grid-template-columns:1fr 180px;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}.picker-tools input{border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.45);padding:0 13px}.picker-tools .red-button{height:42px}.picker-list{overflow:auto;padding:6px 18px 18px}.picker-list label{min-height:55px;display:grid;grid-template-columns:22px 38px minmax(0,1fr);gap:10px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}.picker-list label>span:nth-of-type(1){width:38px;height:38px;border-radius:4px;overflow:hidden;background:#cdc9bf}.picker-list img{width:100%;height:100%;object-fit:cover}.picker-list strong,.picker-list small{display:block}.picker-list strong{font-size:11px}.picker-list small{margin-top:4px;color:#79766f;font-size:9px}.picker-list input{accent-color:var(--red)}.choice-modal{width:min(460px,100%);max-height:75vh;background:var(--paper);border-radius:14px;overflow:hidden}.choice-list{max-height:55vh;overflow:auto;padding:10px 18px 20px}.choice-list button{width:100%;display:block;text-align:left;padding:13px 4px;border:0;border-bottom:1px solid var(--line);background:transparent}.choice-list button:hover{padding-left:9px}.choice-list strong,.choice-list span{display:block}.choice-list strong{font-size:12px}.choice-list span{margin-top:4px;color:#77746d;font-size:9px}.context-menu{position:fixed;z-index:200;width:185px;padding:6px;background:#171715;color:#eeeae2;border:1px solid #393832;border-radius:8px;box-shadow:0 16px 45px rgba(0,0,0,.2)}.context-menu button{width:100%;height:36px;border:0;border-radius:5px;background:transparent;color:inherit;text-align:left;padding:0 10px;font-size:10px}.context-menu button:hover{background:#272723}.context-menu button.danger{color:#ff746b}.queue-item{width:100%;border:0;background:transparent;color:inherit;text-align:left}.queue-item>span:last-child{font:600 8px ui-monospace,monospace;color:#6f6d66;text-align:right}
@media(max-width:620px){.picker-tools{grid-template-columns:1fr}.picker-tools .red-button{width:100%}}

/* --------------------------------------------------------------------------
   Player polish / liked songs / active-track signal
   -------------------------------------------------------------------------- */
:root{--signal-ink:#d9342b}
.nav-favorites{grid-template-columns:28px 18px 1fr 8px}.nav-heart{font-size:12px;color:#68665f;transform:translateY(-1px)}.nav-favorites.active .nav-heart,.nav-favorites:hover .nav-heart{color:var(--signal)}
.favorites-head{position:relative}.favorites-head:after{content:"♥";position:absolute;right:3px;bottom:20px;font:700 clamp(70px,9vw,130px)/1 Arial,sans-serif;color:rgba(17,17,15,.045);pointer-events:none}.liked-summary{min-height:92px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.liked-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--signal);font-size:18px}.liked-summary strong,.liked-summary span{display:block}.liked-summary strong{font-size:26px;letter-spacing:-.05em}.liked-summary .micro{margin-top:3px;font-size:8px}

.track-row.is-current-track{background:rgba(241,58,47,.10)}.track-row.is-current-track .row-title{color:var(--signal-ink)}.track-row.is-current-track .row-artist{color:#c13a32}.track-row.is-current-track .row-cover{box-shadow:0 0 0 2px rgba(241,58,47,.48)}.track-row.is-current-track .track-num{color:var(--signal-ink)}.media-tile.is-current-track .tile-title,.compact-track.is-current-track strong{color:var(--signal-ink)}.playing-eq{width:16px;height:16px;display:inline-flex;align-items:flex-end;justify-content:center;gap:2px}.playing-eq i{display:block;width:2.5px;height:5px;border-radius:2px;background:currentColor;transform-origin:bottom}.track-row.is-playing .playing-eq i:nth-child(1){animation:latchEq .62s ease-in-out infinite alternate}.track-row.is-playing .playing-eq i:nth-child(2){animation:latchEq .42s ease-in-out -.18s infinite alternate}.track-row.is-playing .playing-eq i:nth-child(3){animation:latchEq .55s ease-in-out -.31s infinite alternate}@keyframes latchEq{from{height:4px}to{height:14px}}

.player{height:var(--player);grid-template-columns:minmax(280px,1fr) minmax(430px,1.3fr) minmax(280px,1fr);padding:0 22px;box-shadow:0 -10px 34px rgba(0,0,0,.08)}.player-track{grid-template-columns:54px minmax(0,1fr) 38px;gap:12px}.player-cover{width:54px;height:54px;border-radius:8px}.player-copy{display:flex;flex-direction:column;justify-content:center}.player-copy .now-label{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:#5f5d57;font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em}.player.is-playing .player-copy .now-label{color:var(--signal)}.now-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.player.is-playing .now-dot{box-shadow:0 0 0 4px rgba(241,58,47,.10)}.player-copy strong{font-size:12px}.player-copy span:not(.now-label){margin-top:4px}.player.is-playing #playerTitle{color:var(--signal)}.player-like{font-size:18px!important}.player .liked{color:var(--signal)!important}
.player-cover>.cover-playing-ring{position:absolute;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;border:2px solid transparent;border-radius:inherit;pointer-events:none;z-index:2}.player.is-playing .player-cover>.cover-playing-ring{border-color:var(--red);box-shadow:inset 0 0 0 1px rgba(17,17,15,.22)}

.player-center{gap:7px}.player-controls{gap:14px}.player-controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;transition:color .15s,background .15s,transform .12s}.player-controls button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.player-controls #prevButton svg,.player-controls #nextButton svg{fill:currentColor;stroke:none;width:18px;height:18px}.player-controls .play-button{width:42px;height:42px;background:#f4f1e9;color:#0e0e0d;box-shadow:0 0 0 1px rgba(255,255,255,.06)}.player-controls .play-button svg{width:19px;height:19px;fill:currentColor;stroke:none}.player-controls .play-button .icon-pause{display:none}.player-controls .play-button.is-playing .icon-play{display:none}.player-controls .play-button.is-playing .icon-pause{display:block}.player-controls button:not(.play-button):hover{background:#242420}.player-controls button.active{color:var(--signal)}

.timeline{grid-template-columns:42px minmax(120px,1fr) 42px;gap:10px}.timeline input,.player-right input{width:100%;--range-progress:0%;appearance:none;-webkit-appearance:none;height:4px;border-radius:999px;background:linear-gradient(90deg,#f3f0e8 0 var(--range-progress),#45443f var(--range-progress) 100%);cursor:pointer}.timeline input::-webkit-slider-thumb,.player-right input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:0;border-radius:50%;background:#f4f1e9;opacity:1;box-shadow:0 0 0 2px #0d0d0c;transition:transform .12s}.timeline input::-moz-range-thumb,.player-right input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#f4f1e9;opacity:1;box-shadow:0 0 0 2px #0d0d0c}.timeline input:hover::-webkit-slider-thumb,.player-right input:hover::-webkit-slider-thumb{transform:scale(1.2)}

.player-right{gap:11px}.player-right input{width:96px}.queue-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #34332e;border-radius:50%;background:#171715;color:#a19e95;transition:.15s}.queue-button:hover{color:#fff;border-color:#68665e;background:#242420}.queue-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.player-visualizer{width:92px;height:30px;opacity:.85}.player:not(.is-playing) .player-visualizer{opacity:.28}.queue-item.current{background:rgba(241,58,47,.045)}.queue-item.current strong{color:var(--signal)}

@media(max-width:1200px){.player{grid-template-columns:minmax(250px,1fr) minmax(390px,1.2fr) minmax(215px,.8fr)}.player-visualizer{display:none}.player-right{gap:8px}.player-right input{width:76px}}
@media(max-width:900px), (pointer:coarse) and (hover:none){.nav-favorites{grid-template-columns:28px 18px 1fr 8px}.player{grid-template-columns:minmax(0,1fr) auto}.player-center{display:flex}.player-center .timeline,.player-controls button:not(.play-button){display:none}.player-right{display:none}.player-controls .play-button{width:42px;height:42px}.favorites-head:after{display:none}}
@media(max-width:620px){.liked-summary{min-height:72px}.liked-mark{width:40px;height:40px}.player-copy .now-label{display:none}}


/* SYS.04 — optical alignment cleanup */
.sidebar-lower{gap:0;padding-top:18px;border-top:1px solid #292923}.owner-row{margin:0;min-height:52px;height:auto}.owner-row form{display:grid;place-items:center;margin:0}.logout-btn{display:grid;place-items:center;width:28px;height:28px;padding:0;line-height:1}

.liked-summary{min-height:92px;display:flex;align-items:center;gap:17px;padding:0 1px}.liked-summary>.liked-mark{flex:0 0 46px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;background:var(--ink);color:var(--signal);line-height:0}.liked-mark svg{display:block;width:18px;height:18px;fill:currentColor;transform:translateY(.25px)}.liked-summary-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}.liked-summary-copy strong,.liked-summary-copy span{display:block}.liked-summary-copy strong{font-size:26px;line-height:.9;letter-spacing:-.05em}.liked-summary-copy .micro{margin-top:7px;font-size:8px;line-height:1}

.player-track{align-items:center}.player-copy{min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0}.player-copy .now-label{height:10px;display:flex;align-items:center;gap:6px;margin:0 0 5px!important;padding:0;color:#5f5d57;font:700 7px/10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;white-space:nowrap}.player-copy .now-label>span{display:block;margin:0!important;overflow:visible;text-overflow:clip}.player-copy .now-dot{flex:0 0 5px;width:5px;height:5px;margin:0!important;border-radius:50%;background:currentColor}.player-copy #playerTitle{display:block;margin:0;line-height:1.05}.player-copy #playerArtist{display:block;margin:5px 0 0;line-height:1.05}

.player-controls button{display:flex;align-items:center;justify-content:center}.player-controls button svg{display:block;flex:0 0 auto;transform:none}.player-controls #shuffleButton svg{width:18px;height:18px;transform:translateY(.25px)}.player-controls #repeatButton svg{transform:translateY(.25px)}

@media(max-width:620px){.liked-summary>.liked-mark{flex-basis:40px;width:40px;height:40px}.liked-mark svg{width:16px;height:16px}.liked-summary-copy strong{font-size:23px}}


/* SYS.05 - red signal system + exact player-cover alignment */
.player.is-playing .player-copy .now-label,
.player.is-playing #playerTitle,
.player .liked,
.player-controls button.active,
.nav-favorites.active .nav-heart,
.nav-favorites:hover .nav-heart,
.queue-item.current strong{color:var(--red)!important}
.player.is-playing .now-dot{box-shadow:0 0 0 4px rgba(241,58,47,.10)}
.track-row.is-current-track{background:rgba(241,58,47,.08)}
.track-row.is-current-track .row-title,
.track-row.is-current-track .track-num,
.media-tile.is-current-track .tile-title,
.compact-track.is-current-track strong{color:var(--red-dark)}
.track-row.is-current-track .row-artist{color:#bd4b43}
.track-row.is-current-track .row-cover{box-shadow:0 0 0 2px rgba(241,58,47,.46)}
.queue-item.current{background:rgba(241,58,47,.045)}
.liked-summary>.liked-mark{color:var(--red)}

/* --------------------------------------------------------------------------
   SYS.06 — mobile app / PWA shell
   -------------------------------------------------------------------------- */
.install-app{width:100%;min-height:52px;margin:0 0 14px;padding:9px 10px;border:1px solid #393832;border-radius:9px;background:#181816;color:#dedbd3;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;text-align:left}.install-app:hover{border-color:#5b5850;background:#20201d}.install-app-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:19px;line-height:1}.install-app strong,.install-app small{display:block}.install-app strong{font:800 9px/1.15 ui-monospace,monospace;letter-spacing:.11em}.install-app small{margin-top:4px;color:#706e67;font:700 7px/1.1 ui-monospace,monospace;letter-spacing:.08em}
.mobile-tabbar,.mobile-now-playing{display:none}

@media(max-width:900px), (pointer:coarse) and (hover:none){
  :root{--mobile-player:68px;--mobile-tabs:66px;--player:var(--mobile-player)}
  html{background:#0d0d0c;overscroll-behavior-y:none}
  body.app-body{padding-bottom:calc(var(--mobile-player) + var(--mobile-tabs) + env(safe-area-inset-bottom));background:var(--paper);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
  .app-shell{min-height:100vh}
  .sidebar{bottom:calc(var(--mobile-player) + var(--mobile-tabs) + env(safe-area-inset-bottom));padding-top:calc(24px + env(safe-area-inset-top));z-index:120}
  .sidebar:after{content:"";position:fixed;inset:0;left:var(--sidebar);background:rgba(0,0,0,.38);opacity:0;pointer-events:none;transition:opacity .2s}
  .sidebar.open:after{opacity:1;pointer-events:auto}
  .topbar{height:64px;padding:env(safe-area-inset-top) 14px 0;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;background:rgba(239,237,230,.96)}
  .mobile-menu{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;font-size:0}
  .mobile-menu:before{content:"";width:17px;height:12px;background:linear-gradient(var(--ink),var(--ink)) 0 0/17px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 5px/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 10px/17px 1.5px no-repeat}
  .global-search{height:40px;border-radius:20px;padding:0 13px;background:rgba(255,255,255,.45)}
  .global-search input{font-size:12px}
  .search-icon{font-size:17px}
  .primary-add{display:none}
  .content-wrap{padding:0 14px 36px}
  .home-hero{padding-top:38px}
  .hero-copy h1{font-size:clamp(48px,12vw,72px);line-height:.89}
  .hero-copy>p{max-width:34em}
  .section-block{padding-top:34px}
  .section-heading{margin-bottom:15px;align-items:end}
  .section-heading h2{font-size:24px}
  .section-heading .text-button{font-size:7px}
  .cover-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 11px}
  .media-tile .cover-art:after,.album-card .cover-art:after{opacity:1;transform:none;width:34px;height:34px;right:8px;bottom:8px}
  .album-rail,.podcast-rail{grid-auto-columns:minmax(145px,44vw);scroll-snap-type:x proximity;scrollbar-width:none;margin-right:-14px;padding-right:14px}.album-rail::-webkit-scrollbar,.podcast-rail::-webkit-scrollbar{display:none}.album-card,.podcast-card{scroll-snap-align:start}
  .page-head{min-height:145px;padding:38px 0 22px;gap:18px}
  .page-head h1{font-size:clamp(46px,14vw,66px)}
  .page-head>div>p:last-child{max-width:31em;line-height:1.45}
  .page-controls{flex-wrap:wrap}
  .outline-button,.select-control{min-height:42px}
  .track-table-wrap{padding-top:9px}
  .track-table-head{display:none}
  .track-row{min-height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
  .track-row .track-num,.track-row .row-album,.track-row .row-date,.track-row .row-duration{display:none}
  .row-main{grid-column:1;display:grid;grid-template-columns:52px minmax(0,1fr);gap:11px;padding:0;min-width:0}
  .row-cover{width:52px;height:52px;border-radius:7px}
  .row-main strong{font-size:13px}.row-main span{font-size:10px;margin-top:5px}
  .row-actions{grid-column:2;display:flex!important;opacity:1;align-items:center;gap:2px}
  .row-actions .like-button{display:grid!important;place-items:center;width:38px;height:38px;font-size:18px}
  .row-actions .more-button{width:38px;height:38px}
  .track-row.is-current-track{margin:0 -8px;padding:7px 8px;border-radius:8px;border-bottom-color:transparent}
  .compact-track{height:64px;grid-template-columns:46px minmax(0,1fr) 44px;gap:10px}.compact-track .tiny-cover{width:44px;height:44px}.compact-track span:nth-child(3){display:none}
  .big-cover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 11px}
  .podcast-grid{grid-template-columns:1fr}
  .podcast-card{min-width:0}
  .detail-hero{grid-template-columns:1fr;gap:22px;padding-top:28px}.detail-cover{width:min(76vw,310px);margin:0 auto}.detail-copy{text-align:left}.detail-copy h1{font-size:clamp(45px,14vw,68px)}
  .episode-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}.episode-meta{display:none}
  .modal-backdrop{align-items:flex-end;padding:0}.add-modal,.small-modal,.picker-modal,.choice-modal{width:100%;max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;margin:0;padding-bottom:env(safe-area-inset-bottom);animation:mobileSheetIn .22s ease}.add-modal{overflow:auto}@keyframes mobileSheetIn{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
  .modal-head{position:sticky;top:0;z-index:3;background:#11110f;padding:18px 18px 14px}.small-modal .modal-head,.picker-modal .modal-head,.choice-modal .modal-head{background:var(--paper)}
  .modal-tabs{overflow-x:auto;white-space:nowrap;padding:0 18px;scrollbar-width:none}.modal-panel{padding:16px 18px 22px}.utility-panel{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px}.utility-panel textarea,.utility-panel input,.utility-panel .utility-action{grid-column:1/-1}
  .support-row{display:none}
  .queue-drawer{top:auto;bottom:0;width:100%;height:min(78dvh,720px);padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-left:0;border-top:1px solid #33322d;border-radius:22px 22px 0 0;transform:translateY(102%);z-index:170}.queue-drawer.open{transform:none}.queue-items{height:calc(100% - 82px)}

  /* Compact mini player: sits above the app tab bar. */
  .player{left:8px;right:8px;bottom:calc(var(--mobile-tabs) + env(safe-area-inset-bottom));height:var(--mobile-player);padding:0 10px;grid-template-columns:minmax(0,1fr) auto;border:1px solid #292923;border-radius:12px;background:rgba(13,13,12,.985);box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden;z-index:140;--mini-progress:0%}
  .player:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--mini-progress);background:var(--red);pointer-events:none}
  .player-track{grid-template-columns:48px minmax(0,1fr) 34px;gap:10px;cursor:pointer}
  .player-cover{width:48px;height:48px;border-radius:7px}.player-copy{min-height:48px}.player-copy .now-label{display:none}.player-copy strong{font-size:12px}.player-copy #playerArtist{font-size:9px;margin-top:4px}.player-track .mini-action{display:grid!important;place-items:center;width:34px;height:34px;padding:0}
  .player-center{display:flex;align-items:center}.player-center .timeline,.player-controls button:not(.play-button){display:none!important}.player-controls{gap:0}.player-controls .play-button{width:42px;height:42px}
  .player-right{display:none}

  /* Native-feeling bottom app navigation. */
  .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;height:calc(var(--mobile-tabs) + env(safe-area-inset-bottom));padding:5px 8px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;background:rgba(13,13,12,.985);border-top:1px solid #292923;z-index:130;backdrop-filter:blur(18px);color:#7e7b74}
  .mobile-tabbar button{height:55px;min-width:0;border:0;background:transparent;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;font:700 7px/1 ui-monospace,monospace;letter-spacing:.06em}
  .mobile-tabbar button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.mobile-tabbar button[data-mobile-view="home"] svg,.mobile-tabbar button[data-mobile-view="favorites"] svg{fill:currentColor;stroke:none}.mobile-tabbar button.active{color:#f5f2e9}.mobile-tabbar button.active span{color:var(--red)}
  .mobile-tabbar .mobile-add{align-self:center;justify-self:center;width:50px;height:50px;margin-top:-11px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 0 0 5px #0d0d0c}.mobile-tabbar .mobile-add span{font:300 30px/1 Arial,sans-serif;color:#fff!important;transform:translateY(-1px)}

  /* Full-screen now-playing view. */
  .mobile-now-playing{position:fixed;inset:0;z-index:200;background:#11110f;color:#f4f1e9;display:block;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  .mobile-now-playing.open{transform:none;visibility:visible}
  .mobile-now-shell{min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;gap:20px;padding:calc(12px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 34%,rgba(241,58,47,.07),transparent 34%),#11110f}
  .mobile-now-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center}.mobile-now-head>div{display:grid;gap:4px}.mobile-now-head strong{font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em}.mobile-now-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #34332e;border-radius:50%;background:#181816;color:#b4b1a9}.mobile-now-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-now-art{position:relative;align-self:center;justify-self:center;width:min(82vw,48dvh,430px);aspect-ratio:1;border-radius:18px;overflow:hidden;background-size:9px 9px;box-shadow:0 26px 75px rgba(0,0,0,.34)}.mobile-now-art img{width:100%;height:100%;display:block;object-fit:cover}.mobile-now-art>span{position:absolute;left:20px;bottom:18px;font:700 52px/1 ui-monospace,monospace;color:#54524d}
  .mobile-now-copy{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:14px;align-items:center}.mobile-now-copy>div{min-width:0}.mobile-now-copy strong,.mobile-now-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-now-copy strong{font-size:22px;letter-spacing:-.025em}.mobile-now-copy span{margin-top:7px;color:#8f8c84;font-size:13px}.mobile-now-like{display:grid;place-items:center;width:46px;height:46px;border:0;background:transparent;color:#8f8c84;font-size:26px}.mobile-now-like.liked{color:var(--red)}
  .mobile-now-timeline{display:grid;gap:8px}.mobile-now-timeline input{width:100%;height:4px;--range-progress:0%;appearance:none;-webkit-appearance:none;border-radius:999px;background:linear-gradient(90deg,var(--red) 0 var(--range-progress),#3c3b36 var(--range-progress) 100%)}.mobile-now-timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#f4f1e9;box-shadow:0 0 0 3px #11110f}.mobile-now-timeline input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#f4f1e9}.mobile-now-timeline>div{display:flex;justify-content:space-between;color:#74726b;font:700 8px/1 ui-monospace,monospace}
  .mobile-now-controls{display:grid;grid-template-columns:44px 56px 72px 56px 44px;justify-content:space-between;align-items:center}.mobile-now-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#aaa79f}.mobile-now-controls button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mobile-now-controls #mobilePrev svg,.mobile-now-controls #mobileNext svg{fill:currentColor;stroke:none;width:24px;height:24px}.mobile-now-controls button.active{color:var(--red)}.mobile-now-controls .mobile-main-play{width:68px;height:68px;background:#f4f1e9;color:#11110f}.mobile-main-play svg{fill:currentColor!important;stroke:none!important;width:27px!important;height:27px!important}.mobile-main-play .icon-pause{display:none}.mobile-main-play.is-playing .icon-play{display:none}.mobile-main-play.is-playing .icon-pause{display:block}
  .mobile-now-foot{display:flex;align-items:center;justify-content:center;gap:8px;color:#625f58;font:700 7px/1 ui-monospace,monospace;letter-spacing:.12em}.mobile-now-foot .live-dot{width:5px;height:5px}

  .toast-stack{bottom:calc(var(--mobile-player) + var(--mobile-tabs) + env(safe-area-inset-bottom) + 12px)}
}

@media(max-width:520px){
  .content-wrap{padding-left:12px;padding-right:12px}.home-hero{padding-top:31px}.hero-copy h1{font-size:46px}.hero-copy p{font-size:12px}.stat-strip{margin-left:0;margin-right:0}.stat-strip>div{min-height:72px;padding:0 10px}.stat-value{font-size:23px}.cover-grid{gap-top:18px}.tile-title{font-size:11px}.tile-sub{font-size:9px}.page-head{padding-top:31px}.page-head h1{font-size:50px}.liked-summary{min-height:72px}.mobile-now-shell{gap:17px;padding-left:18px;padding-right:18px}.mobile-now-art{width:min(84vw,43dvh,390px)}.mobile-now-copy strong{font-size:20px}.mobile-now-controls{grid-template-columns:40px 50px 68px 50px 40px}.mobile-tabbar button span{font-size:6.5px}
}

@media(display-mode:standalone){
  body.app-body{user-select:none}.global-search input,.utility-panel input,.utility-panel textarea,.small-modal input,.small-modal textarea{user-select:text}.topbar{padding-top:max(env(safe-area-inset-top),0px)}
}
body.mobile-now-open{overflow:hidden}
@media(max-width:900px), (pointer:coarse) and (hover:none){.modal-backdrop{z-index:220}.context-menu{z-index:230}}
@media(max-width:900px), (pointer:coarse) and (hover:none){.topbar{height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}}


/* SYS.07 — robust phone mode.
   Some Android browsers can expose a desktop-width layout viewport.  Coarse
   touch devices still receive the app UI instead of a scaled desktop page. */
@media (pointer:coarse) and (hover:none) {
  .app-shell{display:block!important}
  .main-stage{display:block!important;width:100%!important;max-width:none!important;margin:0!important}
  .sidebar{transform:translateX(-102%)!important}
  .sidebar.open{transform:none!important}
  .mobile-tabbar{display:grid!important}
  .mobile-now-playing{display:block!important}
  .mobile-menu{display:grid!important}
  .primary-add{display:none!important}
  .topbar{grid-template-columns:40px minmax(0,1fr) 40px!important}
  .content-wrap{max-width:none!important;width:100%!important;margin:0!important}
  .player{left:8px!important;right:8px!important;width:auto!important}
  .player-right{display:none!important}
  .player-center .timeline,.player-controls button:not(.play-button){display:none!important}
  .track-table-head{display:none!important}
  .cover-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .big-cover-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .podcast-grid{grid-template-columns:1fr!important}
}

/* --------------------------------------------------------------------------
   SYS.08 — true phone scale
   The mobile shell was correct in SYS.07, but the UI still inherited desktop-
   density typography. This layer deliberately uses app-sized type, touch
   targets and media rows while leaving desktop unchanged.
   -------------------------------------------------------------------------- */
@media (max-width:900px), (pointer:coarse) and (hover:none) {
  :root{
    --mobile-player:80px;
    --mobile-tabs:74px;
    --player:var(--mobile-player);
  }

  body.app-body{
    font-size:16px;
    padding-bottom:calc(var(--mobile-player) + var(--mobile-tabs) + env(safe-area-inset-bottom));
  }

  /* Top chrome */
  .topbar{
    min-height:68px;
    height:calc(68px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    gap:10px;
  }
  .mobile-menu{width:44px;height:44px}
  .global-search{height:44px;border-radius:22px;padding:0 14px}
  .global-search input{font-size:14px}
  .search-icon{font-size:19px}

  /* Page spacing and major headings */
  .content-wrap{padding-left:16px;padding-right:16px;padding-bottom:44px}
  .home-hero{padding:42px 0 34px}
  .hero-copy h1{font-size:clamp(52px,14vw,72px);line-height:.9}
  .hero-copy>p{font-size:15px;line-height:1.55}
  .micro{font-size:9px;line-height:1.35}

  .stat-strip>div{min-height:86px;padding:0 12px}
  .stat-value{font-size:28px}
  .stat-strip .micro{font-size:8px}

  .section-block{padding-top:42px}
  .section-heading{min-height:48px;margin-bottom:18px;align-items:center}
  .section-heading h2{font-size:27px;line-height:1.05;letter-spacing:-.045em}
  .section-heading>div{gap:11px}
  .section-index{font-size:9px}
  .section-heading .text-button,.text-button{font-size:9px;min-height:36px;padding:0 2px}

  /* Recently added: keep a useful two-column grid, but make labels readable. */
  .cover-grid{gap:26px 13px}
  .cover-art{border-radius:12px}
  .media-tile .cover-art:after,.album-card .cover-art:after{
    width:38px;height:38px;right:9px;bottom:9px;font-size:12px;
  }
  .tile-title{margin-top:10px;font-size:14px;line-height:1.2}
  .tile-sub{margin-top:5px;font-size:12px;line-height:1.25}

  /* Continue listening becomes a real app list row: art + title/artist + time. */
  .track-stack{border-top:0}
  .compact-track{
    min-height:76px;
    height:auto;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    column-gap:13px;
    row-gap:3px;
    align-items:center;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .compact-track .tiny-cover{
    grid-column:1;
    grid-row:1 / 3;
    width:56px;
    height:56px;
    border-radius:8px;
  }
  .compact-track strong{
    grid-column:2;
    grid-row:1;
    align-self:end;
    font-size:14px;
    line-height:1.25;
  }
  .compact-track span{font-size:12px}
  .compact-track span:nth-of-type(1){
    display:block!important;
    grid-column:2;
    grid-row:2;
    align-self:start;
    color:#77746d;
  }
  .compact-track span:nth-of-type(2){
    display:block!important;
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
    padding-left:8px;
    color:#85827b;
    font:600 11px/1 ui-monospace,monospace;
  }

  /* Horizontal shelves should feel swipeable, not like six tiny cards. */
  .album-rail,.podcast-rail{
    grid-auto-columns:minmax(168px,46vw);
    gap:14px;
    margin-right:-16px;
    padding-right:16px;
    padding-bottom:10px;
    scroll-snap-type:x mandatory;
  }
  .album-card,.podcast-card{scroll-snap-align:start}
  .album-card .tile-title{font-size:14px}
  .album-card .tile-sub{font-size:12px}
  .podcast-card{min-width:0;grid-template-columns:82px minmax(0,1fr);gap:13px;padding:14px}
  .podcast-card img,.podcast-card .podcast-fallback{width:82px;height:82px}
  .podcast-card strong{font-size:14px}
  .podcast-card span{font-size:12px}

  /* Library / liked / album track rows */
  .track-row{min-height:78px;padding:9px 0;gap:8px}
  .row-main{grid-template-columns:58px minmax(0,1fr);gap:12px}
  .row-cover{width:58px;height:58px;border-radius:8px}
  .row-main strong{font-size:15px;line-height:1.2}
  .row-main span{font-size:12px;margin-top:5px}
  .row-actions .like-button,.row-actions .more-button{width:44px;height:44px;font-size:19px}
  .track-row.is-current-track{margin:0 -9px;padding:9px;border-radius:10px}

  .page-head{padding:42px 0 25px;min-height:160px}
  .page-head h1{font-size:clamp(50px,14vw,68px)}
  .page-head p:last-child{font-size:14px;line-height:1.5}
  .outline-button,.select-control{min-height:46px;font-size:10px}
  .liked-summary{min-height:86px;gap:18px}
  .liked-mark{width:52px;height:52px}
  .liked-summary strong{font-size:29px}
  .liked-summary .micro{font-size:9px}

  /* Empty states and secondary screens */
  .empty-state{padding:42px 0;font-size:14px;line-height:1.5}
  .empty-state strong{font-size:20px}
  .collection-row{grid-template-columns:66px minmax(0,1fr) 34px;min-height:86px;gap:14px}
  .collection-icon{width:62px;height:62px}
  .collection-row strong{font-size:16px}
  .collection-row span{font-size:12px}
  .episode-row{padding:18px 0}
  .episode-row h3{font-size:16px}
  .episode-row p{font-size:12px}
  .episode-actions button{min-width:48px;height:42px;font-size:9px}

  /* Mini player: large enough to read and operate with one hand. */
  .player{
    left:8px!important;
    right:8px!important;
    height:var(--mobile-player);
    padding:0 11px;
    border-radius:14px;
  }
  .player-track{grid-template-columns:58px minmax(0,1fr) 42px;gap:11px}
  .player-cover{width:58px;height:58px;border-radius:9px}
  .player-copy{min-height:58px}
  .player-copy strong{font-size:14px;line-height:1.2}
  .player-copy #playerArtist{font-size:11px;margin-top:5px}
  .player-track .mini-action{width:42px;height:42px;font-size:20px}
  .player-controls .play-button{width:48px;height:48px}
  .player-controls .play-button svg{width:21px;height:21px}

  /* Bottom navigation: the previous 6–7px labels were the main source of the
     miniature appearance. Keep the Nothing-esque mono labels, at app scale. */
  .mobile-tabbar{
    height:calc(var(--mobile-tabs) + env(safe-area-inset-bottom));
    padding:5px 8px env(safe-area-inset-bottom);
  }
  .mobile-tabbar button{
    height:64px;
    gap:5px;
    font:800 9px/1 ui-monospace,monospace;
    letter-spacing:.055em;
  }
  .mobile-tabbar button svg{width:24px;height:24px;stroke-width:1.8}
  .mobile-tabbar .mobile-add{width:54px;height:54px;margin-top:-8px}
  .mobile-tabbar .mobile-add span{font-size:32px}

  /* Full screen player */
  .mobile-now-shell{gap:20px;padding-left:22px;padding-right:22px}
  .mobile-now-head strong{font-size:10px}
  .mobile-now-icon{width:46px;height:46px}
  .mobile-now-art{width:min(88vw,44dvh,430px);border-radius:20px}
  .mobile-now-copy strong{font-size:24px}
  .mobile-now-copy span{font-size:14px}
  .mobile-now-like{width:50px;height:50px;font-size:28px}
  .mobile-now-timeline>div{font-size:10px}
  .mobile-now-controls{grid-template-columns:46px 58px 76px 58px 46px}
  .mobile-now-controls button{width:46px;height:46px}
  .mobile-now-controls .mobile-main-play{width:72px;height:72px}
  .mobile-now-foot{font-size:8px}
}

/* Extra-tight phones: preserve readable type; reduce spacing, not scale. */
@media (max-width:380px) {
  .content-wrap{padding-left:14px;padding-right:14px}
  .hero-copy h1{font-size:50px}
  .section-heading h2{font-size:25px}
  .tile-title{font-size:13px}
  .tile-sub{font-size:11px}
  .album-rail,.podcast-rail{grid-auto-columns:48vw}
  .mobile-tabbar button{font-size:8px}
  .mobile-now-shell{padding-left:18px;padding-right:18px}
}