:root{
  color-scheme:dark;
  --bg:#030405;
  --surface:#090b0e;
  --surface-2:#0d1014;
  --surface-3:#12161b;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --surface-highlight:rgba(255,255,255,.035);
  --surface-shadow:rgba(0,0,0,.38);
  --text:#f5f6f7;
  --muted:#8d949d;
  --muted-2:#646b74;
  --red:#ff2029;
  --red-soft:rgba(255,32,41,.12);
  --good:#18d99a;
  --warn:#f6bc4e;
  --danger:#ff646d;
  --radius:18px;
  --micro:8px;
  --control:12px;
  --card:16px;
  --module:22px;
  --section-gap:20px;
  font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

*{box-sizing:border-box}
html{background:#020304;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  max-width:100%;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -15%,rgba(39,46,55,.34),transparent 34%),
    radial-gradient(circle at 86% 14%,rgba(255,255,255,.025),transparent 24%),
    linear-gradient(180deg,#06080a 0,#020304 72%);
  background-attachment:fixed
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:linear-gradient(118deg,transparent 0 19%,rgba(255,255,255,.025) 19% 19.3%,transparent 19.3% 100%)
}
button,input{font:inherit}
button{
  appearance:none;
  color:#fff;
  border:1px solid var(--line-strong);
  background:var(--surface-3);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible{
  outline:2px solid rgba(255,255,255,.82);
  outline-offset:3px
}
svg{display:block}
[hidden]{display:none!important}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.driver-shell{
  width:min(820px,100%);
  min-height:100vh;
  margin:auto;
  padding:16px 18px 94px;
  position:relative
}

.topbar{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px 14px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.065)
}
.brand{font-size:27px;line-height:1;font-weight:560;letter-spacing:.235em}
.brand:after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:-17px;
  margin-bottom:4px;
  border-radius:50%;
  background:var(--red)
}
.brand-sub{
  margin-top:6px;
  text-align:center;
  font-size:9px;
  line-height:1;
  letter-spacing:.42em;
  color:#a8adb4
}
.topbar-actions{display:flex;align-items:center;gap:9px}
.top-status{font-size:13px;color:var(--good)}
.icon-button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#aeb4bc
}
.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}

.login-card,.control-card,.host-card,.reset-card,.quiet-card,.status-card,.account-card{
  background:
    radial-gradient(circle at 14% 0%,rgba(255,255,255,.035),transparent 28%),
    linear-gradient(180deg,rgba(15,18,22,.965),rgba(6,8,10,.985));
  border:1px solid var(--line);
  box-shadow:
    0 14px 34px var(--surface-shadow),
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.5);
  backdrop-filter:blur(16px)
}

.login-card{max-width:470px;margin:11vh auto;border-radius:22px;padding:24px}
.oauth-button{
  width:100%;
  min-height:52px;
  margin-top:22px;
  border-radius:14px;
  border-color:var(--red);
  background:var(--red);
  font-weight:750;
  letter-spacing:.035em
}
.google-mark{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:10px;
  border-radius:50%;
  background:#fff;
  color:#111
}

.dashboard,.tab-panel{
  display:grid;
  gap:var(--control);
  min-width:0;
  max-width:100%
}

.status-card{border-radius:16px}
.readiness-card{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  text-align:left;
  transition:border-color .18s ease,background .18s ease
}
.readiness-card:hover{border-color:rgba(255,255,255,.14)}
.readiness-card.online{border-color:rgba(24,217,154,.12)}
.readiness-card.degraded{border-color:rgba(246,188,78,.16)}
.readiness-card.attention,.readiness-card.offline{
  border-color:rgba(255,100,109,.18);
  background:
    radial-gradient(circle at 92% 50%,rgba(255,32,41,.045),transparent 24%),
    linear-gradient(180deg,rgba(15,18,22,.965),rgba(6,8,10,.985))
}
.status-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  color:#bfc4cb;
  background:rgba(255,255,255,.018)
}
.status-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round
}
.status-copy-wrap{display:grid;gap:3px;min-width:0}
.status-copy-wrap strong{
  font-size:15px;
  line-height:1.1;
  font-weight:680;
  letter-spacing:.01em
}
.status-copy-wrap span{
  overflow:hidden;
  color:#8e959e;
  font-size:10px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}
.readiness-right{display:flex;align-items:center;gap:8px;color:#8f969f;font-size:10px;white-space:nowrap}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#5e646d;
  box-shadow:0 0 0 4px rgba(255,255,255,.018)
}
.status-dot.online{background:var(--good);box-shadow:0 0 14px rgba(24,217,154,.25)}
.status-dot.degraded{background:var(--warn)}
.status-dot.attention{background:var(--danger);box-shadow:0 0 14px rgba(255,100,109,.24)}
.status-dot.offline{background:#e35d64;box-shadow:0 0 14px rgba(227,93,100,.18)}
.chevron{font-size:22px;line-height:1;color:#707780}

/* Host shell stays structurally complete while the feature is disabled. */
.host-card{
  position:relative;
  overflow:hidden;
  padding:16px;
  border-radius:18px;
  background:
    radial-gradient(circle at 15% 0%,rgba(255,255,255,.04),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(255,32,41,.035),transparent 28%),
    linear-gradient(180deg,rgba(14,17,21,.98),rgba(6,8,10,.99))
}
.host-card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 38px rgba(255,255,255,.012)
}
.disabled-module{opacity:1}
.host-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.host-header{position:relative;padding-right:38px}
.host-collapse-toggle{
  position:absolute;right:0;top:-4px;width:34px;height:34px;display:grid;place-items:center;
  padding:0;border:0;border-radius:50%;background:transparent;color:#858c95
}
.host-chevron{font-size:27px;line-height:1;transform:rotate(90deg);transition:transform .18s ease}
.host-collapse-toggle[aria-expanded="true"] .host-chevron{transform:rotate(-90deg)}
.host-collapsible-body{display:block}
.host-collapsible-body[hidden]{display:none!important}
.host-card.is-collapsed{padding-bottom:14px}

.section-kicker{
  font-size:10px;
  line-height:1.1;
  letter-spacing:.2em;
  font-weight:700;
  color:#dfe2e5
}
.host-status-copy{
  margin:6px 0 0;
  color:#767e87;
  font-size:11px;
  line-height:1.35
}
.disabled-pill{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  color:#7a818a;
  font-size:8px;
  letter-spacing:.12em
}
.host-activity{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:15px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.045);
  opacity:.72
}
.host-activity-label{font-size:8px;letter-spacing:.13em;color:#6e7680}
.host-meter{
  height:16px;
  display:flex;
  align-items:center;
  gap:4px
}
.host-meter i{
  flex:1;
  height:3px;
  max-width:28px;
  border-radius:999px;
  background:linear-gradient(180deg,#4b5159,#24292f);
  box-shadow:0 0 8px rgba(255,255,255,.025)
}
.host-meter i:nth-child(4),.host-meter i:nth-child(5){height:5px;background:#63323a}
.host-meter i:nth-child(6){height:8px;background:#8d2935;box-shadow:0 0 10px rgba(255,32,41,.14)}
.host-meter i:nth-child(7){height:5px;background:#63323a}
.host-control-row{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:8px;
  margin-top:12px
}
.host-control,.host-volume-control{
  min-height:42px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:#0b0e12
}
.host-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#59616b;
  font-size:9px;
  letter-spacing:.08em
}
.host-control:disabled{opacity:1;color:#59616b;background:#0b0e12;border-color:rgba(255,255,255,.055)}
.host-control svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.host-volume-control{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:0 12px
}
.host-volume-control>span{color:#59616b;font-size:9px;letter-spacing:.08em;white-space:nowrap}
.host-volume-control input{opacity:.42}
.host-mode-preview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:9px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.045)
}
.host-mode-card{
  min-height:50px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  color:#69717b;
  background:linear-gradient(180deg,#0e1115,#090b0e);
  text-align:left
}
.host-mode-card:disabled{opacity:1;color:#69717b}
.host-mode-card.is-selected{
  border-color:rgba(255,32,41,.22);
  box-shadow:inset 0 0 0 1px rgba(255,32,41,.025);
  background:linear-gradient(180deg,rgba(255,32,41,.035),#090b0e)
}
.host-mode-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#8d949d;
  background:rgba(255,255,255,.025);
  font-size:10px
}
.host-mode-card.is-selected .host-mode-icon{color:#b94b56;background:rgba(255,32,41,.05)}
.host-mode-card>span:last-child{display:grid;gap:2px;min-width:0}
.host-mode-card strong{font-size:8.5px;font-weight:650;line-height:1.05}
.host-mode-card small{font-size:7px;color:#555d66;line-height:1.05}

/* Shared cards and headings */
.control-card{padding:16px;border-radius:18px;min-width:0;max-width:100%}
.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.section-heading>div{min-width:0}
.section-subtitle{
  margin:6px 0 0;
  color:#7f8790;
  font-size:10px;
  line-height:1.42;
  font-weight:420
}
.pending-label{color:var(--warn);font-size:9px;white-space:nowrap}

/* Published broadcast profiles: same control-card owner as Ride Mood.
   Sizes are server-authorized; no local playlist selection. */
.broadcast-profile-section { overflow:hidden; }
.broadcast-profile-section .section-heading {align-items:center;}
.broadcast-profile-refresh {
  min-width:64px;
  min-height:32px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  color:var(--muted);
  background:rgba(255,255,255,.045);
  font-size:10px;
  letter-spacing:.09em;
  font-weight:750;
}
.broadcast-profile-refresh:not(:disabled):hover {color:#fff;border-color:rgba(255,255,255,.3);}
.broadcast-profile-choices {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin-top:13px;
}
.broadcast-profile-choices button {
  min-width:0;
  min-height:52px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#e9eaec;
  font-size:clamp(18px,2.3vw,26px);
  font-weight:850;
  font-variant-numeric:tabular-nums;
  transition:background .15s,border-color .15s;
}
.broadcast-profile-choices button.is-active {
  border-color:rgba(207,32,44,.8);
  background:rgba(207,32,44,.12);
  color:#fff;
}
.broadcast-profile-choices button.is-pending {
  border-style:dashed;
  border-color:rgba(215,218,221,.65);
}
.broadcast-profile-choices button:disabled {opacity:.4;cursor:not-allowed;}
.broadcast-profile-choices button:focus-visible,
.broadcast-profile-refresh:focus-visible {outline:2px solid #CF202C;outline-offset:2px;}
.broadcast-profile-status {
  margin:10px 0 0;
  min-height:32px;
  color:var(--muted);
  font-size:clamp(11px,1.15vw,13px);
  line-height:1.4;
}
.broadcast-profile-status[data-tone="error"]{color:#ff989d;}
.broadcast-profile-status[data-tone="success"]{color:#9ad9b8;}

/* Ride Mood */
.mood-section{overflow:hidden}
.mood-scroll{
  max-width:100%;
  display:flex;
  gap:10px;
  margin-top:16px;
  padding:0 40px 3px 0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
.mood-scroll::-webkit-scrollbar{display:none}
.mood-button{
  flex:0 0 152px;
  height:136px;
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;
  scroll-snap-align:start;
  background:#090b0e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease
}
.mood-button:hover{border-color:rgba(255,255,255,.15)}
.mood-button.active{
  border-color:rgba(255,32,41,.88);
  box-shadow:0 0 0 1px rgba(255,32,41,.12),0 8px 24px rgba(255,32,41,.1),inset 0 1px 0 rgba(255,255,255,.05);
  filter:brightness(1.08)
}
.mood-button.is-broadcast-active{
  border-color:rgba(255,32,41,.95);
  box-shadow:0 0 0 2px rgba(255,32,41,.25),0 8px 24px rgba(255,32,41,.13);
}
.mood-button.is-broadcast-pending{
  border:2px dashed rgba(236,238,239,.78);
}
.mood-button[data-broadcast-ready="true"]:not(.mood-first-look):not(.is-broadcast-active):not(.is-broadcast-pending):after{
  content:"BROADCAST READY";
  position:absolute;right:7px;top:7px;
  padding:3px 5px;z-index:3;border-radius:3px;
  background:rgba(5,10,15,.72);color:#e6e9ea;
  font-size:8px;font-weight:750;letter-spacing:.1em;
}
.mood-art{
  position:absolute;
  inset:0;
  overflow:hidden;
  background-size:cover;
  background-position:center
}
.mood-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.mood-art:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.08) 38%,rgba(0,0,0,.88) 100%),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 48%)
}
.mood-copy{
  position:absolute;
  left:12px;
  right:11px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:7px;
  z-index:2;
  text-align:left
}
.mood-icon{
  flex:0 0 auto;
  color:#aeb4bb;
  font-size:12px;
  line-height:1
}
/* A product-owned program slot remains visible before catalog publication.
   Only the authorized Driver's published Playlist Mode release enables it. */
.mood-first-look .mood-art{
  background:radial-gradient(ellipse at 80% 12%,rgba(200,28,65,.3),transparent 63%),
             linear-gradient(145deg,#17161e,#07090d);
}
.mood-button.mood-first-look:disabled{
  cursor:not-allowed;
  opacity:.84;
  filter:saturate(.75);
}
.mood-button.mood-first-look:disabled:hover{border-color:rgba(255,255,255,.09)}
.mood-program-status{
  position:absolute;
  top:9px;left:9px;z-index:3;
  padding:4px 6px;
  font-size:9px;font-weight:750;line-height:1.1;letter-spacing:.055em;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  color:#d8dee3;background:rgba(8,10,16,.83);
}
.mood-first-look[data-broadcast-ready="true"] .mood-program-status{
  color:#c2f0d8;border-color:rgba(135,210,170,.5);
}
.mood-button.active .mood-icon{color:var(--red)}
.mood-name{
  color:#f4f5f6;
  font-size:12px;
  line-height:1.18;
  font-weight:680;
  text-shadow:0 2px 9px rgba(0,0,0,.75)
}

/* Now Playing */
.now-playing-card{padding:16px}
.now-playing-heading{margin-bottom:12px}
.now-playing-layout{display:block}
.track-artwork{
  min-height:164px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 32%,rgba(22,214,95,.28),transparent 28%),
    linear-gradient(145deg,#07100a,#090b0d);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)
}
.track-artwork span{
  color:#c9eed3;
  font-size:18px;
  font-weight:750;
  letter-spacing:.17em;
  text-shadow:0 0 18px rgba(24,255,91,.55)
}
.track-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.track-copy{min-width:0;padding-top:1px}
.track-copy h2{
  margin:0 0 5px;
  display:-webkit-box;
  overflow:hidden;
  color:#f5f6f7;
  font-size:21px;
  line-height:1.16;
  font-weight:680;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}
.track-copy p{
  margin:0;
  overflow:hidden;
  color:#8e959e;
  font-size:12px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}
.fullscreen-action{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:9px;
  background:rgba(255,255,255,.018);
  color:#aeb4bb;
  font-size:9px;
  font-weight:750;
  letter-spacing:.12em;
}
.fullscreen-action svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.fullscreen-action:hover{color:#fff;border-color:rgba(255,255,255,.14)}
.fullscreen-action.is-active{
  color:#fff;
  border-color:rgba(255,32,41,.5);
  background:rgba(255,32,41,.06)
}

.transport-controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:10px;
  margin:16px 0 14px
}
.transport-button,.primary-transport{
  width:56px;
  height:56px;
  justify-self:center;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
  background:rgba(255,255,255,.018);
  color:#e2e5e8;
  transition:transform .1s ease,background .1s ease,border-color .1s ease,box-shadow .1s ease
}
.transport-button svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.transport-button svg path[fill]{fill:currentColor}
.transport-button:nth-child(2) svg,.transport-button:nth-child(4) svg{fill:currentColor;stroke:none}
.primary-transport{
  width:66px;
  height:66px;
  border:1px solid rgba(255,32,41,.8);
  color:#fff;
  background:rgba(255,32,41,.05);
  box-shadow:0 0 16px rgba(255,32,41,.12);
  transition:background .16s ease,box-shadow .16s ease,border-color .16s ease
}
.primary-transport.is-playing{
  border-color:rgba(255,32,41,1);
  background:rgba(255,32,41,.11);
  box-shadow:0 0 0 1px rgba(255,32,41,.05),0 0 22px rgba(255,32,41,.2)
}
.play-pause-glyph{font-size:21px;line-height:1;transform:translateX(1px)}
.transport-button:disabled{color:#555c64;opacity:.66}
.transport-button:not(:disabled):hover{color:#fff;background:rgba(255,255,255,.055)}
.shuffle-button{display:none}
.save-button{display:grid}
.transport-button.tap-ack,.primary-transport.tap-ack,.volume-step.tap-ack,.switch.tap-ack{
  transform:scale(.92);
  border-color:rgba(255,32,41,.78);
  background:rgba(255,32,41,.14);
  box-shadow:0 0 0 3px rgba(255,32,41,.07),0 0 18px rgba(255,32,41,.16)
}
.save-button{border:1px solid rgba(255,255,255,.045)}
.save-button.is-saved{color:var(--red);background:rgba(255,32,41,.06);border-color:rgba(255,32,41,.22)}
.save-button svg{width:21px;height:21px}
.volume-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  align-items:center;
  gap:10px
}

.ride-mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ride-mode-options button{min-height:52px;border-radius:var(--control);font-weight:650}
.ride-mode-options button[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft)}
.ride-mode-options button[data-pending="true"]{border-style:dashed;border-color:var(--warn)}
.ride-mode-options button:disabled{opacity:.45}
.ride-mode-options button[aria-pressed="true"]:disabled{opacity:1}
.ride-mode-confirmed{margin:14px 0 0;font-weight:600;overflow-wrap:anywhere}
.ride-mode-section [data-tone="error"]{color:var(--danger)}
.ride-mode-section [data-tone="pending"]{color:var(--warn)}
.ride-mode-section [data-tone="success"]{color:var(--good)}
.volume-label-row{display:flex;align-items:center;justify-content:space-between;gap:var(--control);margin:16px 0 8px}
.audio-mute-button{min-height:44px;min-width:76px;padding:8px 16px;border-radius:var(--control);font-weight:600}
.audio-mute-button[aria-pressed="true"]{color:var(--red);border-color:var(--red);background:var(--red-soft)}
#rideOperations{margin-top:var(--section-gap)}
.volume-step{
  width:56px;
  height:50px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.095);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:#f4f5f6;
  font-size:28px;
  line-height:1;
  font-weight:450;
  transition:transform .1s ease,background .1s ease,border-color .1s ease,box-shadow .1s ease
}
.volume-step:not(:disabled):hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}
/* Quick picks and Mute use the existing authorized Driver audio command. */
.volume-presets{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;margin-top:10px;
}
.volume-presets button{
  min-width:0;min-height:44px;padding:8px 4px;
  border:1px solid rgba(255,255,255,.13);border-radius:12px;
  background:rgba(255,255,255,.035);color:#e5e8ec;
  font:inherit;font-weight:700;font-size:13px;
  transition:background .15s,border-color .15s;
}
.volume-presets button[aria-pressed="true"]{
  background:var(--red-soft);border-color:var(--red);color:#fff;
}
.volume-presets button:not(:disabled):hover{
  background:rgba(255,255,255,.09);
}
.volume-presets .audio-mute-button{
  min-width:0;width:100%;min-height:44px;
  padding:8px 2px;font-size:11px;white-space:nowrap;
}
.volume-presets .audio-mute-button[aria-pressed="true"]{
  color:var(--red);border-color:var(--red);background:var(--red-soft);
}
.volume-presets button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.volume-presets button:disabled{opacity:.4;cursor:not-allowed}
input[type="range"]{
  appearance:none;
  width:100%;
  height:18px;
  margin:0;
  background:transparent;
  accent-color:var(--red)
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--red) 0 var(--range-progress,70%),#31363e var(--range-progress,70%) 100%)
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:13px;
  height:13px;
  margin-top:-5px;
  border:2px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.55)
}
input[type="range"]::-moz-range-track{
  height:3px;
  border:0;
  border-radius:99px;
  background:#31363e
}
input[type="range"]::-moz-range-progress{
  height:3px;
  border-radius:99px;
  background:var(--red)
}
input[type="range"]::-moz-range-thumb{
  width:11px;
  height:11px;
  border:2px solid #fff;
  border-radius:50%;
  background:#fff
}

/* Ride-level actions */
.bottom-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quiet-card,.reset-card{
  min-height:76px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  position:relative;
  padding:12px 13px;
  border-radius:16px
}
.quiet-icon,.reset-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  color:#9ca3ab
}
.quiet-icon svg,.reset-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round
}
.action-copy{min-width:0}
.action-copy h3{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.15;
  font-weight:650
}
.action-copy p{
  margin:0;
  overflow:hidden;
  color:#767e87;
  font-size:9.5px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}
.switch{
  width:43px;
  height:25px;
  padding:3px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:#282d34
}
.switch span{
  display:block;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#eef0f2;
  box-shadow:0 1px 4px rgba(0,0,0,.32);
  transition:transform .18s ease
}
.switch.active{border-color:rgba(255,32,41,.3);background:var(--red)}
.switch.active span{transform:translateX(18px)}
.reset-card{
  border-color:rgba(255,32,41,.36);
  background:
    linear-gradient(180deg,rgba(255,32,41,.045),transparent 60%),
    linear-gradient(180deg,rgba(18,8,10,.97),rgba(8,6,8,.98))
}
.reset-icon{
  border-color:rgba(255,32,41,.3);
  color:#ff858a;
  background:rgba(255,32,41,.09)
}
.reset-hit-area{
  position:absolute;
  inset:0;
  border:0;
  border-radius:inherit;
  background:transparent
}
.reset-hit-area:focus-visible{outline:2px solid rgba(255,255,255,.82);outline-offset:3px}

/* Ephemeral command feedback replaces the persistent debug status module. */
.command-toast{
  position:fixed;
  left:50%;
  bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:40;
  max-width:min(420px,calc(100vw - 28px));
  transform:translateX(-50%);
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:#d9dde1;
  background:rgba(13,16,20,.95);
  box-shadow:0 10px 30px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
  font-size:10px;
  line-height:1.25;
  text-align:center
}
.command-toast.success{border-color:rgba(24,217,154,.22)}
.command-toast.error{border-color:rgba(255,100,109,.32);color:#ffb5b8}

/* Utility tab */
.utility-status-card{
  padding:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px
}
.utility-status-card h1{margin:0;font-size:21px;font-weight:680}
.status-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px
}
.status-grid div{
  min-width:0;
  padding:11px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:#0c0f13
}
.status-grid span{
  display:block;
  margin-bottom:5px;
  color:#646c75;
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase
}
.status-grid strong{display:block;overflow:hidden;font-size:11px;font-weight:620;text-overflow:ellipsis;white-space:nowrap}
.utility-title{margin:7px 0 6px;font-size:17px;font-weight:650}
.utility-actions{display:grid;gap:8px;margin-top:12px}
.utility-actions button,.back-button{
  min-height:44px;
  padding:0 13px;
  border-radius:11px;
  text-align:left;
  font-size:10px;
  letter-spacing:.035em;
  background:#0f1216;
  border-color:rgba(255,255,255,.07)
}
.danger-outline{border-color:rgba(255,100,109,.26)!important;color:#ff9fa4}
.back-button{width:100%}
.account-card{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:15px
}
.account-card>div{display:grid;gap:3px}
.account-kicker{color:#646c75;font-size:8px;letter-spacing:.12em}
.account-card strong{font-size:12px;font-weight:620;color:#c7cbd0}
.account-signout{
  padding:8px 10px;
  border:0;
  background:transparent;
  color:#8d949d;
  font-size:10px
}

.tablet-management-card{overflow:hidden}
.add-tablet-button{
  min-height:40px;
  padding:0 12px;
  border-radius:11px;
  background:#12161b;
  border-color:rgba(255,255,255,.09);
  font-size:9px;
  letter-spacing:.06em;
  white-space:nowrap
}
.device-list{display:grid;gap:8px;margin-top:13px}
.device-empty{
  padding:15px;
  border:1px dashed rgba(255,255,255,.09);
  border-radius:12px;
  color:#747c85;
  font-size:11px;
  text-align:center
}
.device-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:#0c0f13
}
.device-role{
  min-width:52px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  color:#9da4ad;
  font-size:7px;
  letter-spacing:.1em;
  text-align:center
}
.device-role.master{border-color:rgba(255,32,41,.3);color:#ff858a;background:rgba(255,32,41,.055)}
.device-copy{display:grid;gap:3px;min-width:0}
.device-copy strong{font-size:11px;font-weight:620}
.device-copy small{overflow:hidden;color:#747c85;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
.device-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px
}
.device-remove-button{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(255,100,109,.16);
  border-radius:9px;
  color:#d98d92;
  background:rgba(255,32,41,.035);
  font-size:7px;
  font-weight:700;
  letter-spacing:.1em
}
.device-remove-button:hover{
  border-color:rgba(255,100,109,.3);
  color:#ffb1b5;
  background:rgba(255,32,41,.065)
}
.device-remove-button:disabled{opacity:.5}
.pairing-panel{
  display:grid;
  gap:12px;
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(255,32,41,.28);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(56,8,12,.32),rgba(9,11,14,.95))
}
.pairing-panel>div{display:grid;gap:4px}
.pairing-label{font-size:8px;letter-spacing:.17em;color:#888f98}
.pairing-code{font-size:27px;letter-spacing:.13em;font-variant-numeric:tabular-nums}
.pairing-expiry{font-size:9px;color:#ff9ca1}
.pairing-panel p{margin:0;color:#8b929b;font-size:9.5px;line-height:1.45}
.pairing-panel .secondary-action{min-height:40px;border-radius:10px}
.recovery-panel{border-color:rgba(246,188,78,.3);background:linear-gradient(145deg,rgba(64,42,7,.28),rgba(9,11,14,.95))}
.recovery-panel .pairing-expiry{color:var(--warn)}
.inline-status{margin:10px 0 0;color:#cdd1d6;font-size:9px}

/* Bottom navigation */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:30;
  width:min(820px,100%);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  transform:translateX(-50%);
  padding:5px max(18px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(3,5,7,.94);
  backdrop-filter:blur(18px)
}
.nav-item{
  min-height:46px;
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:5px;
  border:0;
  border-radius:0;
  color:#747b84;
  background:transparent
}
.nav-item:before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:28px;
  height:2px;
  border-radius:99px;
  transform:translateX(-50%) scaleX(0);
  background:var(--red);
  transition:transform .18s ease
}
.nav-icon{display:grid;place-items:center}
.nav-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.nav-item strong{font-size:9px;font-weight:600}
.nav-item.active{color:var(--red);text-shadow:0 0 14px rgba(255,32,41,.16)}
.nav-item.active:before{transform:translateX(-50%) scaleX(1)}

/* Dialog and shared text */
.reset-dialog{
  width:calc(100% - 32px);
  max-width:390px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  color:#fff;
  background:#090b0e
}
.reset-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}
.reset-dialog form{padding:20px}
.reset-dialog h2{margin:0 0 7px;font-size:19px}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.dialog-actions button{min-height:45px;border-radius:11px}
.confirm-reset{background:var(--red);border-color:var(--red)}
.confirm-remove{
  background:#5a151a;
  border-color:rgba(255,100,109,.3);
  color:#ffd9db
}
.confirm-remove:hover{background:#72191f}
.remove-tablet-dialog h2 span{color:#ffafb3}
.secondary-action{background:#14171b}
.eyebrow{margin:0 0 7px;color:#7e858e;font-size:9px;letter-spacing:.15em;font-weight:700}
h1,h2,h3,p{margin-top:0}
.subtle{color:#8a919a;line-height:1.42}
.error{color:#ff9b9b;font-size:11px}

/* Responsive pass */
@media(max-width:620px){
  .driver-shell{padding:12px 12px 90px}
  .readiness-right #connectionLabel{display:none}
  .host-mode-preview{grid-template-columns:repeat(4,1fr)}
  .now-playing-layout{grid-template-columns:1fr;gap:12px}
  .track-artwork{
    width:100%;
    min-height:104px;
    aspect-ratio:16/5;
    background-position:center 42%
  }
  .track-copy h2{font-size:20px}
  .bottom-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiet-card,.reset-card{min-height:60px;padding:10px 11px;gap:8px}
  .quiet-icon,.reset-icon{display:none}
  .quiet-card{grid-template-columns:minmax(0,1fr) auto}
  .reset-card{grid-template-columns:minmax(0,1fr)}
  .action-copy h3{margin:0}
  .action-copy p{display:none}
}

@media(max-width:520px){
  .driver-shell{
    width:100%;
    max-width:100%;
    padding:10px 10px calc(88px + env(safe-area-inset-bottom))
  }
  .topbar{min-height:52px;padding:0 2px 10px;margin-bottom:10px}
  .brand{font-size:21px;letter-spacing:.2em}
  .brand-sub{margin-top:5px;font-size:8px;letter-spacing:.34em}
  .topbar-actions{gap:5px}
  .icon-button{width:34px;height:34px}
  .dashboard,.tab-panel{gap:10px}

  .readiness-card{
    min-height:60px;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:9px;
    padding:9px 11px
  }
  .status-icon{width:34px;height:34px;border-radius:10px}
  .status-icon svg{width:17px;height:17px}
  .status-copy-wrap strong{font-size:14px}
  .status-copy-wrap span{font-size:9.5px}
  .readiness-right{gap:7px}
  .chevron{font-size:20px}

  .host-card,.control-card{padding:14px;border-radius:16px}
  .section-kicker{font-size:10px;letter-spacing:.17em}
  .host-status-copy{font-size:10px}
  .disabled-pill{font-size:7px;padding:4px 7px}
  .host-activity{margin-top:12px;padding:10px 0;gap:9px}
  .host-meter{gap:3px}
  .host-control-row{grid-template-columns:92px minmax(0,1fr);gap:7px;margin-top:9px}
  .host-control,.host-volume-control{min-height:41px}
  .host-volume-control{gap:8px;padding:0 9px}
  .host-volume-control>span{font-size:7.5px}
  .host-mode-preview{gap:5px;margin-top:7px}
  .host-mode-card{min-height:46px;padding:6px}
  .host-mode-card strong{font-size:8px}
  .host-mode-card small{font-size:6.5px}

  .section-subtitle{
    max-width:calc(100vw - 54px);
    margin-top:5px;
    overflow:hidden;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  .mood-scroll{gap:8px;margin-top:13px;padding-right:42px}
  .mood-button{
    flex-basis:clamp(116px,32vw,130px);
    height:116px;
    border-radius:13px
  }
  .mood-copy{left:10px;right:9px;bottom:9px;gap:6px}
  .mood-name{font-size:10.5px}
  .mood-icon{font-size:10px}
  .mood-art-mark{font-size:66px}

  .now-playing-card{padding:14px}
  .now-playing-heading{margin-bottom:10px}
  .now-playing-layout{
    grid-template-columns:1fr;
    gap:10px
  }
  .track-artwork{
    width:100%;
    min-height:92px;
    aspect-ratio:16/5;
    border-radius:12px;
    background-position:center 42%
  }
  .track-artwork span{font-size:13px}
  .track-copy h2{font-size:17px;margin-bottom:4px;-webkit-line-clamp:2}
  .track-copy p{font-size:10.5px}
  .transport-controls{gap:8px;margin:12px 0}
  .transport-button{width:52px;height:52px}
  .transport-button svg{width:21px;height:21px}
  .primary-transport{width:62px;height:62px}
  .play-pause-glyph{font-size:20px}
  .volume-row{grid-template-columns:52px minmax(0,1fr) 52px;gap:8px}
  .volume-step{width:52px;height:48px;border-radius:13px;font-size:27px}

  .bottom-actions{gap:8px}
  .quiet-card,.reset-card{
    min-height:58px;
    padding:9px 10px;
    gap:7px;
    border-radius:14px
  }
  .action-copy h3{font-size:11.5px}
  .switch{width:39px;height:24px}
  .switch span{width:16px;height:16px}
  .switch.active span{transform:translateX(15px)}

  .utility-status-card{padding:14px}
  .status-grid{grid-template-columns:1fr 1fr}
  .status-grid div{padding:10px}
  .tablet-management-card .section-heading{
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
    align-items:stretch
  }
  .tablet-management-card .section-subtitle{
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip
  }
  .add-tablet-button{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center
  }
  .pairing-code{font-size:23px}
  .device-row{
    grid-template-columns:auto minmax(0,1fr);
    align-items:start
  }
  .device-row-actions{
    grid-column:1/-1;
    width:100%;
    justify-content:space-between;
    padding-top:2px
  }
  .device-remove-button{
    min-height:34px;
    min-width:86px
  }

  .bottom-nav{
    width:100%;
    max-width:100%;
    padding:4px 12px calc(4px + env(safe-area-inset-bottom))
  }
  .nav-item{min-height:44px}
  .nav-icon svg{width:17px;height:17px}
  .nav-item strong{font-size:8.5px}
  .command-toast{bottom:calc(66px + env(safe-area-inset-bottom))}
}

@media(max-width:390px){
  .driver-shell{padding-inline:8px}
  .host-mode-preview{grid-template-columns:repeat(2,1fr)}
  .mood-button{flex-basis:108px;height:108px}
  .track-artwork{width:100%;min-height:86px}
  .transport-button{width:50px;height:50px}
  .primary-transport{width:60px;height:60px}
  .volume-row{grid-template-columns:50px minmax(0,1fr) 50px}
  .volume-step{width:50px;height:46px}
}

@media(max-width:350px){
  .track-artwork{min-height:80px}
  .transport-button{width:48px;height:48px}
  .primary-transport{width:58px;height:58px}
  .volume-row{grid-template-columns:48px minmax(0,1fr) 48px}
  .volume-step{width:48px;height:44px}
}

/* Playlist artwork is the visual surface. Driver receives canonical cover URLs from shared passenger state. */
#moodGrid .mood-art{background-color:#101216;pointer-events:none;}
#moodGrid .mood-copy{pointer-events:none;}
#moodGrid .mood-directive .mood-art{background-image:url("../assets/moods/drivers-directive.jpg");}
#moodGrid .mood-miami .mood-art{background-image:url("../assets/moods/miami-vibes.jpg");}
#moodGrid .mood-clasicos .mood-art{background-image:url("../assets/moods/latin-clasicos.jpg");}
#moodGrid .mood-hits .mood-art{background-image:url("../assets/moods/top-20.jpg");}


/* Driver transport: icon-first, larger road-tap targets without visible circles. */
.transport-button,.primary-transport{
  width:72px;height:64px;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.transport-button svg{width:29px;height:29px}
.primary-transport{color:#fff;background:transparent;box-shadow:none}
.primary-transport.is-playing{border:0;background:transparent;box-shadow:none}
.play-pause-glyph{font-size:30px}
.transport-button:not(:disabled):hover{background:transparent}
.save-button,.save-button.is-saved{border:0;background:transparent}
.save-button svg{width:28px;height:28px}
@media(max-width:520px){
  .transport-button,.primary-transport{width:68px;height:60px}
  .transport-button svg{width:28px;height:28px}
  .play-pause-glyph{font-size:29px}
}
@media(max-width:390px){
  .transport-button,.primary-transport{width:64px;height:58px}
}

/* Tablet status: glance-readable hierarchy for in-car use. */
.utility-status-card{padding:20px}
.utility-status-card h1{font-size:26px;line-height:1.1}
.status-grid{gap:10px}
.status-grid div{padding:14px 13px;min-height:72px;display:flex;flex-direction:column;justify-content:center}
.status-grid span{margin-bottom:7px;font-size:10px;line-height:1.15;letter-spacing:.1em}
.status-grid strong{font-size:16px;line-height:1.2;font-weight:680}
@media(max-width:520px){
  .utility-status-card{padding:17px}
  .utility-status-card h1{font-size:24px}
  .status-grid div{padding:13px 12px;min-height:68px}
  .status-grid span{font-size:9.5px}
  .status-grid strong{font-size:15px}
}

/* Tablet status XL pass: 100% larger typography than the previous glance-readable pass. */
.utility-status-card h1{font-size:52px;line-height:1.02}
.status-grid div{padding:18px 16px;min-height:108px}
.status-grid span{margin-bottom:9px;font-size:20px;line-height:1.1}
.status-grid strong{font-size:32px;line-height:1.08;font-weight:680;white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:520px){
  .utility-status-card h1{font-size:48px}
  .status-grid div{padding:16px 14px;min-height:100px}
  .status-grid span{font-size:19px}
  .status-grid strong{font-size:30px}
}

/* Tablet status calibration: 25% reduction from XL pass. */
.utility-status-card h1{font-size:39px}
.status-grid div{min-height:81px;padding:15px 14px}
.status-grid span{font-size:15px;margin-bottom:7px}
.status-grid strong{font-size:24px}
@media(max-width:520px){
  .utility-status-card h1{font-size:36px}
  .status-grid div{min-height:75px;padding:14px 13px}
  .status-grid span{font-size:14px}
  .status-grid strong{font-size:22.5px}
}


/* Driver Music V1: uses the existing tokens/cards instead of a parallel theme. */
.driver-favorites-card{min-width:0}
.favorite-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:30px;padding:4px 9px;border:1px solid var(--line-strong);
  border-radius:999px;color:var(--text);background:var(--surface-3);font-size:12px;font-weight:750
}
.favorite-status{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.favorite-status[data-tone="error"]{color:var(--danger)}
.favorite-status[data-tone="warn"]{color:var(--warn)}
.driver-favorites-list{display:grid;gap:0;min-width:0;margin-top:10px}
.driver-favorite-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;
  padding:11px 0;border-top:1px solid var(--line)
}
.driver-favorite-details{display:grid;gap:4px;min-width:0}
.driver-favorite-details strong{
  font-size:12px;font-weight:680;line-height:1.35;overflow-wrap:anywhere
}
.driver-favorite-details small{color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.driver-favorite-remove{
  flex:none;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:10px;font-size:10px;font-weight:760;letter-spacing:.04em
}
.driver-favorite-remove:disabled{opacity:.4}
.favorite-empty,.favorite-hint{
  color:var(--muted);font-size:11px;line-height:1.55
}
.favorite-hint{margin:12px 0 0}
.save-button.is-active{color:var(--red);border-color:rgba(255,32,41,.45)}
.save-button.is-active svg{fill:rgba(255,32,41,.18)}
@media(max-width:480px){
  .driver-favorite-row{gap:8px}
  .driver-favorite-remove{padding:0 10px;min-height:42px}
}


/* Recover an authorized tablet binding without resetting its Ride or pairing. */
.tablet-management-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.refresh-connection-button{
  min-height:40px;padding:0 12px;border-radius:11px;
  border-color:rgba(255,255,255,.22);background:var(--surface-3);
  font-size:9px;font-weight:720;letter-spacing:.045em;white-space:nowrap
}
.refresh-connection-button:disabled{opacity:.55}
.connection-refresh-status{
  margin:12px 0 0;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere
}
.connection-refresh-status[data-tone="success"]{color:#9ad9b8;border-color:rgba(24,217,154,.19)}
.connection-refresh-status[data-tone="warn"]{color:var(--warn);border-color:rgba(246,188,78,.19)}
.connection-refresh-status[data-tone="error"]{color:#ff989d;border-color:rgba(255,100,109,.2)}
@media(max-width:520px){
  .tablet-management-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .tablet-management-actions button{width:100%;min-height:44px;white-space:normal;padding:7px 9px}
}


/* Driver's Directive composer: extend the existing Music and Favorites cards.
 * Touch gestures are confined to the reorder handle, so the page still scrolls. */
.driver-directive-card{min-width:0}
.directive-status{margin:12px 0 5px;color:var(--muted);font-size:12px;line-height:1.5}
.directive-status[data-tone="error"]{color:var(--danger)}
.directive-status[data-tone="warn"]{color:var(--warn)}
.directive-status[data-tone="success"]{color:var(--good)}
.directive-list{display:grid;gap:8px;min-width:0;margin-top:12px}
.directive-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:9px;border:1px solid var(--line-strong);
  border-radius:12px;background:rgba(255,255,255,.025);min-width:0
}
.directive-row.is-dragging{border-color:rgba(255,32,41,.48);background:var(--red-soft);opacity:.86}
.directive-grip{
  display:grid;place-items:center;min-width:35px;min-height:44px;
  border:1px solid transparent;border-radius:10px;background:transparent;
  color:var(--muted);font-size:23px;touch-action:none;cursor:grab;
}
.directive-grip:active{cursor:grabbing}
.directive-grip:disabled{opacity:.4;cursor:not-allowed}
.directive-copy{min-width:0;display:grid;gap:3px}
.directive-copy strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.directive-copy small{font-size:11px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.directive-row-controls{display:flex;gap:5px;align-items:center}
.directive-arrow,.directive-remove,.directive-favorite-add{
  min-height:40px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--surface-3);font-size:12px;font-weight:700;
}
.directive-arrow{min-width:36px;padding:0 8px}
.directive-remove{padding:0 11px;font-size:10px;color:var(--muted)}
.directive-favorite-add{padding:0 11px;font-size:10px;color:var(--text)}
.directive-arrow:disabled,.directive-remove:disabled,.directive-favorite-add:disabled{
  opacity:.4;cursor:not-allowed
}
.directive-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.directive-actions button{min-height:48px;min-width:0;border-radius:11px;
  padding:9px 12px;font-size:11px;font-weight:740;line-height:1.3}
.directive-publish-button{background:var(--red);border-color:var(--red)}
.directive-stage-button{background:var(--surface-3);border-color:var(--line-strong)}
.directive-actions button:disabled{opacity:.4}
.directive-favorite-add{margin-left:8px}
.driver-favorite-row{min-width:0}
.directive-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
@media(max-width:520px){
  .directive-row{grid-template-columns:auto minmax(0,1fr);gap:6px}
  .directive-row-controls{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
  .directive-grip{align-self:stretch}
  .directive-row-controls button{min-height:42px}
  .directive-actions{grid-template-columns:1fr}
}

/* Viewer’s Choice reuses MODO's existing control card, switch, and type tokens. */
.driver-polling-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.driver-polling-row>div{flex:1;min-width:0}
.driver-polling-row .switch{flex:none}
.driver-polling-section .broadcast-profile-status{margin-top:12px;line-height:1.45}
.driver-polling-section .switch:disabled{opacity:.45;cursor:not-allowed}