:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: #0a0d0b; color: #f3f6f3; }
* { box-sizing: border-box; } body { margin: 0; min-width: 300px; } button, input { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; }
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 92px; gap: 8px; padding: 8px; height: 100vh; min-height: 500px; }
.sidebar, .content { border-radius: 9px; background: #151a16; min-width: 0; overflow: auto; } .sidebar { display: flex; flex-direction: column; padding: 27px 15px 18px; }
.brand { display:flex; align-items:center; gap:11px; padding: 0 10px 35px; font-size: 21px; font-weight: 800; letter-spacing:-.6px; }.brand-logo { color:#1bd760; font-size:32px; line-height:1; }
nav { display:grid; gap: 6px; }.nav-link { background:none; border:0; border-radius:7px; text-align:left; padding:12px 15px; color:#bbc5bc; font-weight:650; }.nav-link:hover,.nav-link.active { background:#242e25; color:white; }
.sidebar-separator { height:1px; margin:22px 5px; background:#2c352d; }.library-title { display:flex; justify-content:space-between; align-items:center; color:#c7d1c8; font-weight:700; padding:0 7px; }.library-title button { border:0; background:none; color:#eee; font-size:28px; }.sidebar-playlists { margin-top:16px; }.sidebar-playlists button { display:block; width:100%; background:none; color:#a6b2a7; text-align:left; border:0; padding:12px 9px; border-radius:6px; }.sidebar-playlists button:hover { background:#263028; }.sidebar-footer { margin-top:auto; font-size:11px; color:#778579; padding:15px 8px 0; }
.content { background:linear-gradient(180deg,#273e2e 0,#172019 235px,#141816 480px); }.topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 35px 12px; }.search-field { display:flex; gap:9px; align-items:center; background:#f0f4f0; color:#344238; border-radius:30px; padding:8px 16px; width:min(420px, 100%); }.search-field span { font-size:23px; }.search-field input { background:none; color:#1b241d; border:0; outline:none; width:100%; min-width:0; }.account { display:flex; gap:12px; align-items:center; font-size:13px; color:#d1d9d1; }.small-button { border:1px solid #536156; border-radius:22px; background:#1a251c; color:white; padding:9px 14px; white-space:nowrap; }
.content-inner { padding: 20px 35px 140px; }.hero { padding:30px 0 28px; }.eyebrow { font-weight:750; font-size:11px; letter-spacing:2px; color:#b2ddb9; }.hero h1 { font-size:clamp(28px,4vw,46px); letter-spacing:-1.6px; margin:12px 0; }.hero p { color:#b0c4b5; }.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }.section-heading h2 { font-size:23px; }.section-heading span,.muted { color:#98a79b; font-size:13px; }
.track-list { display:grid; }.track { width:100%; min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr) minmax(80px, 160px) 40px; align-items:center; gap:14px; border:0; border-radius:6px; background:transparent; color:#f0f5f0; text-align:left; padding:8px; }.track:hover { background:#303a32; }.track-art { width:36px; height:36px; border-radius:4px; background:linear-gradient(125deg,#315d46,#1d8b50); display:grid; place-items:center; font-size:22px; }.track-name { min-width:0; }.track-name strong,.track-name span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.track-name span,.track-album { color:#adb9af; font-size:13px; }.like { color:#b5c2b7; background:none; border:0; font-size:22px; }.like.active { color:#1bd760; }.playlist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; }.playlist-card { color:white; border:0; background:#242d25; padding:15px; text-align:left; border-radius:8px; }.playlist-card:hover { background:#334034; }.playlist-cover { display:grid; place-items:center; aspect-ratio:1; background:linear-gradient(135deg,#237f4b,#42377f); border-radius:5px; margin-bottom:12px; font-size:44px; }
.admin-section { margin-top:45px; padding:25px; background:#202a22; border-radius:8px; }.upload-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.upload-form input { min-width:0; padding:11px 12px; border:1px solid #435147; border-radius:7px; background:#151d17; color:white; }.upload-form button { justify-self:start; }.primary { background:#1bd760; border:0; color:#102013; border-radius:25px; padding:11px 24px; font-weight:800; }.primary:hover { background:#58eb8b; }.notice { color:#d2e8d7; min-height:22px; font-size:13px; }
.player { grid-column:1/-1; display:grid; grid-template-columns:minmax(160px,1fr) minmax(280px,1.4fr) minmax(100px,1fr); align-items:center; gap:20px; background:#101411; padding:4px 19px; min-width:0; }.now-playing { display:flex; gap:12px; align-items:center; min-width:0; }.cover { width:54px; height:54px; flex:none; display:grid; place-items:center; border-radius:6px; font-size:28px; background:linear-gradient(120deg,#146c41,#363459); }.track-label { overflow:hidden; }.track-label strong,.track-label span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.track-label span { font-size:12px; color:#96a99a; margin-top:4px; }.playback { min-width:0; }.controls { display:flex; justify-content:center; align-items:center; gap:17px; }.controls button { background:none; border:0; color:#acb5ae; font-size:17px; }.controls button.active { color:#1bd760; }.controls .play-button { background:white; color:#111; border-radius:50%; width:33px; height:33px; font-size:16px; }.seek-row { display:flex; align-items:center; gap:10px; font-size:11px; color:#a6b2a8; }.seek-row input { width:100%; min-width:0; }.volume-row { display:flex; align-items:center; gap:9px; justify-content:flex-end; color:#a6b2a8; }.volume-row input { width:125px; max-width:100%; } input[type=range] { accent-color:#1bd760; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 0%,#235b36,#0d1210 60%); }.auth-card { width:min(420px,100%); padding:42px; border-radius:14px; background:#19201b; box-shadow:0 25px 100px #0007; text-align:center; }.auth-card h1 { font-size:32px; margin:10px 0; }.auth-card p { color:#adc0b0; }.auth-card form { display:grid; gap:17px; text-align:left; margin-top:26px; }.auth-card label { display:grid; gap:7px; font-size:13px; color:#c8d6cb; }.auth-card input { background:#0d130f; color:white; padding:13px; border-radius:8px; border:1px solid #3d5141; }.auth-card .primary { margin-top:5px; }.text-button { border:0; color:#1bd760; background:none; }.message { color:#ff9696!important; min-height:20px; font-size:12px; }
@media(max-width:800px) { .app-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 150px; gap:0; padding:0; height:100dvh; }.sidebar { display:none; }.content { border-radius:0; }.topbar { padding:16px; }.account #account-name { display:none; }.content-inner { padding:10px 17px 160px; }.hero { padding:17px 0; }.track { grid-template-columns:36px minmax(0,1fr) 40px; }.track-album { display:none; }.player { padding:8px 15px; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:55px 73px; gap:2px 9px; }.now-playing { grid-column:1; }.playback { grid-column:1/-1; grid-row:2; }.volume-row { grid-column:2; grid-row:1; }.volume-row span { display:none; }.volume-row input { width:72px; }.upload-form { grid-template-columns:1fr; } }
@media(max-width:420px) { .content-inner { padding-left:12px; padding-right:12px; }.topbar { gap:8px; padding:12px; }.account .small-button { padding:8px 10px; }.hero h1 { font-size:27px; }.controls { gap:16px; } }
.mobile-nav { display:none; }
.track { grid-template-columns:36px minmax(0,1fr) minmax(80px, 150px) 152px; cursor:pointer; }
.track:focus-visible,.playlist-card:focus-visible,.nav-link:focus-visible { outline:2px solid #1bd760; outline-offset:2px; }
.track-actions { display:flex; gap:4px; justify-content:flex-end; align-items:center; }
.track-actions button { color:#adbdb0; border:0; background:transparent; font-size:22px; padding:5px; line-height:1; }
.track-actions button:hover,.track-actions button.active { color:#1bd760; }
.detail-actions { display:flex; gap:7px; flex-wrap:wrap; }
.playlist-detail-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border-radius:6px; padding:6px; gap:8px; }
.playlist-detail-row:hover { background:#28382c; }
.playlist-detail-play { min-width:0; text-align:left; display:grid; background:transparent; border:0; color:white; padding:8px; }
.playlist-detail-play span { font-size:12px; color:#aab8ad; overflow:hidden; text-overflow:ellipsis; }
.playlist-controls { display:flex; gap:5px; }
.playlist-controls button { border:1px solid #485a4d; color:#d7e6da; background:#202a22; border-radius:5px; padding:5px 8px; }
.playlist-controls button:hover { border-color:#1bd760; }
.discovery-section { margin-bottom:30px; }
.discovery-section .section-heading:not(:first-child) { margin-top:15px; }
.recommendation-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
.recommendation-card strong,.recommendation-card p { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:8px 0 0; }
.recommendation-card .playlist-cover { margin-bottom:9px; }
.load-more { display:block; margin:20px auto 4px; }
.load-more[disabled] { cursor:progress; opacity:.6; }
.track-heading-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.track-heading-actions select { background:#1b281f; border:1px solid #4a6150; border-radius:8px; color:#e6f3e9; padding:7px 9px; max-width:100%; }
.security-section { background:#202a22; border-radius:8px; padding:24px; }
.security-section h2,.admin-section h3 { margin-top:0; }
.admin-section h3 { border-top:1px solid #3b4b3e; padding-top:22px; margin-top:26px; }
.admin-user-list { display:grid; gap:4px; margin-top:20px; }
.admin-user-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #3b4b3e; padding:12px 4px; }
.admin-user-row p { margin:4px 0 0; overflow-wrap:anywhere; }
.admin-user-row .small-button:disabled { opacity:.35; cursor:default; }
.bulk-file-label { display:grid; gap:8px; color:#c5d7c9; font-size:13px; }
.bulk-upload-results { display:grid; gap:6px; margin-top:14px; font-size:13px; }
.bulk-upload-result { padding:8px 10px; border-radius:6px; background:#172019; overflow-wrap:anywhere; }
.bulk-upload-result.failed { color:#ffb5b5; }
.track-edit-dialog { width:min(480px,calc(100% - 32px)); border:1px solid #4b6753; border-radius:12px; color:#f0f5f0; background:#18231b; padding:25px; box-shadow:0 25px 90px #000a; }
.track-edit-dialog::backdrop { background:#000b; }
.track-edit-dialog form { display:grid; gap:15px; }
.track-edit-dialog h2 { margin:0 0 4px; }
.track-edit-dialog label { display:grid; gap:6px; color:#c9dccd; font-size:13px; }
.track-edit-dialog input:not([type=hidden]) { width:100%; border:1px solid #4b6753; background:#101711; color:white; border-radius:7px; padding:11px; }
.danger-button { color:#ffb5b5; border-color:#9b5959; }
.metrics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:10px 0 24px; }
.metric-card { border:1px solid #3d5544; border-radius:9px; padding:13px; background:#17221a; min-width:0; }
.metric-card p { margin:0 0 8px; }
.metric-card strong { font-size:18px; overflow-wrap:anywhere; }
@media(max-width:800px) {
  .mobile-nav { display:flex; gap:6px; overflow-x:auto; padding:4px 12px 10px; scrollbar-width:thin; }
  .mobile-nav button { white-space:nowrap; color:#dae5dc; background:#293b2e; border:0; border-radius:20px; padding:8px 14px; font-size:12px; }
  .mobile-nav button.active { background:#1bd760; color:#112219; font-weight:750; }
  .track { grid-template-columns:36px minmax(0,1fr) 142px; }
  .detail-actions .small-button { padding:7px 9px; }
  .section-heading { flex-wrap:wrap; }
}

/* Owner workspace and v0.9 visual refinement. Prefer custom properties for owner branding. */
:root { --accent:#1ed760; --surface:#171e1a; --surface-raised:#202a24; --divider:#314036; --muted:#a3b1a6; }
html { scroll-behavior:smooth; }
body { background:#0b0f0d; }
button, a, input, select { -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, .track-edit-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input::placeholder { color:#819186; }
.app-shell { gap:0; padding:0; grid-template-columns:262px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 92px; }
.sidebar { border-radius:0; background:#0e1410; padding:30px 17px 19px; border-right:1px solid #28342a; }
.brand { padding:0 12px 30px; font-size:21px; overflow-wrap:anywhere; }
.brand-logo { color:var(--accent); }
.nav-caption { color:#8f9d92; letter-spacing:1.6px; font-size:10px; font-weight:800; margin:15px 13px 9px; }
.admin-navigation { border-top:1px solid #28342b; padding-top:12px; margin-top:18px; }
.admin-navigation .nav-link { font-size:13px; }
.nav-link { transition:background-color .15s, color .15s; border-radius:9px; }
.nav-link.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#111c15); }
.nav-link:hover { background:#253229; }
.sidebar-footer { line-height:1.55; }
.content { border-radius:0; background:radial-gradient(ellipse at 30% -10%,#274531 0%,#18251d 35%,#101713 68%); }
.topbar { position:sticky; top:0; z-index:4; padding:17px clamp(17px,3vw,42px); background:#101913ed; backdrop-filter:blur(18px); border-bottom:1px solid #29352c; }
.content-inner { padding:25px clamp(17px,3vw,42px) 135px; max-width:1580px; margin:0 auto; }
.hero { padding:27px 0 24px; }
.hero h1 { font-weight:850; line-height:1.12; }
.eyebrow { color:var(--accent); }
.role-chip { font-size:11px; font-weight:800; letter-spacing:.5px; background:#1d3e28; color:var(--accent); padding:6px 10px; border-radius:20px; }
.small-button { transition:background-color .15s, border-color .15s; }
.small-button:hover { border-color:var(--accent); background:#2a3930; }
.primary { background:var(--accent); color:#101912; transition:filter .15s,transform .15s; }
.primary:hover { background:var(--accent); filter:brightness(1.12); transform:translateY(-1px); }
.primary:disabled, .small-button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.track { transition:background-color .14s; }
.track:hover { background:#283a2e; }
.track-actions button.active,.track-actions button:hover { color:var(--accent); }
.player { border-top:1px solid #2c3a30; background:#0d1310; }
.controls button.active { color:var(--accent); }
input[type=range] { accent-color:var(--accent); }
.mobile-nav button.active { background:var(--accent); }
.text-button { color:var(--accent); }
.metric-card { background:linear-gradient(145deg,#202f24,#15201a); border:1px solid #354b3b; border-radius:15px; padding:18px; min-height:118px; }
.metric-icon { display:block; color:var(--accent); font-size:23px; line-height:1; margin-bottom:11px; }
.metric-card strong { font-size:clamp(18px,2vw,26px); letter-spacing:-.4px; }
.metric-card p { font-size:12px; }
.metrics-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:13px; margin:20px 0 25px; }
.admin-workspace { display:grid; gap:22px; min-width:0; }
.admin-panel { background:linear-gradient(135deg,#1c2820,#18221b); border:1px solid #354339; border-radius:17px; padding:clamp(17px,2.3vw,27px); min-width:0; box-shadow:0 8px 30px #050b0740; }
.admin-panel h2,.admin-panel h3 { margin:0 0 9px; }
.admin-panel h2 { font-size:clamp(20px,2vw,25px); }
.admin-panel h3 { margin-top:20px; font-size:16px; }
.admin-panel .section-heading h3 { margin:0; }
.admin-panel .section-heading p { margin:2px 0 14px; }
.section-icon { color:var(--accent); border-radius:11px; background:#244333; padding:8px 14px; font-size:27px; }
.quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:17px; }
.action-tile { display:flex; flex-direction:column; gap:8px; text-align:left; border:1px solid #3a4d3f; border-radius:13px; padding:19px; background:#142019; color:#f4f7f4; min-width:0; }
.action-tile:hover { background:#24382a; border-color:var(--accent); }
.action-tile>span { color:var(--accent); font-size:28px; }
.action-tile strong { font-size:15px; }
.action-tile small { color:#a9b8ad; font-size:12px; line-height:1.5; }
.catalog-toolbar { display:grid; grid-template-columns:minmax(0,2fr) minmax(160px,1fr); gap:13px; margin:18px 0; }
.input-with-label,.settings-form label { display:grid; gap:8px; color:#c6d5ca; font-size:12px; font-weight:700; }
.account-search-label { max-width:430px; margin-top:14px; }
.catalog-toolbar input,.catalog-toolbar select,.settings-form input { width:100%; min-width:0; padding:12px 13px; background:#101b14; color:white; border:1px solid #4a5e50; border-radius:9px; }
.catalog-row { display:grid; grid-template-columns:42px minmax(0,1fr) minmax(110px,160px) auto; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid #344136; min-width:0; }
.catalog-row:last-child { border-bottom:0; }
.catalog-row .track-art { width:42px; height:42px; }
.catalog-info { min-width:0; }
.catalog-info strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-info p { margin:4px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-meta { color:#9db3a3; font-size:12px; white-space:nowrap; }
.catalog-actions,.account-controls { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.catalog-actions .small-button { padding:7px 11px; }
.settings-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:750px; margin-top:19px; }
.settings-form label:nth-child(2),.settings-form button { grid-column:auto; }
.settings-form button { align-self:end; justify-self:start; }
.settings-form input[type=color] { height:44px; padding:6px; cursor:pointer; }
.compact-form { margin:15px 0 30px; }
.security-section h2:not(:first-child) { margin-top:28px; }
.admin-user-row { padding:17px 3px; min-width:0; }
.admin-user-row>div:first-child { min-width:0; }
.admin-user-row strong { overflow-wrap:anywhere; }
.admin-user-row .small-button { padding:7px 12px; }
.status-pill { border-radius:99px; font-size:11px; padding:5px 8px; white-space:nowrap; }
.status-pill.active { background:#20432b; color:#9cf5aa; }
.status-pill.inactive { background:#46302d; color:#ffb0a5; }
.dialog-danger-zone { border-top:1px solid #3e5042; margin-top:6px; padding-top:16px; }
.dialog-danger-zone h3 { margin:0 0 13px; color:#f2c5c5; font-size:15px; }
.dialog-danger-zone .detail-actions { margin-top:13px; }
.danger-button:hover { background:#4d2629; border-color:#eb989a; }
.empty-state { padding:22px 4px; }
@media(max-width:1050px) {
  .quick-actions { grid-template-columns:1fr; }
  .action-tile { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:3px 12px; }
  .action-tile>span { grid-row:1/3; }
}
@media(max-width:800px) {
  .app-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 142px; }
  .topbar { padding:12px 14px; }
  .account-name { display:none; }
  .content-inner { padding:17px 15px 150px; }
  .hero { padding:12px 0 21px; }
  .hero h1 { font-size:clamp(27px,7vw,36px); }
  .mobile-nav { padding:8px 13px 11px; background:#111d15; border-bottom:1px solid #2d3c31; }
  .admin-panel { border-radius:13px; }
  .catalog-row { grid-template-columns:40px minmax(0,1fr) auto; gap:10px; }
  .catalog-meta { display:none; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-user-row { align-items:flex-start; flex-wrap:wrap; }
  .account-controls { width:100%; justify-content:flex-start; }
}
@media(max-width:520px) {
  .admin-panel { padding:15px; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .metric-card { min-height:110px; padding:13px; }
  .metric-card strong { font-size:18px; }
  .catalog-toolbar,.settings-form { grid-template-columns:1fr; }
  .catalog-row { grid-template-columns:40px minmax(0,1fr); }
  .catalog-actions { grid-column:2; justify-content:flex-start; }
  .catalog-actions .small-button { padding:6px 9px; }
  .track { grid-template-columns:34px minmax(0,1fr) auto; gap:8px; }
  .track-actions { gap:0; }
  .track-actions button { font-size:18px; padding:6px 4px; }
  .track-art { width:34px; height:34px; }
  .account { gap:7px; }
  .role-chip { font-size:10px; padding:5px 6px; }
  .quick-actions { gap:9px; }
  .section-heading { align-items:flex-start; }
  .section-heading .small-button { white-space:normal; }
  .upload-form input[type=file] { max-width:100%; }
  .player { grid-template-rows:51px 69px; }
  .volume-row input { width:64px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* v0.10 listening room: responsive artwork, synchronized lyrics and playback options. */
.now-playing-page { min-width:0; }
.now-playing-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(18px,3vw,36px); align-items:start; }
.now-playing-visual { min-width:0; padding:clamp(16px,2.5vw,30px); border-radius:20px; background:linear-gradient(145deg,#243f2d,#18241c 65%,#131b16); border:1px solid #405744; }
.now-playing-art { width:min(100%,450px); aspect-ratio:1; margin:0 auto 24px; display:grid; place-items:center; font-size:clamp(60px,15vw,180px); border-radius:12px; background:linear-gradient(125deg,#286947,#32305c); background-size:cover; background-position:center; box-shadow:0 22px 70px #0006; }
.now-playing-visual h2 { margin:11px 0 5px; font-size:clamp(24px,3vw,38px); overflow-wrap:anywhere; }
.now-playing-visual .small-button { margin-top:15px; }
.lyrics-panel { border:1px solid #3e5143; background:linear-gradient(170deg,#22362a,#17211a); border-radius:20px; padding:clamp(16px,2.2vw,28px); min-width:0; }
.lyrics-panel .section-heading h2 { margin:0 0 16px; }
.lyrics-lines { max-height:550px; min-height:220px; overflow-y:auto; padding:15px 6px 15px 0; scrollbar-width:thin; scrollbar-color:#557260 transparent; }
.lyric-line { color:#a7b8aa; font-size:clamp(18px,2.2vw,26px); font-weight:750; line-height:1.42; margin:0 0 24px; white-space:pre-wrap; overflow-wrap:anywhere; transition:color .18s; }
.lyric-line.active { color:var(--accent); }
.lyrics-credit { font-size:11px; line-height:1.5; border-top:1px solid #35493a; padding-top:12px; }
.track-edit-dialog { max-height:calc(100dvh - 28px); overflow:auto; }
.track-edit-dialog textarea { width:100%; min-width:0; resize:vertical; border:1px solid #4b6753; background:#101711; color:#f3f6f3; border-radius:7px; padding:11px; font:inherit; font-size:13px; line-height:1.55; }
.track-edit-dialog textarea:focus-visible { outline:2px solid var(--accent); }
.playback-preferences { margin:15px 0 30px; }
.playback-preferences select { width:100%; padding:12px 13px; color:#f2f6f2; background:#101b14; border:1px solid #4a5e50; border-radius:9px; }
.playback-preferences .toggle-option { display:flex; align-items:center; gap:12px; line-height:1.45; font-weight:600; }
.playback-preferences .toggle-option input { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.playback-preferences #sleep-timer-status { grid-column:1/-1; margin:0; }
@media(max-width:1050px) { .now-playing-layout { grid-template-columns:minmax(0,1fr); } .now-playing-art { max-width:350px; } }
@media(max-width:520px) { .now-playing-visual,.lyrics-panel { border-radius:14px; padding:16px; } .lyrics-lines { max-height:320px; min-height:160px; } .lyric-line { margin-bottom:18px; } }

/* v0.11 listener-controlled equalizer, clickable lyrics, queue and playlist tools. */
.now-playing .cover { flex-shrink:0; border:0; color:#f7fff8; cursor:pointer; }
.now-playing .cover:hover,.now-playing .cover:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.equalizer-panel { display:grid; gap:20px; max-width:800px; padding:clamp(15px,2vw,24px); border:1px solid #3e5544; border-radius:16px; background:linear-gradient(140deg,#1b2a20,#152019); margin:15px 0 26px; }
.equalizer-panel select { padding:11px 13px; background:#111a14; color:#eef5ee; border:1px solid #476050; border-radius:9px; max-width:320px; }
.equalizer-panel select:disabled,.equalizer-bands input:disabled { opacity:.45; cursor:not-allowed; }
.equalizer-bands { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,24px); }
.equalizer-bands label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 5px; color:#c7d7c9; font-size:13px; font-weight:750; }
.equalizer-bands output { color:var(--accent); font-size:12px; font-variant-numeric:tabular-nums; }
.equalizer-bands input { width:100%; min-width:0; grid-column:1/-1; }
.playlist-filter { display:grid; gap:6px; font-size:12px; color:#aebfac; margin:16px 0 15px; max-width:460px; }
.playlist-filter input { min-width:0; width:100%; border:1px solid #45604d; background:#111d16; color:white; padding:11px 14px; border-radius:10px; }
.lyrics-lines button.lyric-line { display:block; width:100%; text-align:left; background:transparent; border:0; padding:6px 8px; border-radius:9px; cursor:pointer; }
.lyrics-lines button.lyric-line:hover { color:#f4fff4; background:#ffffff09; }
.lyrics-lines button.lyric-line:focus-visible { outline:2px solid var(--accent); }
@media(max-width:520px) { .equalizer-bands { grid-template-columns:1fr; gap:14px; } .equalizer-panel { border-radius:12px; } .playlist-filter { max-width:100%; } }
.transition-panel { gap:11px; max-width:640px; }
.transition-panel label { display:flex; justify-content:space-between; color:#d7e5d9; font-weight:750; }
.transition-panel output { color:var(--accent); font-variant-numeric:tabular-nums; }
.transition-panel input { width:100%; accent-color:var(--accent); }
.transition-panel p { margin:0; line-height:1.55; }