/* VinylScape themes. Design tokens live here, scoped per theme via the [data-theme] attribute set on (see app/themes.py). The default "Listening Room" look is the `classic` theme; add a theme by adding a [data-theme=""] block (and an entry in app/themes.py). */ :root, [data-theme="classic"]{ --base:#0d0a07; --surface:#1a1410; --elevated:#221b13; --subtle:#2b2216; --border:#392e21; --border-strong:#4b4038; --text:#E8E4DF; --text-2:#A59F99; --muted:#6E6963; --accent:#D2691E; --accent-hover:#E28534; --accent-rgb:210,105,30; --amber-soft:rgba(var(--accent-rgb),.16); --on-accent:#fff; --c1:#3A4A40; --c2:#B08A2E; --c3:#C8501E; --c4:#A04B32; --coin-ink:#F3EFE9; --avatar-a:#c97b3a; --avatar-b:#a0432f; --grain:url('/static/assets/grain.png'); --shell-bg:rgba(21,17,12,0.93); --cream-hi:#F6F1E7; --cream-lo:#ECE3D3; --cream-text:#1B1715; --cream-label:#8A7A62; --cream-caption:#7A6F60; --cream-track:#DDD5C9; --font-display:"Fraunces",Georgia,serif; --font-ui:"Inter",system-ui,sans-serif; --panel-bg:repeating-radial-gradient(circle at 86% 10%, rgba(206,142,74,0.05) 0 1px, transparent 1px 13px), var(--grain), linear-gradient(180deg, rgba(30,24,17,0.94), rgba(21,17,12,0.95)); --hero:url('/static/assets/hero-turntable.png'), #0d0a07; } /* Modern: sleek high-contrast dark, cool near-black with an electric teal accent (designed in Claude Design). Space Grotesk + Onest. */ [data-theme="modern"]{ --base:#0b0d10; --surface:#14171b; --elevated:#1d2127; --subtle:#23272e; --border:#2b3038; --border-strong:#3c424c; --text:#F3F6F8; --text-2:#A6ADB6; --muted:#6A717A; --accent:#2DD4BF; --accent-hover:#4FE7D3; --accent-rgb:45,212,191; --amber-soft:rgba(var(--accent-rgb),.16); --on-accent:#06201C; --c1:#2DD4BF; --c2:#4F8DF5; --c3:#F5C451; --c4:#9B8AF0; --coin-ink:#06201C; --avatar-a:#2DD4BF; --avatar-b:#147d6a; --grain:url('/static/assets/themes/modern/texture-240b.png'); --shell-bg:rgba(15,18,22,0.94); --cream-hi:#EEF2F4; --cream-lo:#DBE3E8; --cream-text:#0E171C; --cream-label:#5B6B73; --cream-caption:#6A7880; --cream-track:#C9D3D9; --font-display:"Space Grotesk","Fraunces",Georgia,serif; --font-ui:"Onest","Inter",system-ui,sans-serif; --panel-bg:url('/static/assets/themes/modern/texture-240b.png'), linear-gradient(180deg, rgba(29,33,39,0.94), rgba(20,23,27,0.96)); --hero:url('/static/assets/themes/modern/hero-vinyl.png'), #0b0d10; } [data-theme="modern"] .hero.tall{background-image:url('/static/assets/themes/modern/hero-dashboard.png')} [data-theme="modern"] .hero.cd{background-image:url('/static/assets/themes/modern/hero-cd.png')} [data-theme="modern"] .hero.cassette{background-image:url('/static/assets/themes/modern/hero-cassette.png')} [data-theme="modern"] .hero.digital{background-image:url('/static/assets/themes/modern/hero-digital.png')} [data-theme="modern"] .hero.other{background-image:url('/static/assets/themes/modern/hero-other.png')} *{box-sizing:border-box} body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font-ui);font-size:14px; letter-spacing:-0.01em;line-height:1.5; background:radial-gradient(circle at 80% 8%, rgba(var(--accent-rgb),.12), transparent 26rem), radial-gradient(circle at 22% 12%, rgba(216,170,110,.06), transparent 20rem), var(--base);} ::selection{background:rgba(var(--accent-rgb),0.4)} a{color:var(--accent-hover);text-decoration:none} a:hover{color:#f09a4e} h1,h2,h3{margin:0} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px} ::-webkit-scrollbar-track{background:transparent} /* shell */ .shell{max-width:1480px;width:calc(100% - 40px);margin:20px auto 0;display:grid; grid-template-columns:220px minmax(0,1fr);border:1px solid var(--border); background:var(--shell-bg);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,0.42)} .main{min-width:0;padding:28px} /* sidebar */ .sidebar{display:flex;flex-direction:column;gap:28px;padding:28px 22px;border-right:1px solid var(--border); background:repeating-radial-gradient(circle at 8% 96%, rgba(var(--accent-rgb),0.045) 0 1px, transparent 1px 15px), var(--grain), linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.12))} .brand{display:flex;align-items:center;gap:10px} .brand img{width:44px;height:44px;border-radius:50%;flex-shrink:0} .brand span{font-family:var(--font-display);font-size:25px;letter-spacing:-0.05em} .nav{display:grid;gap:8px} .nav a{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:12px; color:var(--text-2);font-size:14px;font-weight:600;transition:background .2s,color .2s,transform .2s} .nav a svg{width:20px;height:20px;flex-shrink:0} .nav a:hover{color:var(--text);background:rgba(255,255,255,0.04);transform:translateX(2px)} .nav a.on{background:var(--amber-soft);color:var(--accent-hover);box-shadow:inset 3px 0 0 var(--accent)} .side-bottom{margin-top:auto;display:grid;gap:16px} .side-quote .q{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--accent-hover)} .side-quote .t{font-family:var(--font-display);font-size:18px;font-style:italic;color:#cfc7bc;line-height:1.3;margin-top:-6px} .side-quote .a{color:var(--accent-hover);font-size:11.5px;margin-top:7px} .side-plant{width:100%;border-radius:12px;opacity:.92;display:block} .side-status{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:13px} .side-status img{width:42px;height:42px;border-radius:50%;animation:vs-spin 2.8s linear infinite;flex-shrink:0} .side-status .dot{color:var(--accent-hover);animation:vs-pulse 2.4s ease infinite} @keyframes vs-spin{to{transform:rotate(1turn)}} @keyframes vs-pulse{0%,100%{opacity:1}50%{opacity:.3}} /* hero band */ .hero{position:relative;margin:-28px -28px 0;padding:clamp(32px,3vw,48px); background:var(--hero);background-size:cover;background-position:center right;background-repeat:no-repeat; display:flex;flex-direction:column;justify-content:center;min-height:280px} .hero.tall{min-height:400px;padding:clamp(32px,4vw,56px)} .hero .inner{position:relative;max-width:560px;z-index:1} /* Cover-rainbow hero: colour-sorted covers tiled behind the heading, with a veil for legibility */ .hero.has-rainbow{background:var(--base)} .hero-rainbow{position:absolute;inset:0;z-index:0;display:grid;gap:0;overflow:hidden;align-content:start} .hero-rainbow span{aspect-ratio:1;background:#15110c center/cover no-repeat;display:block} .hero-rainbow-veil{position:absolute;inset:0;z-index:0; background:linear-gradient(100deg, var(--base) 0%, color-mix(in srgb, var(--base) 78%, transparent) 40%, color-mix(in srgb, var(--base) 32%, transparent) 76%, color-mix(in srgb, var(--base) 12%, transparent) 100%), linear-gradient(to top, var(--base), color-mix(in srgb, var(--base) 0%, transparent) 60%)} .eyebrow{color:var(--accent-hover);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .hero h1{font-family:var(--font-display);font-weight:500;line-height:.98;letter-spacing:-0.055em; font-size:clamp(40px,4.6vw,60px);margin:14px 0 10px} .hero.tall h1{font-size:clamp(48px,6vw,76px);margin:14px 0 18px} .hero .tagline{color:var(--accent-hover);font-size:14px} .hero p{color:var(--text-2);line-height:1.65;margin:10px 0 0} .hero p.note{color:var(--muted);font-size:13px;margin-top:12px} .spark{color:var(--accent-hover)} .hero.cd{background-image:url('/static/assets/hero-cd.jpg')} .hero.cassette{background-image:url('/static/assets/hero-cassette.jpg')} .hero.digital{background-image:url('/static/assets/hero-digital.jpg')} .hero.other{background-image:url('/static/assets/hero-other.jpg')} /* Read-only demo banner: full-bleed bar that sits above the hero (which itself bleeds up via a negative top margin). */ .demo-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:3;margin:-28px -28px 18px;padding:11px 28px;border-bottom:1px solid rgba(226,133,52,.4);background:rgba(226,133,52,.12);font-size:13px;color:var(--text-2)} .demo-bar strong{color:var(--accent-hover);font-weight:800} .demo-bar a{font-weight:700;color:var(--accent-hover);text-decoration:none;white-space:nowrap} .demo-bar a.demo-back{margin-left:auto;color:var(--text-2);font-weight:600} .demo-bar a:hover{text-decoration:underline} .demo-bar + .hero{margin-top:0} @media(max-width:768px){.demo-bar{margin:-18px -16px 14px;padding:10px 16px}} /* generic layout */ .row{display:grid;gap:16px} .mt16{margin-top:16px}.mt18{margin-top:18px}.mt24{margin-top:24px} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))} .g-feed{grid-template-columns:1.1fr 1.1fr 1.3fr} .g-2{grid-template-columns:1fr 1fr} .g-detail{grid-template-columns:1fr 1.18fr} .g-stale{grid-template-columns:1.5fr 1fr} @media(max-width:1080px){.g-feed,.g4,.g5,.g-2,.g-detail,.g-stale{grid-template-columns:1fr 1fr}} @media(max-width:680px){.g-feed,.g4,.g5,.g-2,.g-detail,.g-stale,.shell{grid-template-columns:1fr}} /* explicit-column rows (replaces inline grid-template-columns so they can reflow) */ .row.r2{grid-template-columns:1fr 1fr} .row.r2-wide{grid-template-columns:1.15fr 1fr} .row.r3{grid-template-columns:repeat(3,1fr)} .feed-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} @media(max-width:760px){.row.r2,.row.r2-wide,.row.r3,.feed-2col{grid-template-columns:1fr}} /* panels (dark, textured) */ .panel{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;padding:18px;min-width:0} .panel.flexcol{display:flex;flex-direction:column} .panel h3{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-0.035em;line-height:1.1;margin-bottom:16px} .panel h3.sm{font-size:20px;margin-bottom:14px} .link-more{color:var(--accent-hover);font-weight:700;font-size:14px;display:inline-flex;gap:8px;align-items:center;margin-top:15px;cursor:pointer} .link-more.sm{font-size:13px;margin-top:13px} /* cream stat cards (overview) */ .cream{position:relative;background:var(--grain), linear-gradient(180deg,var(--cream-hi),var(--cream-lo)); color:var(--cream-text);border-radius:14px;padding:18px 20px;min-height:116px;box-shadow:0 12px 28px rgba(0,0,0,0.32); display:flex;align-items:center;gap:15px;text-decoration:none;transition:transform .15s,box-shadow .15s} a.cream:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,0.42)} a.cream:hover .chev{border-color:var(--accent);color:var(--accent)} .cream .coin{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .cream .label{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-label)} .cream .num{font-family:var(--font-display);font-size:34px;line-height:1.05;margin:4px 0 3px;font-variant-numeric:tabular-nums;letter-spacing:-0.03em} .cream .num small{font-size:16px;color:var(--cream-label)} .cream .cap{font-size:11.5px;color:var(--cream-caption)} .cream .chev{position:absolute;right:12px;bottom:10px;width:22px;height:22px;border-radius:50%;border:1px solid #D8CEC0; color:var(--cream-label);display:inline-flex;align-items:center;justify-content:center;font-size:13px} .cream .bar{height:6px;background:var(--cream-track);border-radius:999px;overflow:hidden;margin:0 0 5px;max-width:150px} .cream .bar>span{display:block;height:100%;background:var(--accent);border-radius:999px} /* dark stat cards (stats/value) */ .stat .label{color:var(--text-2);font-size:12.5px} .stat .num{font-family:var(--font-display);font-size:36px;line-height:1;margin:14px 0 8px;font-variant-numeric:tabular-nums} .stat .num.accent{color:var(--accent-hover)} .stat .num small{font-size:.5em;color:var(--text-2)} .stat .sub{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:10px} .stat .bar{height:6px;background:var(--subtle);border-radius:999px;overflow:hidden;margin-bottom:7px} .stat .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:999px} /* list rows (feed / ranking) */ .lrow{display:grid;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.055);cursor:pointer} .lrow:last-child{border-bottom:none} .lrow .thumb{aspect-ratio:1;border-radius:7px;background-size:cover;background-position:center;box-shadow:0 6px 18px rgba(0,0,0,0.32)} .lrow .ttl{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrow .art{color:var(--text-2);font-style:italic;font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrow .rk{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums} .badge-amber{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 9px; border-radius:8px;background:var(--amber-soft);color:var(--accent-hover);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums} .muted{color:var(--muted)}.t2{color:var(--text-2)}.tab{font-variant-numeric:tabular-nums} .disp{font-family:var(--font-display)} /* toolbar / filters */ .toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0 16px;position:relative} .search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface); height:48px;padding:0 16px;min-width:260px;border-radius:12px;flex:1} .search input{background:none;border:none;color:var(--text);font-family:var(--font-ui);font-size:14px;outline:none;width:100%} .sel{height:48px;padding:0 14px;color:var(--text);background:var(--elevated);border-radius:12px;border:1px solid var(--border); outline:none;cursor:pointer;font-family:var(--font-ui);font-size:13px;-webkit-appearance:none;appearance:none} .sel:focus,.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--amber-soft)} .sel option{background:var(--elevated);color:var(--text)} .btn{border:none;background:var(--accent);color:#171310;border-radius:999px;padding:11px 22px; font-family:var(--font-ui);font-size:13px;font-weight:800;cursor:pointer} .btn:hover{background:var(--accent-hover)} .count{margin:12px 0 18px;font-size:18px;color:var(--text-2)} .count strong{color:var(--accent-hover);font-size:28px;font-family:var(--font-display);font-weight:500} .count-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:12px 0 18px} .count-row .count{margin:0} .filters-btn{height:48px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--border);background:var(--elevated);color:var(--text-2);font-family:var(--font-ui);font-weight:700;font-size:13px;padding:0 16px;border-radius:12px;transition:.15s} .filters-btn:hover{border-color:var(--border-strong);color:var(--text)} .filters-btn.on{border-color:var(--accent);color:var(--accent-hover);background:var(--amber-soft)} .filters-btn svg{opacity:.85} .filters-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#171310;font-size:11px;font-weight:800} .filters-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200; background:var(--elevated);border:1px solid var(--border);border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.18);padding:16px; display:flex;gap:12px;align-items:center;flex-wrap:wrap} .filters-panel[hidden]{display:none !important} .filters-clear{color:var(--accent-hover);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap} .filters-clear:hover{text-decoration:underline} .loadmore-row{display:flex;justify-content:center;margin:28px 0 8px} .add-fmt{display:flex;align-items:center;gap:12px;margin-bottom:14px} .add-fmt-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.07em} .add-seg{display:inline-flex;gap:5px;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:4px} .add-seg button{cursor:pointer;border:none;background:transparent;color:var(--text-2);font-family:var(--font-ui);font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:7px;transition:.15s} .add-seg button.on{background:var(--amber-soft);color:var(--accent-hover)} .lfm-auth{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .lfm-auth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .lfm-auth-t{font-weight:700;font-size:13.5px;margin-bottom:2px} /* ===== Scrobble your spin ===== */ .spin-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;margin-top:16px;align-items:start} .spin-rail{position:sticky;top:16px} .spin-mode-btn,.spin-media-btn{flex:1;border:1px solid var(--border);background:transparent;color:var(--text-2);font:600 12.5px var(--font-ui);padding:7px 12px;border-radius:9px;cursor:pointer} .spin-media-btn{flex:0 0 auto} .spin-mode-btn.on,.spin-media-btn.on{background:var(--amber-soft);border-color:rgba(var(--accent-rgb),0.4);color:var(--accent-hover)} .spin-media-primary{display:flex;gap:6px;margin-top:6px} .spin-media-primary .spin-media-btn.lg{flex:1;padding:12px;font-size:14.5px;font-weight:700} .spin-media-more{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .spin-media-more .spin-media-btn{flex:0 0 auto;font-size:12px;padding:6px 12px;color:var(--muted)} .spin-media-more .spin-media-btn.on{color:var(--accent-hover)} .btn-line.sm{padding:7px 12px;font-size:12px;border-radius:9px} .spin-find{display:flex;gap:8px;align-items:stretch} /* Optional scan affordance: a quiet icon next to the name search, never the default - search-by-name stays primary. */ .spin-scan-btn{display:grid;place-items:center;flex:none;width:44px;cursor:pointer; border:1px solid rgba(226,133,52,.4);background:rgba(226,133,52,.08);color:var(--accent-hover); border-radius:11px;transition:border-color .15s,color .15s,background .15s} .spin-scan-btn:hover{border-color:var(--accent);background:rgba(226,133,52,.16)} .spin-scan-btn svg{flex:none} .spin-scan-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; padding:18px;background:rgba(8,6,4,.72);backdrop-filter:blur(3px)} /* The class sets display:flex, which beats the bare [hidden] UA rule, so the overlay would show on load. Hide it explicitly when hidden. */ .spin-scan-overlay[hidden]{display:none} .spin-placeholder[hidden]{display:none} .spin-scan-card{width:100%;max-width:440px;background:var(--panel,#15110c);border:1px solid var(--border); border-radius:16px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.5)} .spin-scan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .spin-scan-head strong{font-size:15px} .spin-scan-close{cursor:pointer;border:none;background:transparent;color:var(--text-2);font-size:26px;line-height:1; padding:0 4px;transition:color .15s} .spin-scan-close:hover{color:var(--text)} .spin-scan-stage{position:relative;border-radius:12px;overflow:hidden;background:var(--base);aspect-ratio:4/3} .spin-scan-stage video{width:100%;height:100%;object-fit:cover;display:block} .spin-scan-frame{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(226,133,52,.5);opacity:0;transition:opacity .15s} .spin-scan-line{position:absolute;left:8%;right:8%;height:2px;top:50%;background:var(--accent-hover); box-shadow:0 0 10px var(--accent-hover);opacity:0} /* Frame + animated line only show once the camera is live. */ .spin-scan-card.scanning .spin-scan-frame{opacity:1} .spin-scan-card.scanning .spin-scan-line{opacity:1;animation:vs-scan 1.8s ease-in-out infinite} @keyframes vs-scan{0%,100%{top:18%}50%{top:82%}} /* Start button sits centered over the dark stage until the camera is running. */ .spin-scan-start{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;white-space:nowrap} .spin-scan-card.scanning .spin-scan-start{display:none} .spin-scan-controls{display:flex;justify-content:center;margin-top:12px;min-height:1px} .spin-scan-hint{text-align:center;font-size:12.5px;margin:12px 0 2px} .spin-results{display:grid;gap:4px;margin-top:10px;max-height:300px;overflow:auto} .spin-noresult{color:var(--muted);font-size:13px;padding:10px 4px} .spin-pick{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer; border:1px solid transparent;background:transparent;border-radius:11px;padding:8px;transition:.15s;font-family:var(--font-ui)} .spin-pick:hover{background:rgba(255,255,255,0.04);border-color:var(--border)} .spin-pick-cover{width:42px;height:42px;border-radius:7px;background-size:cover;background-position:center; background-color:var(--elevated);flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,0.35)} .spin-pick-t{display:block;color:var(--text);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spin-pick-a{display:block;color:var(--text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spin-recent{display:grid;gap:3px} .spin-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; text-align:center;padding:60px 20px;color:var(--text-2)} .spin-disc{width:120px;height:120px;border-radius:50%; background:repeating-radial-gradient(circle, #1c1510 0 1px, #0f0b08 1px 5px); box-shadow:0 20px 50px rgba(0,0,0,0.5);position:relative;animation:vs-spin 9s linear infinite} .spin-disc::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%; top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#c97b3a,#431510)} .spin-head{display:flex;align-items:center;gap:18px;margin-bottom:18px} .spin-cover{width:96px;height:96px;border-radius:12px;background-size:cover;background-position:center; background-color:var(--elevated);flex-shrink:0;box-shadow:0 16px 40px rgba(0,0,0,0.5)} .spin-title{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:-0.03em;margin:0;line-height:1.1} .spin-err{background:rgba(207,91,62,0.12);border:1px solid rgba(207,91,62,0.4);color:#f0a890; padding:12px 14px;border-radius:11px;font-size:13.5px} .spin-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)} .spin-allbox{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--text);cursor:pointer} .spin-when{display:inline-flex;align-items:center;gap:10px;font-size:12.5px} .spin-when-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border); border-radius:9px;padding:7px 12px;color:var(--text-2);font:600 12px var(--font-ui);cursor:pointer;transition:.15s} .spin-when-btn:hover{border-color:var(--accent);color:var(--accent-hover)} .spin-when-btn svg{width:13px;height:13px} .spin-when input[type=datetime-local]{background:var(--surface);border:1px solid var(--border);border-radius:9px; color:var(--text);font-family:var(--font-ui);font-size:12.5px;padding:6px 9px} .spin-sides{display:grid;gap:0} .spin-side{margin-top:20px} .spin-side:first-child{margin-top:0} .spin-side-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer; background:rgba(13,10,7,0.5);border-top:1px solid var(--subtle);border-radius:8px 8px 0 0;margin-bottom:2px} .spin-side-label{flex:1;font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--accent)} .spin-side-tracks{display:grid;gap:1px;border-left:1px solid var(--subtle);margin-left:14px;padding-left:6px} .spin-side-tracks .spin-track{border-bottom:1px solid rgba(255,255,255,0.045)} .spin-side-tracks .spin-track:last-child{border-bottom:none} .spin-track{display:grid;grid-template-columns:44px 34px 1fr auto;align-items:center;gap:10px; padding:7px 6px;border-radius:8px;cursor:pointer;font-size:13.5px} /* VinylScape pill toggle: real checkbox underneath, amber switch on top */ .vs-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;vertical-align:middle;cursor:pointer} .vs-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .vs-toggle .knob{position:absolute;inset:0;border-radius:999px;background:var(--subtle);transition:background .15s ease} .vs-toggle .knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s ease,background .15s ease} .vs-toggle input:checked + .knob{background:var(--accent)} .vs-toggle input:checked + .knob::after{transform:translateX(18px);background:#fff} .vs-toggle input:focus-visible + .knob{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)} /* larger variant for the side + "all tracks" toggles (they control more) */ .vs-toggle-lg{width:46px;height:26px} .vs-toggle-lg .knob::after{width:20px;height:20px} .vs-toggle-lg input:checked + .knob::after{transform:translateX(20px)} .spin-track:hover{background:rgba(255,255,255,0.03)} .spin-tk-pos{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} .spin-tk-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} .spin-tk-dur{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums} .spin-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)} .spin-status{font-size:13.5px} .spin-status.ok{color:#5fb37a;font-weight:600} .spin-status.err{color:#f0a890;font-weight:600} .spin-queue{display:flex;align-items:center;gap:11px;background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.35);border-radius:12px;padding:11px 16px;color:var(--accent-hover); font-size:13.5px;font-weight:600} .spin-queue .spin-q-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-hover); animation:vs-pulse 2.2s ease infinite;flex-shrink:0} .spin-queue .link-more{margin-left:auto} @media(max-width:820px){ .spin-grid{grid-template-columns:1fr} .spin-rail{position:static} } /* collection grid */ .grid-records{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:22px} .rec{position:relative;padding:0 0 12px;cursor:pointer;transition:transform .22s ease,filter .22s ease} .rec:hover{transform:translateY(-6px);filter:drop-shadow(0 18px 30px rgba(0,0,0,0.36))} .rec .cover{aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center; border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 10px 28px rgba(0,0,0,0.32); position:relative;overflow:hidden} .rec .cover .play{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:var(--text); opacity:0;background:rgba(0,0,0,0.25);transition:opacity .2s ease} .rec:hover .cover .play{opacity:1} .rec .badge{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center; min-width:34px;height:28px;padding:0 9px;border-radius:8px;background:var(--accent);color:#171310;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums} .rec .rtitle{font-weight:800;margin-top:10px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rec .rsub{color:var(--text-2);font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .noart{border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:var(--elevated);display:grid;place-items:center;position:relative;overflow:hidden} .noart .rings{position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%, rgba(232,228,223,0.06) 0 1px, transparent 1px 14px)} .noart .nin{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative} .noart img{opacity:.55} .noart .nl{color:var(--muted);font-size:11px;letter-spacing:.2em;font-weight:700} .load-more{text-align:center;margin-top:26px} .load-more span{color:var(--muted);font-size:13px;cursor:pointer} .load-more span:hover{color:var(--text-2)} /* empty state */ .empty{position:relative;overflow:hidden;padding:32px;min-height:170px;margin-top:8px} .empty .ring{position:absolute;right:-30px;top:-70px;width:260px;aspect-ratio:1;border-radius:50%; background:repeating-radial-gradient(circle, rgba(232,228,223,0.12) 0 1px, transparent 1px 18px);opacity:.55} .empty h3{font-family:var(--font-display);font-size:30px;font-weight:500;letter-spacing:-0.035em;margin-bottom:8px;position:relative} .empty p{color:var(--text-2);margin:0 0 18px;position:relative} .empty .btn{position:relative} /* record detail */ /* Break out of the .app-main padding so the cover atmosphere bleeds to the panel edges; re-inset the content with matching padding. */ .detail{position:relative;overflow:hidden;margin:-28px -28px 0;padding:28px 28px 0} /* Cover-art atmosphere: the record's own art, blurred and faded into the page. */ .detail > *:not(.detail-atmo-art):not(.detail-atmo-wash){position:relative;z-index:1} .detail-atmo-art{position:absolute;top:0;left:0;right:0;height:860px;z-index:0;pointer-events:none; background-size:cover;background-position:center 24%; filter:blur(13px) saturate(1.12);transform:scale(1.08);opacity:.5; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.97) 38%, rgba(0,0,0,0.8) 56%, rgba(0,0,0,0.58) 70%, rgba(0,0,0,0.36) 81%, rgba(0,0,0,0.18) 90%, rgba(0,0,0,0.07) 96%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.97) 38%, rgba(0,0,0,0.8) 56%, rgba(0,0,0,0.58) 70%, rgba(0,0,0,0.36) 81%, rgba(0,0,0,0.18) 90%, rgba(0,0,0,0.07) 96%, rgba(0,0,0,0) 100%)} .detail-atmo-wash{position:absolute;top:0;left:0;right:0;height:860px;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(13,10,7,0.34) 0%, rgba(13,10,7,0.26) 46%, rgba(13,10,7,0.12) 66%, rgba(13,10,7,0) 82%), linear-gradient(90deg, rgba(13,10,7,0.5) 0%, rgba(13,10,7,0) 55%)} .crumb{color:var(--text-2);font-size:13px;margin-bottom:18px;position:relative} .detail-back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;margin-bottom:18px; color:var(--text-2);font-size:13px;font-weight:700;text-decoration:none;transition:color .15s} .detail-back:hover{color:var(--text)} .detail-back-circle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none; border:1px solid var(--border);background:rgba(255,255,255,.02);transition:border-color .15s,background .15s} .detail-back:hover .detail-back-circle{border-color:var(--border-strong);background:rgba(255,255,255,.05)} .detail-back svg{width:18px;height:18px} .remove-rec{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .remove-rec-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--font-ui); font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent; border-radius:9px;padding:6px 10px;transition:color .15s,background .15s,border-color .15s} .remove-rec-btn:hover{color:#e6736b;background:rgba(230,115,107,.08);border-color:rgba(230,115,107,.35)} .detail-head{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:28px;align-items:start;position:relative} @media(max-width:680px){.detail-head{grid-template-columns:1fr}} .detail-cover-wrap{display:flex;flex-direction:column;min-width:0} #imgStrip{scrollbar-width:none} #imgStrip::-webkit-scrollbar{display:none} .detail-cover{width:100%;aspect-ratio:1;border-radius:14px;background-size:cover;background-position:center; box-shadow:0 24px 70px rgba(0,0,0,0.42);border:1px solid var(--border-strong)} .detail-meta{max-width:560px} .detail-meta .artist{color:var(--text-2);font-size:15px} .detail-meta h1{font-family:var(--font-display);font-weight:500;margin:8px 0 10px;line-height:.98;letter-spacing:-0.055em;font-size:clamp(44px,5vw,64px)} .detail-meta .year{color:var(--accent-hover);font-weight:700;font-size:17px;margin-bottom:12px;font-variant-numeric:tabular-nums} .detail-meta .blurb{color:var(--text-2);line-height:1.65;margin:0 0 18px} .meta-card{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;padding:16px} .meta-card .fmt{font-size:14px;font-weight:700} .meta-card .lbl{margin:6px 0 0;color:var(--text-2);font-size:13px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .chip{border:1px solid var(--border);border-radius:999px;padding:7px 10px;color:var(--text-2);font-size:12px} .chip.genre{border-color:rgba(var(--accent-rgb),0.35);background:var(--amber-soft);color:var(--accent-hover)} .statline .label{color:var(--text-2);font-size:13px;display:flex;gap:8px;align-items:center} .statline .ic{width:24px;height:24px;border-radius:6px;background:var(--subtle);display:inline-flex;align-items:center;justify-content:center} .statline .big{font-family:var(--font-display);font-size:38px;line-height:1;margin-top:14px;font-variant-numeric:tabular-nums} .statline .big.date{font-size:27px;margin-top:18px} .disclaim{color:var(--text-2);font-size:13px;margin:14px 2px 0} /* tables (track / journal / value) */ .thead,.trow{display:grid;gap:8px;align-items:center} .thead{padding-bottom:10px;color:var(--muted);font-weight:700;font-size:11.5px} .trow{padding:10px 0;border-top:1px solid rgba(255,255,255,0.06);font-size:13px} .trow.j{padding:9px 0;font-size:12.5px} .r{text-align:right} .tracks .thead,.tracks .trow{grid-template-columns:20px 1fr 44px 86px 86px} .journal .thead,.journal .trow{grid-template-columns:140px 1fr 104px 58px;align-items:center} /* the .trow display:grid/flex rules override the UA [hidden] rule, so hidden journal rows stayed visible and "View more listens" revealed nothing. This wins on specificity so collapsed rows actually hide until JS shows them. */ .journal .trow[hidden]{display:none !important} .jdot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0} .jdot.on{width:7px;height:7px;background:var(--accent-hover);box-shadow:0 0 0 3px rgba(226,133,52,.18)} .spin-btn{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;cursor:pointer;white-space:nowrap;border:1px solid var(--border);background:transparent;color:var(--muted);transition:.15s} .spin-btn:hover{border-color:var(--accent-hover);color:var(--accent-hover)} .spin-btn.on{border-color:transparent;background:var(--accent);color:var(--on-accent)} .spin-btn.on:hover{background:var(--accent-hover);color:var(--on-accent)} .vinyl-count{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--accent-hover);background:var(--amber-soft);padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:6px} .ttotal{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);font-size:13px;margin-top:2px} /* horizontal genre bars */ .gbar{display:grid;grid-template-columns:78px 1fr 36px;gap:10px;align-items:center;font-size:12.5px;color:var(--text-2)} .gbar .track{height:9px;border-radius:999px;background:var(--subtle);overflow:hidden} .gbar .track>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover))} .gbar b{text-align:right;color:var(--text);font-variant-numeric:tabular-nums} /* highlights */ .hl{display:flex;gap:13px;align-items:flex-start} .hl .ic{width:34px;height:34px;border-radius:50%;background:rgba(var(--accent-rgb),0.15);color:var(--accent-hover); display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0} .hl .tx{font-size:13.5px;line-height:1.55} /* insights strip + summary strip */ .strip{display:flex;align-items:center} .strip .cell{flex:1;padding:0 24px} .strip .cell+.cell{border-left:1px solid var(--border)} /* mobile: 2x2 grid (with a cross divider), single column on very narrow phones */ @media(max-width:760px){ .strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch} .strip .cell{flex:none;padding:16px;min-width:0} .strip .cell>div{min-width:0} .strip .cell+.cell{border-left:none} .strip .cell:nth-child(2n){border-left:1px solid var(--border)} .strip .cell:nth-child(n+3){border-top:1px solid var(--border)} /* the value strip has 3 cells; a 2x2 grid leaves an awkward empty quadrant, so stack it to a single column with row dividers */ .strip.invest-strip{grid-template-columns:1fr} .strip.invest-strip .cell:nth-child(2n){border-left:none} .strip.invest-strip .cell:nth-child(n+2){border-top:1px solid var(--border)} } @media(max-width:430px){ .strip{grid-template-columns:1fr} .strip .cell:nth-child(2n){border-left:none} .strip .cell:nth-child(n+2){border-top:1px solid var(--border)} } .cl{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .donut{width:52px;height:52px;border-radius:50%;flex-shrink:0} .donut .hole{width:34px;height:34px;border-radius:50%;background:#1f1811;margin:9px} .leg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:baseline;margin-right:5px} .summ{display:flex;margin-top:16px;border-top:1px solid var(--border);padding-top:14px} .summ .cell{flex:1;text-align:center} .summ .cell+.cell{border-left:1px solid var(--border)} .summ .v{font-family:var(--font-display);font-size:23px} .summ .k{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:10px} /* value */ .vchart svg{height:auto} .vchart-dot{opacity:.7;transition:opacity .15s,r .15s} .vchart-dot:hover{opacity:1} .vyears{display:flex;margin-top:10px} .vyears .cell{flex:1;text-align:center} .vyears .yl{font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums} .vyears .ya{font-size:10.5px;color:var(--accent-hover);font-variant-numeric:tabular-nums;margin-top:2px} .vyears .yv{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums} .vlegend{display:flex;gap:18px;margin-top:12px;border-top:1px solid var(--border);padding-top:12px;font-size:11.5px;color:var(--muted)} .vrow{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .vrow .vt{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vrow .vt i{color:var(--text-2);font-weight:400} .vrow .vn{color:var(--muted);font-size:11.5px;margin-top:2px} .vrow .vv{font-family:var(--font-display);font-size:21px;color:var(--accent-hover);font-variant-numeric:tabular-nums} .arow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .arow .kk{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em} .note-i{color:var(--muted);font-size:12px;margin:14px 0 0;font-style:italic} /* wishlist */ .wrow{display:grid;grid-template-columns:56px 1.4fr 0.7fr auto auto auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .target-form{display:flex;flex-direction:column;gap:3px} .target-form .cur{color:var(--text-2);font-size:13px} .target-form input{width:64px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:6px 8px;color:var(--text);font-family:var(--font-ui);font-size:13px;font-variant-numeric:tabular-nums} .target-form input:focus{outline:none;border-color:var(--accent-hover)} .btn-save.sm{padding:6px 10px;font-size:11px;border-radius:8px} .below-tag{margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#5fb37a;background:rgba(95,179,122,.14);padding:2px 7px;border-radius:999px;display:inline-block} .wrow .wart{width:56px;aspect-ratio:1;border-radius:8px;background-size:cover;box-shadow:0 6px 18px rgba(0,0,0,0.32)} .wrow .wt{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wrow .wa{color:var(--text-2);font-style:italic;font-size:12.5px;margin-top:2px} .wrow .wlow{font-family:var(--font-display);font-size:24px;color:var(--accent-hover);font-variant-numeric:tabular-nums;line-height:1.05} .chip.drop{border-color:rgba(var(--accent-rgb),0.4);background:rgba(var(--accent-rgb),0.14);color:var(--accent-hover);font-weight:700} /* footer */ .footer{max-width:1480px;width:calc(100% - 40px);margin:0 auto;padding:30px 10px 36px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .footer .fb{display:flex;align-items:center;gap:14px} .footer .fb img{width:56px;height:56px;border-radius:50%} .footer .fb span{font-family:var(--font-display);font-size:34px;letter-spacing:-0.05em} .footer .fdiv{width:1px;height:44px;background:var(--border)} .footer p{color:var(--text-2);font-size:13.5px;margin:0;flex:1;min-width:260px;line-height:1.6} /* ===== Platform sidebar shell (M5) ===== */ .app-shell{max-width:1480px;width:calc(100% - 40px);margin:20px auto 0;display:grid; grid-template-columns:220px minmax(0,1fr);border:1px solid var(--border); background:var(--shell-bg);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,0.42)} .app-main{min-width:0;padding:28px} .app-sidebar{display:flex;flex-direction:column;gap:22px;padding:24px 18px;border-right:1px solid var(--border); background:repeating-radial-gradient(circle at 8% 96%, rgba(var(--accent-rgb),0.045) 0 1px, transparent 1px 15px), var(--grain), linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.12))} .app-brand{display:flex;align-items:center;gap:10px} .app-brand img{width:40px;height:40px;border-radius:50%;flex-shrink:0} .app-brand span{font-family:var(--font-display);font-size:23px;letter-spacing:-0.05em} .user-card{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--border);border-radius:12px; background:rgba(255,255,255,0.02)} .user-card:hover{border-color:var(--border-strong)} .user-card .avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,#c97b3a,#a0432f)} .user-card .nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-card .un{color:var(--text-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-card .chev{color:var(--muted);font-size:15px;margin-left:auto} .side-nav{display:grid;gap:6px} .side-nav a{display:flex;gap:11px;align-items:center;padding:11px 13px;border-radius:11px;color:var(--text-2); font-size:14px;font-weight:600;transition:background .2s,color .2s,transform .2s} .side-nav a svg{width:19px;height:19px;flex-shrink:0} .side-nav a:hover{color:var(--text);background:rgba(255,255,255,0.04);transform:translateX(2px)} .side-nav a.on{background:var(--amber-soft);color:var(--accent-hover);box-shadow:inset 3px 0 0 var(--accent)} .side-nav .sep{height:1px;background:var(--border);margin:6px 4px} @keyframes vs-scan{0%,100%{top:18%}50%{top:82%}} .app-side-bottom{margin-top:auto;display:grid;gap:14px} .app-side-bottom .quote{font-family:var(--font-display);font-style:italic;font-size:16px;color:#cfc7bc;line-height:1.3} .app-side-bottom .qa{color:var(--accent-hover);font-size:11px;margin-top:6px} .app-side-bottom .status{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:12px} .app-side-bottom .status img{width:36px;height:36px;border-radius:50%;animation:vs-spin 2.8s linear infinite;flex-shrink:0} .app-side-bottom .status-connect{text-decoration:none;transition:color .15s} .app-side-bottom .status-connect:hover{color:var(--text)} .app-side-bottom .status-connect span{text-decoration:underline;text-underline-offset:2px} .app-side-bottom .status-connect img{animation:none;opacity:.5} .app-footer{max-width:1480px;width:calc(100% - 40px);margin:0 auto;padding:26px 12px 36px;display:flex; align-items:center;gap:20px;flex-wrap:wrap;color:var(--text-2);font-size:13px} .app-footer img{width:44px;height:44px;border-radius:50%} .app-footer .fname{font-family:var(--font-display);font-size:26px;letter-spacing:-0.05em;color:var(--text)} .app-footer .fdiv{width:1px;height:34px;background:var(--border)} @keyframes vs-spin{to{transform:rotate(1turn)}} /* ===== Responsive: mobile top bar + drawer nav (M-resp) ===== */ .mtopbar{display:none} .nav-backdrop{display:none} @media(max-width:900px){ .app-shell{grid-template-columns:1fr;width:100%;margin:0;border-radius:0;border-left:none;border-right:none;border-top:none} .app-main{padding:18px 16px} .detail{margin:-18px -16px 0;padding:18px 16px 0} .mtopbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:200;padding:9px 14px; background:rgba(13,10,7,0.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .mtb-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px; border:1px solid var(--border);background:var(--elevated);color:var(--text);cursor:pointer;flex-shrink:0} .mtb-burger svg{width:22px;height:22px} .mtb-brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0} .mtb-brand img{width:30px;height:30px;border-radius:50%;flex-shrink:0} .mtb-brand span{font-family:var(--font-display);font-size:20px;letter-spacing:-0.04em} .mtb-bell{position:relative;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0} .mtb-bell svg{width:22px;height:22px} .mtb-bell .nbadge{position:absolute;top:3px;right:3px;margin:0} .app-sidebar{position:fixed;top:0;left:0;bottom:0;width:282px;max-width:84vw;z-index:320;gap:20px; transform:translateX(-100%);transition:transform .26s ease;overflow-y:auto;background:#15110c} body.nav-open .app-sidebar{transform:none;box-shadow:0 0 60px rgba(0,0,0,0.6)} .nav-backdrop{display:block;position:fixed;inset:0;z-index:310;background:rgba(0,0,0,0.5); opacity:0;pointer-events:none;transition:opacity .26s} body.nav-open .nav-backdrop{opacity:1;pointer-events:auto} body.nav-open{overflow:hidden} .app-footer{padding:24px 16px 32px} /* Collection toolbar: search takes its own row on small screens */ .toolbar .search{flex:1 1 100%} /* Wishlist rows stack; the Alert-at form drops below the price */ .wrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .wrow>div:nth-child(2){flex:1 1 140px;min-width:0} .wrow .target-form{flex-basis:100%;flex-direction:row;align-items:center;gap:8px} } @media(max-width:560px){ .row.g4,.row.g5,.g-feed,.g-2,.g-detail,.g-stale{grid-template-columns:1fr} /* Tracks: keep #, Track, Plays — drop First/Last heard (4th, 5th columns) */ .tracks .thead{grid-template-columns:18px 1fr 44px} .tracks .trow{grid-template-columns:18px 1fr 44px} .tracks .thead span:nth-child(n+4),.tracks .trow span:nth-child(n+4){display:none} /* Journal: hide the header, let rows flow and wrap */ .journal .thead{display:none} .journal .trow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .journal .trow>span:nth-child(2){flex:1 1 120px;min-width:0} } /* ===== Settings / forms (M6) ===== */ .tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:22px} .tabs a{padding:11px 16px;color:var(--text-2);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px} .tabs a.on{color:var(--accent-hover);border-bottom-color:var(--accent)} .tabs a:hover{color:var(--text)} .fld{margin-bottom:16px} .fld label{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:9px} .fld input,.fld textarea{width:100%;padding:12px 16px;background:var(--surface);border:1.5px solid var(--border); border-radius:12px;color:var(--text);font-size:15px;font-family:var(--font-ui)} .fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--amber-soft)} .fld textarea{min-height:84px;resize:vertical} .fld .prefix{position:relative}.fld .prefix span{position:absolute;left:16px;top:13px;color:var(--muted)} .fld .prefix input{padding-left:32px} .toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)} .btn-amber{border:none;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:14px;padding:12px 22px;border-radius:12px;cursor:pointer;font-family:var(--font-ui)} .btn-amber:hover{background:var(--accent-hover)} .btn-line{border:1px solid var(--border);background:transparent;color:var(--text);font-weight:600;font-size:13px;padding:10px 18px;border-radius:11px;cursor:pointer;font-family:var(--font-ui)} .btn-line:hover{border-color:var(--border-strong)} .conn{display:flex;align-items:center;gap:9px;font-size:13.5px} .conn .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .conn .dot.on{background:#3fb950}.conn .dot.off{background:var(--muted)} .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0} .statgrid .b{font-family:var(--font-display);font-size:22px;font-variant-numeric:tabular-nums} .statgrid .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-top:2px} .danger{border:1px solid #cf5b3e !important} /* CD tag on cover cards (CDs view) */ .rec .cover .cd-tag{position:absolute;left:8px;top:8px;z-index:2;background:rgba(13,10,7,0.72);border:1px solid rgba(232,228,223,0.25); color:var(--text);font-size:10px;font-weight:800;letter-spacing:0.08em;padding:2px 7px;border-radius:6px} /* ===== Admin console (V4-C) ===== */ .admin-brand .sub{font-size:9.5px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-hover);margin-top:3px} .a-stat{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;padding:18px} .a-stat .lab{color:var(--text-2);font-size:12.5px;display:flex;align-items:center;gap:8px} .a-stat .big{font-family:var(--font-display);font-size:38px;line-height:1;margin:14px 0 6px;font-variant-numeric:tabular-nums} .a-stat .big.sm{font-size:28px;margin:10px 0 0} .a-stat .sub{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:10px} .a-stat .up{color:#5fb37a;font-size:11.5px;font-weight:700} .ok-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(58,140,82,0.4);background:rgba(58,140,82,0.1);border-radius:999px;padding:8px 16px;color:#5fb37a;font-size:12.5px;font-weight:700} .ok-pill .d{width:8px;height:8px;border-radius:50%;background:#5fb37a} .sbadge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700;text-transform:capitalize;white-space:nowrap} .sbadge.active{color:#5fb37a;background:rgba(58,140,82,0.13);border:1px solid rgba(58,140,82,0.4)} .sbadge.suspended{color:#e07a5a;background:rgba(200,80,50,0.13);border:1px solid rgba(200,80,50,0.4)} .sbadge.pending{color:#e0a84e;background:rgba(224,168,78,0.12);border:1px solid rgba(224,168,78,0.38)} .a-table{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(30,24,17,0.55)} .a-table .head,.a-table .tr{display:grid;grid-template-columns:1.7fr 1.4fr 0.8fr 1.5fr 0.8fr 0.65fr 0.8fr 1.1fr;gap:12px;padding:13px 18px;align-items:center} .a-table .head>*,.a-table .tr>*{min-width:0} .a-table .head{background:rgba(0,0,0,0.18);border-bottom:1px solid var(--border);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .a-table .tr{border-bottom:1px solid rgba(255,255,255,0.05);font-size:13px} .a-table .tr:last-child{border-bottom:none} /* Area chart (admin traffic etc.) - dependency-free, themeable, hover tooltip */ .vchart-plot{position:relative;height:150px;width:100%} .vchart-svg{width:100%;height:100%;display:block;overflow:visible} .vchart-area{fill:rgba(var(--accent-rgb),0.13)} .vchart-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .vchart-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--border-strong);opacity:0;pointer-events:none;transition:opacity .12s} .vchart-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.22);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .12s} .vchart-tip{position:absolute;top:-6px;transform:translateY(-100%);background:var(--elevated);border:1px solid var(--border-strong);border-radius:9px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:6;box-shadow:0 8px 22px rgba(0,0,0,0.28)} .vchart-tip b{display:block;font:700 10.5px var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px} .vchart-tip span{display:block;font-weight:500;color:var(--muted);font-size:11px;margin-top:1px} .vchart-x{display:flex;margin-top:7px} .vchart-x span{flex:1;text-align:center;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden} .a-uname{display:flex;align-items:center;gap:11px;min-width:0} .a-av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0} .row-act{cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-2);font:600 11.5px var(--font-ui);padding:6px 11px;border-radius:8px;white-space:nowrap} .row-act:hover{border-color:var(--border-strong)} .filt{display:flex;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:5px} .filt a{padding:8px 14px;border-radius:8px;color:var(--muted);font-weight:700;font-size:12.5px} .filt a.on{background:var(--amber-soft);color:var(--accent-hover)} .a-search{position:relative;flex:1;min-width:240px} .a-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px} .a-search input{width:100%;height:46px;padding:0 16px 0 42px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font:14px var(--font-ui)} .a-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--amber-soft)} .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:200;background:var(--elevated);border:1px solid rgba(var(--accent-rgb),0.4);border-radius:12px;padding:14px 22px;color:var(--text);font-size:13.5px;font-weight:600;box-shadow:0 16px 48px rgba(0,0,0,0.5);display:flex;align-items:center;gap:11px} .toast .ck{width:18px;height:18px;border-radius:50%;background:#5fb37a;display:inline-flex;align-items:center;justify-content:center;color:var(--base);font-size:11px;font-weight:900} .ver-pill{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;transition:color .15s} .ver-pill:hover{color:var(--text-2)} .ver-pill .d{width:7px;height:7px;border-radius:50%;background:#5fb37a} /* What's new: user-facing release notes */ .rel-notes{display:flex;flex-direction:column;gap:14px} .rel{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;padding:20px 22px} .rel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rel-v{font-family:var(--font-display);font-size:18px;letter-spacing:-0.02em;color:var(--accent-hover)} .rel-latest{font-size:9px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-hover);border:1px solid rgba(var(--accent-rgb),0.4);border-radius:5px;padding:2px 6px} .rel-date{color:var(--muted);font-size:12.5px;margin-left:auto} .rel-title{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-0.03em;color:var(--text);margin:10px 0 12px;line-height:1.2} .rel-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;color:var(--text-2);font-size:14px;line-height:1.6} .rel-list li{padding-left:3px} .rel-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px} @media(max-width:900px){.a-table .head{display:none}.a-table .tr{grid-template-columns:1fr 1fr;gap:8px}} /* no-Last.fm Overview: recently-added panels + connect CTA */ .added-h{display:flex;align-items:baseline;gap:10px} .added-h span{font-family:var(--font-ui);font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)} .lrow .thumb{position:relative} .lrow .thumb .cd-tag{position:absolute;left:4px;top:4px;font-size:7.5px;font-weight:800;letter-spacing:.08em;color:var(--text);background:rgba(13,10,7,.7);padding:1px 4px;border-radius:3px} .cta-lastfm{display:flex;align-items:center;gap:20px;border-color:rgba(var(--accent-rgb),.4)} .cta-lastfm .ic{width:52px;height:52px;border-radius:14px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0} .cta-lastfm h3{margin:0 0 4px} .cta-lastfm p{color:var(--text-2);font-size:13.5px;margin:0;line-height:1.55} .cta-lastfm .btn{flex-shrink:0} /* record purchase-price panel + invested/gain */ .cost{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;align-items:center} .cost-cell .cl{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .cost-v{font-family:var(--font-display);font-size:26px;letter-spacing:-0.03em;line-height:1} .cost-v.up,.disp.up{color:#5fb37a} .cost-v.down,.disp.down{color:#d2695a} .paid-form{display:flex;align-items:center;gap:6px} .paid-form .cur{font-family:var(--font-display);font-size:22px;color:var(--text-2)} .paid-form input{width:96px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:9px;padding:9px 10px;color:var(--text);font-family:var(--font-ui);font-size:15px;font-variant-numeric:tabular-nums} .paid-form input:focus{outline:none;border-color:var(--accent-hover)} .btn-save{background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:9px 16px;font-family:var(--font-ui);font-size:13px;font-weight:700;cursor:pointer} .btn-save:hover{background:var(--accent-hover)} .invest-strip .cell{flex:1} /* notifications bell badge + page */ .side-nav a .nbadge{margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} .notif-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .notif-row:last-child{border-bottom:none} .notif-row .ndot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px} .notif-row.read .ndot{background:var(--border-strong)} .notif-row .ntitle{font-weight:700;font-size:14px} .notif-row .nbody{color:var(--text-2);font-size:13px;margin-top:3px;line-height:1.5} .notif-row .nwhen{color:var(--muted);font-size:11.5px;margin-top:4px} /* flash messages + write-back add bar */ .flashes{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:400;display:grid;gap:8px;width:calc(100% - 40px);max-width:520px;pointer-events:none} .flash{padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:0 16px 40px rgba(0,0,0,.5);background:var(--elevated);border:1px solid var(--border-strong);color:var(--text);animation:vs-flash 5s ease forwards} .flash.success{background:rgba(36,28,18,0.98);border-color:rgba(95,179,122,.5);color:#8fd6a6} .flash.error{background:rgba(36,28,18,0.98);border-color:rgba(210,105,90,.5);color:#e09a8c} @keyframes vs-flash{0%{opacity:0;transform:translateY(-10px)}7%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;visibility:hidden}} .addbar{display:flex;gap:10px;margin-bottom:16px} .addbar input{flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:11px;padding:11px 14px;color:var(--text);font-family:var(--font-ui);font-size:14px} .addbar input:focus{outline:none;border-color:var(--accent-hover)} /* Add-to-collection/wishlist: trigger button + search modal */ .add-trigger-row{display:flex;justify-content:flex-end;margin-bottom:14px} .add-trigger{cursor:pointer;border:1px solid rgba(var(--accent-rgb),0.45);background:rgba(var(--accent-rgb),0.12);color:var(--accent-hover);font-family:var(--font-ui);font-weight:700;font-size:13px;padding:9px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:all .15s} .add-trigger svg{width:15px;height:15px} .add-trigger:hover{background:rgba(var(--accent-rgb),0.2);color:#f09a4e} .add-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px} .add-modal[hidden]{display:none} .add-backdrop{position:absolute;inset:0;background:rgba(8,6,4,0.74)} .add-dialog{position:relative;width:100%;max-width:560px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border-strong);background:var(--grain),linear-gradient(180deg,var(--elevated),var(--surface));border-radius:20px;box-shadow:0 40px 100px rgba(0,0,0,0.62)} .add-body{overflow-y:auto;min-height:0} .add-head{flex-shrink:0;display:flex;align-items:center;gap:13px;padding:22px 24px;border-bottom:1px solid var(--border)} .add-ic{width:42px;height:42px;border-radius:12px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0} .add-ic svg{width:22px;height:22px} .add-head h3{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-0.03em;margin:0} .add-sub{color:var(--muted);font-size:12px;margin-top:2px} .add-x{cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-2);width:34px;height:34px;border-radius:9px;font-size:18px;line-height:1;flex-shrink:0} .add-x:hover{color:var(--text);border-color:var(--border-strong)} .add-step{padding:24px} .add-tabs{display:flex;gap:5px;border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:5px;margin-bottom:16px} .add-tabs button{flex:1;cursor:pointer;border:none;background:transparent;color:var(--text-2);font-family:var(--font-ui);font-weight:700;font-size:13px;padding:10px;border-radius:8px;transition:.15s} .add-tabs button.on{background:var(--amber-soft);color:var(--accent-hover)} #addQuery{width:100%;box-sizing:border-box;height:50px;padding:0 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-size:15px;font-family:var(--font-ui)} #addQuery:focus{outline:none;border-color:var(--accent-hover)} .add-hint{display:flex;gap:11px;align-items:flex-start;margin:16px 0 22px;color:var(--muted);font-size:12.5px;line-height:1.6} .add-hint .spark{flex-shrink:0} .add-search-btn{cursor:pointer;border:none;background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-weight:800;font-size:14.5px;padding:14px;border-radius:12px;width:100%} .add-search-btn:hover{background:var(--accent-hover)} .add-search-btn:disabled{opacity:.6;cursor:default} .add-results-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px} .add-results-head .t2{flex:1;font-size:13.5px} .add-newsearch{color:var(--accent-hover);font-size:12.5px;font-weight:700;cursor:pointer} .add-results{display:grid;gap:10px} .add-row{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--elevated)} .add-row-cover{width:52px;height:52px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0} .add-row-meta{min-width:0} .add-row-title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .add-row-art{color:var(--text-2);font-weight:400;font-style:italic} .add-row-fmt{color:var(--text-2);font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .add-row-sub{color:var(--muted);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .add-row-btn{cursor:pointer;border:none;background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-weight:700;font-size:12.5px;padding:8px 18px;border-radius:9px;white-space:nowrap} .add-row-btn:hover{background:var(--accent-hover)} .add-row-btn:disabled{opacity:.6;cursor:default} .add-done{text-align:center;padding:44px 24px} .add-check{width:64px;height:64px;border-radius:50%;background:rgba(58,140,82,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 22px} .add-check span{color:#5fb37a;font-size:30px;font-weight:900} .add-done h3{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-0.035em;margin:0 0 8px} .add-done p{font-size:14px;margin:0 0 10px} .add-syncing{display:inline-flex;align-items:center;gap:9px;color:var(--accent-hover);font-size:12.5px;margin-bottom:28px} .add-spinner{width:14px;height:14px;border:2px solid var(--accent-hover);border-top-color:transparent;border-radius:50%;display:inline-block;animation:vs-spin .8s linear infinite} .add-done-actions{display:flex;gap:10px;justify-content:center} .btn-ghost{cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-2);font-family:var(--font-ui);font-weight:700;font-size:13px;padding:11px 18px;border-radius:10px} .btn-ghost:hover{color:var(--text);border-color:var(--border-strong)} @keyframes vs-spin{to{transform:rotate(1turn)}} /* purchase currency dropdown */ .paid-form .paid-cur{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:9px;padding:9px 6px;color:var(--text-2);font-family:var(--font-ui);font-size:12px} .paid-form .paid-cur:focus{outline:none;border-color:var(--accent-hover)} /* avatar file upload */ .file-input{font-family:var(--font-ui);font-size:13px;color:var(--text-2)} .file-input::file-selector-button{font-family:var(--font-ui);font-weight:700;font-size:12.5px;color:var(--accent-hover);background:var(--amber-soft);border:1px solid rgba(var(--accent-rgb),0.4);border-radius:9px;padding:8px 14px;margin-right:12px;cursor:pointer} .file-input::file-selector-button:hover{background:rgba(var(--accent-rgb),0.2)} /* avatar crop modal */ .crop-modal{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:24px} .crop-modal[hidden]{display:none} .crop-backdrop{position:absolute;inset:0;background:rgba(8,6,4,0.78)} .crop-dialog{position:relative;width:100%;max-width:420px;max-height:92vh;overflow:auto;border:1px solid var(--border-strong);background:var(--grain),linear-gradient(180deg,var(--elevated),var(--surface));border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,0.62);padding:22px} .crop-dialog h3{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-0.03em;margin:0 0 4px} /* fixed-size stage so Cropper fits inside the dialog instead of blowing it out */ .crop-stage{position:relative;width:100%;height:320px;background:var(--base);border-radius:12px;overflow:hidden} .crop-stage img{display:block;max-width:100%} /* circular crop preview (override Cropper's square default) */ #cropModal .cropper-view-box{border-radius:50%;outline:0;box-shadow:0 0 0 1px var(--accent-hover)} #cropModal .cropper-face{border-radius:50%} #cropModal .cropper-line,#cropModal .cropper-point{display:none} .crop-zoom{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .crop-zoom input[type=range]{flex:1;accent-color:var(--accent)} .crop-actions{display:flex;gap:10px;justify-content:flex-end} /* Scrobbles page (v10) */ .clk-key,.ch-key{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)} .clk-key>span,.ch-key>span{width:12px;height:12px;border-radius:3px} .ch-key{font-size:11.5px}.ch-key>span{width:10px;height:10px} .genre-bar{display:grid;grid-template-columns:84px 1fr 48px;gap:10px;align-items:center;font-size:12.5px;color:var(--text-2)} .genre-bar .gname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .genre-bar .gtrack{height:9px;border-radius:999px;background:var(--subtle);overflow:hidden} .genre-bar .gtrack>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover))} .genre-bar .gv{text-align:right;color:var(--text);font-variant-numeric:tabular-nums} /* collection growth (records added per year/quarter) on the Value page */ .growth-chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding-top:20px} .growth-chart .gcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .growth-chart .gcount{font-size:11px;font-weight:800;color:var(--text-2);margin-bottom:5px;font-variant-numeric:tabular-nums;min-height:14px} .growth-chart .gbar2{width:100%;max-width:48px;background:linear-gradient(180deg,var(--accent-hover),var(--accent));border-radius:5px 5px 0 0;transition:opacity .15s} .growth-chart .gcol:hover .gbar2{opacity:.8} .growth-chart .glabel{font-size:10.5px;color:var(--muted);margin-top:7px;white-space:nowrap} .month-chart{display:flex;gap:10px;height:200px;align-items:flex-end} .month-chart .mcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative} .month-chart .mbar{width:100%;max-width:30px;height:170px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;cursor:default} .month-chart .mlabel{font-size:10.5px;color:var(--muted)} .month-chart .mtip{position:absolute;bottom:178px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:7px 11px;white-space:nowrap;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .12s;z-index:5} .month-chart .mtip b{display:block;font-family:var(--font-display);font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1} .month-chart .mtip span{display:block;font-size:10.5px;color:var(--text-2);margin-top:3px} .month-chart .mcol:hover .mtip{opacity:1} .artist-row{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .artist-row:last-child{border-bottom:none} .artist-row .rk{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums} .artist-row .aname{min-width:0;display:flex;align-items:center;gap:8px} .artist-row .aname>span:first-of-type{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hist-thumb{width:32px;height:32px;border-radius:5px;background-size:cover;background-position:center;flex-shrink:0} .hist-thumb.noart{background:repeating-radial-gradient(circle at 50% 50%, rgba(232,228,223,0.06) 0 1px, transparent 1px 6px), var(--elevated)} .sc-feed{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)} .sc-feed:last-child{border-bottom:none} .sc-feed .thumb{width:40px;height:40px;border-radius:7px;background-size:cover;background-position:center;flex-shrink:0} .sc-feed .thumb.noart{background:repeating-radial-gradient(circle at 50% 50%, rgba(232,228,223,0.06) 0 1px, transparent 1px 6px), var(--elevated)} .sc-feed .ft{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sc-feed .fa{color:var(--text-2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .src-chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;color:var(--muted);border:1px solid var(--border)} .src-chip.owned{color:var(--accent-hover);border-color:rgba(var(--accent-rgb),0.4);background:var(--amber-soft)} .shelf-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;vertical-align:middle} .scr-filter{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 10px} .scr-filter label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)} .scr-filter select{appearance:none;-webkit-appearance:none;background:var(--surface) no-repeat right 10px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A59F99' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); border:1px solid var(--border);border-radius:9px;color:var(--text);font-family:var(--font-ui);font-size:13px; font-weight:600;padding:9px 30px 9px 12px;cursor:pointer;min-width:150px} .scr-filter select:hover{border-color:var(--border-strong)} .scr-filter select:focus{outline:none;border-color:var(--accent)} .scr-filter .link-more.sm{align-self:flex-end;padding-bottom:10px} /* period stats strip - adapts to the selected month/source */ .period-strip{border:1px solid var(--border);border-radius:14px;background:var(--surface-2,rgba(255,255,255,0.02)); padding:18px 18px 16px;margin:0 0 16px} .ps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .ps-total{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text)} .ps-sub{font-size:12px;color:var(--text-2);margin-top:6px;text-transform:uppercase;letter-spacing:.05em;font-weight:700} .ps-change{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;padding:6px 12px; border-radius:999px;white-space:nowrap} .ps-change.up{color:#2dd4a7;background:rgba(45,212,167,0.12)} .ps-change.down{color:#e8703a;background:rgba(232,112,58,0.12)} .ps-change .ps-vs{font-size:11px;font-weight:600;opacity:.8;text-transform:none;letter-spacing:0} .ps-bars{display:flex;align-items:flex-end;gap:3px;height:90px;margin:18px 0 4px} .ps-bars.year{gap:8px} .ps-bars.month{gap:5px} .psb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .psb-fill{width:100%;max-width:26px;background:var(--accent);border-radius:3px 3px 0 0;transition:opacity .15s} .psb:hover .psb-fill{opacity:.75} .psb-lab{font-size:10px;color:var(--muted);margin-top:5px;white-space:nowrap} .ps-bars.day .psb-lab{display:none} .ps-bars.day .psb.tick .psb-lab{display:block} .ps-caption{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 14px} .ps-tops{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .ps-top{display:flex;align-items:baseline;gap:8px;min-width:0;padding:10px 12px;border-radius:10px; background:rgba(255,255,255,0.03)} .ps-top .ps-k{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted); flex:0 0 auto} .ps-top .ps-v{font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .ps-top .ps-n{font-size:12px;font-weight:800;color:var(--accent-hover);flex:0 0 auto} .ps-disc{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px; border-top:1px solid var(--border)} .ps-disc-h{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .ps-d{font-size:13px;color:var(--text-2)} .ps-d b{color:var(--text);font-weight:800;font-size:15px;margin-right:3px} /* listening by weekday (in the clock panel) */ .wd-head{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); text-align:center;margin:20px 0 8px} .wd-chart{display:flex;align-items:flex-end;gap:6px;height:64px;max-width:300px;margin:0 auto} .wd-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .wd-bar{width:100%;max-width:26px;background:var(--accent);border-radius:3px 3px 0 0;transition:opacity .15s} .wd-col:hover .wd-bar{opacity:.75} .wd-lab{font-size:10px;color:var(--muted);margin-top:5px} /* Listening History page */ .hist-tabs{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;width:100%;overflow:visible} .hist-tabs-scroll{display:flex;align-items:center;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1;min-width:0} .hist-tabs-scroll::-webkit-scrollbar{display:none} .hist-back{display:flex;align-items:center;justify-content:center;width:42px;min-width:42px;height:42px;border-radius:8px;color:var(--text);text-decoration:none;font-size:26px;flex-shrink:0;transition:background .15s,color .15s} .hist-back:hover{background:rgba(255,255,255,0.06);color:var(--text)} .hist-tab{background:none;border:none;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0} .htab-icon{font-size:12px;opacity:0.7} .hist-tab:hover{background:rgba(255,255,255,0.06);color:var(--text)} .hist-tab.active{background:var(--elevated);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.25)} @media(max-width:600px){.hist-tab{padding:10px 14px;font-size:13px}} .hss{background:var(--elevated);border-radius:10px;padding:14px 16px} .hss-meta{font-size:12px;color:var(--text-2);margin-bottom:10px} .hss-meta b{color:var(--text);font-size:14px} .hss-row{display:grid;grid-template-columns:minmax(80px,160px) 1fr 36px;align-items:center;gap:10px;margin-bottom:5px} .hss-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} .hss-bar-wrap{background:rgba(255,255,255,0.07);border-radius:3px;height:5px;overflow:hidden} .hss-bar{background:var(--accent);height:100%;border-radius:3px} .hss-count{font-size:11px;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums} .sc-list{display:grid;gap:0} .sc-day{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); margin:16px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06)} .sc-list .sc-day:first-child{margin-top:0;padding-top:0;border-top:none} .sc-time{font-size:11px;white-space:nowrap;min-width:42px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} /* Scrobbles: month-by-month recap */ .recap{display:grid;gap:2px} .recap-row{display:grid;grid-template-columns:120px 132px 1fr 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.055)} .recap-row:last-child{border-bottom:none} .recap-row .rmonth{font-family:var(--font-display);font-weight:500;font-size:15.5px;letter-spacing:-0.02em} .recap-row .rcount{color:var(--text-2);font-size:12.5px} .recap-row .rcount b{color:var(--text);font-variant-numeric:tabular-nums} .recap-row .rtop{min-width:0;display:flex;align-items:center;gap:9px;font-size:12.5px} .recap-row .rk2{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-shrink:0;width:62px} .recap-row .rv{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .recap-row .rn{color:var(--accent-hover);font-variant-numeric:tabular-nums;font-size:11.5px;flex-shrink:0} @media(max-width:820px){.recap-row{grid-template-columns:1fr 1fr;gap:8px 14px}} /* listening clock: hover highlight + busiest-hour stats */ .clk-wedge{cursor:default;transition:fill .1s} .clk-wedge:hover{fill:#f0e9e2} .clock-stats{display:flex;gap:30px;justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);text-align:center} .clock-stats .cs-big{font-family:var(--font-display);font-size:24px;color:var(--text);letter-spacing:-0.02em;margin-top:4px;font-variant-numeric:tabular-nums} /* Music by decade (collection) */ .mbd-grid{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:center} .mbd-rows{display:grid;gap:9px} .mbd-row{display:grid;grid-template-columns:64px 1fr 34px;gap:12px;align-items:center;cursor:default;padding:3px 6px;border-radius:8px;transition:background .12s;outline:none} .mbd-row:hover,.mbd-row.on{background:rgba(255,255,255,0.04)} .mbd-label{font-size:12px;color:var(--text-2);white-space:nowrap} .mbd-row.on .mbd-label{color:var(--text)} .mbd-track{height:18px;background:var(--surface);border-radius:5px;overflow:hidden} .mbd-fill{height:100%;border-radius:5px;background:repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 7px);min-width:4px} .mbd-row.on .mbd-fill{background:repeating-linear-gradient(90deg, var(--accent-hover) 0 3px, transparent 3px 7px)} .mbd-count{font-size:12px;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums} .mbd-top{display:flex;gap:14px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--elevated);color:inherit;min-width:0} .mbd-cover{width:64px;height:64px;border-radius:9px;background:repeating-radial-gradient(circle at 50% 50%, rgba(232,228,223,0.06) 0 1px, transparent 1px 6px), var(--elevated);background-size:cover;background-position:center;flex-shrink:0;box-shadow:0 8px 20px rgba(0,0,0,.4)} .mbd-tt{font-family:var(--font-display);font-size:16px;letter-spacing:-0.02em;margin-top:4px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} @media(max-width:820px){.mbd-grid{grid-template-columns:1fr}} /* external links on record detail (Discogs / Last.fm) */ .ext-links{display:flex;gap:10px;margin-top:14px} .ext-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text-2);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:10px;transition:all .15s} .ext-btn svg{width:16px;height:16px} .ext-btn:hover{color:var(--accent-hover);border-color:rgba(var(--accent-rgb),0.45);background:var(--amber-soft)} /* format badge on collection cards (when showing vinyl + CD together) */ .grid-records .cover .fmt-badge{position:absolute;left:8px;top:8px;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--text);background:rgba(13,10,7,0.78);padding:2px 6px;border-radius:5px} .grid-records .cover .fmt-tag{position:absolute;left:8px;top:8px;z-index:2;font-size:9.5px;font-weight:800;letter-spacing:.07em;line-height:1;padding:3px 6px;border-radius:5px;backdrop-filter:blur(2px)} .grid-records .cover .fmt-tag.lp{color:var(--text);background:rgba(13,10,7,0.78);border:1px solid rgba(232,228,223,0.22)} .grid-records .cover .fmt-tag.cd{color:var(--base);background:rgba(var(--accent-rgb),0.92);border:1px solid rgba(232,133,52,0.55)} /* match-scrobbles-as alias on record */ .match-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .match-form>label{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} .match-row{display:flex;gap:8px;align-items:center;margin-bottom:6px} .match-row .match-k{font-size:11px;color:var(--text-2);width:42px;flex-shrink:0} .match-row input{flex:1;min-width:0;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:9px;padding:8px 11px;color:var(--text);font-family:var(--font-ui);font-size:13px} .match-row input:focus{outline:none;border-color:var(--accent-hover)} .match-hint{color:var(--muted);font-size:11px;margin-top:7px;line-height:1.5} /* feedback form + admin inbox */ .fb-kinds{display:flex;gap:10px;flex-wrap:wrap} .fb-kind{cursor:pointer} .fb-kind input{display:none} .fb-kind span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:10px;padding:9px 14px;font-size:13px;color:var(--text-2);transition:.15s} .fb-kind input:checked + span{border-color:var(--accent-hover);color:var(--accent-hover);background:var(--amber-soft)} .fb-item.done{opacity:.55} .fb-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap} .fb-kind-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px} .fb-kind-tag.bug{color:#e09a8c;background:rgba(210,105,90,.16)} .fb-kind-tag.idea{color:var(--accent-hover);background:var(--amber-soft)} .fb-kind-tag.general{color:#9fb6c2;background:rgba(120,150,170,.16)} .fb-msg{white-space:pre-wrap;line-height:1.6;font-size:14px} .fb-shot{display:block;margin-top:12px} .fb-shot img{max-width:320px;max-height:240px;border-radius:10px;border:1px solid var(--border);display:block} /* Milestones (collector achievements) - categorised Reddit-style carousels */ .ms-wrap{border:1px solid var(--border);border-radius:16px;padding:22px 22px 24px;margin-top:16px;background:rgba(26,20,14,0.5)} .ms-wrap-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px} .ms-wrap-title{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:500;letter-spacing:-0.02em;color:var(--text);margin:0;flex:1} .ms-wrap-count{color:var(--muted);font-size:13px} .ms-cat{margin-top:20px} .ms-cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .ms-cat-title{font-family:Fraunces,Georgia,serif;font-size:15px;color:var(--accent-hover);font-weight:500;margin:0} .ms-cat-count{color:var(--muted);font-size:12px} .ms-railwrap{position:relative} .ms-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 4px} .ms-rail::-webkit-scrollbar{display:none} .ms{flex:0 0 122px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px} .ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:18px 12px} .ms-stamp{width:72px;height:72px;object-fit:contain;display:block} .ms.on .ms-stamp{filter:drop-shadow(0 6px 16px rgba(var(--accent-rgb),0.28))} .ms:not(.on) .ms-stamp{opacity:.4} .ms-glyph{display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:30px;line-height:1;color:var(--muted);border:1.5px solid var(--border);background:var(--elevated)} .ms.on .ms-glyph{color:var(--accent-hover);border-color:rgba(var(--accent-rgb),0.5);box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.12)} .ms-t{font-weight:700;font-size:12.5px;color:var(--text);line-height:1.2} .ms:not(.on) .ms-t{color:#8a847d} .ms-d{font-size:11px;color:var(--text-2);line-height:1.3} .ms:not(.on) .ms-d{color:var(--muted)} .ms-w{font-size:10.5px;color:#9a8b73;font-weight:600;font-variant-numeric:tabular-nums;margin-top:1px} .ms-h{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px} .ms-arrow{position:absolute;top:30px;z-index:3;width:32px;height:32px;border-radius:50%;cursor:pointer;border:1px solid var(--border-strong);background:rgba(13,10,7,0.86);color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0} .ms-arrow:hover{border-color:var(--accent-hover);color:var(--accent-hover)} .ms-arrow.prev{left:-6px} .ms-arrow.next{right:-6px} /* small inline info marker with a native tooltip (hover/tap) */ .info-i{color:var(--muted);cursor:help;font-style:normal;margin-left:5px;font-size:12.5px;vertical-align:middle} .info-i:hover{color:var(--accent-hover)} /* Feedback helpdesk thread (admin + user) */ .fb-status{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--border)} .fb-status.s-open{color:#e0a341;border-color:rgba(224,163,65,0.4);background:rgba(224,163,65,0.12)} .fb-status.s-answered{color:#5fb37a;border-color:rgba(95,179,122,0.4);background:rgba(95,179,122,0.12)} .fb-status.s-resolved{color:var(--muted)} .fb-thread{display:grid;gap:8px;margin:12px 0 4px} .fb-bubble{border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.5;max-width:90%} .fb-bubble .fb-who{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em} .fb-bubble.admin{background:var(--amber-soft);border:1px solid rgba(var(--accent-rgb),0.3);justify-self:start} .fb-bubble.user{background:rgba(255,255,255,0.04);border:1px solid var(--border);justify-self:end} .fb-reply{display:flex;gap:8px;align-items:flex-end;margin-top:10px} .fb-reply textarea{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-ui);font-size:13px;padding:8px 10px;resize:vertical} .fb-reply textarea:focus{outline:none;border-color:var(--accent-hover)} /* Help index: one card per topic */ .help-index{display:flex;flex-direction:column;gap:12px} .help-card{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;transition:border-color .15s,transform .15s;color:var(--text)} .help-card:hover{border-color:var(--border-strong);transform:translateY(-1px)} .help-card-ic{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(var(--accent-rgb),.12);color:var(--accent-hover);display:flex;align-items:center;justify-content:center} .help-card-body{flex:1;min-width:0} .help-card-t{font-family:var(--font-ui);font-weight:600;font-size:16px;color:var(--text)} .help-card-s{color:var(--text-2);font-size:13.5px;line-height:1.5;margin-top:4px} .help-card-arrow{flex:none;color:var(--accent-hover);font-size:20px} /* Help article: a single topic subpage */ .help-article{color:var(--text-2);line-height:1.7;font-size:14.5px} .help-article > *:first-child{margin-top:0} .help-article p{margin:0 0 14px} .help-article .help-lead{color:var(--text);font-size:16px;line-height:1.6} .help-article .help-note{font-size:13px;border-left:2px solid var(--border-strong);padding-left:12px;color:var(--text-2)} .help-article h3{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-0.03em;color:var(--text);margin:26px 0 12px} .help-article h4{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--text);margin:20px 0 8px} .help-article ol,.help-article ul{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px} .help-article li{padding-left:3px} .help-article em{color:var(--text);font-style:italic} .donut-block{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .vdonut{position:relative;width:136px;height:136px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25)} .vdonut::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.08) 3px 4px)} .vdonut-hole{position:absolute;inset:30%;border-radius:50%;background:var(--panel-bg); box-shadow:0 0 0 1px var(--border);z-index:1} .donut-legend{flex:1;min-width:150px;display:grid;grid-template-columns:1fr;gap:6px 22px;align-content:center} @media (max-width:680px){.donut-legend{grid-template-columns:1fr !important}} .dleg{display:flex;align-items:center;gap:9px;font-size:13px} .dleg .dot{width:10px;height:10px;border-radius:3px;flex:none} .dleg-l{flex:1;min-width:0;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dleg-v{font-weight:700;font-variant-numeric:tabular-nums} color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em} .spec-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px} .spec-key{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);transition:color .15s} a.spec-key:hover{color:var(--text)} .spec-key .dot{width:9px;height:9px;border-radius:2px;flex:none} .spec-key strong{color:var(--text)} .rar-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600; color:var(--accent-hover);border:1px solid var(--border);border-radius:999px;padding:4px 11px} .rar-chip:hover{border-color:var(--border-strong)} /* rarity tier fills (reused by spectrum segments + legend dots) */ .lad{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px; border:1px solid var(--border);background:rgba(255,255,255,.015);transition:all .15s;cursor:pointer;color:inherit} .lad:hover,.lad.on{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.1)} .lad.dim{opacity:.5} .lad .sw{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,.25) inset} .lad .nm{font-weight:700;font-size:13.5px;width:96px;flex-shrink:0} .lad .ct{font-family:var(--font-display);font-size:20px;width:34px;text-align:right} .lad .mt{color:var(--muted);font-size:12px;flex:1} .lad .av{font-family:var(--font-display);font-size:17px;color:var(--accent-hover)} .band{cursor:pointer;transition:opacity .15s} overflow:hidden;transition:filter .15s;text-decoration:none} border-bottom:2px solid var(--border-strong)} overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.05)} color:var(--text);white-space:nowrap;overflow:hidden;max-height:100%;padding:8px 0;position:relative;z-index:1} .mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:5px} .mtile{aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .12s} .mtile:hover{transform:scale(1.08)} border-radius:12px;background:rgba(255,255,255,.015);text-decoration:none;color:inherit;transition:border-color .15s} /* value-crate preview: Genre Crate Mosaic (design handover) */ .crate-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent-hover); border:1px solid rgba(var(--accent-rgb),.45);border-radius:999px;padding:6px 14px;text-decoration:none;transition:.15s} .crate-cta:hover{background:var(--amber-soft)} .crate-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1.25fr .9fr;gap:12px;min-height:340px} .crate-grid > a:nth-child(1){grid-column:1/3;grid-row:1} .crate-grid > a:nth-child(2){grid-column:3/4;grid-row:1} .crate-grid > a:nth-child(3){grid-column:4/5;grid-row:1} .crate-grid > a:nth-child(4){grid-column:1/4;grid-row:2} .crate-grid > a:nth-child(5){grid-column:4/5;grid-row:2} .crate-tile{position:relative;overflow:hidden;border-radius:12px;background:#130f0a;text-decoration:none; border:1px solid color-mix(in oklab, var(--genre), #000 30%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.3);transition:transform .15s} .crate-tile:hover{transform:translateY(-3px)} .crate-tile:focus-visible{outline:2px solid var(--genre-accent);outline-offset:2px} .crate-media{position:absolute;inset:0;display:flex} .crate-cover{flex:1;background-size:cover;background-position:center;min-width:0;filter:saturate(.85) brightness(.7)} .crate-spines{flex:1;background: repeating-linear-gradient(90deg, color-mix(in oklab,var(--genre),#000 35%) 0 6px, color-mix(in oklab,var(--genre),#000 60%) 6px 9px, var(--base) 9px 13px), linear-gradient(180deg, color-mix(in oklab,var(--genre),#000 20%), var(--base))} .crate-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(12,9,6,.88), rgba(12,9,6,.4) 48%, rgba(12,9,6,.72)), linear-gradient(0deg, rgba(12,9,6,.92), transparent 60%)} .crate-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px} .crate-ico{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:color-mix(in oklab,var(--genre),#000 30%);border:1px solid var(--genre-accent);color:var(--genre-accent)} .crate-ico svg{width:17px;height:17px} .crate-name{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-0.02em;color:#fff;line-height:1} .crate-val{font-family:var(--font-display);font-size:20px;color:var(--genre-accent);line-height:1.1} .crate-meta{font-size:11.5px;color:rgba(255,255,255,.7)} .crate-grid > a:nth-child(n+3) .crate-name{font-size:16px} .crate-grid > a:nth-child(n+3) .crate-val{font-size:16px} .crate-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px} .crate-foot-stats b{color:var(--text-2)} .crate-sw{display:inline-flex;gap:2px;border:1px solid var(--border);border-radius:9px;padding:3px;background:var(--surface)} .crate-sw a{font-size:11.5px;font-weight:700;color:var(--text-2);padding:5px 10px;border-radius:6px;text-decoration:none} .crate-sw a.on{background:var(--amber-soft);color:var(--accent-hover)} /* Value-by-genre crate mosaic: proportional treemap of crate tiles */ .vc-treemap{position:relative;width:100%;height:0} .vc-genre-tile{position:absolute;overflow:hidden;border-radius:11px;background:#0e0a06; text-decoration:none;border:1px solid color-mix(in srgb, var(--genre-color) 78%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -40px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.55); transition:transform .15s} .vc-genre-tile:hover{transform:scale(1.012);z-index:3} .vc-genre-tile:focus-visible{outline:2px solid var(--genre-accent);outline-offset:2px;z-index:3} .vc-crate-media{position:absolute;inset:0;background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.04) 45%, rgba(0,0,0,.35)), radial-gradient(circle at 20% 35%, color-mix(in srgb, var(--genre-color) 18%, transparent), transparent 40%)} .vc-cover-collage{position:absolute;inset:0;display:flex;overflow:hidden} .vc-cell{flex:1 1 0;min-width:0;overflow:hidden;display:flex;justify-content:center;align-items:center} .vc-cell img{height:100%;width:auto;max-width:none;display:block;filter:saturate(.96) contrast(1.04) brightness(.86)} .vc-crate-lip{position:absolute;left:0;right:0;bottom:0;height:42px;border-top:1px solid rgba(255,178,91,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(92,45,18,.55), rgba(45,21,8,.88)), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 22px)} .vc-crate-lip::after{content:'';position:absolute;left:50%;bottom:11px;width:60px;height:14px;transform:translateX(-50%); border-radius:999px;background:rgba(0,0,0,.42);box-shadow:inset 0 2px 8px rgba(0,0,0,.7)} .vc-tile-vignette{position:absolute;inset:0;background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18) 52%, rgba(0,0,0,.14)), linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.12) 48%, transparent 70%)} .vc-tile-content{position:absolute;left:16px;bottom:18px;z-index:2;max-width:min(75%,240px);pointer-events:none} .vc-genre-icon{width:32px;height:32px;display:grid;place-items:center;margin-bottom:14px;border-radius:999px; border:1px solid var(--genre-accent);color:var(--genre-accent); background:color-mix(in srgb, var(--genre-color) 35%, rgba(0,0,0,.52));box-shadow:0 0 18px color-mix(in srgb, var(--genre-color) 30%, transparent)} .vc-genre-icon svg{width:17px;height:17px} .vc-genre-name{display:block;color:#fff8ed;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.8vw,27px);line-height:.95;letter-spacing:-0.035em;text-shadow:0 2px 14px rgba(0,0,0,.95)} .vc-genre-value{display:block;margin-top:6px;color:var(--genre-accent);font-family:var(--font-display);font-size:clamp(15px,1.6vw,23px);text-shadow:0 2px 12px rgba(0,0,0,.95)} .vc-genre-meta{display:block;margin-top:5px;color:rgba(255,248,237,.82);font-size:12px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.9)} /* size-aware tiles: small crates drop the icon/meta and shrink so labels never clip */ .vc-genre-tile.vc-lg .vc-genre-icon{margin-bottom:24px} .vc-genre-tile.vc-sm .vc-genre-meta{display:none} /* tall crates: two rows of sleeves (grid fills columns across 2 rows) */ .vc-genre-tile.vc-rows2 .vc-cover-collage{display:grid;grid-template-rows:1fr 1fr;grid-auto-flow:column;grid-auto-columns:1fr} .vc-genre-tile.vc-sm .vc-tile-content{left:12px;bottom:12px;max-width:92%} .vc-genre-tile.vc-sm .vc-genre-name{font-size:15px} .vc-genre-tile.vc-sm .vc-genre-value{font-size:15px;margin-top:3px} .vc-genre-tile.vc-md .vc-genre-meta{font-size:11.5px} .vc-genre-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:12px} .vc-genre-footer strong{color:var(--text-2)} /* Value-by-genre crate: mobile layout (proportional cover strip + info list) */ .vc-mob{display:none} .vc-mob-strip{display:flex;gap:3px;height:88px;border-radius:10px;overflow:hidden;border:1px solid var(--border)} .vc-mob-box{position:relative;min-width:22px;overflow:hidden; background:color-mix(in srgb, var(--genre-color) 42%, var(--base));box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)} .vc-mob-box img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.82)} .vc-mob-list{display:flex;flex-direction:column;margin-top:12px} .vc-mob-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)} .vc-mob-row:last-child{border-bottom:none} .vc-mob-dot{width:11px;height:11px;border-radius:3px;flex:none} .vc-mob-name{font-weight:700;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vc-mob-meta{color:var(--muted);font-size:12px;white-space:nowrap} .vc-mob-val{font-family:var(--font-display);font-size:16px;color:var(--accent-hover);min-width:62px;text-align:right} @media (max-width:680px){.vc-treemap{display:none}.vc-mob{display:block}} /* Rarity breakdown: desktop record + ladder; mobile stacks + fits rows */ .rar-layout{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;margin-top:10px} @media (max-width:680px){ .rar-layout{grid-template-columns:1fr;gap:14px} .rar-rec{max-width:230px;margin:0 auto} .lad{gap:10px;padding:11px 12px} .lad .nm{width:auto;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lad .mt{display:none} .lad > span:last-child{display:none} } /* iOS Safari zooms into any focused text input whose font-size is under 16px (e.g. tapping mine/loaner on Spin focuses the search and the page jumps). Hold mobile inputs at 16px to stop that auto-zoom. */ @media (max-width:768px){ input[type="text"],input[type="search"],input[type="email"],input[type="password"], input[type="number"],input[type="tel"],input[type="url"],input[type="datetime-local"], textarea,select{font-size:16px !important} } /* Record of the Day */ .rotd{padding:16px 22px} .rotd-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .rotd-body{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)} .rotd-thumb{width:56px;height:56px;flex-shrink:0;border-radius:6px;background-size:cover;background-position:center} .rotd-thumb-empty{background:var(--elevated)} .rotd-title{font-family:var(--font-display);font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rotd-sub{font-size:12px;color:var(--text-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rotd-meta{font-size:11.5px;color:var(--muted);margin-top:5px} /* Now Playing - frosted-glass hero card; passive reflection of Last.fm, not a player */ .hero-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(28px,4vw,56px);width:100%} .hero-row .inner{flex:1 1 380px;max-width:560px} .np-card{ position:relative;z-index:2;flex:0 0 auto;width:380px;max-width:100%; color:#ece8e2; text-decoration:none; border:1px solid rgba(226,133,52,.26); background:linear-gradient(180deg, rgba(28,21,14,.72), rgba(16,12,8,.78)); backdrop-filter:blur(20px) saturate(1.25); -webkit-backdrop-filter:blur(20px) saturate(1.25); border-radius:22px; padding:24px; display:grid; gap:22px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } /* Let grid rows shrink so a long title ellipsizes instead of forcing the card wider (which otherwise pushes the source chip off the visible edge). */ .np-card > *{min-width:0} /* Clickable only when the track is owned (JS sets href). */ .np-card[href]{cursor:pointer} .np-card[href]:hover{border-color:rgba(226,133,52,.55); transform:translateY(-2px); box-shadow:0 36px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08)} .np-head{display:flex; align-items:center; justify-content:space-between} .np-label{display:inline-flex; align-items:center; gap:9px; color:#e28534; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase} .np-eq{display:inline-flex; align-items:flex-end; gap:2px; height:12px} .np-eq i{width:2.5px; height:100%; border-radius:2px; background:#5fb37a; transform-origin:bottom; animation:vs-eq .5s ease-in-out infinite alternate} .np-eq i:nth-child(2){animation-duration:.42s; animation-delay:.12s} .np-eq i:nth-child(3){animation-duration:.6s; animation-delay:.06s} .np-eq i:nth-child(4){animation-duration:.48s; animation-delay:.2s} .np-chip{display:inline-flex; align-items:center; gap:6px; color:#e28534; font-size:10.5px; font-weight:700; border:1px solid rgba(226,133,52,.32); border-radius:999px; padding:4px 11px; white-space:nowrap} .np-chip svg{width:11px; height:11px} .np-art-row{display:flex; align-items:center; gap:46px; padding-right:6px} .np-art{position:relative; width:104px; height:104px; flex-shrink:0} .np-disc{position:absolute; right:-34px; top:0; width:104px; height:104px; border-radius:50%; background: radial-gradient(circle at 50% 50%, #15110c 0 9%, transparent 10%), repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.32) 0 1.5px, transparent 1.5px 6px), conic-gradient(from 0deg, #b4471f, #e69b4d 25%, #b4471f 50%, #e69b4d 75%, #b4471f), #2a1208; box-shadow:0 12px 26px rgba(0,0,0,.55); animation:vs-spin 3.2s linear infinite} .np-cover{position:relative; z-index:2; width:104px; height:104px; border-radius:10px; background-size:cover; background-position:center; background-color:#6f2410; background-image:linear-gradient(150deg,#f3b86b 0%,#d2691e 44%,#6f2410 100%); box-shadow:0 14px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(0,0,0,.15)} .np-meta{position:relative; z-index:3; min-width:0; flex:1} .np-track{font-family:var(--font-display), Georgia, serif; font-size:27px; font-weight:500; letter-spacing:-.035em; line-height:1.05; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .np-artist{color:#e8e4df; font-size:14.5px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .np-album{color:#8a837b; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .np-progress{display:grid; gap:8px} .np-bar{position:relative; height:5px; border-radius:999px; background:rgba(255,255,255,.13)} .np-fill{position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg,#d2691e,#e69b4d); border-radius:999px} .np-thumb{position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:50%; background:#f3d9b8; transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.5)} .np-times{display:flex; justify-content:space-between; color:#8a837b; font-size:11px; font-variant-numeric:tabular-nums} @keyframes vs-spin{ to{ transform:rotate(1turn) } } @keyframes vs-eq{ 0%{ transform:scaleY(.28) } 100%{ transform:scaleY(1) } } .np-card.is-paused .np-disc, .np-card.is-paused .np-eq i{ animation-play-state:paused } @media(max-width:860px){ .np-card{width:100%} .hero-row{justify-content:flex-start} } @media(prefers-reduced-motion:reduce){ .np-disc,.np-eq i{animation:none} } /* Now Playing - compact pill for inner-page heroes (top-right). Pinned to the hero, not .inner, so it sits against the hero's right edge. */ .np-mini{position:absolute; top:clamp(16px,2.4vw,26px); right:clamp(16px,2.4vw,28px); z-index:2; display:flex; align-items:center; gap:11px; max-width:300px; text-decoration:none; padding:9px 14px 9px 11px; border-radius:14px; border:1px solid rgba(226,133,52,.26); background:linear-gradient(180deg, rgba(28,21,14,.72), rgba(16,12,8,.8)); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)} .np-mini:hover{border-color:rgba(226,133,52,.5)} .np-mini.np-mini-nolink{cursor:default} .np-mini-eq{display:inline-flex; align-items:flex-end; gap:2px; height:14px; flex-shrink:0} .np-mini-eq i{width:2.5px; height:100%; border-radius:2px; background:#5fb37a; transform-origin:bottom; animation:vs-eq .5s ease-in-out infinite alternate} .np-mini-eq i:nth-child(2){animation-duration:.42s; animation-delay:.12s} .np-mini-eq i:nth-child(3){animation-duration:.6s; animation-delay:.06s} .np-mini-eq i:nth-child(4){animation-duration:.48s; animation-delay:.2s} .np-mini-art{width:38px; height:38px; border-radius:7px; flex-shrink:0; background:#2a1208 center/cover no-repeat; background-image:linear-gradient(150deg,#f3b86b,#6f2410); box-shadow:0 4px 12px rgba(0,0,0,.45)} .np-mini-body{min-width:0; display:flex; flex-direction:column; line-height:1.25} .np-mini-label{font-size:8.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#e28534} .np-mini-track{font-size:13px; font-weight:600; color:#ece8e2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .np-mini-artist{font-size:11.5px; color:#a59f99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} @media(max-width:680px){ .np-mini{display:none !important} } @media(prefers-reduced-motion:reduce){ .np-mini-eq i{animation:none} } /* Format breakdown */ .fmt-breakdown{padding:18px 22px} .fmt-row{display:grid;grid-template-columns:20px 80px 1fr 38px 52px;align-items:center;gap:8px} .fmt-icon{font-size:13px;text-align:center;line-height:1} .fmt-label{font-size:13px;color:var(--text-2)} .fmt-track{height:7px;background:var(--elevated);border-radius:4px;overflow:hidden} .fmt-fill{height:100%;border-radius:4px;background:var(--accent)} .fmt-fill-vinyl{background:var(--accent)} .fmt-fill-cd{background:#6fb3c7} .fmt-fill-cassette{background:#b87c4b} .fmt-fill-digital{background:#7c6fb8} .fmt-fill-other{background:var(--muted)} .fmt-pct{font-size:11.5px;color:var(--muted);text-align:right} .fmt-count{font-size:13px;font-weight:600;text-align:right} @media (max-width:600px){ .fmt-row{grid-template-columns:18px 64px 1fr 34px 44px;gap:6px} } /* ===== Daylight theme (light) - v2: High-Contrast Warm ===== */ /* Accent (#D2691E / #E28534) preserved exactly. All surfaces/text revised. */ [data-theme="daylight"]{ /* Surfaces - clear 3-step hierarchy */ --base:#DDD1B9; /* warm tan canvas - distinctly darker than cards */ --surface:#FDFAF3; /* warm white card surface */ --elevated:#FFFFFF; /* pure white - highest elevation */ --subtle:#ECE4D2; /* warm linen - tinted fills, hover bg */ /* Borders - confident, visible */ --border:#C5B396; /* medium warm border */ --border-strong:#9E8860; /* strong border */ /* Text - strong 3-level hierarchy */ --text:#1C1510; /* near-black warm - primary */ --text-2:#4A3C2C; /* deep warm brown - secondary (was #6a6055) */ --muted:#7A6C58; /* warm gray-brown - muted labels (was #9c9183) */ /* Accent - KEEP EXACTLY */ --accent:#D2691E; --accent-hover:#E28534; --accent-rgb:210,105,30; --amber-soft:rgba(210,105,30,.18); /* up from .14 - punchier active pill */ --on-accent:#fff; /* Chart / avatar - unchanged */ --c1:#6f7c57; --c2:#B08A2E; --c3:#C8501E; --c4:#A75d34; --coin-ink:#2a1d12; --avatar-a:#c97b3a; --avatar-b:#8e3c22; /* Grain (SVG noise - unchanged) */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='dg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dg)' opacity='0.055'/%3E%3C/svg%3E"); --shell-bg:rgba(253,250,243,0.94); /* "Cream" stat cards */ --cream-hi:#FFFFFF; --cream-lo:#FAF3E4; --cream-text:#1C1510; --cream-label:#5C4C38; --cream-caption:#6A5C48; --cream-track:#D6C4A8; /* Fonts - unchanged */ --font-display:"Fraunces",Georgia,serif; --font-ui:"Inter",system-ui,sans-serif; /* Panel */ --panel:#FDFAF3; --surface-2:rgba(40,32,20,.05); --panel-bg:var(--grain), linear-gradient(180deg, #FDFAF3, #F7EDD8); /* Hero */ --hero:url('/static/assets/themes/daylight/hero-vinyl.png'), #DDD1B9; } [data-theme="daylight"] .hero.tall{background-image:url('/static/assets/themes/daylight/hero-dashboard.png')} [data-theme="daylight"] .hero.cd{background-image:url('/static/assets/themes/daylight/hero-cd.png')} [data-theme="daylight"] .hero.cassette{background-image:url('/static/assets/themes/daylight/hero-cassette.png')} [data-theme="daylight"] .hero.digital{background-image:url('/static/assets/themes/daylight/hero-digital.png')} [data-theme="daylight"] .hero.other{background-image:url('/static/assets/themes/daylight/hero-other.png')} /* ===== Daylight signed-in app refinements - v2 ===== */ [data-theme="daylight"] body{ background: radial-gradient(circle at 78% 7%, rgba(var(--accent-rgb),.09), transparent 26rem), radial-gradient(circle at 18% 10%, rgba(176,138,46,.055), transparent 22rem), var(--grain), var(--base); } [data-theme="daylight"] a:hover{color:#a94f16} [data-theme="daylight"] .app-brand span,[data-theme="daylight"] .mtb-brand span{color:var(--text)} [data-theme="daylight"] .shell, [data-theme="daylight"] .app-shell{ box-shadow:0 24px 70px rgba(74,46,14,.24), 0 1px 0 rgba(255,255,255,.65) inset; } /* Sidebar: warm linen - clearly distinct from white main area */ [data-theme="daylight"] .sidebar, [data-theme="daylight"] .app-sidebar{ background:var(--grain), linear-gradient(180deg, #EDE4D2, #E5D9C4); } [data-theme="daylight"] .nav a:hover, [data-theme="daylight"] .side-nav a:hover, [data-theme="daylight"] .spin-pick:hover, [data-theme="daylight"] .spin-track:hover, [data-theme="daylight"] .mbd-row:hover, [data-theme="daylight"] .mbd-row.on{background:rgba(75,52,28,0.10);} [data-theme="daylight"] .user-card, [data-theme="daylight"] .period-strip, [data-theme="daylight"] .ps-top, [data-theme="daylight"] .ext-btn, [data-theme="daylight"] .match-row input, [data-theme="daylight"] .target-form input, [data-theme="daylight"] .paid-form input, [data-theme="daylight"] .fb-bubble.user, [data-theme="daylight"] .lad, [data-theme="daylight"] .mtile, [data-theme="daylight"] .vc-mob-box, [data-theme="daylight"] .scrobble-card, [data-theme="daylight"] .spin-mode-btn, [data-theme="daylight"] .spin-media-btn, [data-theme="daylight"] .spin-when input[type=datetime-local]{background:rgba(253,250,243,.90);} [data-theme="daylight"] .lrow, [data-theme="daylight"] .spin-side-tracks .spin-track, [data-theme="daylight"] .trow, [data-theme="daylight"] .ttotal, [data-theme="daylight"] .vrow, [data-theme="daylight"] .arow, [data-theme="daylight"] .wrow, [data-theme="daylight"] .a-table .tr, [data-theme="daylight"] .sc-day, [data-theme="daylight"] .recap-row{border-color:rgba(89,59,27,.18);} [data-theme="daylight"] .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg, color-mix(in srgb, var(--base) 60%, transparent) 0%, color-mix(in srgb, var(--base) 26%, transparent) 28%, transparent 52%); } [data-theme="daylight"] .hero.has-rainbow::before{display:none} [data-theme="daylight"] .hero .inner, [data-theme="daylight"] .hero-row, [data-theme="daylight"] .np-mini{position:relative;z-index:2} [data-theme="daylight"] .hero-rainbow-veil{ background:linear-gradient(100deg, var(--base) 0%, color-mix(in srgb, var(--base) 84%, transparent) 42%, color-mix(in srgb, var(--base) 38%, transparent) 78%, color-mix(in srgb, var(--base) 10%, transparent) 100%), linear-gradient(to top, var(--base), color-mix(in srgb, var(--base) 0%, transparent) 62%); } [data-theme="daylight"] .side-quote .t, [data-theme="daylight"] .app-side-bottom .quote{color:#5b4229} [data-theme="daylight"] .side-plant{filter:saturate(.92) brightness(1.04)} [data-theme="daylight"] .mtopbar{ background:color-mix(in srgb, var(--base) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border); } @media(max-width:900px){ [data-theme="daylight"] .app-sidebar{background:#E8DCCA} [data-theme="daylight"] body.nav-open .app-sidebar{box-shadow:0 0 60px rgba(74,48,22,0.30)} [data-theme="daylight"] .nav-backdrop{background:rgba(61,41,22,0.36)} } [data-theme="daylight"] .rec:hover{filter:drop-shadow(0 18px 26px rgba(91,63,30,0.22))} [data-theme="daylight"] .rec .cover, [data-theme="daylight"] .noart, [data-theme="daylight"] .spin-scan-card, [data-theme="daylight"] .detail, [data-theme="daylight"] .detail-cover, [data-theme="daylight"] .mbd-cover, [data-theme="daylight"] .spin-cover, [data-theme="daylight"] .spin-pick-cover, [data-theme="daylight"] .lrow .thumb, [data-theme="daylight"] .wrow .wart{box-shadow:0 8px 22px rgba(91,63,30,0.20);} [data-theme="daylight"] .spin-side-head{background:rgba(126,85,41,0.09)} [data-theme="daylight"] .spin-scan-overlay{background:rgba(72,48,24,.42)} [data-theme="daylight"] .spin-disc, [data-theme="daylight"] .np-disc{ background:radial-gradient(circle at 50% 50%, #21170f 0 9%, transparent 10%), repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.25) 0 1.5px, transparent 1.5px 6px), conic-gradient(from 0deg, #8d351a, #e69b4d 25%, #8d351a 50%, #e69b4d 75%, #8d351a), #2a1208; } [data-theme="daylight"] .grid-records .cover .fmt-badge, [data-theme="daylight"] .grid-records .cover .fmt-tag.lp{color:#fff7ea;background:rgba(43,29,16,0.80)} [data-theme="daylight"] .detail::before{opacity:.45} [data-theme="daylight"] .a-table .head{background:rgba(91,63,30,0.09)} [data-theme="daylight"] .ms-wrap{background:rgba(253,250,243,.42)} [data-theme="daylight"] .ms-arrow{background:rgba(253,248,238,0.95);color:var(--text)} [data-theme="daylight"] .np-card, [data-theme="daylight"] .np-mini{ color:var(--text); border-color:rgba(var(--accent-rgb),.30); background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,226,194,.84)); box-shadow:0 24px 56px rgba(91,63,30,.22), inset 0 1px 0 rgba(255,255,255,.70); } [data-theme="daylight"] .np-card[href]:hover{ box-shadow:0 30px 66px rgba(91,63,30,.26), inset 0 1px 0 rgba(255,255,255,.78) } [data-theme="daylight"] .np-artist, [data-theme="daylight"] .np-mini-track{color:var(--text)} [data-theme="daylight"] .np-album, [data-theme="daylight"] .np-times, [data-theme="daylight"] .np-mini-artist{color:var(--text-2)} [data-theme="daylight"] .np-bar{background:rgba(91,63,30,.18)} [data-theme="daylight"] .np-cover, [data-theme="daylight"] .np-mini-art{box-shadow:0 10px 22px rgba(91,63,30,.24), inset 0 1px 0 rgba(255,255,255,.28)} [data-theme="daylight"] .flash.success, [data-theme="daylight"] .toast{background:var(--elevated);box-shadow:0 16px 36px rgba(91,63,30,.24)} [data-theme="daylight"] .vc-genre-tile, [data-theme="daylight"] .crate-tile{background:rgba(75,52,28,0.16)} [data-theme="daylight"] .clk-wedge:hover{fill:#8a5a2d} /* Daylight: overview stat cards as one connected strip (matches the design comp) */ [data-theme="daylight"] .cream-strip{gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(91,63,30,.10)} [data-theme="daylight"] .cream-strip > .cream{border-radius:0;box-shadow:none;border-right:1px solid var(--border)} [data-theme="daylight"] .cream-strip > .cream:last-child{border-right:none} [data-theme="daylight"] .cream-strip .chev{display:none} @media(max-width:900px){ [data-theme="daylight"] .cream-strip > .cream{border-right:none;border-bottom:1px solid var(--border)} [data-theme="daylight"] .cream-strip > .cream:last-child{border-bottom:none} } /* ===== Studio theme: dark sidebar, light content area ===== */ [data-theme="studio"]{ /* Light warm-cream content area */ --base:#EEE8DC; --surface:#FAF8F3; --elevated:#FFFFFF; --subtle:#E4DDD2; --border:#C5B49A; --border-strong:#9E8860; /* Dark text on light content */ --text:#1C1510; --text-2:#4A3C2C; --muted:#7A6C58; /* Same burnt-orange accent */ --accent:#D2691E; --accent-hover:#E28534; --accent-rgb:210,105,30; --amber-soft:rgba(210,105,30,.18); --on-accent:#fff; /* Charts / avatars */ --c1:#6f7c57; --c2:#B08A2E; --c3:#C8501E; --c4:#A75d34; --coin-ink:#2a1d12; --avatar-a:#c97b3a; --avatar-b:#8e3c22; /* Grain + shell */ --grain:url('/static/assets/grain.png'); --shell-bg:rgba(250,248,243,0.94); /* Cream stat cards */ --cream-hi:#FFFFFF; --cream-lo:#FAF3E4; --cream-text:#1C1510; --cream-label:#5C4C38; --cream-caption:#6A5C48; --cream-track:#D6C4A8; /* Fonts */ --font-display:"Fraunces",Georgia,serif; --font-ui:"Inter",system-ui,sans-serif; /* Panel */ --panel:#FAF8F3; --surface-2:rgba(40,32,20,.05); --panel-bg:var(--grain), linear-gradient(180deg, #FAF8F3, #F3EAD8); /* Hero: reuse daylight assets (light-background friendly) */ --hero:url('/static/assets/themes/daylight/hero-vinyl.png'), #EEE8DC; } [data-theme="studio"] .hero.tall{background-image:url('/static/assets/themes/daylight/hero-dashboard.png')} [data-theme="studio"] .hero.cd{background-image:url('/static/assets/themes/daylight/hero-cd.png')} [data-theme="studio"] .hero.cassette{background-image:url('/static/assets/themes/daylight/hero-cassette.png')} [data-theme="studio"] .hero.digital{background-image:url('/static/assets/themes/daylight/hero-digital.png')} [data-theme="studio"] .hero.other{background-image:url('/static/assets/themes/daylight/hero-other.png')} /* Studio signed-in app refinements */ [data-theme="studio"] body{ background: radial-gradient(circle at 78% 7%, rgba(var(--accent-rgb),.08), transparent 26rem), radial-gradient(circle at 18% 10%, rgba(176,138,46,.05), transparent 22rem), var(--grain), var(--base); } [data-theme="studio"] a:hover{color:#a94f16} [data-theme="studio"] .app-brand span,[data-theme="studio"] .mtb-brand span{color:var(--text)} [data-theme="studio"] .shell, [data-theme="studio"] .app-shell{ box-shadow:0 24px 70px rgba(74,46,14,.22), 0 1px 0 rgba(255,255,255,.65) inset; } /* Sidebar: stays dark — locally scope classic dark tokens so all sidebar children (text, icons, nav links) see dark-theme values */ [data-theme="studio"] .sidebar, [data-theme="studio"] .app-sidebar{ background: repeating-radial-gradient(circle at 8% 96%, rgba(210,105,30,0.045) 0 1px, transparent 1px 15px), url('/static/assets/grain.png'), linear-gradient(180deg, #1e1812, #0d0a07); --text:#E8E4DF; --text-2:#A59F99; --muted:#6E6963; --border:#392e21; --border-strong:#4b4038; --subtle:#2b2216; --amber-soft:rgba(210,105,30,.16); } [data-theme="studio"] .nav a:hover, [data-theme="studio"] .side-nav a:hover, [data-theme="studio"] .spin-pick:hover, [data-theme="studio"] .spin-track:hover, [data-theme="studio"] .mbd-row:hover, [data-theme="studio"] .mbd-row.on{background:rgba(255,255,255,0.07);} [data-theme="studio"] .user-card, [data-theme="studio"] .period-strip, [data-theme="studio"] .ps-top, [data-theme="studio"] .ext-btn, [data-theme="studio"] .match-row input, [data-theme="studio"] .target-form input, [data-theme="studio"] .paid-form input, [data-theme="studio"] .fb-bubble.user, [data-theme="studio"] .lad, [data-theme="studio"] .mtile, [data-theme="studio"] .vc-mob-box, [data-theme="studio"] .scrobble-card, [data-theme="studio"] .spin-mode-btn, [data-theme="studio"] .spin-media-btn, [data-theme="studio"] .spin-when input[type=datetime-local]{background:rgba(250,248,243,.90);} [data-theme="studio"] .lrow, [data-theme="studio"] .spin-side-tracks .spin-track, [data-theme="studio"] .trow, [data-theme="studio"] .ttotal, [data-theme="studio"] .vrow, [data-theme="studio"] .arow, [data-theme="studio"] .wrow, [data-theme="studio"] .a-table .tr, [data-theme="studio"] .sc-day, [data-theme="studio"] .recap-row{border-color:rgba(89,59,27,.18);} [data-theme="studio"] .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(100deg, color-mix(in srgb, var(--base) 60%, transparent) 0%, color-mix(in srgb, var(--base) 26%, transparent) 28%, transparent 52%); } [data-theme="studio"] .hero.has-rainbow::before{display:none} [data-theme="studio"] .hero .inner, [data-theme="studio"] .hero-row, [data-theme="studio"] .np-mini{position:relative;z-index:2} [data-theme="studio"] .hero-rainbow-veil{ background:linear-gradient(100deg, var(--base) 0%, color-mix(in srgb, var(--base) 84%, transparent) 42%, color-mix(in srgb, var(--base) 38%, transparent) 78%, color-mix(in srgb, var(--base) 10%, transparent) 100%), linear-gradient(to top, var(--base), color-mix(in srgb, var(--base) 0%, transparent) 62%); } [data-theme="studio"] .rec:hover{filter:drop-shadow(0 18px 26px rgba(91,63,30,0.22))} [data-theme="studio"] .rec .cover, [data-theme="studio"] .noart, [data-theme="studio"] .spin-scan-card, [data-theme="studio"] .detail, [data-theme="studio"] .detail-cover, [data-theme="studio"] .mbd-cover, [data-theme="studio"] .spin-cover, [data-theme="studio"] .spin-pick-cover, [data-theme="studio"] .lrow .thumb, [data-theme="studio"] .wrow .wart{box-shadow:0 8px 22px rgba(91,63,30,0.20);} [data-theme="studio"] .a-table .head{background:rgba(91,63,30,0.09)} [data-theme="studio"] .np-card, [data-theme="studio"] .np-mini{ color:var(--text); border-color:rgba(var(--accent-rgb),.30); background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,226,194,.84)); box-shadow:0 24px 56px rgba(91,63,30,.22), inset 0 1px 0 rgba(255,255,255,.70); } [data-theme="studio"] .np-card[href]:hover{ box-shadow:0 30px 66px rgba(91,63,30,.26), inset 0 1px 0 rgba(255,255,255,.78) } [data-theme="studio"] .np-artist, [data-theme="studio"] .np-mini-track{color:var(--text)} [data-theme="studio"] .np-album, [data-theme="studio"] .np-times, [data-theme="studio"] .np-mini-artist{color:var(--text-2)} [data-theme="studio"] .np-bar{background:rgba(91,63,30,.18)} [data-theme="studio"] .np-cover, [data-theme="studio"] .np-mini-art{box-shadow:0 10px 22px rgba(91,63,30,.24), inset 0 1px 0 rgba(255,255,255,.28)} [data-theme="studio"] .flash.success, [data-theme="studio"] .toast{background:var(--elevated);box-shadow:0 16px 36px rgba(91,63,30,.24)} [data-theme="studio"] .mtopbar{ background:color-mix(in srgb, var(--base) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border); } [data-theme="studio"] .cream-strip{gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(91,63,30,.10)} [data-theme="studio"] .cream-strip > .cream{border-radius:0;box-shadow:none;border-right:1px solid var(--border)} [data-theme="studio"] .cream-strip > .cream:last-child{border-right:none} [data-theme="studio"] .cream-strip .chev{display:none} @media(max-width:900px){ [data-theme="studio"] .app-sidebar{background:#131008} [data-theme="studio"] body.nav-open .app-sidebar{box-shadow:0 0 60px rgba(74,48,22,0.30)} [data-theme="studio"] .nav-backdrop{background:rgba(61,41,22,0.36)} [data-theme="studio"] .cream-strip > .cream{border-right:none;border-bottom:1px solid var(--border)} [data-theme="studio"] .cream-strip > .cream:last-child{border-bottom:none} }