/* Shared playback surface. Keep provider iframe mounted in both themes. */
.mode-options {display:grid;grid-gap:10px;gap:10px;padding:14px}
.mode-option {display:flex;align-items:center;grid-gap:16px;gap:16px;width:100%;text-align:left;padding:18px;min-height:94px;border-radius:18px;border:2px solid transparent;background:var(--panel2);transition:background .18s,border-color .18s}
.mode-option>.icon {width:34px;height:34px;flex:none}
.mode-option>span:nth-child(2) {flex:1;min-width:0}
.mode-option strong {display:block;font-size:20px;line-height:1.3}
.mode-option small {display:block;font-size:14px;line-height:1.5;margin-top:5px;color:var(--muted)}
.mode-option[aria-pressed=true] {border-color:#8ecaff;background:rgba(40,87,129,0.267)}
.mode-selected {visibility:hidden;font-size:24px}
.mode-option[aria-pressed=true] .mode-selected {visibility:visible}
.mode-picker .interface-setting {display:none}
html[data-interface=android-auto] .mode-option[aria-pressed=true] {border-color:var(--aa-accent);background:var(--aa-base)}
.np-kicker,.np-heading,.np-next-up,.np-queue,#np-seek-hint {display:none}
#repeat {position:relative}
#np-repeat-one {position:absolute;font-size:12px;right:7px;top:3px;font-weight:700}
.np-actions {display:flex;align-items:center;justify-content:space-between;grid-gap:8px;gap:8px;margin-top:8px;flex-shrink:0}
.np-actions>button {display:flex;align-items:center;justify-content:center;grid-gap:8px;gap:8px;min-height:44px;border-radius:24px;padding:8px 10px;font-size:14px;background:rgba(255,255,255,0.051);white-space:nowrap}
.np-actions .icon {width:22px;height:22px}
#volume-panel>div {display:flex;align-items:center;grid-gap:12px;gap:12px;font-size:16px}
#np-volume-value {margin-left:auto;font-variant-numeric:tabular-nums}
#volume-panel input {width:100%;min-height:44px}
#seek,#volume {--played:0%;cursor:pointer;accent-color:#acd5ff}
#seek:disabled {cursor:default}
#shuffle[aria-pressed=true],#repeat[aria-pressed=true] {color:#abd5ff;background:rgba(172,213,255,0.110)}
body[data-theme=light] #shuffle[aria-pressed=true],body[data-theme=light] #repeat[aria-pressed=true] {color:#175ba2;background:rgba(33,106,190,0.086)}
body[data-view=nowplaying] #player-card {
  --np-soft:rgba(255,255,255,0.051);--np-line:rgba(255,255,255,0.110);--np-muted:#b5c6db;--np-accent:#b4d9ff;--np-on-accent:#10283f;
  display:grid!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100%;min-height:0;
  grid-template-columns:minmax(240px,.92fr) minmax(300px,1.08fr);
  grid-template-rows:52px minmax(74px,1fr) 56px 80px 48px 62px;
  grid-template-areas:'header header' 'media meta' 'media progress' 'media transport' 'media actions' 'next status';
  grid-gap:8px 30px;gap:8px 30px;padding:20px 28px!important;align-content:stretch;overflow:auto;
  border:1px solid var(--np-line);border-radius:28px;background:radial-gradient(ellipse at 15% 70%,#24486a,transparent 60%),linear-gradient(135deg,#172b45,#101a30 90%);
}
body[data-view=nowplaying] #mini-player-bar {grid-area:header;display:flex;align-items:center;grid-gap:10px;gap:10px;height:48px;min-height:48px;margin:0;border-bottom:1px solid var(--np-line);padding-bottom:8px}
body[data-view=nowplaying] #mini-open-player {min-height:44px;font-size:15px;font-weight:500;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 0;color:var(--np-muted)}
body[data-view=nowplaying] .np-heading {display:block;font-size:16px;font-weight:650;margin:0 auto;letter-spacing:.1px}
body[data-view=nowplaying] #player-queue-button {margin:0;min-height:44px;padding:8px 18px;font-size:15px;border:1px solid var(--np-line);background:var(--np-soft)}
body[data-view=nowplaying] #player-queue-button[aria-expanded=true] {background:var(--np-accent);color:var(--np-on-accent)}
body[data-view=nowplaying] #close-mini-player {width:44px;height:44px;min-width:44px;border-radius:50%;font-size:28px;color:var(--np-muted)}
body[data-view=nowplaying] #video-wrap {grid-area:media;align-self:center;width:100%;height:200px;min-height:200px;max-height:none;margin:0;border-radius:22px;box-shadow:0 16px 45px rgba(0,0,0,0.333);background:#080c15;overflow:hidden}
body[data-view=nowplaying] #video-wrap>iframe,body[data-view=nowplaying] #youtube-player {width:100%;height:100%;min-height:200px;max-height:none;position:absolute;top:0;right:0;bottom:0;left:0;}
body[data-view=nowplaying] .player-intro {padding:14px;grid-gap:14px;gap:14px;background:linear-gradient(140deg,#193c59,#18223c);min-height:200px}
body[data-view=nowplaying] .player-intro>span {font-size:16px;text-align:center;color:#d0e5fb}
body[data-view=nowplaying] .player-intro>.icon {width:54px;height:54px;color:#b4d9ff}
body[data-view=nowplaying] .white-button {min-height:52px;font-size:16px;border-radius:28px;padding:10px 22px}
body[data-view=nowplaying] #player-card .track-meta {grid-area:meta;display:flex;align-items:center;align-self:center;grid-gap:12px;gap:12px;padding:10px 0 0;margin:0;width:100%;min-width:0}
body[data-view=nowplaying] .track-meta>div {min-width:0;flex:1}
body[data-view=nowplaying] .np-kicker {display:block;color:var(--np-accent);font-size:12px;letter-spacing:2px;font-weight:700;margin-bottom:10px}
body[data-view=nowplaying] #track-title {font-size:32px;line-height:1.13;letter-spacing:-1px;font-weight:700;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:2;max-height:2.3em}
body[data-view=nowplaying] #track-artist {font-size:20px;line-height:1.3;margin-top:10px;color:var(--np-muted)}
body[data-view=nowplaying] #save-track {display:flex!important;align-self:center;min-width:48px;width:48px;height:48px;background:var(--np-soft)}
body[data-view=nowplaying] #save-track[aria-pressed=true] {color:#ff83a3;background:rgba(255,117,153,0.133)}
body[data-view=nowplaying] #save-track[aria-pressed=true] .icon {fill:currentColor}
body[data-view=nowplaying] #player-card .progress {grid-area:progress;align-self:center;width:100%;padding:0}
body[data-view=nowplaying] #seek {height:32px;min-height:32px;margin:0;width:100%;border:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none}
body[data-view=nowplaying] #seek::-webkit-slider-runnable-track {height:6px;background:linear-gradient(to right,var(--np-accent) 0%,var(--np-accent) var(--played),var(--np-line) var(--played),var(--np-line) 100%);border-radius:8px}
body[data-view=nowplaying] #seek::-webkit-slider-thumb {-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:var(--np-accent);border:3px solid var(--np-accent);margin-top:-7px;box-shadow:0 2px 8px rgba(0,0,0,0.267)}
body[data-view=nowplaying] #seek::-moz-range-track {height:6px;background:var(--np-line);border-radius:8px}
body[data-view=nowplaying] #seek::-moz-range-progress {height:6px;background:var(--np-accent);border-radius:8px}
body[data-view=nowplaying] #seek::-moz-range-thumb {height:16px;width:16px;background:var(--np-accent);border:0;border-radius:50%}
body[data-view=nowplaying] #player-card .progress>div {display:flex;justify-content:space-between;color:var(--np-muted);font-size:14px;line-height:20px;margin:0;font-variant-numeric:tabular-nums}
body[data-view=nowplaying] #np-seek-hint {display:block;font-size:12px;opacity:.8}
body[data-view=nowplaying] #player-card .transport {grid-area:transport;display:flex;align-items:center;justify-content:space-between;grid-gap:8px;gap:8px;margin:0;min-height:76px;width:100%}
body[data-view=nowplaying] #player-card .transport .icon-button {display:flex!important;align-items:center;justify-content:center;width:52px;min-width:44px;height:56px;margin:0;border-radius:50%}
body[data-view=nowplaying] #player-card .transport .icon {width:30px;height:30px}
body[data-view=nowplaying] #player-card .transport #previous,body[data-view=nowplaying] #player-card .transport #next {width:62px}
body[data-view=nowplaying] #player-card .play-button {width:78px;min-width:78px;height:78px;border-radius:50%;background:var(--np-accent);color:var(--np-on-accent);box-shadow:0 8px 24px rgba(0,0,0,0.200);transition:transform .15s,border-radius .22s}
body[data-view=nowplaying] #player-card .play-button .icon {height:38px;width:38px}
body[data-view=nowplaying] .np-actions {grid-area:actions;display:flex;align-items:center;justify-content:space-between;grid-gap:10px;gap:10px;margin:0;width:100%}
body[data-view=nowplaying] .np-actions>button {display:flex!important;flex:1;min-height:44px;border:1px solid var(--np-line);background:var(--np-soft);font-size:14px;color:var(--np-muted)}
body[data-view=nowplaying] #volume-panel:not([hidden]) {display:block!important;position:absolute;right:28px;bottom:86px;left:auto;width:calc(50% - 36px);border-radius:24px;padding:12px 18px;background:#263b56;color:#fff;box-shadow:0 15px 40px rgba(0,0,0,0.467);border:1px solid var(--np-line);z-index:8}
body[data-view=nowplaying] #np-next-up {grid-area:next;display:flex;align-items:center;justify-content:space-between;grid-gap:16px;gap:16px;min-height:60px;padding:10px 16px;text-align:left;background:var(--np-soft);border:1px solid var(--np-line);border-radius:18px;color:inherit}
.np-next-copy {display:block;min-width:0}
.np-next-copy small {display:block;font-size:11px;font-weight:600;letter-spacing:1.8px;color:var(--np-muted)}
.np-next-copy strong {display:block;font-size:16px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-next-copy>span {display:none}
body[data-view=nowplaying] #player-status {grid-area:status;display:flex!important;align-items:center;justify-content:center;text-align:center;color:var(--np-muted);font-size:14px;line-height:20px;padding:0 6px;margin:0;min-width:0}
body[data-view=nowplaying] #youtube-fallback:not([hidden]) {display:block!important;grid-column:1/-1;grid-row:7;min-height:44px;text-align:center;padding:10px;color:var(--np-accent)}
body[data-view=nowplaying] #np-queue:not([hidden]) {grid-column:2;grid-row:2/4;display:flex;flex-direction:column;min-height:0;z-index:2;border-radius:20px;background:#192c44;border:1px solid var(--np-line);overflow:hidden}
body[data-view=nowplaying] .queue-open .track-meta,body[data-view=nowplaying] .queue-open .progress {visibility:hidden}
.np-queue-heading {display:flex;align-items:center;grid-gap:10px;gap:10px;padding:6px 12px;flex-shrink:0;border-bottom:1px solid var(--np-line)}
.np-queue-heading h2 {font-size:18px}
#np-queue-count {margin-left:auto;font-size:12px;color:var(--np-muted)}
#np-queue-list {overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
.np-queue-track {display:flex;align-items:center;grid-gap:12px;gap:12px;min-height:64px;width:100%;padding:10px 16px;text-align:left;border-bottom:1px solid var(--np-line)}
.np-queue-track>span:nth-child(2) {min-width:0;flex:1}
.np-queue-track strong,.np-queue-track small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}
.np-queue-track strong {font-size:16px;font-weight:550}
.np-queue-track small,.np-order {font-size:13px;color:var(--np-muted)}
.np-queue-track .icon {width:20px;height:20px}
.np-queue-pages {display:flex;align-items:center;justify-content:space-between;grid-gap:5px;gap:5px;flex:none;border-top:1px solid var(--np-line);padding:0 8px}
.np-queue-pages button {min-height:44px;font-size:13px;padding:6px}
#np-queue-page {font-size:12px;color:var(--np-muted)}
.np-empty {font-size:16px;padding:16px;line-height:1.5}
body[data-theme=light][data-view=nowplaying] #player-card {--np-soft:rgba(255,255,255,0.533);--np-line:rgba(27,65,101,0.122);--np-muted:#46627e;--np-accent:#215b91;--np-on-accent:#fff;background:radial-gradient(ellipse at 0% 100%,#bcdaf3,transparent 65%),linear-gradient(135deg,#e4effa,#f4f7fc);color:#16304b}
body[data-theme=light][data-view=nowplaying] #np-queue,body[data-theme=light][data-view=nowplaying] #volume-panel {background:#e4eff9;color:#16304b}
html[data-interface=android-auto] body[data-view=nowplaying] #player-card {--np-accent:var(--aa-accent);--np-on-accent:var(--aa-on-accent);--np-muted:var(--aa-muted);--np-soft:var(--aa-base);--np-line:var(--aa-outline);background:var(--aa-surface);color:var(--aa-text);border:0;border-radius:30px}
html[data-interface=android-auto] body[data-view=nowplaying] #player-card .play-button {width:86px;min-width:86px;height:72px;border-radius:26px;box-shadow:none}
html[data-interface=android-auto] body.is-playing[data-view=nowplaying] #player-card .play-button {border-radius:50%}
html[data-interface=android-auto] body[data-view=nowplaying] #track-title {font-weight:600;letter-spacing:-.8px}
html[data-interface=android-auto] body[data-view=nowplaying] #video-wrap {border-radius:30px;box-shadow:none}
html[data-interface=android-auto] body[data-view=nowplaying] #np-next-up {background:var(--aa-secondary);color:#163c2e;border:0;border-radius:24px}
html[data-interface=android-auto] body[data-view=nowplaying] .np-next-copy small {color:#345b49}
html[data-interface=android-auto] body[data-view=nowplaying] #np-queue,html[data-interface=android-auto] body[data-view=nowplaying] #volume-panel {background:var(--aa-raised);color:var(--aa-text)}
html[data-interface=android-auto] #shuffle[aria-pressed=true],html[data-interface=android-auto] #repeat[aria-pressed=true] {color:var(--aa-on-accent);background:var(--aa-accent)}
html[data-interface=android-auto] body[data-view=nowplaying] #seek::-webkit-slider-thumb {width:5px;border:0;border-radius:3px;height:24px;margin-top:-9px}
@media(min-width:760px) and (max-height:640px) {
  body[data-view=nowplaying] #player-card {grid-template-rows:44px minmax(58px,1fr) 46px 60px 44px 48px;grid-gap:5px 22px;gap:5px 22px;padding:10px 20px!important;grid-template-columns:minmax(220px,.92fr) minmax(290px,1.08fr)}
  body[data-view=nowplaying] #mini-player-bar {height:44px;min-height:44px;padding-bottom:0}
  body[data-view=nowplaying] #video-wrap {height:200px;max-height:200px}
  body[data-view=nowplaying] #track-title {font-size:28px;letter-spacing:-.5px}
  body[data-view=nowplaying] #track-artist {font-size:16px;margin-top:4px}
  body[data-view=nowplaying] .np-kicker {font-size:11px;margin-bottom:5px}
  body[data-view=nowplaying] #player-card .transport {min-height:58px}
  body[data-view=nowplaying] #player-card .play-button {width:58px;min-width:58px;height:58px}
  html[data-interface=android-auto] body[data-view=nowplaying] #player-card .play-button {width:72px;min-width:72px;height:58px;border-radius:21px}
  body[data-view=nowplaying] #np-next-up {min-height:48px;padding:6px 12px}
  body[data-view=nowplaying] #np-seek-hint {display:none}
  body[data-view=nowplaying] #player-status {font-size:13px}
  .np-queue-heading {padding:0 10px}
  .np-queue-track {min-height:56px;padding:5px 12px}
}
@media(max-width:759px) {
  body[data-view=nowplaying] .carplay {padding-bottom:var(--shell-pad)!important}
  body[data-view=nowplaying] #player-card {display:flex!important;flex-direction:column;padding:12px 14px!important;grid-gap:12px;gap:12px;overflow:auto;min-height:0}
  body[data-view=nowplaying] #player-card>* {flex-shrink:0}
  body[data-view=nowplaying] #mini-player-bar {flex-basis:44px;grid-gap:6px;gap:6px}
  body[data-view=nowplaying] .np-heading {display:none}
  body[data-view=nowplaying] #mini-open-player {flex:1;max-width:none;font-size:14px}
  body[data-view=nowplaying] #player-queue-button {font-size:14px;padding:6px 12px}
  body[data-view=nowplaying] #close-mini-player {width:36px;min-width:36px}
  body[data-view=nowplaying] #video-wrap {height:200px;min-height:200px;max-height:200px;flex:0 0 200px;width:100%;margin:0}
  body[data-view=nowplaying] #player-card .track-meta {padding:2px 0}
  body[data-view=nowplaying] #track-title {font-size:26px}
  body[data-view=nowplaying] #track-artist {font-size:17px;margin-top:5px}
  body[data-view=nowplaying] .np-kicker {font-size:11px;margin-bottom:7px}
  body[data-view=nowplaying] #player-card .progress {padding:0;min-height:52px}
  body[data-view=nowplaying] #np-seek-hint {display:none}
  body[data-view=nowplaying] #player-card .transport {min-height:68px;grid-gap:2px;gap:2px;margin:0}
  body[data-view=nowplaying] #player-card .transport .icon-button {width:44px;min-width:40px;height:52px}
  body[data-view=nowplaying] #player-card .transport #previous,body[data-view=nowplaying] #player-card .transport #next {width:44px}
  body[data-view=nowplaying] #player-card .transport .icon {width:27px;height:27px}
  body[data-view=nowplaying] #player-card .play-button {width:64px;min-width:64px;height:64px}
  html[data-interface=android-auto] body[data-view=nowplaying] #player-card .play-button {width:70px;min-width:64px;height:62px;border-radius:23px}
  body[data-view=nowplaying] .np-actions {grid-gap:6px;gap:6px}
  body[data-view=nowplaying] .np-actions>button {font-size:13px;padding:6px}
  body[data-view=nowplaying] #np-next-up {min-height:66px}
  body[data-view=nowplaying] #player-status {min-height:28px;font-size:13px}
  body[data-view=nowplaying] #volume-panel:not([hidden]) {position:relative;width:100%;top:auto;right:auto;bottom:auto;left:auto;order:0;padding:8px 12px;box-shadow:none;flex:none}
  body[data-view=nowplaying] #np-queue:not([hidden]) {position:relative;display:flex;min-height:280px;max-height:360px;flex:none;width:100%;order:8}
  body[data-view=nowplaying] .queue-open .track-meta,body[data-view=nowplaying] .queue-open .progress {visibility:visible}
  body[data-view=music] .np-actions {display:none}
  .mode-option {padding:14px;grid-gap:12px;gap:12px}
  .mode-option strong {font-size:18px}
}
@media(prefers-reduced-motion:reduce) {.mode-option,body[data-view=nowplaying] #player-card .play-button {transition:none}}
/* Compact landscape headunits retain every primary control without a page scroll. */
@media(min-width:760px) and (max-height:540px) {
  body[data-view=nowplaying] .interface-toolbar {display:none}
  body[data-view=nowplaying] #player-card {grid-template-rows:44px minmax(50px,1fr) 40px 56px 44px 36px;grid-gap:5px 20px;gap:5px 20px;padding:8px 18px!important}
  body[data-view=nowplaying] #player-card .transport {min-height:56px}
  body[data-view=nowplaying] #player-card .play-button {width:56px;min-width:56px;height:56px}
  html[data-interface=android-auto] body[data-view=nowplaying] #player-card .play-button {height:56px}
  body[data-view=nowplaying] #np-next-up {min-height:36px;padding:4px 12px;grid-gap:8px;gap:8px}
  body[data-view=nowplaying] .np-next-copy {display:flex;align-items:center;grid-gap:10px;gap:10px;width:100%}
  body[data-view=nowplaying] .np-next-copy small {font-size:10px;letter-spacing:1px;flex:none}
  body[data-view=nowplaying] .np-next-copy strong {font-size:14px;min-width:0}
  body[data-view=nowplaying] #player-status {font-size:12px;line-height:16px}
}