/* Screenshot-faithful JourneyDeck dashboard — composed as live UI, not a flat image. */
:root {
  --ref-black: #05040e;
  --ref-card: #0b091c;
  --ref-line: rgba(157, 83, 245, .2);
  --ref-coral: #ff525b;
  --ref-orange: #ff9749;
  --ref-violet: #9546f5;
  --ref-blue: #31a8ed;
  --ref-muted: #8b849e;
}

.reference-dashboard { display: none; }

body.reference-dashboard-active {
  background: #000 !important;
  overflow-x: hidden;
}

body.reference-dashboard-active::before,
body.reference-dashboard-active .topbar,
body.reference-dashboard-active > .main-nav,
body.reference-dashboard-active .mobile-more-menu,
body.reference-dashboard-active .background-activity-monitor,
body.reference-dashboard-active #view-dashboard > .dashboard-customize-bar,
body.reference-dashboard-active #view-dashboard > #dashboardCustomizer,
body.reference-dashboard-active #view-dashboard > #dashboardWidgetGrid,
body.reference-dashboard-active #view-dashboard > .journeydeck-action-dock,
body.reference-dashboard-active .app-shell > footer {
  display: none !important;
}

body.reference-dashboard-active .app-shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.reference-dashboard-active .app-shell > main { width: 100%; }
body.reference-dashboard-active #view-dashboard { padding: 0; }

.reference-dashboard {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(570px, calc(100vw - 18px));
  min-height: 0;
  margin: 9px auto 18px;
  padding: 16px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(94, 61, 151, .28);
  border-radius: 38px;
  background:
    radial-gradient(circle at 73% 12%, rgba(73, 24, 121, .22), transparent 29%),
    radial-gradient(circle at 8% 62%, rgba(255, 48, 86, .06), transparent 28%),
    linear-gradient(155deg, #02020a 0%, #070511 52%, #080518 100%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .72), inset 0 0 80px rgba(72, 23, 116, .05);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  isolation: isolate;
}

.reference-dashboard * { box-sizing: border-box; }
.reference-dashboard button { font: inherit; }
.reference-dashboard button:focus-visible { outline: 2px solid #ff7b5e; outline-offset: 2px; }
.reference-dashboard-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,49,95,.05), transparent 30%, transparent 70%, rgba(116,45,255,.06)); }

.ref-hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.285 / 1;
  overflow: hidden;
  border-radius: 22px 22px 8px 8px;
  background: #03030c;
}

.ref-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,3,12,.98) 0%, rgba(3,3,12,.88) 27%, rgba(3,3,12,.03) 60%, rgba(3,3,12,.22) 100%),
    linear-gradient(0deg, #080615 0%, transparent 24%);
}

.ref-hero-map { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 76% 31%, #17103b 0%, #07051a 34%, #02020a 72%); }
.ref-map-streets, .ref-route-art { position: absolute; inset: -3% -4% -2% 22%; width: 84%; height: 105%; }
.ref-map-street-minor { fill: none; stroke: #552274; stroke-width: 1; opacity: .28; }
.ref-map-street-major { fill: none; stroke: #233677; stroke-width: 3; opacity: .34; }
.ref-route-halo, .ref-route-line { fill: none; stroke: url(#refRouteGradient); stroke-linecap: round; }
.ref-route-halo { stroke-width: 15; opacity: .36; filter: url(#refRouteGlow); }
.ref-route-line { stroke-width: 5.5; filter: url(#refRouteGlow); stroke-dasharray: 630; stroke-dashoffset: 630; animation: ref-route-draw 1.8s .15s cubic-bezier(.2,.7,.2,1) forwards; }
.ref-route-marker circle { fill: #29103e; stroke: #ff7a51; stroke-width: 2; filter: url(#refRouteGlow); }
.ref-route-marker path { fill: #ff9a4f; }
@keyframes ref-route-draw { to { stroke-dashoffset: 0; } }

.ref-brand-lockup { position: absolute; z-index: 4; top: 2.5%; left: 2.8%; display: flex; align-items: center; gap: 8px; }
.ref-brand-lockup img { width: clamp(29px, 8cqw, 44px); height: clamp(29px, 8cqw, 44px); border-radius: 11px; box-shadow: 0 0 20px rgba(255,72,88,.22); }
.ref-brand-lockup strong { color:#ff704b; background:linear-gradient(90deg,#ff9749,#ff704b 52%,#ff315f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(16px,4.1cqw,24px); font-weight:500; letter-spacing:-.02em; }

.ref-live-pill { position: absolute; z-index: 5; top: 3%; right: 1.8%; display: flex; align-items: center; gap: 7px; min-height: clamp(29px, 7.7cqw, 42px); padding: 0 clamp(11px, 3cqw, 17px); color: #f2eaf2; border: 1px solid rgba(255,79,91,.25); border-radius: 12px; background: rgba(9,8,22,.73); font-size: clamp(9px, 2.3cqw, 13px); font-weight: 800; letter-spacing: .13em; cursor: pointer; backdrop-filter: blur(12px); }
.ref-live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ref-coral); box-shadow: 0 0 10px var(--ref-coral); animation: ref-pulse 1.8s ease-in-out infinite; }
@keyframes ref-pulse { 50% { opacity: .45; transform: scale(.75); } }

.ref-title-lockup { position: absolute; z-index: 3; top: 18.5%; left: 3.2%; display: flex; flex-direction: column; align-items: flex-start; }
.ref-title-lockup span { display: block; color: var(--ref-coral); background: linear-gradient(180deg, #ff714e 0%, #ff355e 93%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(54px, 15cqw, 86px); font-weight: 500; letter-spacing: -.035em; line-height: .79; text-shadow: 0 0 24px rgba(255,56,93,.14); }
.ref-title-lockup em { margin-top: .7cqw; color: #ff5365; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(19px, 5cqw, 29px); line-height: 1; transform: rotate(-7deg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.ref-hero-car { position: absolute; z-index: 3; left: 0; bottom: -3%; width: 88%; height: auto; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 12px 15px rgba(0,0,0,.75)) drop-shadow(0 0 15px rgba(157,58,193,.25)); }

.ref-battery-block { position: absolute; z-index: 4; right: 3%; bottom: 3.8%; display: flex; flex-direction: column; align-items: flex-start; width: 18%; text-shadow: 0 2px 12px #05040e; }
.ref-battery-block > div:first-child { display: flex; align-items: center; gap: 2px; line-height: 1; }
.ref-battery-block > div:first-child strong { font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(35px, 9.6cqw, 55px); font-weight: 500; }
.ref-battery-block > div:first-child span { margin-top: 13px; font-size: clamp(14px, 4cqw, 23px); }
.ref-battery-block > div:first-child i { margin: 5px 0 0 7px; color: var(--ref-coral); font-size: clamp(16px, 4.6cqw, 26px); font-style: normal; }
.ref-battery-bars { display: flex; gap: 2px; width: 100%; height: clamp(6px, 1.8cqw, 10px); margin: 5px 0 8px; }
.ref-battery-bars b { flex: 1; border-radius: 1px; background: rgba(104,75,130,.21); }
.ref-battery-bars b:nth-child(-n+4) { background: linear-gradient(90deg, #ff4f5f, #ff7652); box-shadow: 0 0 7px rgba(255,75,89,.3); }
.ref-battery-block > strong { font-size: clamp(17px, 4.6cqw, 27px); font-weight: 500; line-height: 1; }
.ref-battery-block > strong small { font-size: .6em; font-weight: 500; }
.ref-battery-block > small { margin-top: 5px; color: #777084; font-size: clamp(7px, 1.9cqw, 11px); letter-spacing: .12em; }

.ref-music-card, .ref-driving-card, .ref-journeys-card, .ref-health-card, .ref-tool-dock {
  border: 1px solid rgba(111, 61, 163, .25);
  background: linear-gradient(145deg, rgba(28,11,55,.92), rgba(9,8,25,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.18);
}

.ref-music-card { position: relative; display: grid; grid-template-columns: 24% 1fr 14%; align-items: center; gap: 4%; width: 100%; aspect-ratio: 3.62 / 1; padding: 2.8%; border-radius: 18px; overflow: hidden; }
.ref-music-card::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 8% 12%, rgba(255,71,82,.11), transparent 38%), radial-gradient(circle at 80% 90%, rgba(135,50,245,.12), transparent 42%); }
.ref-album-art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: radial-gradient(circle at 50% 41%, #ff5572 0 24%, transparent 25%), linear-gradient(180deg,#651a66 0 42%,#1a1038 43% 60%,#08091b 100%); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.ref-album-art::after { content:""; position:absolute; left:42%; bottom:-9%; width:17%; height:55%; background:#080b1c; transform: perspective(50px) rotateX(20deg); clip-path: polygon(38% 0,62% 0,100% 100%,0 100%); }
.ref-album-art span { position:absolute; z-index:3; top:7%; left:7%; color:#ff8b77; font-size:clamp(7px,1.8cqw,10px); font-weight:800; line-height:.9; }
.ref-album-art i { position:absolute; left:12%; right:12%; bottom:24%; height:1px; background:#ff5471; transform:rotate(7deg); }
.ref-album-art b { position:absolute; z-index:4; left:46%; bottom:21%; width:12%; height:7%; border-radius:45%; background:#050511; box-shadow:0 0 5px #ff315f; }
.ref-track-copy { position: relative; align-self: stretch; min-width: 0; display:flex; flex-direction:column; justify-content:center; }
.ref-track-copy > span { color:var(--ref-coral); font-size:clamp(7px,2cqw,11px); font-weight:800; letter-spacing:.09em; }
.ref-track-copy > strong { margin-top:3px; overflow:hidden; color:#f5f1f9; font-size:clamp(16px,4.4cqw,25px); font-weight:500; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.ref-track-copy > em { margin-top:3px; overflow:hidden; color:#9a58e8; font-size:clamp(11px,2.9cqw,16px); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.ref-waveform { display:flex; align-items:center; gap:1px; height:clamp(20px,5.7cqw,32px); margin-top:5px; overflow:hidden; }
.ref-waveform i { flex:1 0 2px; max-width:4px; height:36%; border-radius:2px; background:linear-gradient(180deg,#b747ff,#ff496b); transform-origin:center; animation:ref-wave 1.2s ease-in-out infinite alternate; }
.ref-waveform i:nth-child(3n) { height:78%; animation-delay:-.4s; }.ref-waveform i:nth-child(4n) { height:52%; animation-delay:-.8s; }.ref-waveform i:nth-child(5n) { height:96%; animation-delay:-.2s; }.ref-waveform i:nth-child(7n) { height:66%; animation-delay:-.65s; }
.ref-music-card.is-paused .ref-waveform i { animation-play-state:paused; }
@keyframes ref-wave { to { transform:scaleY(.35); opacity:.7; } }
.ref-track-time { display:flex; justify-content:space-between; color:#a8a0b5; font-size:clamp(6px,1.6cqw,9px); }
.ref-play-button { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; padding:0; color:var(--ref-coral); border:2px solid var(--ref-coral); border-radius:50%; background:rgba(17,9,29,.7); box-shadow:0 0 16px rgba(255,68,88,.13); cursor:pointer; }
.ref-play-button span,.ref-play-button span::after { width:3px; height:clamp(13px,3.4cqw,20px); border-radius:2px; background:currentColor; }
.ref-play-button span::after { content:""; display:block; margin-left:7px; }
.ref-play-button:not(.is-playing) span { width:0; height:0; margin-left:4px; border-top:clamp(7px,2cqw,11px) solid transparent; border-bottom:clamp(7px,2cqw,11px) solid transparent; border-left:clamp(11px,3cqw,17px) solid currentColor; border-radius:0; background:transparent; }
.ref-play-button:not(.is-playing) span::after { display:none; }

.ref-driving-card { position:relative; width:100%; aspect-ratio:3.29 / 1; padding:3.1% 3.5%; border-radius:18px; overflow:hidden; }
.ref-driving-summary { position:absolute; left:3.5%; top:9%; }
.ref-driving-summary > span { display:block; color:var(--ref-coral); font-size:clamp(7px,1.9cqw,11px); font-weight:800; letter-spacing:.08em; }
.ref-driving-summary > strong { display:block; margin-top:1px; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(42px,11.8cqw,67px); font-weight:500; letter-spacing:.01em; line-height:.92; }
.ref-driving-summary > strong small { color:#bcb5c9; font-family:Inter,"Segoe UI",sans-serif; font-size:.33em; font-weight:500; }
.ref-driving-facts { position:absolute; top:18%; left:55%; display:flex; gap:clamp(12px,5cqw,28px); }
.ref-driving-facts > div { display:flex; flex-direction:column; padding-left:clamp(8px,2.3cqw,13px); border-left:1px solid rgba(141,95,177,.2); }
.ref-driving-facts strong { font-size:clamp(14px,3.7cqw,21px); font-weight:500; white-space:nowrap; }.ref-driving-facts span { margin-top:2px; color:#8e879d; font-size:clamp(7px,1.7cqw,10px); }
.ref-driving-chart { position:absolute; left:3.5%; right:20%; bottom:8%; height:39%; }
.ref-driving-chart svg { position:absolute; inset:0 0 12%; width:100%; height:72%; overflow:visible; }.ref-driving-chart svg path { fill:none; stroke:url(#refChartLine); stroke-width:1.5; vector-effect:non-scaling-stroke; }.ref-driving-chart svg circle { fill:#050611; stroke:#38aef0; stroke-width:1.2; }
.ref-chart-bars { position:absolute; left:0; right:0; bottom:16%; height:58%; display:flex; align-items:flex-end; gap:1.3%; padding:0 3%; }
.ref-chart-bars i { flex:1; min-width:2px; height:10%; border-radius:2px 2px 0 0; background:#5f21c0; opacity:.85; }.ref-chart-bars i:nth-child(2){height:16%}.ref-chart-bars i:nth-child(3){height:12%}.ref-chart-bars i:nth-child(4){height:19%}.ref-chart-bars i:nth-child(5){height:25%}.ref-chart-bars i:nth-child(6){height:31%}.ref-chart-bars i:nth-child(7){height:46%;background:#8540dd}.ref-chart-bars i:nth-child(8){height:23%}.ref-chart-bars i:nth-child(9){height:39%}.ref-chart-bars i:nth-child(10){height:63%;background:#e33d78}.ref-chart-bars i:nth-child(11){height:94%;background:#ff5c65}.ref-chart-bars i:nth-child(12){height:48%;background:#cb3d95}.ref-chart-bars i:nth-child(13){height:28%}.ref-chart-bars i:nth-child(14){height:50%;background:#c53d9f}.ref-chart-bars i:nth-child(15){height:88%;background:#ff745d}.ref-chart-bars i:nth-child(16){height:65%;background:#e44d78}.ref-chart-bars i:nth-child(17){height:35%}.ref-chart-bars i:nth-child(18){height:51%;background:#7d36da}
.ref-chart-axis { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; color:#736d82; font-size:clamp(5px,1.4cqw,8px); }
.ref-score-ring { position:absolute; right:2.4%; bottom:10%; width:15.8%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ref-score-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-82deg); }.ref-score-ring circle { fill:none; stroke:#241436; stroke-width:5; }.ref-score-ring .ref-score-progress { stroke:url(#refRouteGradient); stroke-dasharray:239; stroke-dashoffset:43; stroke-linecap:round; }
.ref-score-ring i { color:#ff704d; font-size:clamp(10px,2.8cqw,16px); font-style:normal; line-height:1; }.ref-score-ring span,.ref-score-ring small { color:#a19aac; font-size:clamp(6px,1.45cqw,8px); line-height:1.1; }.ref-score-ring strong { color:#9a5aff; font-size:clamp(16px,4.4cqw,25px); line-height:1; }

.ref-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:1.3%; width:100%; aspect-ratio:4.9 / 1; }
.ref-action { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; min-width:0; padding:6% 2% 7%; overflow:hidden; color:#f6edf6; border:1px solid rgba(255,97,94,.25); border-radius:16px; background:radial-gradient(circle at 48% 2%,rgba(255,95,83,.35),transparent 49%),linear-gradient(145deg,#50152b,#190a25 67%); cursor:pointer; transition:transform .16s ease,filter .16s ease; }
.ref-action:nth-child(2){border-color:rgba(135,62,245,.34);background:radial-gradient(circle at 48% 1%,rgba(142,56,255,.36),transparent 52%),linear-gradient(145deg,#351064,#100a2e 67%)}
.ref-action:nth-child(3){border-color:rgba(45,172,237,.38);background:radial-gradient(circle at 50% 1%,rgba(21,144,218,.48),transparent 53%),linear-gradient(145deg,#0b4772,#0b1936 68%)}
.ref-action:nth-child(4){border-color:rgba(255,125,82,.31);background:radial-gradient(circle at 50% 1%,rgba(255,134,74,.38),transparent 52%),linear-gradient(145deg,#512125,#1a0d22 70%)}
.ref-action:hover { filter:brightness(1.14); }.ref-action:active { transform:scale(.965); }.ref-action.working svg { animation:ref-spin .8s linear infinite; }@keyframes ref-spin{to{transform:rotate(1turn)}}
.ref-action svg { position:absolute; top:8%; width:42%; height:45%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.9; filter:drop-shadow(0 0 8px currentColor); }.ref-action:nth-child(2) svg{color:#b977ff}.ref-action:nth-child(3) svg{color:#5cc5ff}.ref-action:nth-child(4) svg{color:#ff9c5f}
.ref-action strong { overflow:hidden; max-width:100%; font-size:clamp(9px,2.5cqw,14px); font-weight:500; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.ref-action span { color:#aaa0b1; font-size:clamp(6px,1.55cqw,9px); line-height:1.1; white-space:nowrap; }

.ref-bottom-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:1.5%; width:100%; aspect-ratio:2.7 / 1; }
.ref-journeys-card,.ref-health-card { min-width:0; overflow:hidden; border-radius:17px; }
.ref-journeys-card header,.ref-health-card header { height:23%; display:flex; align-items:center; justify-content:space-between; padding:0 6%; }
.ref-journeys-card header strong,.ref-health-card header strong { color:#ff5969; font-size:clamp(7px,1.85cqw,10px); letter-spacing:.08em; }.ref-health-card header strong{color:#46c7ee}
.ref-journeys-card header button { padding:0; color:#a09aaa; border:0; background:none; font-size:clamp(6px,1.55cqw,9px); cursor:pointer; }.ref-journeys-card header button span{font-size:1.35em}
.ref-journey-row { display:grid; grid-template-columns:13% 1fr 23%; align-items:center; gap:3%; width:100%; height:38.5%; padding:2% 4.5%; color:#fff; border:0; border-top:1px solid rgba(108,66,146,.16); background:transparent; text-align:left; cursor:pointer; }
.ref-journey-row:hover { background:rgba(139,64,244,.08); }
.ref-place-icon { display:grid; place-items:center; width:100%; aspect-ratio:1; color:#ff6670; border-radius:50%; background:rgba(255,73,91,.18); font-size:clamp(11px,3cqw,17px); font-style:normal; }
.ref-journey-row > span { min-width:0; display:flex; flex-direction:column; }.ref-journey-row small{color:#8f869c;font-size:clamp(6px,1.45cqw,8px)}.ref-journey-row strong{overflow:hidden;margin:1px 0;color:#f3eef7;font-size:clamp(9px,2.5cqw,14px);font-weight:500;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.ref-journey-row em{overflow:hidden;color:#8b8397;font-size:clamp(5px,1.35cqw,8px);font-style:normal;white-space:nowrap}
.ref-journey-row svg { width:100%; height:80%; padding:3%; border:1px solid rgba(100,65,143,.24); border-radius:5px; background:#0b0a20; }.ref-journey-row .thumb-roads{fill:none;stroke:#352058;stroke-width:1}.ref-journey-row .thumb-route{fill:none;stroke:#ff5266;stroke-width:2;filter:drop-shadow(0 0 3px #ff315f)}.ref-journey-row svg circle{fill:#ffc2af;filter:drop-shadow(0 0 4px #ff5160)}
.ref-health-card > button { display:grid; grid-template-columns:21% 1fr 13%; align-items:center; gap:4%; width:100%; height:25.6%; padding:0 6%; color:#fff; border:0; border-top:1px solid rgba(77,54,122,.14); background:transparent; text-align:left; cursor:pointer; }.ref-health-card > button:hover{background:rgba(48,164,235,.07)}
.ref-service-icon { display:grid; place-items:center; width:100%; aspect-ratio:1; color:#e8f5ff; border-radius:50%; background:#2589c8; font-size:clamp(9px,2.6cqw,15px); font-style:normal; font-weight:800; }.ref-service-icon.spotify{background:#843be0;font-size:clamp(11px,3cqw,17px)}.ref-service-icon.places{background:#c4346a}
.ref-health-card button > span { min-width:0; display:flex; flex-direction:column; }.ref-health-card button strong{font-size:clamp(8px,2.2cqw,12px);font-weight:500}.ref-health-card button small{color:#8d869a;font-size:clamp(6px,1.55cqw,9px)}.ref-health-card button b{display:grid;place-items:center;width:100%;aspect-ratio:1;color:#0d0920;border-radius:50%;background:#2caeea;font-size:clamp(7px,1.75cqw,10px)}

.ref-tool-dock { position:relative; display:grid; grid-template-columns:repeat(7,1fr); align-items:stretch; gap:.6%; width:100%; aspect-ratio:5.4 / 1; padding:3% 1.5% 2%; border-radius:22px 22px 30px 30px; background:linear-gradient(180deg,rgba(25,12,50,.95),rgba(10,7,26,.98)); }
.ref-tool-dock::before { content:""; position:absolute; top:4%; left:45%; width:10%; height:3px; border-radius:99px; background:#7c35d3; box-shadow:0 0 8px rgba(145,60,245,.45); }
.ref-tool-dock button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; min-width:0; padding:8% 0 0; color:#8b72d9; border:0; border-radius:12px; background:transparent; cursor:pointer; }.ref-tool-dock button:hover{color:#c8b0ff;background:rgba(128,60,230,.08)}.ref-tool-dock button.active{color:#ff5a62;background:radial-gradient(circle at 50% 55%,rgba(255,72,83,.12),transparent 70%)}
.ref-tool-dock i { height:37%; font-size:clamp(15px,4.2cqw,24px); font-style:normal; line-height:1; }.ref-tool-dock span { overflow:hidden; max-width:100%; font-size:clamp(5px,1.45cqw,8px); line-height:1.08; text-align:center; text-overflow:ellipsis; }

@media (max-width: 620px) {
  .reference-dashboard { gap: 7px; width: calc(100vw - 8px); margin: 4px auto 10px; padding: 10px; border-radius: 28px; }
  .ref-hero { border-radius: 18px 18px 6px 6px; }
  .ref-music-card,.ref-driving-card { border-radius: 13px; }
  .ref-action { border-radius: 11px; }
  .ref-journeys-card,.ref-health-card { border-radius: 12px; }
  .ref-tool-dock { border-radius: 16px 16px 23px 23px; }
}

@media (max-width: 350px) {
  .reference-dashboard { width:100%; margin:0; padding:7px; border-width:0; border-radius:0; }
  .ref-brand-lockup { gap:5px; }
  .ref-actions { gap:3px; }
  .ref-bottom-grid { gap:4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-route-line { animation:none; stroke-dashoffset:0; }
  .ref-waveform i,.ref-live-pill i { animation:none; }
}