/* Car view is deliberately isolated from the main SunoWeb layout. */
body.sunocar-page{margin:0;background:#090909;color:#eee}
body.sunocar-page>header,body.sunocar-page>footer{display:none!important}
body.sunocar-page>.container{max-width:none;margin:0;padding:0}
body.sunocar-page main{padding:0!important}
.sunocar-web{--gold:#ffc107;position:relative;min-height:100vh;padding-bottom:210px;background:#0a0a0a;color:#eee;font:13px system-ui,Segoe UI,sans-serif}
.sunocar-web *{box-sizing:border-box}
.car-top{min-height:68px;display:flex;align-items:center;gap:15px;padding:10px 14px;background:#171717;border-bottom:1px solid #393939;flex-wrap:wrap}
.car-logo{display:flex;align-items:center;gap:8px;color:#ffc107;font-size:32px;font-weight:850;white-space:nowrap}
.car-logo span{font-size:23px;letter-spacing:1px;line-height:25px;color:white}
.car-logo small{display:block;color:#aaa;font-size:9px;font-weight:600;letter-spacing:1.2px}
.car-total{white-space:nowrap;color:#bbb}
.car-actions{margin-left:auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.car-btn{min-height:32px;display:inline-flex;justify-content:center;align-items:center;padding:6px 10px;border:1px solid #4a4a4a;border-radius:6px;background:#2a2a2a;color:#fafafa;text-decoration:none;cursor:pointer;font:600 12px system-ui,Segoe UI,sans-serif;white-space:nowrap}
.car-btn:hover{background:#444;color:#fff}
.car-yellow{background:#efbb19;color:#090909;border-color:#d7a300}.car-yellow:hover{background:#ffda59;color:#080808}
.car-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#202020;padding:8px 14px;border-bottom:1px solid #3c3c3c}
.car-find{display:flex;gap:6px;width:min(560px,75%)}.car-find input{background:#111;border:1px solid #666;color:#fff;border-radius:6px;padding:7px 12px;flex:1;min-width:50px}
.car-pager{display:flex;align-items:center;gap:8px;white-space:nowrap}
.car-table-wrap{width:100%;overflow:auto}.car-songs{width:100%;min-width:840px;table-layout:fixed;border-collapse:collapse}
.car-songs th{background:#292929;color:#ffca22;text-align:left;font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:10px 9px}
.car-songs td{border-bottom:1px solid #303030;padding:6px 9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}
.car-songs tr:nth-child(even){background:#141414}.car-songs tbody tr:hover{background:#292929}
.car-songs th:nth-child(1){width:65px}.car-songs th:nth-child(2){width:27%}.car-songs th:nth-child(3){width:65px}.car-songs th:nth-child(4){width:73px}.car-songs th:nth-child(5){width:100px}.car-songs th:nth-child(7){width:100px}.car-songs th:nth-child(8){width:106px}
.car-thumb{width:42px;height:42px;border-radius:6px;object-fit:cover;background:#292929}.car-liked{color:#fa6363}.car-tags{color:#999}.car-song-title small{margin-left:4px;color:#999}.car-empty{padding:30px;text-align:center}
.car-filter-panel{position:fixed;top:0;right:0;bottom:0;width:min(320px,95vw);z-index:1100;background:#181818;box-shadow:-9px 0 25px #0009;border-left:1px solid #454545;padding:15px;overflow:auto;transform:translateX(105%);transition:transform .2s ease;pointer-events:none}
.car-filter-panel.is-open{transform:none;pointer-events:auto}.car-filter-head{display:flex;align-items:center;justify-content:space-between;color:#ffca22;margin-bottom:15px;font-size:17px}
.car-filter-panel form{display:grid;gap:12px}.car-filter-panel label{display:grid;gap:5px;font-weight:600}.car-filter-panel select,.car-filter-panel input{background:#272727;border:1px solid #666;color:white;border-radius:6px;padding:8px}
.car-cover-screen{position:fixed;top:var(--car-cover-top,50px);bottom:calc(var(--global-player-height,135px) + var(--hosting-bottom-overlay-height,0px));left:0;right:0;z-index:1040;display:none;background:#080808;color:white;overflow:hidden}
.car-cover-screen.is-open{display:flex}.car-art-panel{position:relative;flex:1 1 57%;min-width:0;padding:12px;display:flex;justify-content:center;align-items:center;overflow:hidden}
.car-ambient{pointer-events:none;position:absolute;inset:-15%;background:radial-gradient(ellipse at 24% 45%,#eabb3e45,transparent 55%),radial-gradient(ellipse at 77% 85%,#3d7bbc45,transparent 58%);animation:car-glow 7s ease-in-out infinite alternate}@keyframes car-glow{to{opacity:.5;transform:scale(1.04)}}
#carCoverImage{position:relative;max-height:95%;max-width:97%;aspect-ratio:1;object-fit:contain;box-shadow:0 20px 60px #000c;border-radius:10px}
#carCoverTitle{position:absolute;bottom:8px;left:16px;right:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:19px;font-weight:750;padding:9px;border-radius:8px;background:#0009}
.car-cover-right{flex:1 1 43%;min-width:0;display:flex;flex-direction:column;background:#191919b0;border-left:1px solid #444}.car-cover-head{padding:10px 15px;display:flex;align-items:center;justify-content:space-between;color:#ffca22}.car-lyrics-slot{flex:1;min-height:0;overflow:auto;padding:5px 14px}.car-lyrics-slot .global-lyrics-content{height:100%;overflow:auto;padding:0}.car-lyrics-slot .global-lyrics-line{font-size:clamp(14px,1.6vw,21px);padding:7px;margin-bottom:3px}
body.car-cover-active #globalLyricsPanel,body.car-cover-active #globalLyricsBackdrop{opacity:0!important;pointer-events:none!important}
@media(max-width:850px){.car-actions{margin-left:0;width:100%}.car-cover-screen{flex-direction:column}.car-art-panel{flex-basis:50%;min-height:0}.car-cover-right{flex-basis:50%;min-height:0}#carCoverImage{max-height:85%}}
@media(prefers-reduced-motion:reduce){.car-ambient{animation:none}.car-filter-panel{transition:none}}

/* SunoCar parity — touch opacity and performance-capped cover audio visualizer */
#carArtPanel{cursor:pointer;outline-offset:-3px}
#carArtPanel:focus-visible{outline:2px solid #ffc107}
#carCoverImage{transition:opacity .18s ease;will-change:opacity}
#carArtPanel.is-faded #carCoverImage{opacity:.32}
.car-audio-pulse{position:absolute;pointer-events:none;inset:3%;opacity:0;
 background:radial-gradient(circle at 48% 45%,rgba(255,198,41,.65),transparent 43%),
 radial-gradient(circle at 20% 78%,rgba(58,170,235,.55),transparent 51%);
 transform:scale(calc(1 + var(--car-bass,0)*.055));
 transition:opacity .125s linear,transform .125s linear}
.car-cover-screen.car-visualizing .car-audio-pulse{opacity:calc(.12 + var(--car-bass,0)*.75)}
.car-visualizer-switch{font-size:11px;display:inline-flex;gap:4px;align-items:center;margin-left:auto;margin-right:8px;color:#eee}
.car-visualizer-switch input{accent-color:#ffca22}
@media(prefers-reduced-motion:reduce){#carCoverImage,.car-audio-pulse{transition:none}}

.car-diagnostics-panel{position:fixed;inset:0 0 0 auto;z-index:1102;background:#181818;border-left:1px solid #474747;width:min(330px,95vw);padding:14px;transform:translateX(105%);transition:transform .2s ease;pointer-events:none;box-shadow:-10px 0 30px #0007}
.car-diagnostics-panel.is-open{transform:none;pointer-events:auto}
.car-diagnostics-panel pre{font:12px/2 ui-monospace,monospace;color:#eee;white-space:pre-wrap;overflow-wrap:anywhere}
.car-diagnostics-panel small{font-size:11px;color:#aaa}


/* Car Edition — native-parity center-burst / torch effects (browser compositing only).
   All ring geometry is prepainted; only transform/opacity change during playback. */
.car-cover-screen{--car-viz-flash:0;--car-viz-glow:0;--car-viz-energy:0}
.car-cover-screen.car-viz-disabled .car-ambient,
.car-cover-screen.car-viz-disabled .car-audio-pulse,
.car-cover-screen.car-viz-disabled .car-viz-flash,
.car-cover-screen.car-viz-disabled .car-viz-burst{display:none!important}
.car-cover-screen.car-viz-beat .car-ambient{
 background:radial-gradient(ellipse at 9% 18%,rgba(0,234,106,.73),transparent 55%),
 radial-gradient(ellipse at 87% 16%,rgba(7,70,250,.77),transparent 60%),
 radial-gradient(ellipse at 14% 85%,rgba(241,17,66,.76),transparent 62%),
 radial-gradient(ellipse at 83% 82%,rgba(255,196,0,.69),transparent 61%)}
.car-cover-screen.car-viz-beat .car-audio-pulse{
 background:radial-gradient(circle at 49% 49%,rgba(255,239,72,.86),transparent 61%),
 radial-gradient(ellipse at 15% 55%,rgba(12,254,221,.67),transparent 64%),
 radial-gradient(ellipse at 86% 53%,rgba(255,34,102,.70),transparent 64%)}
.car-cover-screen.car-viz-beat.car-visualizing .car-audio-pulse{
 opacity:calc(.07 + var(--car-viz-glow,0)*.65)}
.car-viz-flash{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--car-viz-flash,0);
 background:radial-gradient(circle closest-side at 50% 50%,rgba(255,245,139,.78) 0%,rgba(255,168,42,.48) 27%,transparent 88%);
 transform:scale(calc(1 + var(--car-viz-energy,0)*.09));
 transition:opacity .125s linear,transform .125s linear}
.car-viz-burst{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;display:none;contain:paint}
.car-cover-screen.car-viz-burst-on .car-viz-burst{display:block}
.car-viz-ring{--ring-tone:#00f5ff;--ring-rgb:0,245,255;--ring-width:18px;--ring-feather:4px;
 position:absolute;top:50%;left:50%;width:min(77vmin,620px);height:min(77vmin,620px);
 border-radius:50%;box-sizing:border-box;pointer-events:none;opacity:0;
 background:radial-gradient(circle closest-side,
   transparent calc(100% - var(--ring-width) - var(--ring-feather)),
   var(--ring-tone) calc(100% - var(--ring-width) + var(--ring-feather)),
   var(--ring-tone) calc(100% - var(--ring-feather)),transparent 100%);
 transform:translate3d(-50%,-50%,0) scale(.1);
 /* JS applies precise millisecond timing; CSS tweening would delay fast bursts. */
 backface-visibility:hidden}
.car-viz-ring.is-emitting{will-change:transform,opacity}
.car-viz-burst.car-viz-torch .car-viz-ring{
 background:radial-gradient(circle closest-side,
   rgba(var(--ring-rgb),1) 0%,rgba(var(--ring-rgb),1) 16%,
   rgba(var(--ring-rgb),.70) 36%,rgba(var(--ring-rgb),.35) 61%,
   rgba(var(--ring-rgb),.09) 83%,rgba(var(--ring-rgb),0) 100%)}
.car-cover-screen.car-viz-burst-on .car-ambient{opacity:.42}
.car-cover-screen.car-viz-burst-on .car-viz-flash{
 background:radial-gradient(circle closest-side at 50% 50%,rgba(255,246,180,.69),rgba(255,156,52,.35) 33%,transparent 89%)}
.car-cover-head{gap:6px;flex-wrap:wrap}
.car-cover-head .car-visualizer-switch{margin-right:0}
#carVizSettingsBtn{font-size:11px}
.car-viz-settings{position:absolute;z-index:12;top:0;right:0;bottom:0;width:min(350px,96vw);
 overflow-y:auto;overscroll-behavior:contain;pointer-events:none;visibility:hidden;
 transform:translateX(103%);transition:transform .18s ease,visibility .18s;
 background:rgba(20,21,25,.985);border-left:1px solid #6c5830;color:#f7f1e6;
 box-shadow:-15px 0 35px #000a;padding:13px 13px 22px;font-size:12px}
.car-viz-settings.is-open{visibility:visible;pointer-events:auto;transform:none}
.car-viz-settings-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#ffd36c;font-size:14px}
.car-viz-hint{font-size:11px;line-height:1.45;color:#b8b5ae;margin:10px 0 12px}
.car-viz-field{border:1px solid #474544;border-radius:8px;padding:9px;margin:9px 0;color:#e6e0d2;min-width:0}
.car-viz-field legend{font-weight:700;color:#f1dfb9;padding:0 4px}
.car-viz-choice{display:flex;gap:7px}
.car-viz-option{flex:1;min-height:34px;background:#343236;border:1px solid #6a6461;border-radius:7px;color:#f7f4ee;cursor:pointer;font-size:12px;font-weight:650}
.car-viz-option[aria-pressed="true"]{background:#efbb41;border-color:#efbb41;color:#16120d}
.car-viz-option:focus-visible,.car-viz-settings button:focus-visible,.car-viz-settings input:focus-visible{outline:2px solid #ffe591;outline-offset:2px}
.car-viz-check{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid #454346;border-radius:8px;padding:9px 10px;margin:9px 0;cursor:pointer}
.car-viz-check span{display:flex;flex-direction:column;gap:3px}
.car-viz-check small,.car-viz-range small{color:#aaa5a0;font-size:10px;line-height:1.45}
.car-viz-check input{height:18px;width:18px;accent-color:#f0c151;flex:none}
.car-viz-config{border-left:2px solid #745c24;padding-left:9px;margin-left:7px}
.car-viz-settings .is-disabled{opacity:.42}
.car-viz-range{display:flex;flex-direction:column;gap:6px;border:1px solid #474544;border-radius:8px;padding:10px;margin:10px 0}
.car-viz-range>span{display:flex;justify-content:space-between;gap:7px;font-weight:650}
.car-viz-range output{color:#ffd46e;white-space:nowrap}
.car-viz-range input{width:100%;accent-color:#f0c151}
.car-viz-color{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 4px;font-weight:600}
.car-viz-color input{width:50px;height:32px;border:1px solid #756d61;border-radius:5px;background:transparent;padding:1px;cursor:pointer}
.car-viz-color output{font:11px ui-monospace,monospace;color:#f2d396}
.car-viz-signal{padding:9px;background:#242525;border:1px solid #484848;border-radius:8px;font-size:11px;color:#c9c8c5;line-height:1.4}
@media(max-width:550px){.car-cover-head{padding:6px 10px}.car-cover-head b{font-size:11px}#carVizSettingsBtn{padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.car-viz-ring{display:none!important}.car-viz-settings{transition:none}.car-viz-flash{transition:none}}
/* Keep the effects BEHIND the cover art; fading the art to 32% reveals them. */
#carArtPanel #carVizFlash,#carArtPanel #carVizBurst{z-index:0}
#carArtPanel #carCoverImage{z-index:1}
#carArtPanel #carCoverTitle{z-index:3}


/* Playlist quick shortcuts: a single horizontally scrollable touch row. */
.sunocar-web .car-playlist-bar {
  width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px;
  padding:7px 14px 6px;background:linear-gradient(90deg,#222937,#181e29);
  border-bottom:1px solid #625130;min-width:0;
}
.sunocar-web .car-playlist-label {flex:0 0 auto;font-weight:800;font-size:10px;
  color:#b6a883;letter-spacing:1px;}
.sunocar-web .car-playlist-scroll {display:flex;gap:7px;align-items:center;
  min-width:0;flex:1 1 0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:#857148 transparent;padding:2px 0 5px;}
.sunocar-web .car-playlist-chip {flex:0 0 auto;max-width:235px;display:inline-flex;
  align-items:center;min-height:31px;gap:7px;border:1px solid #515f74;
  color:#e9eef6;background:#2b3748;padding:5px 10px;border-radius:9px;
  font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;}
.sunocar-web .car-playlist-chip span {display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.sunocar-web .car-playlist-chip small {font-size:10px;background:#ffffff20;
  padding:1px 5px;border-radius:5px;line-height:1.25;color:#d4e0ee;}
.sunocar-web .car-playlist-chip:hover {background:#40516a;border-color:#efc66e;color:white;}
.sunocar-web .car-playlist-chip.is-active {background:linear-gradient(#f7dc9b,#d8a74b);
  color:#231b0c;border-color:#ffe09a;}
.sunocar-web .car-playlist-chip.is-active small {color:#32250d;background:#46391f24;}
.sunocar-web .car-playlist-chip:focus-visible {outline:2px solid #ffd76d;outline-offset:2px;}
@media(max-width:650px) {
  .sunocar-web .car-playlist-bar {gap:7px;padding:6px 8px;}
  .sunocar-web .car-playlist-label {font-size:9px;}
}

/* Cover Art launch without a restored song: do not reserve the absent player bar. */
body.sunocar-page.car-cover-active.car-player-hidden #carCoverScreen {
    bottom:var(--hosting-bottom-overlay-height,0px);
}

/* Site navigation + Suno refresh: both available on the Car screen. */
.car-refresh-form { display:inline-flex; align-items:center; margin:0; }
.car-refresh-form .car-btn { color:#f7da88; border-color:#6e5830; }
.car-refresh-notice { margin:7px 14px; padding:8px 12px; border:1px solid #3c7550; border-radius:7px;
  color:#daf8df; background:#163223; font:600 12px system-ui,sans-serif; }
.car-refresh-notice.car-refresh-error { border-color:#a26932; color:#ffe2bb; background:#3b291b; }
.car-cover-head .car-cover-library,.car-cover-head .car-cover-pages { font-size:11px; padding:4px 7px; min-height:28px; }
@media(max-width:550px) { .car-cover-head .car-cover-pages { display:none; } }


/* ALPS F9210B/older Android WebView landscape fitting.
   The body class is assigned in the Car view rather than relying on :has(). */
body.sunocar-page {width:100%;max-width:100%;overflow-x:hidden}
body.sunocar-page > .container,
body.sunocar-page > .container-fluid {width:100%;max-width:none!important;padding:0!important;margin:0!important}
body.sunocar-page main {width:100%;min-width:0}
body.sunocar-page .sunocar-web {width:100%;max-width:100%;min-width:0;overflow-x:hidden;
  padding-bottom:calc(var(--global-player-height,135px) + 24px)}
/* Work on older WebViews lacking CSS min(), clamp() or modern viewport units. */
.car-find{width:75%;max-width:560px}
.car-filter-panel{width:320px;max-width:95vw}
.car-diagnostics-panel{width:330px;max-width:95vw}
.car-viz-settings{width:350px;max-width:96vw}
.car-viz-ring{width:77vmin;height:77vmin;max-width:620px;max-height:620px}
.car-lyrics-slot .global-lyrics-line{font-size:18px}
/* Fixed bottom controls may be taller on a WebView whose CSS viewport is
   smaller than the panel's physical pixel resolution. */
body.sunocar-page .car-cover-screen{bottom:var(--global-player-height,135px)}
body.sunocar-page.car-cover-active.car-player-hidden #carCoverScreen{bottom:0}
@media (orientation:landscape) and (max-height:700px) {
  /* Never stack the artwork and karaoke vertically on a shallow car display. */
  .sunocar-web .car-cover-screen{flex-direction:row}
  .sunocar-web .car-art-panel{flex:1 1 52%;min-width:0;min-height:0;padding:5px}
  .sunocar-web .car-cover-right{flex:1 1 48%;min-width:0;min-height:0}
  .sunocar-web #carCoverImage{max-width:97%;max-height:95%}
  .sunocar-web #carCoverTitle{font-size:13px;padding:5px 7px;bottom:4px;left:7px;right:7px}
  .sunocar-web .car-cover-head{padding:5px 7px;gap:4px;flex-wrap:wrap}
  .sunocar-web .car-cover-head b{font-size:11px}
  .sunocar-web .car-cover-head .car-btn{min-height:26px;font-size:10px;padding:3px 5px}
  .sunocar-web .car-visualizer-switch{font-size:10px;gap:3px;margin:0}
  .sunocar-web .car-lyrics-slot{padding:2px 7px}
  .sunocar-web .car-lyrics-slot .global-lyrics-line{font-size:14px;padding:3px 2px;margin-bottom:2px}
  /* Keep the Car tools in one navigable strip instead of many stacked rows. */
  .sunocar-web .car-top{display:flex;flex-wrap:nowrap;min-height:0;padding:4px 7px;gap:6px}
  .sunocar-web .car-logo{flex:none;font-size:20px;gap:4px}
  .sunocar-web .car-logo span{font-size:15px;line-height:18px}
  .sunocar-web .car-logo small{font-size:7px;line-height:9px}
  .sunocar-web .car-total{display:none}
  .sunocar-web .car-actions{min-width:0;max-width:100%;width:auto;flex:1 1 auto;margin-left:0;
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;padding:2px 1px 4px}
  .sunocar-web .car-actions>*{flex:0 0 auto}
  /* Keep the most-used car action visible on tight screens. */
  .sunocar-web #carCoverBtn{order:-10}
  .sunocar-web .car-actions .car-btn{font-size:11px;min-height:30px;padding:4px 7px}
  .sunocar-web .car-toolbar{gap:7px;padding:5px 8px}
  .sunocar-web .car-find{flex:1 1 auto;min-width:0;width:auto;max-width:none}
  .sunocar-web .car-find input{width:100%;min-width:0}
  .sunocar-web .car-pager{flex:0 0 auto;gap:4px}
  .sunocar-web .car-playlist-bar{padding:3px 8px}
  .sunocar-web .car-playlist-chip{min-height:28px}
}
/* CSS-pixel widths can be ~600-850 on 1024px Android head units. Condense
   secondary table columns rather than forcing 840px of horizontal scroll. */
@media (orientation:landscape) and (max-width:950px) {
  .sunocar-web .car-songs{min-width:0;width:100%;table-layout:fixed}
  .sunocar-web .car-songs th:nth-child(3),.sunocar-web .car-songs td:nth-child(3),
  .sunocar-web .car-songs th:nth-child(4),.sunocar-web .car-songs td:nth-child(4),
  .sunocar-web .car-songs th:nth-child(5),.sunocar-web .car-songs td:nth-child(5),
  .sunocar-web .car-songs th:nth-child(6),.sunocar-web .car-songs td:nth-child(6){display:none}
  .sunocar-web .car-songs th:nth-child(1){width:50px}
  .sunocar-web .car-songs th:nth-child(2){width:auto}
  .sunocar-web .car-songs th:nth-child(7){width:76px}
  .sunocar-web .car-songs th:nth-child(8){width:194px}
  .sunocar-web .car-songs th,.sunocar-web .car-songs td{padding:4px 5px}
  .sunocar-web .car-thumb{width:38px;height:38px}
  .sunocar-web .car-row-actions{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;min-width:0}
  .sunocar-web .car-row-actions .car-btn{min-width:0;min-height:30px;font-size:10px;padding:4px 5px}
  .sunocar-web .car-songs td:nth-child(8){overflow:visible;text-overflow:clip}
}
@media (orientation:landscape) and (max-width:620px) {
  .sunocar-web .car-logo span{font-size:12px}
  .sunocar-web .car-logo small{font-size:6px;letter-spacing:0}
  .sunocar-web .car-songs th:nth-child(8){width:163px}
  .sunocar-web .car-row-actions{gap:2px}
  .sunocar-web .car-row-actions .car-btn{font-size:9px;padding:3px 3px}
  .sunocar-web .car-cover-head b{display:none}
  .sunocar-web .car-cover-head .car-cover-pages{display:none}
}

/* Burst envelope controls; fit the narrow ALPS head-unit Effects drawer. */
.car-viz-timing{min-width:0;padding:7px 8px 9px;margin-top:12px}
.car-viz-timing .car-viz-range{margin:6px 0;padding:7px 8px}
.car-viz-timing .car-viz-range>span{align-items:center;flex-wrap:wrap}
.car-viz-timing input[type="range"]{min-height:22px;touch-action:pan-x}

/* v15: One horizontally scrollable Car action strip at ALL viewport widths. */
.sunocar-web .car-top {display:flex;flex-wrap:nowrap!important;min-width:0;align-items:center;}
.sunocar-web .car-actions {display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center;min-width:0!important;width:auto!important;max-width:100%!important;flex:1 1 0!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:thin;}
.sunocar-web .car-actions > * {flex:0 0 auto!important;min-width:max-content;}
.sunocar-web .car-actions .car-btn {white-space:nowrap!important;}
.sunocar-web .car-total {flex:0 0 auto;}
/* Search is already in the Filters panel. Pagination belongs after the final song. */
.sunocar-web .car-pager-bottom {position:relative;display:flex;justify-content:center;align-items:center;flex:0 0 auto;padding:12px 8px 16px;min-height:46px;border-top:1px solid #ffffff29;}
.sunocar-web .car-pager-content {display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;}
.sunocar-web .car-table-wrap {overscroll-behavior-y:contain;}

/* v16: Finger drag across playlist links (tap remains link activation). */
.sunocar-web .car-playlist-scroll {
  touch-action:pan-y; -webkit-overflow-scrolling:touch; cursor:grab;
  user-select:none; -webkit-user-select:none;
}
.sunocar-web .car-playlist-scroll.suno-playlist-dragging { cursor:grabbing; scroll-behavior:auto; }
.sunocar-web .car-playlist-chip { -webkit-user-drag:none; }

/* v17: Compact Car navigation dropdown. One short toolbar row on ALPS / mobile.
   Isolated from the legacy .car-actions responsive rules. */
.sunocar-web .car-top { position:relative; flex-wrap:nowrap!important; align-items:center; min-height:0; gap:8px; padding:5px 9px; overflow:visible; }
.sunocar-web .car-logo { flex:0 0 auto; }
.sunocar-web .car-menu { margin-left:auto; flex:0 0 auto; position:relative; z-index:130; }
.sunocar-web .car-menu-toggle { list-style:none; min-height:30px; padding:5px 12px; user-select:none; cursor:pointer; }
.sunocar-web .car-menu-toggle::-webkit-details-marker { display:none; }
.sunocar-web .car-menu-toggle::marker { content:""; }
.sunocar-web .car-menu[open] .car-menu-toggle { border-color:var(--metal-accent,#da3754); }
.sunocar-web .car-menu-panel {
 position:absolute; top:calc(100% + 6px); right:0; display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
 width:min(335px,calc(100vw - 16px)); max-height:min(65vh,340px); overflow-y:auto; overflow-x:hidden;
 padding:11px; border:1px solid var(--metal-edge,#8b3852); border-radius:11px;
 background:var(--metal-deep,#160d13); box-shadow:0 12px 35px #000d;
 -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.sunocar-web .car-menu:not([open]) .car-menu-panel {display:none!important;}
.sunocar-web .car-menu-panel > * {min-width:0; width:100%; margin:0;}
.sunocar-web .car-menu-panel .car-btn {width:100%; white-space:normal; text-align:center; min-height:36px; font-size:12px; padding:6px 5px;}
.sunocar-web .car-menu-panel .car-refresh-form {display:block;}
.sunocar-web .car-total {font-size:11px; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0;}
@media(max-width:660px) and (orientation:landscape){
 .sunocar-web .car-top {padding:3px 7px;gap:5px;}
 .sunocar-web .car-logo {font-size:16px;}
 .sunocar-web .car-logo span {font-size:12px;line-height:14px;}
 .sunocar-web .car-logo small {font-size:6px;letter-spacing:.4px;}
 .sunocar-web .car-menu-toggle {min-height:27px;padding:3px 9px;font-size:11px;}
 .sunocar-web .car-total {display:none;}
 .sunocar-web .car-menu-panel {max-height:calc(100dvh - 46px);}
}

/* v18: Playlist ribbon is finger/mouse swipeable without a visible scrollbar.
   The v16 drag handler continues to distinguish horizontal drag from tap. */
.sunocar-web .car-playlist-scroll {
 overflow-x:auto!important;
 overflow-y:hidden!important;
 scrollbar-width:none!important; /* Firefox / ALPS */
 -ms-overflow-style:none;
 padding-bottom:2px!important;
 touch-action:pan-y;
 -webkit-overflow-scrolling:touch;
}
.sunocar-web .car-playlist-scroll::-webkit-scrollbar {
 display:none!important; width:0!important; height:0!important;
}

/* v20: Scrollable clearance AFTER bottom pagination.
   The fixed global mini-player must never cover the final page links.
   Keep the clearance inside .car-table-wrap (the actual scroll container),
   rather than on .sunocar-web, which does not help the internal scroller. */
.sunocar-web .car-table-wrap::after {
  content:""; display:block; width:100%;
  height:calc(max(112px, var(--global-player-height, 135px)) + 14px);
  pointer-events:none;
}
.sunocar-web .car-pager-bottom {scroll-margin-bottom:16px;}

/* v21: Independent finger scrolling. A short tap selects; a horizontal drag
   scrolls playlist chips. Native vertical panning owns the song list. */
.sunocar-web .car-playlist-scroll {
  touch-action:pan-y!important; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.sunocar-web .car-table-wrap {
  display:block; position:relative;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.sunocar-web .car-table-wrap .car-songs,
.sunocar-web .car-table-wrap .car-pager-bottom {touch-action:pan-y;}
/* Ensure a real vertical scrollport even when the list has many rows. */
@media (orientation:landscape) and (max-height:420px) and (max-width:740px) {
 .sunocar-web .car-table-wrap {
   height:calc(100dvh - 132px);
   max-height:calc(100dvh - 132px);
   min-height:45px;
 }
}

/* v23: Coordinated touch-and-hold drag for both Car scrolling regions.
   JavaScript applies the scroll delta; avoid browser gesture cancellation.
   Only activated after JS registers the gesture handler. */
@media (pointer:coarse) {
 html.sunoweb-car-drag-ready .sunocar-web .car-playlist-scroll,
 html.sunoweb-car-drag-ready .sunocar-web .car-playlist-scroll *,
 html.sunoweb-car-drag-ready .sunocar-web .car-table-wrap,
 html.sunoweb-car-drag-ready .sunocar-web .car-table-wrap * {
   touch-action:none!important;
 }
}
.sunocar-web .car-playlist-scroll,
.sunocar-web .car-table-wrap { scroll-behavior:auto!important; }

/* v23.2: give the song list an actual bounded wheel/touch scrollport on
   desktop Windows too, rather than only in the ALPS media query. */
@media (min-height:421px) {
 .sunocar-web .car-table-wrap {
   max-height:clamp(180px, calc(100vh - 310px), 68vh);
   overflow-y:auto!important; overflow-x:auto;
 }
}

/* v23.3 — unified single-column dropdown navigation. Matches the Library's
   conventional vertical navigation rather than the former two-column action grid. */
.sunocar-web .car-menu-panel.suno-unified-menu {
 display:flex!important; flex-direction:column!important; align-items:stretch;
 gap:0!important; width:min(275px,calc(100vw - 16px));
 padding:5px!important; border-radius:8px;
 max-height:min(78vh,470px); overflow-y:auto;
}
.sunocar-web .car-menu:not([open]) .car-menu-panel.suno-unified-menu {display:none!important;}
.sunocar-web .suno-unified-menu > a,
.sunocar-web .suno-unified-menu > button,
.sunocar-web .suno-unified-menu > form > button {
 display:block; width:100%!important; border:0!important; border-radius:4px!important;
 box-shadow:none!important; background:transparent!important; text-align:left!important;
 min-height:37px; padding:9px 13px!important; font:inherit;
 font-size:13px!important; color:var(--metal-text,#f7edf1)!important;
}
.sunocar-web .suno-unified-menu > a:hover,
.sunocar-web .suno-unified-menu > button:hover,
.sunocar-web .suno-unified-menu > form > button:hover,
.sunocar-web .suno-unified-menu > a:focus-visible,
.sunocar-web .suno-unified-menu > button:focus-visible {
 background:var(--metal-accent,#9e2947)!important; color:#fff!important;
}
.sunocar-web .suno-unified-menu > form {margin:0!important;width:100%;}
.sunocar-web .car-menu-toggle {font-size:19px;line-height:1;min-width:40px;text-align:center;}

/* v23.4 shared hamburger geometry; same three-bar mark as layout nav. */
.sunocar-web .car-menu-toggle{display:flex!important;align-items:center;justify-content:center;width:40px!important;height:36px!important;min-width:40px!important;min-height:36px!important;padding:6px!important;box-sizing:border-box}
.sunocar-web .sunoweb-hamburger{display:inline-flex;vertical-align:middle;width:20px;height:18px;flex-direction:column;justify-content:space-between;align-items:stretch}
.sunocar-web .sunoweb-hamburger i{display:block;width:100%;height:2px;border-radius:2px;background:currentColor}
.sunocar-web .suno-unified-menu .car-menu-current{display:block;width:100%;padding:9px 13px;font-size:13px;font-weight:700;color:var(--metal-text,#f7edf1);background:var(--metal-accent,#9e2947);border-radius:4px}

/* V24.0 — Car song list scrolling. This overrides inconsistent v21/v23
   scrollport sizing without changing song rows, player, or ALPS compact columns. */
.sunocar-web .car-table-wrap {
  display:block;
  min-width:0;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scroll-behavior:auto!important;
}
/* A bounded scrollport is essential; otherwise the wheel scrolls the page
   instead of the song list. Leave clearance above the fixed mini-player. */
@media (min-height:421px) {
  .sunocar-web .car-table-wrap {
    height:clamp(180px, calc(100vh - 310px), 68vh);
    max-height:clamp(180px, calc(100vh - 310px), 68vh);
  }
}
@media (orientation:landscape) and (max-height:420px) {
  .sunocar-web .car-table-wrap {
    height:calc(100vh - 132px);
    max-height:calc(100vh - 132px);
    min-height:45px;
  }
}
/* Keep mouse selection normal on tap; only suppress selection during drag. */
.sunocar-web .car-table-wrap.suno-touch-dragging,
.sunocar-web .car-playlist-scroll.suno-touch-dragging {
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
}
/* Our single delegated scroll handler owns touch gestures only when active;
   otherwise preserve browser-native two-axis scrolling. */
.sunocar-web .car-table-wrap,
.sunocar-web .car-playlist-scroll {touch-action:pan-x pan-y;}
@media(pointer:coarse){
 html.sunoweb-car-drag-ready .sunocar-web .car-table-wrap,
 html.sunoweb-car-drag-ready .sunocar-web .car-playlist-scroll {touch-action:none!important;}
}

/* V24.2: eliminate phantom space below Car list. Old fixed bottom padding,
   310px viewport deductions and pseudo-element clearance reserved far more
   height than the actual minimized player consumes. The scrollport height is
   set from the actual #globalAudioPlayer top by car-web.js. */
.sunocar-web {
  min-height:0;
  padding-bottom:0;
}
.sunocar-web .car-table-wrap::after {
  content:none!important;
  display:none!important;
  height:0!important;
}

/* V24.4 — keep the Cover Art toolbar BELOW the real Car navigation bar.
   --car-cover-top is measured from .car-top, including browser zoom and
   compact ALPS head-unit layout. The 50px CSS fallback handles first paint.
   The Effects drawer is inside this screen, so its top is also corrected. */
.sunocar-web .car-cover-screen { top:var(--car-cover-top,50px); }
/* Controls may wrap on smaller screens, but cannot slip under the site header. */
.sunocar-web .car-cover-head { flex:0 0 auto; min-height:32px; }
.sunocar-web .car-cover-head > .car-visualizer-switch,
.sunocar-web .car-cover-head > #carVizSettingsBtn,
.sunocar-web .car-cover-head > #carCoverClose { flex:0 0 auto; }

/* V24.5 — compact Cover Art toolbar + theme-aware Visualizer button.
   Cover Art has no duplicate Library/Car buttons and no analysis badge.
   The remaining Effects and Close controls continue to use their old IDs. */
.sunocar-web .car-cover-head {justify-content:flex-start;gap:7px;flex-wrap:nowrap;min-width:0;}
.sunocar-web .car-cover-head #carCoverClose {margin-left:auto;flex:0 0 auto;}
.sunocar-web .car-cover-head #carVizSettingsBtn {flex:0 0 auto;}
.sunocar-web .car-viz-toggle {
  flex:0 0 auto;min-height:29px;cursor:pointer;
  background:#28232a;border:1px solid #66565f;color:#f4edf2;
}
.sunocar-web .car-viz-toggle[aria-pressed="true"] {
  background:linear-gradient(150deg,var(--metal-hi,#ffda71),var(--metal-accent,#ffc107) 58%,var(--metal-mid,#ad7d17));
  border-color:var(--metal-accent,#ffc107);
  color:var(--metal-ink,#171108);
  box-shadow:inset 0 1px 0 #ffffff35,0 0 0 1px #ffffff17;
}
.sunocar-web .car-viz-toggle[aria-pressed="false"] {
  background:#29242a;border-color:#66616a;color:#e9dce5;box-shadow:none;
}
.sunocar-web .car-viz-toggle:focus-visible {outline:2px solid var(--metal-accent,#ffc107);outline-offset:2px;}
/* User-selected metallic theme variables live on the html element, so
   both Gold's fallback and the five custom finishes work without JS styling. */

/* The ALPS WebView's 597x270 landscape canvas must not reserve a strip
   underneath the Cover Art for the floating global playback panel.  The
   latter has its own, higher stacking level and overlays the artwork. */
@media (orientation:landscape) and (max-width:650px) and (max-height:360px) {
  body.sunocar-page .sunocar-web #carCoverScreen {bottom:0!important;}
  body.sunocar-page .sunocar-web #carArtPanel {
    min-height:0;padding:0!important;
    display:flex;align-items:flex-end;justify-content:center;
  }
  body.sunocar-page .sunocar-web #carCoverImage {
    display:block;width:auto!important;height:100%!important;
    max-height:100%!important;max-width:100%!important;
    aspect-ratio:auto!important;object-fit:contain;
    align-self:flex-end;border-radius:0;box-shadow:none;
  }
  body.sunocar-page .sunocar-web #carCoverTitle {bottom:0;}
  body.sunocar-page .sunocar-web .car-cover-head {padding:3px 5px;gap:5px;min-height:31px;}
  body.sunocar-page .sunocar-web .car-cover-head .car-btn {min-height:27px;padding:3px 8px;}
}

/* Beat the legacy themed .car-btn !important rule without changing other
   buttons.  Selected theme colour when ON; grey when OFF. */
html[data-sunoweb-theme] body.sunocar-page .sunocar-web .car-cover-head button.car-viz-toggle[aria-pressed="true"] {
  background:linear-gradient(155deg,var(--metal-hi,#ffda71),var(--metal-accent,#ffc107) 54%,var(--metal-mid,#ad7d17))!important;
  color:var(--metal-ink,#171108)!important;
  border-color:var(--metal-accent,#ffc107)!important;
}
html[data-sunoweb-theme] body.sunocar-page .sunocar-web .car-cover-head button.car-viz-toggle[aria-pressed="false"] {
  background:#29242a!important;color:#e9dce5!important;border-color:#66616a!important;
  box-shadow:none!important;
}