:root {
      --bg: #07111f;
      --bg-2: #0b1728;
      --surface: rgba(14, 28, 48, .86);
      --surface-2: rgba(19, 38, 62, .92);
      --line: rgba(255,255,255,.10);
      --text: #f7f9fc;
      --muted: #aeb8c8;
      --accent: #36d0ff;
      --accent-2: #78e7b2;
      --danger: #ff5f67;
      --shadow: 0 24px 70px rgba(0,0,0,.35);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --container: 1120px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 0%, rgba(54,208,255,.14), transparent 28rem),
        radial-gradient(circle at 92% 8%, rgba(120,231,178,.11), transparent 24rem),
        linear-gradient(180deg, #07111f 0%, #091526 45%, #06101d 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
      opacity: .42;
      z-index: -1;
    }

    a { color: inherit; }
    .metrika-noscript { position: absolute; left: -9999px; width: 1px; height: 1px; }
    .clipboard-fallback { position: fixed; opacity: 0; pointer-events: none; }
    button, summary { -webkit-tap-highlight-color: transparent; }

    .container {
      width: min(calc(100% - 32px), var(--container));
      margin-inline: auto;
    }

    .hero {
      position: relative;
      min-height: 560px;
      display: grid;
      align-items: center;
      padding: 42px 0 60px;
      isolation: isolate;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: min(980px, 90vw);
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
      align-items: center;
      gap: 46px;
    }

    .hero-copy { position: relative; z-index: 2; }

    .hero-copy .quick-links { margin-top: 26px; padding-bottom: 0; }

    .city-mark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      color: #c9d5e6;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .city-mark::before {
      content: "";
      width: 36px;
      height: 2px;
      border-radius: 20px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 18px rgba(54,208,255,.42);
    }

    h1 {
      margin: 0;
      max-width: 780px;
      font-size: clamp(42px, 6.3vw, 82px);
      line-height: .98;
      letter-spacing: -.055em;
      text-wrap: balance;
    }

    .hero-lead {
      margin: 24px 0 0;
      max-width: 690px;
      color: var(--muted);
      font-size: clamp(18px, 2.2vw, 22px);
      line-height: 1.55;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 54px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: 15px;
      background: #fff;
      color: #06101d;
      font-weight: 800;
      font-size: 16px;
      text-decoration: none;
      box-shadow: 0 14px 34px rgba(0,0,0,.20);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
    .cta:focus-visible, summary:focus-visible, .source-link:focus-visible {
      outline: 3px solid rgba(54,208,255,.52);
      outline-offset: 4px;
    }

    .cta-icon {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 10px;
      color: white;
      background: linear-gradient(135deg, #31cfff, #5587ff 58%, #8d63ff);
      font-weight: 900;
      font-size: 15px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
    }


    .chat-tools {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .chat-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 54px;
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 15px;
      color: #eaf1f8;
      background: rgba(255,255,255,.055);
      font: inherit;
      font-size: 14px;
      font-weight: 760;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .chat-tool:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.09);
      border-color: rgba(54,208,255,.28);
      box-shadow: 0 12px 26px rgba(0,0,0,.16);
    }
    .chat-tool:focus-visible { outline: 3px solid rgba(54,208,255,.52); outline-offset: 4px; }
    .chat-tool svg { width: 19px; height: 19px; flex: 0 0 auto; }
    .chat-tool.is-success { border-color: rgba(120,231,178,.48); background: rgba(120,231,178,.11); }

    .site-toast {
      position: fixed;
      left: 50%;
      bottom: max(24px, env(safe-area-inset-bottom));
      z-index: 100;
      max-width: min(92vw, 520px);
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 14px;
      color: #fff;
      background: rgba(8,20,35,.96);
      box-shadow: 0 18px 48px rgba(0,0,0,.34);
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: opacity .2s ease, transform .2s ease;
    }
    .site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

    html[data-theme="light"] .chat-tool {
      color: #203c55;
      background: rgba(255,255,255,.72);
      border-color: rgba(20,45,72,.12);
      box-shadow: 0 10px 26px rgba(41,72,104,.06);
    }
    html[data-theme="light"] .chat-tool:hover { background: #fff; border-color: rgba(0,143,199,.24); }
    html[data-theme="light"] .site-toast { color: #fff; background: rgba(16,35,58,.96); }

    .hero-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #c0cad9;
      font-size: 14px;
    }

    .live-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--danger);
      box-shadow: 0 0 0 0 rgba(255,95,103,.55);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(255,95,103,.55); }
      70% { box-shadow: 0 0 0 9px rgba(255,95,103,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,95,103,0); }
    }

    .stele-wrap {
      position: relative;
      min-height: 420px;
      display: grid;
      place-items: end center;
    }

    .stele-glow {
      position: absolute;
      width: 330px;
      height: 330px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(54,208,255,.18), rgba(54,208,255,.03) 47%, transparent 70%);
      filter: blur(4px);
    }

    .stele {
      position: relative;
      width: min(100%, 390px);
      filter: drop-shadow(0 32px 30px rgba(0,0,0,.30));
      opacity: .96;
    }

    .stele svg { display: block; width: 100%; height: auto; overflow: visible; }

    .section {
      padding: 64px 0 88px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 46px);
      letter-spacing: -.04em;
    }

    .section-head p {
      margin: 0;
      max-width: 500px;
      color: var(--muted);
      line-height: 1.55;
      text-align: right;
    }

    .camera-groups { display: grid; gap: 26px; }

    .brand-group {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .brand-label {
      position: sticky;
      top: 18px;
      padding: 16px 0;
      color: #dce6f2;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .13em;
    }

    .brand-label small {
      display: block;
      margin-top: 8px;
      color: #8190a5;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }

    .camera-list { display: grid; gap: 12px; }

    details.camera {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(17,35,58,.90), rgba(10,24,42,.93));
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
      transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    details.camera:hover { border-color: rgba(255,255,255,.17); }
    details.camera[open] {
      border-color: rgba(54,208,255,.26);
      box-shadow: var(--shadow);
    }

    details.camera > summary {
      list-style: none;
      cursor: pointer;
      min-height: 82px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 15px 18px;
      user-select: none;
    }

    details.camera > summary::-webkit-details-marker { display: none; }

    .camera-copy { min-width: 0; }
    .camera-title {
      display: block;
      font-size: 17px;
      line-height: 1.3;
      font-weight: 790;
      letter-spacing: -.012em;
    }

    .camera-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin-top: 6px;
      color: #8f9caf;
      font-size: 13px;
    }

    .camera-meta .status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #b9c6d7;
    }

    .camera-meta .status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--danger);
    }

    .chevron {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #bdc9d9;
      background: rgba(255,255,255,.05);
      transition: transform .24s ease, background .2s ease;
    }

    .chevron svg { width: 18px; height: 18px; }
    details[open] .chevron { transform: rotate(180deg); background: rgba(54,208,255,.10); }

    .camera-body {
      border-top: 1px solid rgba(255,255,255,.08);
      background: #040b14;
    }

    .player-shell {
      position: relative;
      aspect-ratio: 16 / 9;
      min-height: 220px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 35%, rgba(54,208,255,.12), transparent 40%),
        #050c15;
    }

    .player-shell iframe,
    .player-shell video {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      background: #000;
      object-fit: contain;
    }

    .player-error {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
      text-align: center;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,86,103,.12), transparent 45%),
        #050c15;
    }

    .player-error-inner {
      width: min(100%, 620px);
      display: grid;
      justify-items: center;
      gap: 10px;
    }

    .player-error-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #ffd8dc;
      background: rgba(255,86,103,.12);
      border: 1px solid rgba(255,86,103,.22);
      font-size: 21px;
      font-weight: 900;
    }

    .player-error strong {
      color: #f0f5fb;
      font-size: 15px;
    }

    .player-error p {
      margin: 0;
      color: #9ba9bc;
      font-size: 13px;
      line-height: 1.45;
    }

    .player-error-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 9px;
      margin-top: 4px;
    }

    .player-action {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 11px;
      color: #e9f2fb;
      background: rgba(255,255,255,.055);
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
    }
    .player-action:hover { background: rgba(255,255,255,.095); }

    .player-action.primary {
      color: #02131a;
      border-color: transparent;
      background: var(--accent);
    }

    .player-debug {
      max-width: 100%;
      color: #728197;
      font-size: 11px;
      overflow-wrap: anywhere;
    }

    .player-shell iframe.bootstrap-frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }

    .player-placeholder {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      padding: 24px;
      text-align: center;
      color: #9ba9bc;
      font-size: 14px;
    }

    .player-placeholder-inner {
      display: grid;
      justify-items: center;
      gap: 12px;
    }

    .loader {
      width: 34px;
      height: 34px;
      border: 3px solid rgba(255,255,255,.10);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .9s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .player-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px 14px;
      color: #8190a4;
      font-size: 12px;
      background: #07111d;
    }

    .source-link {
      color: #dbe7f4;
      text-decoration: none;
      font-weight: 750;
      white-space: nowrap;
    }
    .source-link:hover { color: white; text-decoration: underline; }

    details.fuel-map {
      position: relative;
      overflow: hidden;
      margin-top: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(17,35,58,.90), rgba(10,24,42,.93));
      box-shadow: 0 12px 30px rgba(0,0,0,.12);
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    details.fuel-map:hover { border-color: rgba(255,255,255,.17); }
    details.fuel-map[open] {
      border-color: rgba(54,208,255,.26);
      box-shadow: var(--shadow);
    }

    details.fuel-map > summary {
      list-style: none;
      cursor: pointer;
      min-height: 82px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 15px 18px;
      user-select: none;
    }

    details.fuel-map > summary::-webkit-details-marker { display: none; }

    .map-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      color: #dff8ff;
      background: rgba(54,208,255,.09);
      border: 1px solid rgba(54,208,255,.18);
    }
    .map-icon svg { width: 23px; height: 23px; }
    .map-title {
      display: block;
      font-size: 17px;
      line-height: 1.3;
      font-weight: 790;
      letter-spacing: -.012em;
    }
    .map-meta {
      display: block;
      margin-top: 6px;
      color: #8f9caf;
      font-size: 13px;
    }
    .map-body {
      border-top: 1px solid rgba(255,255,255,.08);
      background: #040b14;
    }
    .map-shell {
      position: relative;
      width: 100%;
      height: min(68vh, 680px);
      min-height: 520px;
      overflow: hidden;
      background: #0b1728;
    }
    .map-shell iframe {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      background: #0b1728;
    }
    .map-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #b8c5d6;
      font-size: 14px;
      background: radial-gradient(circle at 50% 35%, rgba(54,208,255,.10), transparent 38%), #07111f;
    }
    .map-loading::before {
      content: "";
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      border: 3px solid rgba(255,255,255,.14);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    .map-loading-inner { display: inline-flex; align-items: center; }
    .map-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px 14px;
      color: #8190a4;
      font-size: 12px;
      background: #07111d;
    }

    .map-shell[data-map-mode="external"] {
      height: auto;
      min-height: 0;
      background: transparent;
    }
    .external-map-launch {
      min-height: 270px;
      display: grid;
      place-items: center;
      padding: 30px 20px;
      text-align: center;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,170,255,.18), transparent 34%),
        radial-gradient(circle at 80% 80%, rgba(150,94,232,.18), transparent 36%),
        linear-gradient(145deg, #0a1728, #07111d);
    }
    .external-map-card { max-width: 560px; display: grid; justify-items: center; gap: 12px; }
    .external-map-logo {
      width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px;
      color: #fff; font-size: 25px; font-weight: 900;
      background: linear-gradient(135deg,#00aaff,#965ee8 52%,#ff4053);
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    .external-map-card h3 { margin: 3px 0 0; font-size: clamp(20px, 2.5vw, 27px); letter-spacing: -.025em; }
    .external-map-card p { margin: 0; max-width: 500px; color: #93a3b9; line-height: 1.55; font-size: 14px; }
    .external-map-button {
      margin-top: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 20px; border-radius: 14px; text-decoration: none;
      color: #fff; font-weight: 820; background: linear-gradient(135deg,#168bd2,#754ee7 62%,#e63b5c);
      box-shadow: 0 12px 26px rgba(41,91,210,.20);
    }
    .external-map-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .external-map-launch--2gis {
      background:
        radial-gradient(circle at 22% 24%, rgba(86,196,73,.16), transparent 34%),
        radial-gradient(circle at 80% 78%, rgba(37,153,65,.12), transparent 36%),
        linear-gradient(145deg, #0a1728, #07111d);
    }
    .external-map-logo--2gis { background: linear-gradient(135deg,#74d84f,#2caf45); }
    .external-map-button--2gis { background: linear-gradient(135deg,#55c83f,#249b43); box-shadow: 0 12px 26px rgba(38,156,67,.20); }

    .external-map-launch--gdebenz {
      background:
        radial-gradient(circle at 22% 24%, rgba(121,216,74,.17), transparent 34%),
        radial-gradient(circle at 80% 78%, rgba(30,159,79,.13), transparent 36%),
        linear-gradient(145deg, #0a1728, #07111d);
    }
    .external-map-logo--gdebenz { background: linear-gradient(135deg,#79d84a,#1e9f4f); }
    .external-map-button--gdebenz { background: linear-gradient(135deg,#6fd142,#16934a); box-shadow: 0 12px 26px rgba(36,156,73,.20); }
    html[data-theme="light"] .external-map-launch {
      background: radial-gradient(circle at 20% 20%, rgba(0,170,255,.12), transparent 34%), radial-gradient(circle at 80% 80%, rgba(150,94,232,.12), transparent 36%), #edf4fa;
    }
    html[data-theme="light"] .external-map-card p { color: #62758d; }
    html[data-theme="light"] .external-map-launch--2gis { background: radial-gradient(circle at 20% 20%, rgba(86,196,73,.12), transparent 34%), radial-gradient(circle at 80% 80%, rgba(37,153,65,.10), transparent 36%), #edf4fa; }
    html[data-theme="light"] .external-map-launch--gdebenz { background: radial-gradient(circle at 20% 20%, rgba(121,216,74,.12), transparent 34%), radial-gradient(circle at 80% 80%, rgba(30,159,79,.10), transparent 36%), #edf4fa; }

    footer {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 28px 0 max(28px, env(safe-area-inset-bottom));
      color: #8896a8;
      font-size: 14px;
    }

    .footer-row {
      display: flex;
      justify-content: center;
      text-align: center;
    }

    footer a {
      color: #dce6f2;
      font-weight: 700;
      text-decoration: none;
    }
    footer a:hover { text-decoration: underline; }

    .scroll-top {
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
      z-index: 40;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 15px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 15px;
      color: #f4f8fc;
      background: rgba(10,24,42,.92);
      backdrop-filter: blur(16px);
      box-shadow: 0 16px 38px rgba(0,0,0,.28);
      font: inherit;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .scroll-top.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .scroll-top:hover { background: rgba(18,39,65,.98); border-color: rgba(54,208,255,.30); }
    .scroll-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .scroll-top svg { width: 18px; height: 18px; flex: 0 0 auto; }



    /* v14 */
    :root {
      --footer-bg: #07111d;
      --shell-bg: #0b1728;
      --grid-line: rgba(255,255,255,.018);
      --focus: rgba(54,208,255,.52);
    }
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #eef4fa;
      --bg-2: #f7fafc;
      --surface: rgba(255,255,255,.92);
      --surface-2: rgba(246,250,254,.98);
      --line: rgba(20,45,72,.13);
      --text: #122033;
      --muted: #637187;
      --accent: #008fc7;
      --accent-2: #179b72;
      --danger: #e54855;
      --shadow: 0 24px 70px rgba(41,72,104,.15);
      --footer-bg: #edf3f8;
      --shell-bg: #e9f0f6;
      --grid-line: rgba(17,55,87,.035);
      --focus: rgba(0,143,199,.34);
    }
    html[data-theme="light"] body {
      background:
        radial-gradient(circle at 12% 0%, rgba(0,143,199,.11), transparent 28rem),
        radial-gradient(circle at 92% 8%, rgba(23,155,114,.08), transparent 24rem),
        linear-gradient(180deg, #edf4fa 0%, #f8fbfd 46%, #eef4f8 100%);
    }
    html[data-theme="light"] body::before {
      background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      opacity: .7;
    }
    html[data-theme="light"] .city-mark, html[data-theme="light"] .hero-note { color: #52647b; }
    html[data-theme="light"] .cta { background: #10233a; color: #fff; box-shadow: 0 14px 34px rgba(41,72,104,.18); }
    html[data-theme="light"] .brand-label { color: #283a4f; }
    html[data-theme="light"] .brand-label small, html[data-theme="light"] .camera-meta, html[data-theme="light"] .map-meta { color: #718096; }
    html[data-theme="light"] details.camera, html[data-theme="light"] details.fuel-map { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,250,254,.97)); box-shadow: 0 10px 26px rgba(41,72,104,.07); }
    html[data-theme="light"] details.camera:hover, html[data-theme="light"] details.fuel-map:hover { border-color: rgba(0,104,150,.22); }
    html[data-theme="light"] details.camera[open], html[data-theme="light"] details.fuel-map[open] { border-color: rgba(0,143,199,.30); }
    html[data-theme="light"] .chevron, html[data-theme="light"] .map-icon { color: #28506d; background: rgba(0,143,199,.075); border-color: rgba(0,143,199,.14); }
    html[data-theme="light"] .camera-body, html[data-theme="light"] .map-body { background: #e7eef5; border-top-color: rgba(20,45,72,.10); }
    html[data-theme="light"] .player-shell, html[data-theme="light"] .map-shell { background: var(--shell-bg); }
    html[data-theme="light"] .player-placeholder, html[data-theme="light"] .map-loading { color: #60738b; background: radial-gradient(circle at 50% 35%, rgba(0,143,199,.09), transparent 38%), #edf4fa; }
    html[data-theme="light"] .player-error { background: radial-gradient(circle at 50% 30%, rgba(229,72,85,.08), transparent 45%), #edf4fa; }
    html[data-theme="light"] .player-error strong { color: #1b3149; }
    html[data-theme="light"] .player-error p, html[data-theme="light"] .player-debug { color: #6c7e93; }
    html[data-theme="light"] .player-action { color: #24435d; background: rgba(0,55,90,.05); border-color: rgba(0,55,90,.13); }
    html[data-theme="light"] .player-action:hover { background: rgba(0,55,90,.09); }
    html[data-theme="light"] .player-action.primary { color: #fff; background: #008fc7; }
    html[data-theme="light"] .camera-meta .status { color: #52667c; }
    html[data-theme="light"] .player-footer, html[data-theme="light"] .map-footer { color: #6e7e91; background: var(--footer-bg); }
    html[data-theme="light"] .source-link { color: #21415b; }
    html[data-theme="light"] .source-link:hover { color: #0d2539; }
    html[data-theme="light"] footer { border-color: rgba(20,45,72,.10); color: #708096; }
    html[data-theme="light"] footer a { color: #203c55; }
    html[data-theme="light"] .scroll-top { color: #203c55; background: rgba(255,255,255,.94); border-color: rgba(20,45,72,.12); box-shadow: 0 14px 34px rgba(41,72,104,.16); }

    .theme-toggle {
      position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 50;
      display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px;
      border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(10,24,42,.78);
      backdrop-filter: blur(18px); box-shadow: 0 12px 34px rgba(0,0,0,.16); cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .theme-toggle:hover { transform: translateY(-1px); border-color: rgba(54,208,255,.28); }
    .theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    html[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.84); box-shadow: 0 12px 34px rgba(41,72,104,.12); }
    .theme-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
    .theme-icon-moon { display: none; }
    html[data-theme="light"] .theme-icon-sun { display: none; }
    html[data-theme="light"] .theme-icon-moon { display: block; }

    .stele-wrap { min-height: 390px; justify-items: end; overflow: visible; }
    .stele-glow { display: none; }
    .stele-photo {
      display: block; width: min(58vw, 790px); max-width: none; height: auto; margin-right: -7vw; border-radius: 28px;
      object-fit: cover; box-shadow: 0 34px 80px rgba(0,0,0,.34);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 10%, #000 28%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 10%, #000 28%); user-select: none; pointer-events: none;
    }
    html[data-theme="light"] .stele-photo { box-shadow: 0 34px 80px rgba(41,72,104,.18); filter: saturate(.92) brightness(1.06); }

    .maps-block { margin-bottom: 58px; }
    .maps-block .section-head { margin-bottom: 20px; }
    .fuel-maps { display: grid; gap: 14px; }
    details.fuel-map { margin-top: 0; }
    .provider-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: -.02em; }
    .provider-yandex { background: linear-gradient(135deg,#ff4d4d,#e41414); }
    .provider-gdebenz { background: linear-gradient(135deg,#79d84a,#1e9f4f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .provider-2gis { background: linear-gradient(135deg,#80d44a,#17a84b); }
    .provider-avito { background: linear-gradient(135deg,#00aaff,#965ee8 52%,#ff4053); }

    .yandex-live-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 22px 24px;
      background:
        radial-gradient(circle at 8% 0%, rgba(255,66,66,.16), transparent 34%),
        linear-gradient(135deg, #101d30, #091421);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .yandex-live-copy { min-width: 0; }
    .yandex-live-title {
      margin: 0;
      font-size: clamp(18px, 2.1vw, 24px);
      line-height: 1.2;
      font-weight: 850;
      letter-spacing: -.025em;
    }
    .yandex-live-text {
      margin: 7px 0 0;
      max-width: 760px;
      color: #9bacbf;
      font-size: 14px;
      line-height: 1.55;
    }
    .yandex-live-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 50px;
      padding: 0 20px;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(135deg,#ff4b4b,#e31616);
      box-shadow: 0 12px 28px rgba(227,22,22,.22);
      text-decoration: none;
      font-size: 14px;
      font-weight: 850;
      white-space: nowrap;
      transition: transform .18s ease, filter .18s ease;
    }
    .yandex-live-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .yandex-live-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .yandex-preview-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 14px;
      color: #8292a7;
      background: #07111d;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-size: 12px;
      font-weight: 700;
    }
    html[data-theme="light"] .yandex-live-panel {
      background: radial-gradient(circle at 8% 0%, rgba(255,66,66,.10), transparent 34%), linear-gradient(135deg,#fff,#eef4f9);
      border-bottom-color: rgba(20,45,72,.10);
    }
    html[data-theme="light"] .yandex-live-text { color: #65778d; }
    html[data-theme="light"] .yandex-preview-label { color: #66788e; background: #edf3f8; border-bottom-color: rgba(20,45,72,.10); }

    /* У Яндекс-виджета панель результатов находится слева. Рендерим iframe шире контейнера и обрезаем эту область. */
    .map-shell[data-map-provider="yandex"] { --yandex-panel-cut: 405px; }
    .map-shell[data-map-provider="yandex"] iframe { position: absolute; inset-block: 0; left: calc(-1 * var(--yandex-panel-cut)); width: calc(100% + var(--yandex-panel-cut)); max-width: none; height: 100%; }



    /* Быстрые ссылки */
    .quick-links {
      position: relative;
      z-index: 4;
      margin-top: 0;
      padding-bottom: 0;
    }

    .quick-links-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .quick-link {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
      min-height: 74px;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 18px;
      color: var(--text);
      background: rgba(13,28,48,.91);
      box-shadow: 0 18px 45px rgba(0,0,0,.18);
      text-decoration: none;
      overflow: hidden;
      isolation: isolate;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .quick-link::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity .2s ease;
    }

    .quick-link:hover {
      transform: translateY(-3px);
      border-color: rgba(54,208,255,.26);
      box-shadow: 0 22px 50px rgba(0,0,0,.24);
    }
    .quick-link:hover::before { opacity: 1; }
    .quick-link:focus-visible { outline: 3px solid rgba(54,208,255,.52); outline-offset: 4px; }

    .quick-link--primary {
      grid-column: span 3;
      min-height: 86px;
      gap: 13px;
      padding: 16px 18px;
      border-color: rgba(255,255,255,.14);
    }
    .quick-link--primary::before { background: linear-gradient(135deg, rgba(54,208,255,.13), rgba(120,231,178,.055)); }
    .quick-link--maps { background: linear-gradient(135deg, rgba(13,43,59,.96), rgba(13,28,48,.94)); }
    .quick-link--cameras { background: linear-gradient(135deg, rgba(42,29,42,.96), rgba(13,28,48,.94)); }
    .quick-link--news { grid-column: span 2; gap: 11px; }

    .quick-link-icon,
    .quick-link-brand {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.16);
    }
    .quick-link-icon svg { width: 24px; height: 24px; }
    .quick-link--maps .quick-link-icon { background: linear-gradient(135deg, #1fc886, #13a8c7); }
    .quick-link--cameras .quick-link-icon { background: linear-gradient(135deg, #ff5f67, #ff8b5e); }
    .quick-link-brand { font-size: 13px; font-weight: 900; letter-spacing: -.02em; }
    .quick-link--max .quick-link-brand { background: linear-gradient(135deg, #31cfff, #5587ff 58%, #8d63ff); }
    .quick-link--vk .quick-link-brand { background: linear-gradient(135deg, #2787f5, #0872d8); }
    .quick-link--ok .quick-link-brand { background: linear-gradient(135deg, #ffad32, #f47a20); }

    .quick-link-label {
      min-width: 0;
      font-size: 15px;
      font-weight: 820;
      line-height: 1.2;
      text-wrap: balance;
    }
    .quick-link--primary .quick-link-label { font-size: 18px; }
    .quick-link-arrow,
    .quick-link-external {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      margin-left: auto;
      color: var(--muted);
    }
    .quick-link-arrow svg { width: 22px; height: 22px; }
    .quick-link-external { font-size: 17px; font-weight: 800; }

    #maps,
    #cameras { scroll-margin-top: 20px; }

    html[data-theme="light"] .quick-link {
      color: #17314a;
      background: rgba(255,255,255,.92);
      border-color: rgba(20,45,72,.11);
      box-shadow: 0 16px 38px rgba(37,68,101,.10);
    }
    html[data-theme="light"] .quick-link--maps { background: linear-gradient(135deg, #f2fffb, #fff); }
    html[data-theme="light"] .quick-link--cameras { background: linear-gradient(135deg, #fff6f5, #fff); }
    html[data-theme="light"] .quick-link:hover { border-color: rgba(0,143,199,.24); box-shadow: 0 20px 44px rgba(37,68,101,.14); }


    @media (max-width: 900px) {
      .quick-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .quick-link--primary { grid-column: span 1; }
      .quick-link--news { grid-column: auto; }
      .quick-link--news:last-child { grid-column: 1 / -1; }
      .hero { min-height: auto; padding-top: 28px; }
      .hero-grid { grid-template-columns: 1fr; gap: 20px; }
      .hero-copy { padding-top: 10px; }
      .stele-wrap { min-height: 0; margin-top: 14px; justify-items: center; overflow: visible; }
      .stele { width: auto; }
      .stele-photo {
        width: 100%;
        max-width: 760px;
        margin-right: 0;
        border-radius: 24px;
        object-fit: contain;
        -webkit-mask-image: none;
        mask-image: none;
      }
      .section-head { display: grid; }
      .section-head p { text-align: left; }
      .brand-group { grid-template-columns: 1fr; gap: 8px; }
      .brand-label { position: static; padding: 4px 4px 8px; }
    }

    @media (max-width: 620px) {
      .quick-links { margin-top: 16px; padding-bottom: 0; }
      .quick-links-grid { grid-template-columns: 1fr; gap: 9px; }
      .quick-link, .quick-link--primary, .quick-link--news, .quick-link--news:last-child { grid-column: 1; min-height: 62px; padding: 11px 13px; border-radius: 15px; }
      .quick-link--primary { min-height: 68px; }
      .quick-link-icon, .quick-link-brand { width: 40px; height: 40px; border-radius: 12px; }
      .quick-link--primary .quick-link-label { font-size: 16px; }
      .quick-link-label { font-size: 14px; }
      .container { width: min(calc(100% - 20px), var(--container)); }
      .hero { padding: 20px 0 42px; }
      .city-mark { margin-bottom: 16px; font-size: 12px; }
      h1 { font-size: clamp(32px, 11vw, 42px); line-height: .96; letter-spacing: -.045em; }
      .hero-lead { font-size: 17px; margin-top: 18px; }
      .hero-actions { margin-top: 24px; }
      .cta { width: 100%; min-height: 58px; }
      .chat-tools { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
      .chat-tool { width: 100%; min-width: 0; min-height: 48px; padding-inline: 12px; font-size: 12.5px; }
      .hero-note { width: 100%; justify-content: center; }
      .site-toast { bottom: max(16px, env(safe-area-inset-bottom)); }
      .stele-wrap { min-height: 0; }
      .stele-photo {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        border-radius: 20px;
        object-fit: contain;
        -webkit-mask-image: none;
        mask-image: none;
      }
      .theme-toggle { top: 10px; right: 10px; min-height: 40px; padding: 0 11px; }
      .theme-toggle .theme-label { display:none; }
      .section { padding: 44px 0 74px; }
      .section-head { margin-bottom: 22px; }
      .section-head p { font-size: 14px; }
      details.camera > summary { min-height: 74px; gap: 12px; padding: 13px 13px; }
      .camera-title { font-size: 15px; }
      .camera-meta { font-size: 12px; }
      .chevron { width: 34px; height: 34px; }
      .player-shell { min-height: 190px; }
      .player-footer, .map-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
      .map-shell { height: 62vh; min-height: 480px; }
      .yandex-live-panel { grid-template-columns: 1fr; padding: 18px 14px; }
      .yandex-live-button { width: 100%; white-space: normal; text-align: center; }
      .yandex-preview-label { align-items: flex-start; flex-direction: column; }
      details.fuel-map > summary { min-height: 74px; gap: 12px; padding: 13px; }
      .source-link { white-space: normal; }
      .scroll-top {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        min-height: 44px;
        padding: 0 13px;
        border-radius: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    }