:root {
  --bg: #070a10;
  --panel: #121722;
  --panel-2: #171d29;
  --text: #f6f8fb;
  --muted: #98a2b2;
  --line: rgba(255,255,255,.085);
  --blue: #1f7cff;
  --blue-2: #5ab5ff;
  --green: #39d98a;
  --danger: #ff5c6c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--bg); overflow: hidden; }
body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }

.carplay-shell {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 8px;
  display: grid;
  grid-template-rows: 46px minmax(0,1fr) 84px 76px;
  gap: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% -15%, rgba(58,126,255,.16), transparent 35%),
    linear-gradient(180deg, #090d14 0%, #070a10 100%);
}

.topbar { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 2px; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark {
  width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg,#252d3a,#111720); border: 1px solid var(--line); font-size: 12px;
}
.brand strong { font-size: 17px; letter-spacing: -.03em; }
.top-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.status-pill {
  height: 34px; padding: 0 9px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.045); display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.status-pill b, .status-pill span { font-size: 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #697487; box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.status-dot.online { background: var(--green); box-shadow: 0 0 10px rgba(57,217,138,.55); }
.status-dot.waiting { background: #ffb547; }
.clock { min-width: 43px; text-align: center; font-size: 12px; font-weight: 700; color: #d9dee7; }

.navigation-card {
  position: relative; min-height: 0; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle at 70% 20%,rgba(44,112,160,.28),transparent 34%),linear-gradient(145deg,#192732 0%,#0d151e 52%,#111a22 100%);
  box-shadow: 0 14px 45px rgba(0,0,0,.25); cursor: pointer;
}
.map-grid {
  position: absolute; inset: 0; opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size: 44px 44px; transform: perspective(600px) rotateX(58deg) scale(1.5) translateY(-4%); transform-origin: center bottom;
}
.map-road { position: absolute; height: 24px; border-radius: 999px; background: rgba(214,224,230,.1); }
.road-a { width: 120%; left: -16%; top: 53%; transform: rotate(-17deg); }
.road-b { width: 90%; left: 23%; top: 69%; transform: rotate(12deg); height: 18px; }
.road-c { width: 82%; left: 49%; top: 24%; transform: rotate(70deg); height: 15px; }
.map-route { position: absolute; height: 6px; border-radius: 999px; background: linear-gradient(90deg,var(--blue-2),var(--blue)); box-shadow: 0 0 14px rgba(30,124,255,.62); transform-origin: left center; }
.route-a { width: 47%; left: 26%; top: 65%; transform: rotate(-31deg); }
.route-b { width: 29%; left: 62%; top: 43%; transform: rotate(25deg); }
.gps-dot { position: absolute; left: 48%; top: 57%; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: white; border: 5px solid rgba(255,255,255,.25); box-shadow: 0 8px 20px rgba(0,0,0,.32); color: #187bff; font-size: 15px; transform: translate(-50%,-50%); }
.gps-dot span { transform: rotate(-7deg) translateY(-1px); }
.nav-instruction { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 8px; min-width: 168px; max-width: 67%; padding: 8px 10px; border-radius: 14px; background: rgba(7,11,18,.9); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.07); }
.turn-arrow { font-size: 24px; line-height: 1; font-weight: 800; }
.nav-instruction strong { display: block; font-size: 19px; letter-spacing: -.04em; }
.nav-instruction span { display: block; font-size: 10px; color: #b9c1cd; margin-top: 1px; }
.map-search { position: absolute; right: 10px; top: 10px; min-height: 38px; max-width: 34%; border: 1px solid rgba(255,255,255,.08); background: rgba(7,11,18,.86); border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; cursor: pointer; }
.map-search span { font-size: 10px; color: #dbe1ea; }
.map-search span:first-child { font-size: 20px; }
.trip-card { position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 54px; display: grid; grid-template-columns: auto 1px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 15px; background: rgba(7,11,18,.9); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.07); }
.trip-card strong { display: block; font-size: 16px; }.trip-card span { font-size: 9px; color: var(--muted); }.trip-separator { width: 1px; height: 28px; background: var(--line); }.trip-destination { min-width: 0; }.trip-destination small { display: block; font-size: 8px; color: var(--muted); }.trip-destination b { display: block; margin-top: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.chevron { font-size: 22px !important; color: white !important; }

.music-card { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg,#151b26,#10151e); display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; cursor: pointer; overflow: hidden; }
.album-art { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%,#ffd26f,transparent 24%),linear-gradient(145deg,#ff6b7f,#9259ff 56%,#203d7d); box-shadow: 0 8px 20px rgba(0,0,0,.24); font-size: 31px; font-weight: 800; }
.track-info { min-width: 0; }.track-info small { display: block; color: #b98af9; font-size: 7px; letter-spacing: .15em; font-weight: 800; margin-bottom: 3px; }.track-info strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.track-info span { display: block; margin-top: 3px; color: #9ca5b5; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; align-items: center; gap: 1px; }.player-button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #d9dee7; cursor: pointer; font-size: 10px; }.player-button.play { width: 38px; height: 38px; background: rgba(255,255,255,.95); color: #11151b; font-size: 13px; }

.app-dock { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.app-button { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.app-button:active,.service:active,.music-card:active,.navigation-card:active { transform: scale(.985); }
.app-icon { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.app-icon.maps { background: linear-gradient(145deg,#39d98a,#138a62); }.app-icon.music { background: linear-gradient(145deg,#ff416f,#ff299d); }.app-icon.telegram { background: linear-gradient(145deg,#35b7ff,#1789e7); }.app-icon.apps { background: linear-gradient(145deg,#384251,#252c37); font-size: 16px; letter-spacing: 1px; }
.app-button b { font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 3px; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.app-sheet { position: fixed; z-index: 21; left: 8px; right: 8px; bottom: 8px; max-height: calc(100dvh - 16px); overflow: auto; transform: translateY(calc(100% + 20px)); transition: transform .22s ease; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(15,19,27,.985); box-shadow: 0 -20px 60px rgba(0,0,0,.4); padding: 8px 10px 12px; }
.app-sheet.open { transform: translateY(0); }.sheet-handle { width: 38px; height: 4px; border-radius: 999px; background: #505969; margin: 0 auto 8px; }.sheet-header,.pair-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.sheet-header small,.pair-header small { color: #687387; font-size: 8px; letter-spacing: .16em; font-weight: 800; }.sheet-header h2,.pair-header h2 { margin: 2px 0 0; font-size: 21px; }.sheet-close { width: 38px; height: 38px; border: 0; border-radius: 12px; background: #222936; font-size: 22px; cursor: pointer; flex: 0 0 auto; }.services-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }.service { min-height: 76px; border: 1px solid var(--line); border-radius: 14px; background: #181e29; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }.service span { font-size: 22px; }.service b { font-size: 8px; font-weight: 700; max-width: 100%; padding: 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.pair-modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.62); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 12px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.pair-modal.open { opacity: 1; pointer-events: auto; }.pair-card { width: min(470px,100%); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; background: linear-gradient(180deg,#151b25,#0e131c); box-shadow: 0 24px 70px rgba(0,0,0,.55); padding: 14px; }.pair-state { text-align: center; }.pair-state p { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 8px auto 14px; max-width: 330px; }.phone-hero,.connected-icon,.error-icon { width: 68px; height: 68px; margin: 8px auto 12px; border-radius: 20px; display: grid; place-items: center; font-size: 31px; background: #212936; border: 1px solid var(--line); }.connected-icon { background: rgba(57,217,138,.14); color: var(--green); }.error-icon { background: rgba(255,92,108,.12); color: var(--danger); }.pair-state h3 { margin: 4px 0; font-size: 18px; }.qr-wrap { width: 190px; height: 190px; margin: 4px auto 10px; padding: 10px; border-radius: 17px; background: #fff; display: grid; place-items: center; overflow: hidden; }.qr-wrap svg { width: 100%; height: 100%; display: block; }.pair-code-label { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; color: #788397; font-weight: 800; }.pair-code { font-size: 31px; letter-spacing: .12em; font-weight: 800; margin: 4px 0 9px; }.pair-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 280px; margin: 0 auto 10px; font-size: 10px; color: var(--muted); }.pair-meta b { color: #dce2eb; }.primary-button,.ghost-button,.danger-button { width: 100%; min-height: 45px; border-radius: 13px; border: 0; font-weight: 800; cursor: pointer; margin-top: 7px; }.primary-button { background: #f4f6f9; color: #11151b; }.ghost-button { background: #212936; color: #dce2eb; }.danger-button { background: rgba(255,92,108,.13); color: #ff8390; border: 1px solid rgba(255,92,108,.18); }.connection-list { margin: 13px 0 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }.connection-list div { min-height: 42px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 10px; }.connection-list div:last-child { border-bottom: 0; }.connection-list span { color: var(--muted); }.connection-list b { font-size: 10px; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translate(-50%,16px); opacity: 0; background: #f6f7f9; color: #101319; border-radius: 99px; padding: 9px 13px; font-size: 10px; font-weight: 800; pointer-events: none; transition: .18s ease; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 620px) {
  .carplay-shell { padding: 6px; gap: 6px; grid-template-rows: 42px minmax(0,1fr) 76px 70px; }
  .brand-mark { width: 29px; height: 29px; }.brand strong { font-size: 15px; }
  .status-pill { height: 31px; padding: 0 7px; }.phone-label { display: none; }.clock { min-width: 39px; font-size: 11px; }
  .nav-instruction { min-width: 150px; max-width: 72%; }.nav-instruction strong { font-size: 17px; }
  .map-search { width: 39px; padding: 0; }.map-search span:last-child { display: none; }
  .trip-card { min-height: 49px; padding: 6px 9px; }
  .music-card { grid-template-columns: 57px minmax(0,1fr) auto; gap: 7px; padding: 7px; }.album-art { width: 57px; height: 57px; border-radius: 12px; font-size: 27px; }.track-info strong { font-size: 13px; }.player-button { width: 27px; height: 27px; }.player-button.play { width: 34px; height: 34px; }
  .app-icon { width: 34px; height: 34px; }.app-button { border-radius: 13px; }.app-button b { font-size: 8px; }
  .services-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (min-width: 980px) {
  .carplay-shell { grid-template-columns: minmax(0,1.35fr) minmax(330px,.75fr); grid-template-rows: 50px minmax(0,1fr) 130px; grid-template-areas: "top top" "map music" "map dock"; padding: 10px; gap: 10px; }
  .topbar { grid-area: top; }.navigation-card { grid-area: map; }.music-card { grid-area: music; grid-template-columns: 90px minmax(0,1fr); grid-template-rows: 1fr auto; padding: 12px; }.album-art { width: 90px; height: 90px; }.player-controls { grid-column: 1/-1; justify-content: center; }.app-dock { grid-area: dock; }
}