:root {
      --bg: #070a12;
      --bg-2: #0d1324;
      --card: rgba(18, 25, 42, .72);
      --card-2: rgba(255,255,255,.055);
      --text: #edf4ff;
      --muted: #93a4bc;
      --line: rgba(255,255,255,.12);
      --line-2: rgba(255,255,255,.18);
      --accent: #60a5fa;
      --accent-2: #22d3ee;
      --good: #34d399;
      --danger: #fb7185;
      --shadow: 0 26px 80px rgba(0,0,0,.35);
      --radius: 28px;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }
    [data-theme="light"] {
      --bg: #f6f8ff;
      --bg-2: #ffffff;
      --card: rgba(255,255,255,.78);
      --card-2: rgba(15,23,42,.045);
      --text: #111827;
      --muted: #627084;
      --line: rgba(15,23,42,.11);
      --line-2: rgba(15,23,42,.18);
      --accent: #2563eb;
      --accent-2: #0891b2;
      --shadow: 0 24px 70px rgba(37,55,99,.14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scrollbar-width: none; }
    html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
    * { scrollbar-width: none; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--sans);
      background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 32%),
        radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      overflow-x: hidden;
      padding-top: 62px;
    }
    body.modal-open { overflow: hidden; }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 52px 52px;
      opacity: .22;
      mask-image: linear-gradient(180deg, #000, transparent 78%);
      z-index: -3;
    }
    .orb {
      position: fixed;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(10px);
      z-index: -2;
      opacity: .65;
      transition: transform .12s linear;
    }
    .orb.one { width: 420px; height: 420px; left: -160px; top: 150px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 66%); }
    .orb.two { width: 520px; height: 520px; right: -230px; top: 430px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 68%); }
    .shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }
    a { color: inherit; }
    button, input, textarea { font: inherit; }
    .topbar {
      position: fixed;
      top: 0;
      left: 50%;
      right: auto;
      z-index: 50;
      margin: 0;
      width: 100%;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border: 1px solid transparent;
      border-radius: 0;
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: blur(24px) saturate(150%);
      box-shadow: 0 0 0 rgba(0,0,0,0);
      padding: 13px max(18px, calc((100vw - 1160px) / 2 + 18px));
      transform: translate3d(-50%, 0, 0);
      transform-origin: top center;
      will-change: width, top, border-radius, background, padding, box-shadow, transform;
      transition:
        top .42s cubic-bezier(.22, 1, .36, 1),
        width .42s cubic-bezier(.22, 1, .36, 1),
        max-width .42s cubic-bezier(.22, 1, .36, 1),
        padding .42s cubic-bezier(.22, 1, .36, 1),
        border-radius .42s cubic-bezier(.22, 1, .36, 1),
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease;
    }
    .topbar.is-compact {
      top: 14px;
      width: min(1160px, calc(100% - 36px));
      max-width: calc(100% - 36px);
      border-color: var(--line);
      border-radius: 24px;
      background: color-mix(in srgb, var(--card) 86%, transparent);
      box-shadow: 0 22px 70px rgba(0,0,0,.22);
      padding: 12px 14px 12px 18px;
    }
    .brand { text-decoration: none; min-width: 0; line-height: 1.05; display: inline-flex; align-items: center; gap: 10px; }
    .brand-mark { width: 34px; height: 34px; border-radius: 11px; display: block; flex: 0 0 auto; }
    .topbar.is-compact .brand-mark { width: 30px; height: 30px; border-radius: 10px; }
    .brand-copy { display: block; min-width: 0; }
    .brand strong { display: block; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
    .brand span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .01em; text-transform: none; }
    .nav { display: flex; align-items: center; gap: 8px; }
    .nav a {
      color: var(--muted);
      text-decoration: none;
      padding: 8px 7px;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: -.01em;
      position: relative;
      transition: color .18s ease;
    }
    .nav a::after {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .18s ease;
    }
    .nav a:hover { color: var(--text); }
    .nav a:hover::after { transform: scaleX(1); }
    .iconbtn, .btn {
      border: 1px solid var(--line);
      background: var(--card-2);
      color: var(--text);
      text-decoration: none;
      border-radius: 999px;
      padding: 10px 13px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .iconbtn:hover, .btn:hover { transform: translateY(-1px); border-color: var(--line-2); background: color-mix(in srgb, var(--accent) 14%, var(--card-2)); }
    .iconbtn { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; line-height: 0; position: relative; }
    .iconbtn svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; margin: auto; }
    .btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: none; }
    .btn.update {
      border-color: transparent;
      background: linear-gradient(135deg, #22c55e, #14b8a6);
      color: #fff;
    }
    .btn.installed {
      color: color-mix(in srgb, var(--muted) 88%, var(--text));
      border-color: color-mix(in srgb, var(--line-2) 62%, transparent);
      background: color-mix(in srgb, var(--card-2) 82%, var(--accent) 6%);
    }
    .btn.installed:hover {
      transform: none;
      background: color-mix(in srgb, var(--card-2) 88%, var(--accent) 5%);
    }
    .btn.danger { color: var(--danger); }
    .page { display: none; }
    .page.active { display: block; }
    .hero { min-height: 640px; display: grid; align-items: center; padding: 74px 0 54px; }
    .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 34px; align-items: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); background: var(--card-2); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    h1 { margin: 20px 0 16px; font-size: clamp(44px, 7vw, 88px); line-height: .9; letter-spacing: -.075em; }
    .lead { max-width: 650px; color: var(--muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.7; margin: 0 0 28px; }
    .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .showcase { border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(24px); border-radius: 34px; padding: 18px; box-shadow: var(--shadow); transform: translateY(var(--py, 0px)); }
    .terminal { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: rgba(0,0,0,.2); }
    [data-theme="light"] .terminal { background: rgba(255,255,255,.72); }
    .termbar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 15px; border-bottom: 1px solid var(--line); color: var(--muted); font: 12px var(--mono); }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
    .termcode { padding: 18px; font: 13px/1.75 var(--mono); color: var(--muted); white-space: pre-wrap; }
    .termcode b { color: var(--text); font-weight: 800; }
    .section { padding: 44px 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.055em; }
    .sub { color: var(--muted); line-height: 1.6; margin: 8px 0 0; max-width: 680px; }
    .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .search { min-width: min(390px, 100%); border: 1px solid var(--line); color: var(--text); background: var(--card); border-radius: 999px; padding: 13px 16px; outline: none; box-shadow: none; }
    .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .card { border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--bg-2) 26%, var(--card))); backdrop-filter: blur(22px); border-radius: var(--radius); box-shadow: 0 20px 55px rgba(0,0,0,.22); padding: 20px; min-height: 230px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transform: translateY(0) scale(1); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
    .card::before { display: none; }
    .card:hover { transform: translateY(-6px) scale(1.01); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
    .card-head { display: flex; align-items: flex-start; gap: 13px; position: relative; z-index: 1; }
    .script-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; overflow: visible; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(135deg, #10233c, #0d1a2f); box-shadow: 0 14px 34px rgba(0,0,0,.28); padding: 5px; }
    [data-theme="light"] .script-icon { background: linear-gradient(135deg, #eef6ff, #e6f7ff); box-shadow: 0 12px 28px rgba(37,55,99,.12); }
    .script-icon img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; border-radius: 0; }
    .script-icon span { color: #fff; font-weight: 950; font-size: 18px; letter-spacing: -.04em; }
    .title-wrap { min-width: 0; }
    .card { cursor: pointer; }
    .card h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; position: relative; z-index: 1; line-height: 1.25; }
    .desc { color: var(--muted); line-height: 1.55; margin: 0; min-height: 48px; }
    .meta { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
    .chip { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: var(--muted); background: var(--card-2); font-size: 12px; font-weight: 800; }
    .card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; position: relative; z-index: 1; }
    .empty { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 28px; color: var(--muted); background: var(--card-2); text-align: center; }
    .admin-wrap { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 66px 0 42px; }
    .admin-wrap.unlocked { place-items: start center; }
    .login-screen { width: min(430px, 100%); margin: 0 auto; }
    .login-card { border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--bg-2) 20%, var(--card))); backdrop-filter: blur(24px); border-radius: 32px; box-shadow: var(--shadow); padding: 28px 28px 5px; }
    .login-card.hidden, #loginCard.hidden, .login-screen.hidden { display: none !important; }
    .login-mark { width: 58px; height: 58px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 18px 45px color-mix(in srgb, var(--accent) 28%, transparent); margin-bottom: 18px; }
    .login-mark svg { width: 25px; height: 25px; display: block; }
    .login-title { margin: 0; font-size: 34px; letter-spacing: -.055em; }
    .login-sub { color: var(--muted); line-height: 1.6; margin: 10px 0 18px; }
    .admin-dashboard { display: none; width: min(1050px, 100%); margin: 0 auto; }
    .admin-dashboard.active { display: block; }
    .admin-dash-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .admin-dash-head .sub { max-width: 560px; }
    .file-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .file-picker { display: grid; gap: 10px; }
    .file-pick-btn { width: 100%; min-height: 54px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card-2) 88%, transparent); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; font-weight: 850; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
    .file-pick-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--card-2)); }
    .file-pick-btn svg { width: 20px; height: 20px; opacity: .9; }
    .file-name { color: var(--muted); font-size: 13px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .showcase-picker { margin-top: 14px; display: grid; gap: 10px; }
    .showcase-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .showcase-thumb { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card-2); }
    .showcase-thumb { position: relative; }
    .showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .showcase-add-tile { aspect-ratio: 16 / 10; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--card-2)); color: var(--text); display: grid; place-items: center; cursor: pointer; font-weight: 950; font-size: 26px; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
    .showcase-add-tile:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 15%, var(--card-2)); border-color: color-mix(in srgb, var(--accent) 80%, var(--line)); }
    .switchline { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 12px 13px; background: color-mix(in srgb, var(--card-2) 82%, transparent); color: var(--text); font-size: 13px; font-weight: 850; cursor: pointer; }
    .switchline span { color: var(--muted); font-size: 12px; font-weight: 750; }
    .switchline input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, var(--text));
      background: color-mix(in srgb, var(--card-2) 82%, transparent);
      cursor: pointer;
      display: grid;
      place-items: center;
      position: relative;
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .switchline input[type="checkbox"]:hover { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--card-2)); }
    .switchline input[type="checkbox"]:checked {
      border-color: color-mix(in srgb, var(--accent) 86%, var(--line));
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
    }
    .switchline input[type="checkbox"]:checked::after {
      content: "";
      width: 6px;
      height: 10px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: translateY(-1px) rotate(45deg);
    }
    .switchline input[type="checkbox"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 66%, transparent); outline-offset: 3px; }
    .chip.beta { color: #fed7aa; border-color: rgba(251,146,60,.46); background: rgba(251,146,60,.14); }
    .card.beta-card {
      border-color: color-mix(in srgb, #fb923c 52%, var(--line));
      box-shadow: 0 22px 62px rgba(251, 146, 60, .14), inset 0 0 0 1px rgba(251, 146, 60, .10);
    }
    .card.beta-card:not(.has-cover) {
      background:
        radial-gradient(circle at 84% 0%, rgba(251, 146, 60, .24), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(245, 158, 11, .16), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), rgba(50, 25, 9, .92));
    }
    .card.beta-card.has-cover {
      background:
        radial-gradient(circle at 18% 0%, rgba(251, 146, 60, .22), transparent 36%),
        linear-gradient(180deg, rgba(48, 32, 16, .82) 0%, rgba(42, 24, 12, .94) 68%, rgba(35, 18, 7, 1) 100%);
      border-color: rgba(251, 146, 60, .36);
    }
    .card.beta-card.has-cover::after {
      background:
        linear-gradient(180deg,
          rgba(58, 33, 13, .14) 0%,
          rgba(61, 36, 14, .30) 28%,
          rgba(54, 31, 13, .70) 58%,
          rgba(44, 24, 10, .94) 82%,
          rgba(35, 18, 7, .99) 100%),
        linear-gradient(90deg, rgba(35, 18, 7, .34), rgba(92, 47, 16, .24), rgba(35, 18, 7, .50)),
        radial-gradient(circle at 18% 18%, rgba(251, 146, 60, .22), transparent 34%),
        radial-gradient(circle at 88% 4%, rgba(245, 158, 11, .20), transparent 38%);
    }
    .card.beta-card:hover { border-color: color-mix(in srgb, #fb923c 72%, var(--line)); box-shadow: 0 30px 80px rgba(251, 146, 60, .18), 0 0 0 1px rgba(251, 146, 60, .20); }
    .card.beta-card .chip.beta { color: #fff7ed; border-color: rgba(251,146,60,.62); background: linear-gradient(135deg, rgba(251,146,60,.28), rgba(245,158,11,.20)); }
    .card.beta-card .script-icon { border-color: rgba(251,146,60,.58); background: linear-gradient(135deg, rgba(251,146,60,.34), rgba(120,53,15,.76)); }
    [data-theme="light"] .card.beta-card .script-icon { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
    .card.beta-card .btn.primary { background: linear-gradient(135deg, #fb923c, #f97316); }
    .card.beta-card .btn.update { background: linear-gradient(135deg, #22c55e, #14b8a6); }
    .card.beta-card .card-actions .btn:not(.primary) { border-color: rgba(251,146,60,.28); background: rgba(55, 29, 12, .52); }
    [data-theme="light"] .card.beta-card.has-cover {
      background:
        radial-gradient(circle at 18% 0%, rgba(251, 146, 60, .20), transparent 36%),
        linear-gradient(180deg, rgba(255, 239, 222, .95) 0%, rgba(255, 226, 196, .96) 62%, rgba(254, 215, 170, 1) 100%);
      border-color: rgba(249, 115, 22, .34);
    }
    [data-theme="light"] .card.beta-card.has-cover::after {
      background:
        linear-gradient(180deg,
          rgba(255, 247, 237, .18) 0%,
          rgba(255, 237, 213, .36) 28%,
          rgba(254, 215, 170, .74) 58%,
          rgba(253, 186, 116, .88) 82%,
          rgba(251, 146, 60, .32) 100%),
        linear-gradient(90deg, rgba(255, 237, 213, .36), rgba(253, 186, 116, .24), rgba(255, 237, 213, .46)),
        radial-gradient(circle at 18% 18%, rgba(249, 115, 22, .16), transparent 34%);
    }
    .card.has-cover {
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .24), transparent 36%),
        linear-gradient(180deg, rgba(18, 43, 76, .86) 0%, rgba(9, 20, 40, .96) 72%, rgba(7, 14, 30, 1) 100%);
      border-color: rgba(96, 165, 250, .24);
    }
    .card.has-cover::before {
      content: "";
      position: absolute;
      inset: -16px;
      z-index: 0;
      pointer-events: none;
      display: block;
      background-image: var(--card-cover);
      background-size: cover;
      background-position: center;
      opacity: .66;
      filter: blur(5px) saturate(1.08) brightness(.88);
      transform: scale(1.08);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.32) 58%, transparent 86%);
      mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.32) 58%, transparent 86%);
      transition: opacity .24s ease, transform .32s ease, filter .24s ease;
    }
    .card.has-cover::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(8, 26, 54, .16) 0%,
          rgba(8, 26, 54, .30) 28%,
          rgba(9, 24, 48, .72) 58%,
          rgba(8, 18, 39, .94) 82%,
          rgba(7, 14, 30, .99) 100%),
        linear-gradient(90deg, rgba(7, 17, 36, .30), rgba(14, 50, 88, .22), rgba(7, 17, 36, .46)),
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, .22), transparent 34%),
        radial-gradient(circle at 88% 4%, rgba(96, 165, 250, .20), transparent 38%);
    }
    [data-theme="light"] .card.has-cover {
      background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .18), transparent 36%),
        linear-gradient(180deg, rgba(230, 243, 255, .94) 0%, rgba(210, 231, 253, .96) 62%, rgba(199, 224, 250, 1) 100%);
      border-color: rgba(37, 99, 235, .22);
    }
    [data-theme="light"] .card.has-cover::before {
      opacity: .42;
      filter: blur(5px) saturate(1.04) brightness(1.02);
    }
    [data-theme="light"] .card.has-cover::after {
      background:
        linear-gradient(180deg,
          rgba(232, 244, 255, .16) 0%,
          rgba(215, 236, 255, .34) 28%,
          rgba(185, 218, 250, .74) 58%,
          rgba(177, 211, 247, .92) 82%,
          rgba(169, 204, 242, .98) 100%),
        linear-gradient(90deg, rgba(223, 239, 255, .34), rgba(183, 219, 252, .24), rgba(209, 230, 252, .48)),
        radial-gradient(circle at 18% 18%, rgba(37, 99, 235, .16), transparent 34%);
    }
    .card.has-cover:hover::before { opacity: .76; transform: scale(1.11); filter: blur(5px) saturate(1.16) brightness(.94); }
    [data-theme="light"] .card.has-cover:hover::before { opacity: .50; filter: blur(5px) saturate(1.08) brightness(1.04); }
    .card.has-cover > * { position: relative; z-index: 1; }

    /* Light theme card polish */
    [data-theme="light"] .card {
      background:
        radial-gradient(circle at 88% 0%, rgba(37, 99, 235, .07), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.98));
      box-shadow: 0 22px 58px rgba(30, 41, 59, .12);
      color: var(--text);
    }
    [data-theme="light"] .card:hover {
      box-shadow: 0 28px 70px rgba(30, 41, 59, .16), 0 0 0 1px rgba(37,99,235,.10);
    }
    [data-theme="light"] .card .chip {
      background: rgba(255,255,255,.70);
      border-color: rgba(15,23,42,.12);
      color: #5b6b82;
      box-shadow: 0 8px 22px rgba(30, 41, 59, .06);
    }
    [data-theme="light"] .card .btn:not(.primary) {
      background: rgba(255,255,255,.78);
      border-color: rgba(15,23,42,.13);
      color: #111827;
      box-shadow: 0 8px 20px rgba(30, 41, 59, .06);
    }
    [data-theme="light"] .card.has-cover {
      background:
        radial-gradient(circle at 82% 0%, rgba(37, 99, 235, .10), transparent 36%),
        linear-gradient(180deg, rgba(248,252,255,.94) 0%, rgba(239,247,255,.96) 52%, rgba(230,242,255,.98) 100%);
      border-color: rgba(37, 99, 235, .18);
    }
    [data-theme="light"] .card.has-cover::before {
      opacity: .24;
      filter: blur(6px) saturate(1.02) brightness(1.08);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.60) 32%, rgba(0,0,0,.18) 58%, transparent 84%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.60) 32%, rgba(0,0,0,.18) 58%, transparent 84%);
    }
    [data-theme="light"] .card.has-cover::after {
      background:
        linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(244,249,255,.76) 42%, rgba(232,242,255,.96) 75%, rgba(224,238,255,.98) 100%),
        radial-gradient(circle at 14% 14%, rgba(37,99,235,.12), transparent 36%);
    }
    [data-theme="light"] .card.has-cover:hover::before {
      opacity: .32;
      filter: blur(6px) saturate(1.06) brightness(1.10);
    }
    [data-theme="light"] .card.beta-card {
      border-color: rgba(249, 115, 22, .28);
      box-shadow: 0 22px 58px rgba(154, 75, 12, .12), inset 0 0 0 1px rgba(249, 115, 22, .08);
    }
    [data-theme="light"] .card.beta-card:not(.has-cover) {
      background:
        radial-gradient(circle at 84% 0%, rgba(249, 115, 22, .12), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(245, 158, 11, .08), transparent 32%),
        linear-gradient(180deg, rgba(255,251,245,.95), rgba(255,243,226,.98));
    }
    [data-theme="light"] .card.beta-card.has-cover {
      background:
        radial-gradient(circle at 18% 0%, rgba(249,115,22,.11), transparent 36%),
        linear-gradient(180deg, rgba(255,250,244,.95) 0%, rgba(255,239,222,.97) 62%, rgba(255,229,204,.99) 100%);
      border-color: rgba(249,115,22,.28);
    }
    [data-theme="light"] .card.beta-card.has-cover::before {
      opacity: .22;
      filter: blur(6px) saturate(1.02) brightness(1.08);
    }
    [data-theme="light"] .card.beta-card.has-cover::after {
      background:
        linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,246,237,.76) 42%, rgba(255,232,210,.95) 75%, rgba(255,221,190,.98) 100%),
        radial-gradient(circle at 18% 18%, rgba(249,115,22,.12), transparent 34%);
    }
    [data-theme="light"] .card.beta-card .chip.beta {
      color: #9a3412;
      border-color: rgba(249,115,22,.28);
      background: rgba(255,237,213,.86);
    }
    [data-theme="light"] .card.beta-card .btn.primary {
      background: linear-gradient(135deg, #fb923c, #f97316);
      color: #fff;
    }
    [data-theme="light"] .card.beta-card .btn.update { background: linear-gradient(135deg, #16a34a, #0d9488); color: #fff; }
    [data-theme="light"] .card.beta-card .card-actions .btn:not(.primary) {
      background: rgba(255,255,255,.72);
      border-color: rgba(154,75,12,.16);
      color: #111827;
      box-shadow: 0 8px 20px rgba(154,75,12,.07);
    }

    .formrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
    .login-card .formrow { grid-template-columns: 1fr; }
    .login-card .btn { width: 100%; justify-content: center; }
    .field, textarea { width: 100%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card-2) 82%, transparent); color: var(--text); border-radius: 18px; padding: 13px 14px; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
    .field:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent) 56%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent); }
    textarea { min-height: 300px; max-height: 460px; resize: none; font-family: var(--mono); line-height: 1.6; overflow: auto; }
    .upload { display: none; margin-top: 18px; }
    .upload.active { display: grid; grid-template-columns: minmax(260px, .78fr) 1.22fr; gap: 16px; align-items: stretch; }
    .upload-card { border: 1px solid var(--line); border-radius: 28px; padding: 18px; background: var(--card-2); }
    .upload-card:has(#code) { display: flex; min-height: 438px; }
    #code { flex: 1 1 auto; min-height: 100%; height: 100%; max-height: none; resize: none; display: block; }
    .theme-choice-backdrop { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 22px; background: rgba(3, 7, 18, .72); backdrop-filter: blur(18px); }
    .theme-choice-backdrop.active { display: grid; }
    .theme-choice-card { width: min(520px, 100%); border: 1px solid var(--line); border-radius: 30px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); box-shadow: 0 36px 110px rgba(0,0,0,.45); padding: 26px; }
    .theme-choice-card h2 { margin: 0; font-size: 34px; letter-spacing: -.045em; line-height: 1; }
    .theme-choice-card p { margin: 12px 0 22px; color: var(--muted); line-height: 1.55; }
    .theme-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .theme-choice-btn { border: 1px solid var(--line); border-radius: 22px; background: var(--card-2); color: var(--text); min-height: 128px; cursor: pointer; display: grid; place-items: center; gap: 10px; padding: 18px; font-weight: 950; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
    .theme-choice-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); }
    .theme-choice-btn svg { width: 28px; height: 28px; color: var(--accent); }
    @media (max-width: 560px) { .theme-choice-actions { grid-template-columns: 1fr; } }
    .modal-backdrop { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 22px; background: rgba(0,0,0,.54); backdrop-filter: blur(18px); }
    .modal-backdrop.active { display: grid; }
    .modal { width: min(920px, 100%); max-height: min(86vh, 860px); border: 1px solid var(--line); border-radius: 32px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); box-shadow: 0 40px 120px rgba(0,0,0,.48); padding: 22px; position: relative; overflow: auto; }
    .modal-top { display: flex; align-items: flex-start; gap: 15px; padding-right: 44px; }
    .modal h3 { margin: 0; font-size: 28px; letter-spacing: -.045em; line-height: 1.1; }
    .modal-title-editable { display: inline-block; min-width: 180px; max-width: min(650px, 68vw); padding: 3px 6px; margin: -3px -6px; border-radius: 10px; outline: none; cursor: text; transition: background .16s ease, box-shadow .16s ease; }
    .modal-title-editable:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .modal-title-editable:focus { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
    .modal-desc { color: var(--muted); line-height: 1.65; margin: 14px 0 18px; }
    .modal-desc-editable { display: block; color: var(--muted); line-height: 1.55; margin-top: 10px; max-width: min(720px, 74vw); padding: 6px 8px; margin-left: -8px; border-radius: 12px; outline: none; cursor: text; transition: background .16s ease, box-shadow .16s ease; }
    .modal-desc-editable:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
    .modal-desc-editable:focus { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
     .modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; padding: 0; }
    .modal-close::before, .modal-close::after { content: ""; position: absolute; width: 15px; height: 2px; border-radius: 999px; background: currentColor; left: 50%; top: 50%; transform-origin: center; }
    .modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
    .modal-admin-actions { position: absolute; top: 16px; right: 62px; display: flex; gap: 8px; z-index: 2; }
    .modal-icon-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
    .modal-icon-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); }
    .modal-icon-btn.danger { color: var(--danger); }
    .modal-icon-btn svg { width: 17px; height: 17px; display: block; }
    .modal-edit-area { margin-top: 16px; display: grid; gap: 16px; }
    .modal-edit-flags { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
    .modal-edit-flags .switchline { margin-top: 0; width: auto; min-width: 210px; flex: 0 1 240px; padding: 10px 11px; border-radius: 16px; }
    .modal-edit-flags .switchline span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.25; }
    .modal-edit-flags .switchline input[type="checkbox"] { flex-basis: 20px; width: 20px; height: 20px; border-radius: 7px; }
    .modal-edit-field { display: grid; gap: 0; }
    .modal-edit-source { height: 260px; min-height: 260px; max-height: 260px; resize: none; font-family: var(--mono); line-height: 1.55; overflow: auto; display: block; }
    .modal-edit-source::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    .modal-showcase-editor { display: grid; gap: 10px; }
    .modal-showcase-title { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
    .modal-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
    .modal-showcase-thumb { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card-2); }
    .modal-showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .modal-showcase-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(5,10,22,.76); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; padding: 0; }
    .modal-showcase-remove::before, .modal-showcase-remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; }
    .modal-showcase-remove::before { transform: translate(-50%, -50%) rotate(45deg); }
    .modal-showcase-remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
    .modal-showcase-add { aspect-ratio: 16 / 10; border: 1px dashed color-mix(in srgb, var(--accent) 56%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); color: var(--text); cursor: pointer; font-weight: 950; font-size: 0; display: flex; align-items: center; justify-content: center; line-height: 0; padding: 0; text-align: center; position: relative; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
    .modal-showcase-add::before, .modal-showcase-add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); }
    .modal-showcase-add::after { transform: translate(-50%, -50%) rotate(90deg); }
    .modal-showcase-add:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); border-color: color-mix(in srgb, var(--accent) 82%, var(--line)); }
     .modal-edit-actions {
      position: sticky;
      bottom: -22px;
      z-index: 6;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin: 6px -22px -22px;
      padding: 16px 22px 18px;
      border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      background:
        linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg-2) 88%, transparent) 20%, var(--bg-2) 100%);
      backdrop-filter: blur(18px);
    }
    .detail-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
    .detail { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; background: var(--card-2); min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
    .detail small { display: inline; color: var(--muted); font-weight: 850; font-size: 11px; margin: 0; }
    .detail span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 12px; max-width: 220px; }
    .modal-gallery { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
    .modal-gallery-title { margin: 18px 0 0; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
    .modal-gallery a { width: 100%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card-2); display: block; transition: transform .18s ease, border-color .18s ease, opacity .18s ease; opacity: .92; }
    .modal-gallery a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); opacity: 1; }
    .modal-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
    .modal-gallery button { width: 100%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card-2); display: block; padding: 0; cursor: zoom-in; transition: transform .18s ease, border-color .18s ease, opacity .18s ease; opacity: .92; }
    .modal-gallery button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); opacity: 1; }
    .image-viewer { position: fixed; inset: 0; z-index: 160; display: none; place-items: center; padding: 24px; background: rgba(0,0,0,.82); backdrop-filter: blur(18px); }
    .image-viewer.active { display: grid; }
    .image-viewer img { max-width: min(96vw, 1400px); max-height: 90vh; object-fit: contain; border-radius: 22px; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
    .image-viewer-close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(15,23,42,.82); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 0; padding: 0; }
    .image-viewer-close::before, .image-viewer-close::after { content: ""; position: absolute; width: 16px; height: 2px; border-radius: 999px; background: currentColor; left: 50%; top: 50%; transform-origin: center; }
    .image-viewer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .image-viewer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
    .code-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 22px; overflow: visible; background: rgba(0,0,0,.24); }
    [data-theme="light"] .code-panel { background: rgba(255,255,255,.72); }
    .code-head { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 12px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .code-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
    .copy-source-btn { width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; position: relative; z-index: 5; transition: color .16s ease, transform .16s ease; }
    .copy-source-btn:hover { color: var(--text); transform: translateY(-1px); }
    .copy-source-btn svg { width: 16px; height: 16px; display: block; }
    .copy-source-btn::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 999; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--bg-1) 92%, black); border: 1px solid var(--line); color: var(--text); font-size: 11px; font-weight: 850; white-space: nowrap; box-shadow: 0 10px 28px rgba(0,0,0,.32); transition: opacity .16s ease, transform .16s ease; }
    .copy-source-btn.copied::after { opacity: 1; transform: translate(-50%, 0); }
    .code-panel { overflow: visible; }
    .code-block { margin: 0; padding: 12px 14px 14px; max-height: 220px; overflow: auto; color: var(--text); font: 11px/1.5 var(--mono); white-space: pre; border-radius: 0 0 22px 22px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8fbfff) transparent; }
    .code-block::-webkit-scrollbar { width: 8px; height: 8px; }
    .code-block::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    .code-block::-webkit-scrollbar-track { background: transparent; }
    .code-block::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 72%, #a9caff); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
    .code-block::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 88%, #dbeafe); background-clip: padding-box; }
    .code-block::-webkit-scrollbar-corner { background: transparent; }
    .drop { border: 1px dashed var(--line-2); border-radius: 24px; padding: 32px 20px; text-align: center; color: var(--muted); background: color-mix(in srgb, var(--card-2) 82%, transparent); margin: 0 0 12px; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
    .drop:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line-2)); }
    .drop.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .status { color: var(--muted); margin-top: 12px; min-height: 22px; }
    footer { padding: 54px 0 28px; color: var(--muted); text-align: center; }
    @media (max-width: 860px) {
      .hero-grid, .grid { grid-template-columns: 1fr; }
      .section-head { align-items: start; flex-direction: column; }
      .nav a { display: none; }
      .formrow, .admin-hero, .upload.active, .detail-grid { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
    }
    [data-theme="light"] .chip.beta,
    [data-theme="light"] .card.beta-card .chip.beta {
      color: #7c2d12 !important;
      border-color: rgba(249, 115, 22, .52) !important;
      background: linear-gradient(135deg, #ffedd5, #fed7aa) !important;
      box-shadow: 0 8px 18px rgba(249, 115, 22, .14) !important;
    }

  


    .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
    .nav-drop-btn { border: 0; background: transparent; color: var(--muted); padding: 8px 7px; font-size: 13px; font-weight: 850; letter-spacing: -.01em; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .18s ease; }
    .nav-drop-btn:hover, .nav-dropdown:focus-within .nav-drop-btn { color: var(--text); }
    .nav-drop-btn svg { width: 13px; height: 13px; transition: transform .18s ease; }
    .nav-dropdown:hover .nav-drop-btn svg, .nav-dropdown:focus-within .nav-drop-btn svg { transform: rotate(180deg); }
    .nav-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 20px 70px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
    .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    .nav-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 11px; border-radius: 13px; color: var(--text); }
    .nav-menu a::after { display: none; }
    .nav-menu a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .nav-menu small { color: var(--muted); font-size: 11px; font-weight: 750; }

    .jb-page { display: none; min-height: 100vh; overflow: hidden; position: relative; }
    .jb-page.active { display: block; }
    .jb-page.active::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 24%, rgba(56,189,248,.16), transparent 30%), radial-gradient(circle at 80% 58%, rgba(59,130,246,.12), transparent 34%), linear-gradient(180deg, #050812, #07101e 48%, #050812); transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.06), 0); }
    .jb-lock { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 42px 18px; }
    .jb-lock-card { width: min(460px, 100%); border: 1px solid var(--line); border-radius: 32px; padding: 28px; background: color-mix(in srgb, var(--bg-2) 78%, transparent); backdrop-filter: blur(24px); box-shadow: var(--shadow); }
    .jb-lock-card h1 { margin: 0; font-size: 42px; letter-spacing: -.06em; line-height: .95; }
    .jb-lock-card p { color: var(--muted); line-height: 1.6; margin: 12px 0 18px; }
    .jb-story { display: none; }
    .jb-story.active { display: block; }
    .jb-hero { min-height: calc(100vh - 68px); position: relative; display: grid; align-items: center; padding: 8vh max(26px, calc((100vw - 1200px) / 2 + 26px)); isolation: isolate; }
    .jb-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,18,.96) 0%, rgba(7,10,18,.72) 42%, rgba(7,10,18,.10) 100%), linear-gradient(180deg, rgba(7,10,18,.58), rgba(7,10,18,.90)); z-index: -1; }
    .jb-hero-bg { position: absolute; inset: -12%; background: url('/assets/jb-blue-map.webp') center / cover no-repeat; opacity: .80; transform: translate3d(0, calc(var(--jbScrollY, 0px) * .20), 0) scale(1.14); z-index: -2; will-change: transform; filter: saturate(1.12) contrast(1.05); }
    .jb-hero-content { max-width: 720px; transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.06), 0); transition: transform .1s linear; }
    .jb-kicker { display: inline-flex; gap: 8px; align-items: center; color: #7dd3fc; font-size: 12px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
    .jb-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
    .jb-title { margin: 18px 0 18px; font-size: clamp(58px, 10vw, 128px); line-height: .82; letter-spacing: -.09em; }
    .jb-title em { font-style: normal; color: #38bdf8; text-shadow: 0 0 38px rgba(56,189,248,.22); }
    .jb-lead { max-width: 660px; margin: 0; color: #b5c6dd; font-size: clamp(17px, 2vw, 22px); line-height: 1.65; }
    .jb-scroll-cue { position: absolute; left: max(26px, calc((100vw - 1200px) / 2 + 26px)); bottom: 32px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .86; }
    .jb-section { min-height: 100vh; position: relative; display: grid; align-items: center; padding: 10vh max(26px, calc((100vw - 1200px) / 2 + 26px)); overflow: hidden; }
    .jb-section::before { content: ""; position: absolute; inset: -14%; background: radial-gradient(circle at var(--mx, 50%) 20%, rgba(34,211,238,.20), transparent 32%), radial-gradient(circle at 85% calc(10% + var(--sectionShift, 0px)), rgba(59,130,246,.12), transparent 34%), linear-gradient(180deg, rgba(7,10,18,.0), rgba(7,10,18,.64)); pointer-events: none; transform: translate3d(0, calc(var(--localY, 0px) * -.04), 0); }
    .jb-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px); background-size: 56px 56px; transform: translate3d(0, calc(var(--localY, 0px) * .08), 0); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); }
    .jb-split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, .86fr) minmax(320px, 1.14fr); gap: clamp(30px, 6vw, 86px); align-items: center; width: min(1180px, 100%); margin: 0 auto; }
    .jb-copy { max-width: 540px; }
    .jb-copy h2 { font-size: clamp(40px, 6vw, 78px); line-height: .88; letter-spacing: -.075em; margin: 0 0 18px; }
    .jb-copy p { color: var(--muted); font-size: 18px; line-height: 1.72; margin: 0 0 24px; }
    .jb-points { display: grid; gap: 12px; margin-top: 24px; }
    .jb-point { display: flex; align-items: flex-start; gap: 12px; color: #dbeafe; font-weight: 850; }
    .jb-point span { margin-top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 24px rgba(56,189,248,.55); flex: 0 0 auto; }
    .jb-visual { position: relative; min-height: 520px; transform: translate3d(0, calc(var(--localY, 0px) * -.045), 0); }
    .jb-visual img { position: absolute; max-width: none; display: block; user-select: none; pointer-events: none; filter: drop-shadow(0 30px 80px rgba(0,0,0,.38)); }
    .jb-visual .main-map { width: min(72vw, 930px); right: -8vw; top: 50%; transform: translateY(-50%) translate3d(calc(var(--localY, 0px) * .025), calc(var(--localY, 0px) * .025), 0) rotate(calc(var(--localY, 0px) * .002deg)); border-radius: 0; mask-image: radial-gradient(circle at 54% 48%, #000 0 46%, rgba(0,0,0,.82) 58%, transparent 78%); opacity: .96; }
    .jb-visual .float-ui { width: min(28vw, 320px); left: -2vw; top: 8%; opacity: .98; border-radius: 26px; transform: translate3d(calc(var(--localY, 0px) * -.035), calc(var(--localY, 0px) * -.08), 0); }
    .jb-flow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(56,189,248,.14), transparent); transform: translateX(-100%); animation: jbSweep 4.8s ease-in-out infinite; }
    @keyframes jbSweep { 0%, 58% { transform: translateX(-110%); opacity: 0; } 68% { opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
    .jb-section.dark { background: linear-gradient(180deg, rgba(7,10,18,.96), rgba(8,16,30,.98)); }
    .jb-section.blue { background: radial-gradient(circle at 80% 24%, rgba(56,189,248,.18), transparent 34%), linear-gradient(180deg, rgba(7,10,18,.98), rgba(6,19,36,.98)); }
    .jb-section.red { background: radial-gradient(circle at 80% 20%, rgba(251,113,133,.18), transparent 34%), linear-gradient(180deg, rgba(7,10,18,.98), rgba(31,10,22,.96)); }
    .jb-fullbleed { min-height: 105vh; position: relative; display: grid; align-items: end; padding: 0; overflow: hidden; background: #050812; }
    .jb-fullbleed img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: saturate(1.08) contrast(1.05); transform: translate3d(0, calc(var(--localY, 0px) * -.08), 0) scale(1.04); opacity: .82; will-change: transform; }
    .jb-fullbleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,10,18,.95), rgba(7,10,18,.42), rgba(7,10,18,.72)), linear-gradient(180deg, rgba(7,10,18,.24), rgba(7,10,18,.94)); }
    .jb-full-copy { position: relative; z-index: 1; width: min(760px, calc(100% - 52px)); margin: 0 0 10vh max(26px, calc((100vw - 1200px) / 2 + 26px)); transform: translate3d(0, calc(var(--localY, 0px) * .035), 0); }
    .jb-full-copy h2 { font-size: clamp(44px, 7vw, 96px); line-height: .88; letter-spacing: -.08em; margin: 0 0 16px; }
    .jb-full-copy p { color: #c6d4e8; font-size: 19px; line-height: 1.68; margin: 0; }
    .jb-feature-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .jb-feature-strip span { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #dbeafe; border-radius: 999px; padding: 10px 13px; font-size: 13px; font-weight: 900; backdrop-filter: blur(12px); }
    .jb-ui-cloud { min-height: 720px; position: relative; overflow: hidden; padding: 8vh max(26px, calc((100vw - 1200px) / 2 + 26px)); background: radial-gradient(circle at 50% 35%, rgba(96,165,250,.18), transparent 36%), linear-gradient(180deg, #07101e, #060a13); }
    .jb-ui-cloud h2 { position: relative; z-index: 2; width: min(720px, 100%); font-size: clamp(42px, 6vw, 84px); line-height: .88; letter-spacing: -.075em; margin: 0; }
    .jb-ui-cloud p { position: relative; z-index: 2; width: min(620px, 100%); margin: 18px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
    .jb-float { position: absolute; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.12); animation: jbFloat 6s ease-in-out infinite; transform: translate3d(0, calc(var(--localY, 0px) * var(--depth, .03)), 0); }
    .jb-float.short { width: 250px; right: 11vw; top: 12vh; animation-delay: -.5s; --depth: -.06; }
    .jb-float.lang { width: 278px; right: 28vw; top: 27vh; animation-delay: -1.4s; --depth: .045; }
    .jb-float.snap { width: 275px; right: 7vw; top: 38vh; animation-delay: -2.1s; --depth: -.035; }
    .jb-float.shapes { width: 294px; right: 31vw; bottom: 14vh; animation-delay: -3.2s; --depth: .055; }
    .jb-float.controls { width: 306px; right: 6vw; bottom: 5vh; animation-delay: -4s; --depth: -.052; }
    @keyframes jbFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(.4deg); } }
    .jb-end { min-height: 78vh; display: grid; align-items: center; padding: 12vh max(26px, calc((100vw - 1200px) / 2 + 26px)); background: linear-gradient(180deg, #060a13, var(--bg)); }
    .jb-end-inner { width: min(900px, 100%); }
    .jb-end h2 { font-size: clamp(44px, 7vw, 92px); line-height: .9; letter-spacing: -.08em; margin: 0 0 18px; }
    .jb-end p { color: var(--muted); font-size: 19px; line-height: 1.7; max-width: 660px; }
    .jb-reveal { opacity: 0; transform: translateY(44px); transition: opacity .7s ease, transform .7s ease; }
    .jb-reveal.visible { opacity: 1; transform: translateY(0); }
    @media (max-width: 900px) {
      .nav-dropdown { display: none; }
      .jb-title { font-size: clamp(50px, 16vw, 80px); }
      .jb-split { grid-template-columns: 1fr; }
      .jb-visual { min-height: 440px; }
      .jb-visual .main-map { width: 115vw; right: -28vw; }
      .jb-visual .float-ui { width: 260px; left: 0; }
      .jb-float.short, .jb-float.lang, .jb-float.snap, .jb-float.shapes, .jb-float.controls { position: relative; inset: auto; width: min(300px, 100%); margin: 18px 0 0; display: block; }
      .jb-ui-cloud { min-height: auto; }
    }


    .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 18px); z-index: 130; min-width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--bg-2) 88%, transparent); color: var(--text); box-shadow: 0 22px 70px rgba(0,0,0,.34); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; backdrop-filter: blur(18px); font-weight: 850; }
    .toast.active { opacity: 1; transform: translate(-50%, 0); }
    .private-password-backdrop { position: fixed; inset: 0; z-index: 125; display: none; place-items: center; padding: 22px; background: rgba(0,0,0,.56); backdrop-filter: blur(16px); }
    .private-password-backdrop.active { display: grid; }
    .private-password-card { width: min(440px, 100%); border: 1px solid var(--line); border-radius: 26px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); box-shadow: 0 36px 110px rgba(0,0,0,.48); padding: 22px; }
    .private-password-card h3 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.04em; }
    .private-password-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
    .private-password-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
    .chip.private { border-color: color-mix(in srgb, #a78bfa 60%, var(--line)); color: color-mix(in srgb, #a78bfa 78%, var(--text)); background: color-mix(in srgb, #a78bfa 13%, var(--card-2)); }



    /* JB Explore polish: seamless sections, stronger parallax, light theme support */
    html, body { overflow-x: hidden; }
    .jb-page.active {
      background:
        radial-gradient(circle at 12% 18%, rgba(56,189,248,.14), transparent 28%),
        radial-gradient(circle at 86% 42%, rgba(59,130,246,.11), transparent 34%),
        linear-gradient(180deg, #050812 0%, #071120 38%, #050812 100%);
      color: #eef6ff;
    }
    .jb-page.active::before {
      inset: -26%;
      background:
        radial-gradient(circle at 20% calc(18% + var(--jbScrollY, 0px) * .015), rgba(56,189,248,.18), transparent 30%),
        radial-gradient(circle at 78% calc(68% - var(--jbScrollY, 0px) * .012), rgba(14,165,233,.14), transparent 34%),
        linear-gradient(180deg, rgba(5,8,18,.72), rgba(7,17,32,.88));
      opacity: 1;
      transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.09), 0) scale(1.05);
    }
    .jb-story.active {
      display: block;
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(5,8,18,.02), rgba(5,8,18,.18) 20%, rgba(7,17,32,.22) 48%, rgba(5,8,18,.08));
    }
    .jb-story.active::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: .35;
      background-image:
        linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px);
      background-size: 64px 64px;
      transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.035), 0);
      mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
    }
    .jb-hero, .jb-section, .jb-fullbleed, .jb-ui-cloud, .jb-end {
      background: transparent !important;
      overflow: hidden;
    }
    .jb-hero::after,
    .jb-section::before,
    .jb-ui-cloud::before,
    .jb-end::before {
      content: "";
      position: absolute;
      inset: -18%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at var(--mx, 50%) 24%, rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 78% calc(45% + var(--sectionShift, 0px)), rgba(59,130,246,.12), transparent 38%);
      transform: translate3d(0, calc(var(--localY, 0px) * -.07), 0);
      opacity: .85;
    }
    .jb-hero > *, .jb-section > *, .jb-ui-cloud > *, .jb-end > * { position: relative; z-index: 1; }
    .jb-section::after {
      opacity: .13;
      mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
    }
    .jb-hero::before {
      background:
        linear-gradient(90deg, rgba(5,8,18,.98) 0%, rgba(5,8,18,.78) 42%, rgba(5,8,18,.22) 100%),
        linear-gradient(180deg, rgba(5,8,18,.60), rgba(5,8,18,.10) 48%, rgba(5,8,18,.86));
      z-index: 0;
    }
    .jb-hero-bg {
      inset: -18%;
      opacity: .72;
      transform: translate3d(0, calc(var(--jbScrollY, 0px) * .26), 0) scale(1.18);
      filter: saturate(1.08) contrast(1.04) brightness(.88);
      mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }
    .jb-hero-content { transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.085), 0); }
    .jb-split { gap: clamp(36px, 7vw, 104px); }
    .jb-visual { min-height: 620px; }
    .jb-visual .main-map {
      width: min(78vw, 1020px);
      right: -12vw;
      opacity: .92;
      filter: saturate(1.05) contrast(1.03) brightness(.92) drop-shadow(0 38px 110px rgba(0,0,0,.35));
      mask-image: radial-gradient(ellipse at 54% 50%, #000 0 42%, rgba(0,0,0,.88) 58%, transparent 82%);
      transform: translateY(-50%) translate3d(calc(var(--localY, 0px) * .045), calc(var(--localY, 0px) * .035), 0) rotate(calc(var(--localY, 0px) * .003deg));
    }
    .jb-visual .float-ui {
      width: min(31vw, 350px);
      left: -1vw;
      top: 6%;
      filter: drop-shadow(0 36px 90px rgba(0,0,0,.42));
      transform: translate3d(calc(var(--localY, 0px) * -.055), calc(var(--localY, 0px) * -.105), 0) rotate(calc(var(--localY, 0px) * -.002deg));
    }
    .jb-fullbleed {
      min-height: 108vh;
      align-items: center;
    }
    .jb-fullbleed img {
      inset: -10%;
      width: 120%;
      height: 120%;
      opacity: .58;
      filter: saturate(1.08) contrast(1.03) brightness(.82) blur(.2px);
      transform: translate3d(0, calc(var(--localY, 0px) * -.14), 0) scale(1.08);
      mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
    }
    .jb-fullbleed::after {
      background:
        radial-gradient(circle at 78% 42%, rgba(244,63,94,.22), transparent 32%),
        linear-gradient(90deg, rgba(5,8,18,.98), rgba(5,8,18,.42), rgba(5,8,18,.76)),
        linear-gradient(180deg, rgba(5,8,18,.92), rgba(5,8,18,.18) 42%, rgba(5,8,18,.92));
    }
    .jb-full-copy { margin: 0 0 0 max(26px, calc((100vw - 1200px) / 2 + 26px)); }
    .jb-ui-cloud {
      min-height: 960px;
      padding-top: 13vh;
      padding-bottom: 14vh;
    }
    .jb-ui-cloud h2, .jb-ui-cloud p { max-width: 520px; }
    .jb-float {
      border: 0;
      border-radius: 22px;
      box-shadow: 0 38px 110px rgba(0,0,0,.34);
      background: transparent;
      animation-duration: 7.5s;
      will-change: transform;
    }
    .jb-float.short { width: 360px; right: 11vw; top: 12vh; --depth: -.105; }
    .jb-float.lang { width: 390px; right: 36vw; top: 32vh; --depth: .085; }
    .jb-float.snap { width: 390px; right: 8vw; top: 33vh; --depth: -.075; }
    .jb-float.shapes { width: 430px; right: 38vw; bottom: 18vh; --depth: .10; }
    .jb-float.controls { width: 450px; right: 7vw; bottom: 9vh; --depth: -.095; }
    .jb-end { min-height: 86vh; }
    .jb-end::before { opacity: .65; }

    html[data-theme="light"] .jb-page.active {
      color: #0f172a;
      background:
        radial-gradient(circle at 12% 18%, rgba(14,165,233,.16), transparent 28%),
        radial-gradient(circle at 86% 42%, rgba(59,130,246,.10), transparent 34%),
        linear-gradient(180deg, #f7fbff 0%, #edf7ff 42%, #f8fbff 100%);
    }
    html[data-theme="light"] .jb-page.active::before {
      background:
        radial-gradient(circle at 20% calc(18% + var(--jbScrollY, 0px) * .015), rgba(14,165,233,.16), transparent 30%),
        radial-gradient(circle at 78% calc(68% - var(--jbScrollY, 0px) * .012), rgba(59,130,246,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(231,244,255,.80));
    }
    html[data-theme="light"] .jb-story.active { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(241,248,255,.38)); }
    html[data-theme="light"] .jb-story.active::before { opacity: .55; background-image: linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px); }
    html[data-theme="light"] .jb-hero::before {
      background:
        linear-gradient(90deg, rgba(247,251,255,.96) 0%, rgba(247,251,255,.78) 43%, rgba(247,251,255,.30) 100%),
        linear-gradient(180deg, rgba(247,251,255,.70), rgba(247,251,255,.12) 48%, rgba(247,251,255,.86));
    }
    html[data-theme="light"] .jb-hero-bg { filter: saturate(1.02) contrast(1.01) brightness(1.04); opacity: .58; }
    html[data-theme="light"] .jb-title, html[data-theme="light"] .jb-copy h2, html[data-theme="light"] .jb-full-copy h2, html[data-theme="light"] .jb-ui-cloud h2, html[data-theme="light"] .jb-end h2 { color: #0f172a; }
    html[data-theme="light"] .jb-lead, html[data-theme="light"] .jb-copy p, html[data-theme="light"] .jb-ui-cloud p, html[data-theme="light"] .jb-end p { color: #475569; }
    html[data-theme="light"] .jb-title em { color: #0284c7; text-shadow: none; }
    html[data-theme="light"] .jb-point { color: #1e293b; }
    html[data-theme="light"] .jb-fullbleed::after {
      background:
        radial-gradient(circle at 78% 42%, rgba(244,63,94,.12), transparent 32%),
        linear-gradient(90deg, rgba(247,251,255,.94), rgba(247,251,255,.46), rgba(247,251,255,.82)),
        linear-gradient(180deg, rgba(247,251,255,.94), rgba(247,251,255,.30) 42%, rgba(247,251,255,.94));
    }
    html[data-theme="light"] .jb-feature-strip span { border-color: rgba(2,132,199,.18); background: rgba(255,255,255,.58); color: #1e293b; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
    html[data-theme="light"] .jb-float { box-shadow: 0 34px 90px rgba(15,23,42,.14); }

    @media (max-width: 980px) {
      .jb-ui-cloud { min-height: auto; }
      .jb-ui-cloud h2, .jb-ui-cloud p { max-width: 100%; }
      .jb-float.short, .jb-float.lang, .jb-float.snap, .jb-float.shapes, .jb-float.controls { position: relative; inset: auto; width: min(460px, 100%); margin: 18px 0 0; display: block; }
    }


    /* JB Explore: one continuous page background, no background-image cuts */
    .jb-page.active {
      background: #061020 !important;
      color: #eef6ff;
    }
    .jb-page.active::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 16% calc(18% + var(--jbScrollY, 0px) * .018), rgba(56,189,248,.16), transparent 32%),
        radial-gradient(circle at 82% calc(52% - var(--jbScrollY, 0px) * .012), rgba(37,99,235,.13), transparent 38%),
        linear-gradient(135deg, #050812 0%, #071425 46%, #06101f 100%);
      transform: none;
      opacity: 1;
    }
    .jb-page.active::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
      background-size: 64px 64px;
      transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.025), 0);
      opacity: .8;
      mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    }
    .jb-story.active,
    .jb-hero,
    .jb-section,
    .jb-section.dark,
    .jb-section.blue,
    .jb-section.red,
    .jb-fullbleed,
    .jb-ui-cloud,
    .jb-end {
      background: transparent !important;
    }
    .jb-story.active::before,
    .jb-hero-bg {
      display: none !important;
    }
    .jb-hero::before,
    .jb-hero::after,
    .jb-section::before,
    .jb-section::after,
    .jb-ui-cloud::before,
    .jb-end::before {
      background: none !important;
      opacity: 0 !important;
    }
    .jb-hero, .jb-section, .jb-fullbleed, .jb-ui-cloud, .jb-end {
      position: relative;
      isolation: isolate;
    }
    .jb-hero::after, .jb-section::after, .jb-fullbleed::before, .jb-ui-cloud::after, .jb-end::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 76% 30%, rgba(56,189,248,.08), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.018) 48%, transparent 100%);
      opacity: .7;
    }
    .jb-hero > *, .jb-section > *, .jb-fullbleed > *, .jb-ui-cloud > *, .jb-end > * {
      position: relative;
      z-index: 1;
    }
    .jb-fullbleed {
      padding: 10vh max(26px, calc((100vw - 1200px) / 2 + 26px));
      align-items: center;
      min-height: 100vh;
    }
    .jb-fullbleed img {
      position: absolute;
      inset: auto -8vw auto auto;
      top: 50%;
      width: min(78vw, 980px);
      height: auto;
      object-fit: contain;
      opacity: .55;
      filter: saturate(1.05) contrast(1.03) brightness(.84);
      transform: translate3d(0, calc(-50% + var(--localY, 0px) * -.09), 0) scale(1.02);
      mask-image: radial-gradient(ellipse at 55% 50%, #000 0 48%, rgba(0,0,0,.72) 62%, transparent 82%);
    }
    .jb-fullbleed::after {
      background:
        radial-gradient(circle at 78% 44%, rgba(244,63,94,.12), transparent 34%),
        linear-gradient(90deg, rgba(6,16,32,.92), rgba(6,16,32,.30), rgba(6,16,32,.64)) !important;
      opacity: 1 !important;
    }
    html[data-theme="light"] .jb-page.active {
      background: #f7fbff !important;
      color: #0f172a;
    }
    html[data-theme="light"] .jb-page.active::before {
      background:
        radial-gradient(circle at 16% calc(18% + var(--jbScrollY, 0px) * .018), rgba(14,165,233,.14), transparent 32%),
        radial-gradient(circle at 82% calc(52% - var(--jbScrollY, 0px) * .012), rgba(59,130,246,.10), transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #edf7ff 46%, #f8fbff 100%);
    }
    html[data-theme="light"] .jb-page.active::after {
      background-image:
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
    }
    html[data-theme="light"] .jb-hero::after,
    html[data-theme="light"] .jb-section::after,
    html[data-theme="light"] .jb-ui-cloud::after,
    html[data-theme="light"] .jb-end::after {
      background:
        radial-gradient(circle at 76% 30%, rgba(14,165,233,.07), transparent 34%),
        linear-gradient(180deg, transparent 0%, rgba(15,23,42,.025) 48%, transparent 100%);
    }
    html[data-theme="light"] .jb-fullbleed::after {
      background:
        radial-gradient(circle at 78% 44%, rgba(244,63,94,.10), transparent 34%),
        linear-gradient(90deg, rgba(247,251,255,.94), rgba(247,251,255,.36), rgba(247,251,255,.78)) !important;
    }


    /* JB Explore final seamless background + text parallax */
    .jb-page.active {
      background: transparent !important;
      color: #eef6ff;
    }
    .jb-page.active::before {
      content: "" !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: -3 !important;
      pointer-events: none !important;
      background:
        radial-gradient(circle at 20% calc(14% + var(--jbScrollY, 0px) * .012), rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 86% calc(58% - var(--jbScrollY, 0px) * .010), rgba(14,116,144,.22), transparent 38%),
        linear-gradient(135deg, #050812 0%, #07172a 42%, #07313a 100%) !important;
      opacity: 1 !important;
      transform: none !important;
      display: block !important;
    }
    .jb-page.active::after {
      content: "" !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: -2 !important;
      pointer-events: none !important;
      background-image:
        linear-gradient(rgba(148,163,184,.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.052) 1px, transparent 1px) !important;
      background-size: 58px 58px !important;
      background-position: 0 calc(var(--jbScrollY, 0px) * -.035), calc(var(--jbScrollY, 0px) * -.025) 0 !important;
      opacity: .92 !important;
      mask-image: none !important;
      transform: none !important;
      display: block !important;
    }
    .jb-story.active,
    .jb-hero,
    .jb-section,
    .jb-section.dark,
    .jb-section.blue,
    .jb-section.red,
    .jb-fullbleed,
    .jb-ui-cloud,
    .jb-end {
      background: transparent !important;
      background-color: transparent !important;
    }
    .jb-story.active::before,
    .jb-hero::before,
    .jb-hero::after,
    .jb-section::before,
    .jb-section::after,
    .jb-ui-cloud::before,
    .jb-ui-cloud::after,
    .jb-end::before,
    .jb-end::after {
      display: none !important;
      content: none !important;
      background: transparent !important;
      opacity: 0 !important;
    }
    .jb-hero, .jb-section, .jb-fullbleed, .jb-ui-cloud, .jb-end {
      margin: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    .jb-copy,
    .jb-full-copy,
    .jb-ui-cloud h2,
    .jb-ui-cloud p,
    .jb-end-inner {
      will-change: transform;
      transition: transform .08s linear;
    }
    .jb-copy { transform: translate3d(0, calc(var(--textShift, 0px) * .18), 0); }
    .jb-full-copy { transform: translate3d(0, calc(var(--textShift, 0px) * -.14), 0); }
    .jb-ui-cloud h2 { transform: translate3d(0, calc(var(--textShift, 0px) * .16), 0); }
    .jb-ui-cloud p { transform: translate3d(0, calc(var(--textShift, 0px) * .10), 0); }
    .jb-end-inner { transform: translate3d(0, calc(var(--textShift, 0px) * -.10), 0); }
    html[data-theme="light"] .jb-page.active {
      background: transparent !important;
      color: #0f172a;
    }
    html[data-theme="light"] .jb-page.active::before {
      background:
        radial-gradient(circle at 20% calc(14% + var(--jbScrollY, 0px) * .012), rgba(14,165,233,.18), transparent 34%),
        radial-gradient(circle at 86% calc(58% - var(--jbScrollY, 0px) * .010), rgba(125,211,252,.20), transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #edf8ff 46%, #e8f7fb 100%) !important;
    }
    html[data-theme="light"] .jb-page.active::after {
      background-image:
        linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px) !important;
      opacity: .72 !important;
    }


    /* Explore page motion polish: load typography + scroll-triggered animation */
    @keyframes jbTitleIn {
      0% { opacity: 0; transform: translate3d(0, 46px, 0) scale(.975); filter: blur(18px); letter-spacing: -.12em; }
      55% { opacity: 1; filter: blur(3px); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); letter-spacing: -.09em; }
    }
    @keyframes jbSoftIn {
      0% { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(12px); }
      100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
    }
    @keyframes jbCuePulse {
      0%, 100% { opacity: .45; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(8px); }
    }
    .jb-page.active .jb-kicker { opacity: 0; animation: jbSoftIn .7s cubic-bezier(.2,.8,.2,1) .12s both; }
    .jb-page.active .jb-title { opacity: 0; animation: jbTitleIn 1s cubic-bezier(.16,1,.3,1) .24s both; }
    .jb-page.active .jb-lead { opacity: 0; animation: jbSoftIn .85s cubic-bezier(.2,.8,.2,1) .48s both; }
    .jb-page.active .jb-scroll-cue { animation: jbSoftIn .8s cubic-bezier(.2,.8,.2,1) .8s both, jbCuePulse 2.2s ease-in-out 1.4s infinite; }

    .jb-reveal {
      opacity: 0 !important;
      transform: translate3d(0, 72px, 0) scale(.965) !important;
      filter: blur(14px);
      transition:
        opacity .9s cubic-bezier(.2,.8,.2,1),
        transform .9s cubic-bezier(.2,.8,.2,1),
        filter .9s cubic-bezier(.2,.8,.2,1) !important;
    }
    .jb-reveal.visible {
      opacity: 1 !important;
      transform: translate3d(0, calc(var(--textShift, 0px) * .08), 0) scale(1) !important;
      filter: blur(0);
    }
    .jb-split.visible .jb-point,
    .jb-full-copy.visible .jb-feature-strip span,
    .jb-end-inner.visible .jb-feature-strip span {
      animation: jbSoftIn .7s cubic-bezier(.2,.8,.2,1) both;
    }
    .jb-split.visible .jb-point:nth-child(1) { animation-delay: .08s; }
    .jb-split.visible .jb-point:nth-child(2) { animation-delay: .18s; }
    .jb-split.visible .jb-point:nth-child(3) { animation-delay: .28s; }
    .jb-full-copy.visible .jb-feature-strip span:nth-child(1),
    .jb-end-inner.visible .jb-feature-strip span:nth-child(1) { animation-delay: .08s; }
    .jb-full-copy.visible .jb-feature-strip span:nth-child(2),
    .jb-end-inner.visible .jb-feature-strip span:nth-child(2) { animation-delay: .16s; }
    .jb-full-copy.visible .jb-feature-strip span:nth-child(3),
    .jb-end-inner.visible .jb-feature-strip span:nth-child(3) { animation-delay: .24s; }
    .jb-full-copy.visible .jb-feature-strip span:nth-child(4),
    .jb-end-inner.visible .jb-feature-strip span:nth-child(4) { animation-delay: .32s; }
    .jb-end-inner.visible .jb-feature-strip span:nth-child(5) { animation-delay: .40s; }

    .jb-visual .main-map,
    .jb-visual .float-ui,
    .jb-fullbleed > img,
    .jb-float {
      transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .75s ease, filter .75s ease;
    }
    .jb-section:has(.jb-split.visible) .main-map,
    .jb-section:has(.jb-split.visible) .float-ui,
    .jb-fullbleed:has(.jb-full-copy.visible) > img,
    .jb-ui-cloud:has(.jb-reveal.visible) .jb-float {
      opacity: 1;
      filter: blur(0);
    }
    .jb-visual .main-map { transform: translate3d(0, 34px, 0) scale(.96); opacity: .55; filter: blur(8px); }
    .jb-section:has(.jb-split.visible) .main-map { transform: translate3d(0, calc(var(--localY, 0px) * -.035), 0) scale(1); }
    .jb-visual .float-ui { transform: translate3d(0, 54px, 0) rotate(-2deg) scale(.96); opacity: .45; filter: blur(8px); }
    .jb-section:has(.jb-split.visible) .float-ui { transform: translate3d(0, calc(var(--localY, 0px) * -.075), 0) rotate(0deg) scale(1); }
    .jb-fullbleed > img { transform: translate3d(0, 50px, 0) scale(1.04); opacity: .5; filter: blur(10px) saturate(.95); }
    .jb-fullbleed:has(.jb-full-copy.visible) > img { transform: translate3d(0, calc(var(--localY, 0px) * -.055), 0) scale(1.01); opacity: .95; filter: blur(0) saturate(1.02); }
    .jb-float { opacity: .58; filter: blur(7px); transform: translate3d(0, 45px, 0) scale(.97); }
    .jb-ui-cloud:has(.jb-reveal.visible) .jb-float { opacity: .96; transform: translate3d(0, calc(var(--localY, 0px) * -.045), 0) scale(1); }

    @media (prefers-reduced-motion: reduce) {
      .jb-page.active .jb-kicker,
      .jb-page.active .jb-title,
      .jb-page.active .jb-lead,
      .jb-page.active .jb-scroll-cue,
      .jb-reveal,
      .jb-reveal.visible,
      .jb-split.visible .jb-point,
      .jb-full-copy.visible .jb-feature-strip span,
      .jb-end-inner.visible .jb-feature-strip span {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
    }

  

    /* JB Explore background cleanup: one seamless boxed/grid background, no black cutouts */
    .jb-page.active {
      background:
        radial-gradient(circle at 18% 12%, rgba(56,189,248,.16), transparent 32%),
        radial-gradient(circle at 88% 34%, rgba(14,165,233,.14), transparent 36%),
        linear-gradient(135deg, #081527 0%, #0b2035 45%, #073c46 100%) !important;
      color: #eef6ff;
    }

    .jb-page.active::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .55;
      background-image:
        linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
      background-size: 64px 64px;
      transform: translate3d(0, calc(var(--jbScrollY, 0px) * -.025), 0);
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }

    .jb-story.active,
    .jb-hero,
    .jb-section,
    .jb-section.dark,
    .jb-section.blue,
    .jb-section.red,
    .jb-fullbleed,
    .jb-ui-cloud,
    .jb-end {
      background: transparent !important;
      background-color: transparent !important;
    }

    .jb-story.active::before,
    .jb-hero::after,
    .jb-section::before,
    .jb-section::after,
    .jb-ui-cloud::before,
    .jb-end::before {
      background: transparent !important;
      opacity: 0 !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }

    .jb-hero::before {
      background:
        linear-gradient(90deg, rgba(8,21,39,.88) 0%, rgba(8,21,39,.58) 43%, rgba(8,21,39,.08) 100%),
        linear-gradient(180deg, rgba(8,21,39,.18), rgba(8,21,39,.08)) !important;
    }

    .jb-fullbleed::after {
      background:
        linear-gradient(90deg, rgba(8,21,39,.72), rgba(8,21,39,.16), rgba(8,21,39,.48)),
        linear-gradient(180deg, rgba(8,21,39,.18), rgba(8,21,39,.08), rgba(8,21,39,.18)) !important;
    }

    .jb-fullbleed img {
      opacity: .78 !important;
      mask-image: radial-gradient(ellipse at 58% 50%, #000 0 58%, rgba(0,0,0,.72) 72%, transparent 94%) !important;
      -webkit-mask-image: radial-gradient(ellipse at 58% 50%, #000 0 58%, rgba(0,0,0,.72) 72%, transparent 94%) !important;
    }

    html[data-theme="light"] .jb-page.active {
      background:
        radial-gradient(circle at 18% 12%, rgba(14,165,233,.14), transparent 32%),
        radial-gradient(circle at 88% 34%, rgba(59,130,246,.10), transparent 36%),
        linear-gradient(135deg, #f7fbff 0%, #edf7ff 48%, #e7fbff 100%) !important;
      color: #0f172a;
    }

    html[data-theme="light"] .jb-page.active::before {
      opacity: .72;
      background-image:
        linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px);
    }

    html[data-theme="light"] .jb-story.active,
    html[data-theme="light"] .jb-hero,
    html[data-theme="light"] .jb-section,
    html[data-theme="light"] .jb-fullbleed,
    html[data-theme="light"] .jb-ui-cloud,
    html[data-theme="light"] .jb-end {
      background: transparent !important;
      background-color: transparent !important;
    }

    html[data-theme="light"] .jb-hero::before {
      background:
        linear-gradient(90deg, rgba(247,251,255,.90) 0%, rgba(247,251,255,.62) 43%, rgba(247,251,255,.12) 100%),
        linear-gradient(180deg, rgba(247,251,255,.18), rgba(247,251,255,.08)) !important;
    }

    html[data-theme="light"] .jb-fullbleed::after {
      background:
        linear-gradient(90deg, rgba(247,251,255,.76), rgba(247,251,255,.18), rgba(247,251,255,.52)),
        linear-gradient(180deg, rgba(247,251,255,.18), rgba(247,251,255,.06), rgba(247,251,255,.18)) !important;
    }


    /* JB Explore: final seamless background cleanup
       The section-level dark overlays were creating visible dark bands/cuts while scrolling. */
    .jb-story.active {
      background:
        radial-gradient(circle at 18% calc(14% + var(--jbScrollY, 0px) * .012), rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 86% calc(58% - var(--jbScrollY, 0px) * .010), rgba(14,116,144,.22), transparent 38%),
        linear-gradient(135deg, #081527 0%, #0b2035 45%, #073c46 100%) !important;
    }

    .jb-story.active::before {
      opacity: 1 !important;
      background-image:
        linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px) !important;
      background-size: 64px 64px !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }

    .jb-hero,
    .jb-section,
    .jb-section.dark,
    .jb-section.blue,
    .jb-section.red,
    .jb-fullbleed,
    .jb-ui-cloud,
    .jb-end {
      background: transparent !important;
      background-color: transparent !important;
    }

    .jb-hero::before,
    .jb-section::before,
    .jb-section.dark::before,
    .jb-section.blue::before,
    .jb-section.red::before {
      background:
        radial-gradient(circle at var(--mx, 50%) 24%, rgba(56,189,248,.14), transparent 34%),
        radial-gradient(circle at 78% calc(45% + var(--sectionShift, 0px)), rgba(59,130,246,.08), transparent 38%) !important;
      opacity: .72 !important;
    }

    .jb-section::after,
    .jb-section.dark::after,
    .jb-section.blue::after,
    .jb-section.red::after,
    .jb-ui-cloud::after,
    .jb-end::after {
      background: none !important;
      background-image: none !important;
      opacity: 0 !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }

    .jb-fullbleed::after {
      background:
        linear-gradient(90deg, rgba(8,21,39,.64) 0%, rgba(8,21,39,.16) 48%, rgba(8,21,39,.46) 100%) !important;
      opacity: 1 !important;
    }

    html[data-theme="light"] .jb-story.active {
      background:
        radial-gradient(circle at 18% calc(14% + var(--jbScrollY, 0px) * .012), rgba(14,165,233,.16), transparent 34%),
        radial-gradient(circle at 86% calc(58% - var(--jbScrollY, 0px) * .010), rgba(125,211,252,.18), transparent 38%),
        linear-gradient(135deg, #f7fbff 0%, #edf8ff 46%, #e8f7fb 100%) !important;
    }

    html[data-theme="light"] .jb-story.active::before {
      opacity: 1 !important;
      background-image:
        linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px) !important;
      background-size: 64px 64px !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
    }

    html[data-theme="light"] .jb-hero::before,
    html[data-theme="light"] .jb-section::before,
    html[data-theme="light"] .jb-section.dark::before,
    html[data-theme="light"] .jb-section.blue::before,
    html[data-theme="light"] .jb-section.red::before {
      background:
        radial-gradient(circle at var(--mx, 50%) 24%, rgba(14,165,233,.12), transparent 34%),
        radial-gradient(circle at 78% calc(45% + var(--sectionShift, 0px)), rgba(59,130,246,.08), transparent 38%) !important;
      opacity: .72 !important;
    }

    html[data-theme="light"] .jb-fullbleed::after {
      background:
        linear-gradient(90deg, rgba(247,251,255,.70) 0%, rgba(247,251,255,.18) 48%, rgba(247,251,255,.52) 100%) !important;
    }

    .jb-fullbleed::after {
      background: none !important;
    }
  
    /* Keep the warning copy anchored to the left side instead of drifting toward the center. */
    .jb-fullbleed .jb-full-copy {
      margin-left: clamp(28px, 6vw, 112px) !important;
      margin-right: auto !important;
      width: min(680px, calc(100% - 56px)) !important;
      justify-self: start !important;
    }

    @media (max-width: 820px) {
      .jb-fullbleed .jb-full-copy {
        margin-left: 24px !important;
        width: calc(100% - 48px) !important;
      }
    }


    .jb-patch-notes {
      min-height: 92vh;
      position: relative;
      display: grid;
      align-items: center;
      padding: 12vh max(26px, calc((100vw - 1200px) / 2 + 26px));
      overflow: hidden;
      background: transparent !important;
      isolation: isolate;
    }
    .jb-patch-notes::before,
    .jb-patch-notes::after { content: none !important; }
    .jb-patch-inner {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(280px, .82fr) minmax(340px, 1.18fr);
      gap: clamp(34px, 7vw, 96px);
      align-items: start;
      transform: translate3d(0, calc(var(--textShift, 0px) * .12), 0);
      will-change: transform;
    }
    .jb-patch-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: #7dd3fc;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .jb-patch-eyebrow::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #38bdf8;
      box-shadow: 0 0 28px rgba(56,189,248,.55);
    }
    .jb-patch-title {
      margin: 0;
      font-size: clamp(46px, 7vw, 96px);
      line-height: .88;
      letter-spacing: -.08em;
    }
    .jb-patch-title span { color: #38bdf8; }
    .jb-patch-lead {
      margin: 20px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.72;
      max-width: 520px;
    }
    .jb-patch-version {
      display: inline-flex;
      margin-top: 28px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(56,189,248,.30);
      background: rgba(56,189,248,.10);
      color: #dbeafe;
      font-size: 13px;
      font-weight: 950;
      backdrop-filter: blur(14px);
    }
    .jb-patch-list {
      display: grid;
      gap: 18px;
      perspective: 1200px;
    }
    .jb-patch-card {
      position: relative;
      border-left: 3px solid var(--patch-color, #38bdf8);
      padding: 20px 0 20px 24px;
      transform: translate3d(calc(var(--localY, 0px) * var(--patchDepth, .01)), calc(var(--textShift, 0px) * -.08), 0);
      will-change: transform;
    }
    .jb-patch-card::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 25px;
      width: 13px;
      height: 13px;
      border-radius: 999px;
      background: var(--patch-color, #38bdf8);
      box-shadow: 0 0 30px color-mix(in srgb, var(--patch-color, #38bdf8) 55%, transparent);
    }
    .jb-patch-card.added { --patch-color: #38bdf8; --patchDepth: -.012; }
    .jb-patch-card.fixed { --patch-color: #22c55e; --patchDepth: .010; }
    .jb-patch-card.issue { --patch-color: #fb7185; --patchDepth: -.008; }
    .jb-patch-card h3 {
      margin: 0 0 12px;
      font-size: 22px;
      letter-spacing: -.035em;
    }
    .jb-patch-card ul {
      list-style: none;
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      color: #d4e3f7;
      line-height: 1.55;
      font-weight: 750;
    }
    .jb-patch-card li {
      position: relative;
      padding-left: 22px;
    }
    .jb-patch-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--patch-color, #38bdf8);
      transform: translateY(-50%);
    }
    html[data-theme="light"] .jb-patch-eyebrow { color: #0284c7; }
    html[data-theme="light"] .jb-patch-title { color: #0f172a; }
    html[data-theme="light"] .jb-patch-lead { color: #475569; }
    html[data-theme="light"] .jb-patch-version { color: #075985; border-color: rgba(2,132,199,.22); background: rgba(255,255,255,.58); }
    html[data-theme="light"] .jb-patch-card ul { color: #334155; }

    .jb-patch-inner .jb-patch-eyebrow,
    .jb-patch-inner .jb-patch-title,
    .jb-patch-inner .jb-patch-lead,
    .jb-patch-inner .jb-patch-version {
      opacity: 0;
      filter: blur(12px);
      transform: translate3d(-34px, 22px, 0) scale(.985);
      transition:
        opacity .85s cubic-bezier(.2,.8,.2,1),
        filter .85s cubic-bezier(.2,.8,.2,1),
        transform .85s cubic-bezier(.2,.8,.2,1);
      will-change: transform, opacity, filter;
    }
    .jb-patch-inner.visible .jb-patch-eyebrow,
    .jb-patch-inner.visible .jb-patch-title,
    .jb-patch-inner.visible .jb-patch-lead,
    .jb-patch-inner.visible .jb-patch-version {
      opacity: 1;
      filter: blur(0);
      transform: translate3d(0, 0, 0) scale(1);
    }
    .jb-patch-inner.visible .jb-patch-title { transition-delay: .08s; }
    .jb-patch-inner.visible .jb-patch-lead { transition-delay: .16s; }
    .jb-patch-inner.visible .jb-patch-version { transition-delay: .24s; }

    .jb-patch-card {
      border-left: 0 !important;
      opacity: 0;
      filter: blur(12px);
      transform:
        translate3d(calc(34px + (var(--localY, 0px) * var(--patchDepth, .01))), calc(28px + (var(--textShift, 0px) * -.08)), 0)
        rotateX(5deg);
      transition:
        opacity .8s cubic-bezier(.2,.8,.2,1),
        filter .8s cubic-bezier(.2,.8,.2,1),
        transform .8s cubic-bezier(.2,.8,.2,1);
      transition-delay: var(--patchDelay, 0s);
      transform-origin: left center;
    }
    .jb-patch-inner.visible .jb-patch-card {
      opacity: 1;
      filter: blur(0);
      transform:
        translate3d(calc(var(--localY, 0px) * var(--patchDepth, .01)), calc(var(--textShift, 0px) * -.08), 0)
        rotateX(0deg);
    }
    .jb-patch-card::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--patch-color, #38bdf8), color-mix(in srgb, var(--patch-color, #38bdf8) 36%, transparent));
      transform-origin: top;
      transform: scaleY(0);
      opacity: .98;
      transition: transform 1.05s cubic-bezier(.18,.88,.22,1);
      transition-delay: calc(var(--patchDelay, 0s) + .12s);
    }
    .jb-patch-inner.visible .jb-patch-card::after { transform: scaleY(1); }
    .jb-patch-card::before {
      transform: translateY(-50%) scale(.55);
      opacity: 0;
      transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.2,.8,.2,1),
        box-shadow .55s ease;
      transition-delay: calc(var(--patchDelay, 0s) + .42s);
      z-index: 1;
    }
    .jb-patch-inner.visible .jb-patch-card::before {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
    .jb-patch-card h3,
    .jb-patch-card li {
      opacity: 0;
      transform: translate3d(18px, 0, 0);
      transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2,.8,.2,1);
    }
    .jb-patch-inner.visible .jb-patch-card h3,
    .jb-patch-inner.visible .jb-patch-card li {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    .jb-patch-inner.visible .jb-patch-card h3 { transition-delay: calc(var(--patchDelay, 0s) + .26s); }
    .jb-patch-inner.visible .jb-patch-card li:nth-child(1) { transition-delay: calc(var(--patchDelay, 0s) + .38s); }
    .jb-patch-inner.visible .jb-patch-card li:nth-child(2) { transition-delay: calc(var(--patchDelay, 0s) + .50s); }
    .jb-patch-card.added { --patchDelay: .02s; }
    .jb-patch-card.fixed { --patchDelay: .18s; }
    .jb-patch-card.issue { --patchDelay: .34s; }

    @media (prefers-reduced-motion: reduce) {
      .jb-patch-inner .jb-patch-eyebrow,
      .jb-patch-inner .jb-patch-title,
      .jb-patch-inner .jb-patch-lead,
      .jb-patch-inner .jb-patch-version,
      .jb-patch-card,
      .jb-patch-card h3,
      .jb-patch-card li,
      .jb-patch-card::before,
      .jb-patch-card::after {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
      }
    }
    @media (max-width: 900px) {
      .jb-patch-inner { grid-template-columns: 1fr; }
      .jb-patch-card { padding-left: 20px; }
    }


    /* Patch notes: true scroll-scrub animation, no static reveal fallback */
    .jb-patch-notes.is-scroll-driven {
      min-height: 178vh !important;
      align-items: start !important;
      padding-top: 8vh !important;
      padding-bottom: 14vh !important;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-inner {
      position: sticky !important;
      top: clamp(84px, 11vh, 128px) !important;
      min-height: min(740px, calc(100vh - 140px));
      align-items: center !important;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-eyebrow,
    .jb-patch-notes.is-scroll-driven .jb-patch-title,
    .jb-patch-notes.is-scroll-driven .jb-patch-lead,
    .jb-patch-notes.is-scroll-driven .jb-patch-version,
    .jb-patch-notes.is-scroll-driven .jb-patch-card,
    .jb-patch-notes.is-scroll-driven .jb-patch-card h3,
    .jb-patch-notes.is-scroll-driven .jb-patch-card li {
      transition: none !important;
      will-change: transform, opacity, filter;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card::after {
      transition: none !important;
      transform: scaleY(var(--lineScale, 0)) !important;
      will-change: transform;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card::before {
      transition: none !important;
      opacity: var(--dotOpacity, 0) !important;
      transform: translateY(-50%) scale(var(--dotScale, .55)) !important;
      will-change: transform, opacity;
    }
    @media (max-width: 900px) {
      .jb-patch-notes.is-scroll-driven { min-height: auto !important; }
      .jb-patch-notes.is-scroll-driven .jb-patch-inner { position: relative !important; top: auto !important; min-height: 0; }
    }


    /* Enhanced scroll animation primitives for JB patch notes */
    .jb-patch-notes.is-scroll-driven {
      perspective: 1200px;
      --patchProgress: 0;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-inner {
      transform-style: preserve-3d;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-copy {
      will-change: transform, opacity, filter;
      transform-style: preserve-3d;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card {
      --lineScale: 0;
      --lineOpacity: 0;
      --dotOpacity: 0;
      --dotScale: .55;
      --cardGlow: 0;
      overflow: visible;
      transform-origin: 20% 50%;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card::after {
      opacity: var(--lineOpacity, .98) !important;
      box-shadow: 0 0 calc(28px * var(--lineOpacity, 0)) color-mix(in srgb, var(--patch-color, #38bdf8) 55%, transparent);
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card::before {
      box-shadow:
        0 0 calc(18px + 24px * var(--dotOpacity, 0)) color-mix(in srgb, var(--patch-color, #38bdf8) 50%, transparent),
        0 0 0 calc(9px * var(--dotOpacity, 0)) color-mix(in srgb, var(--patch-color, #38bdf8) 12%, transparent);
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card h3 {
      transform-origin: left center;
    }
    .jb-patch-notes.is-scroll-driven .jb-patch-card li {
      transform-origin: left center;
    }


/* Patch notes timeline dot alignment */
.jb-patch-card::before { left: -5px !important; }

.login-slot {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 750;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.login-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.user-menu {
  position: relative;
  display: inline-flex;
}

.user-chip {
  border: 0;
  appearance: none;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.user-chip:hover,
.user-menu:focus-within .user-chip,
.user-menu:hover .user-chip {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.user-chip svg {
  width: 14px;
  height: 14px;
  opacity: .7;
}

.user-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  background: linear-gradient(135deg, #00b7ff, #2563eb);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.user-name {
  max-width: 115px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 760;
}

.user-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}

.user-menu:hover .user-popover,
.user-menu:focus-within .user-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-popover-name {
  font-size: 14px;
  font-weight: 850;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-popover-email {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-popover a {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  font-size: 13px;
  font-weight: 780;
}

.user-popover a:hover {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

@media (max-width: 720px) {
  .user-name { display: none; }
  .user-chip { padding-right: 7px; }
  .user-popover { right: -54px; }
}

.login-link,
.logout-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(3, 7, 18, .68);
  backdrop-filter: blur(18px);
}
.auth-backdrop.active { display: grid; }
.auth-card {
  position: relative;
  width: min(430px, 100%);
  border: 1px solid rgba(120, 190, 255, .18);
  border-radius: 28px;
  padding: 26px;
  background: linear-gradient(145deg, rgba(17, 27, 48, .94), rgba(9, 15, 28, .96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
}
[data-theme="light"] .auth-card {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,247,255,.96));
  border-color: rgba(56, 108, 180, .18);
  box-shadow: 0 30px 80px rgba(28, 60, 110, .18);
}
.auth-tabs {
  display: flex;
  gap: 8px;
  width: fit-content;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  margin-bottom: 18px;
}
[data-theme="light"] .auth-tabs { background: rgba(15, 60, 130, .08); }
.auth-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
}
.auth-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #138cff, #36d6ff);
}
.auth-card h2 { margin: 0 0 8px; font-size: 30px; }
.auth-sub { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.auth-fields { display: grid; gap: 12px; }
.user-chip,
.user-popover a,
.user-popover button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.user-popover button { width: 100%; text-align: left; }
.admin-users-panel {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(120, 190, 255, .12);
}
.admin-dash-head.compact { margin-bottom: 16px; }
.users-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.user-access-card {
  border: 1px solid rgba(120, 190, 255, .16);
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(20, 34, 58, .72), rgba(10, 18, 32, .78));
}
[data-theme="light"] .user-access-card {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,247,255,.92));
  border-color: rgba(49, 103, 180, .16);
}
.user-access-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.user-access-head strong { display: block; }
.user-access-head span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.user-access-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #0f7bff, #24d5ff);
}
.script-access-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}
.access-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  font-size: 13px;
}
[data-theme="light"] .access-check { background: rgba(12, 82, 170, .06); }
.access-check input { accent-color: #1aa7ff; }
.users-empty {
  padding: 18px;
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
}
.btn.small { padding: 9px 14px; font-size: 13px; }


/* Admin/login navbar refinement */
.login-slot.admin-unlocked { display: none !important; }
.login-link {
  min-height: auto !important;
  padding: 8px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
  transform: none !important;
}
.login-link:hover {
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}
.login-link::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.login-link:hover::after { transform: scaleX(1); }

/* Account system polish */
.login-link {
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}
.login-link:hover {
  transform: none !important;
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.account-card { width: min(520px, 100%); }
.admin-user-card { width: min(680px, 100%); }
.account-picture-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.account-picture-preview {
  width: 72px; height: 72px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; font-weight: 950; letter-spacing: .05em;
  background: linear-gradient(135deg, #00b7ff, #2563eb);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
}
.account-picture-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.account-picture-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-separator { height: 1px; background: color-mix(in srgb, var(--line) 74%, transparent); margin: 4px 0; }
.private-access-title { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.admin-user-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.btn.danger { color: #ff6b89; border-color: color-mix(in srgb, #ff5574 42%, var(--line)); background: color-mix(in srgb, #ff5574 10%, var(--card-2)); }
.btn.danger:hover { background: color-mix(in srgb, #ff5574 16%, var(--card-2)); }
.users-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.user-row-card {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px; padding: 12px; color: var(--text);
  background: color-mix(in srgb, var(--card-2) 82%, transparent);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.user-row-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card-2)); }
.user-row-main { min-width: 0; display: grid; gap: 3px; flex: 1; }
.user-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row-badge { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 850; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.modal-access-list { max-height: 280px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 18px; padding: 8px; background: color-mix(in srgb, var(--card-2) 70%, transparent); }
.access-check input[type="checkbox"] { width: 18px; height: 18px; border-radius: 6px; accent-color: #24bfff; }
[data-theme="light"] .login-link { color: var(--muted) !important; }
[data-theme="light"] .login-link:hover { color: var(--text) !important; }

/* User access dashboard polish */
.admin-users-panel {
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.admin-users-panel .admin-dash-head.compact {
  align-items: center;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--accent) 7%, var(--card-2)));
}
.users-list {
  gap: 12px !important;
}
.user-row-card {
  position: relative;
  min-height: 72px;
  border-radius: 22px;
  padding: 13px 14px;
  background:
    radial-gradient(560px circle at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--card-2) 88%, transparent), color-mix(in srgb, var(--card) 72%, transparent));
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}
.user-row-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%);
  transition: opacity .18s ease;
}
.user-row-card:hover::after { opacity: 1; }
.user-access-avatar,
.admin-user-avatar {
  overflow: hidden;
  flex: 0 0 auto;
}
.user-access-avatar img,
.admin-user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.user-access-avatar.has-picture,
.admin-user-avatar.has-picture {
  background: color-mix(in srgb, var(--card-2) 72%, transparent);
  padding: 0;
}
.user-row-badge {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--card-2));
  color: color-mix(in srgb, var(--text) 80%, var(--accent));
}
.admin-user-card {
  width: min(760px, 100%);
  padding: 26px;
  border-radius: 30px;
}
.admin-user-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 36px 20px 0;
}
.admin-user-heading { min-width: 0; }
.admin-user-heading h2 { margin-bottom: 4px; }
.admin-user-heading .auth-sub { margin-bottom: 0; }
.admin-user-avatar {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 950;
  letter-spacing: .03em;
  background: linear-gradient(135deg, #087cff, #27d7ff);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
}
.modal-access-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  padding: 10px;
  border-radius: 22px;
}
.access-check { display: none; }
.access-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.access-toggle-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}
.access-toggle-text {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.access-toggle-text strong {
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.access-toggle-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.access-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.access-toggle {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, var(--text));
  background: color-mix(in srgb, var(--text) 8%, var(--card-2));
  transition: background .2s ease, border-color .2s ease;
}
.access-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 88%, var(--accent));
  box-shadow: 0 5px 12px rgba(0,0,0,.22);
  transition: transform .24s cubic-bezier(.2,.9,.2,1), background .2s ease;
}
.access-toggle-row input:checked + .access-toggle {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: linear-gradient(135deg, #0f8dff, #24d5ff);
}
.access-toggle-row input:checked + .access-toggle::before {
  transform: translateX(20px);
  background: #fff;
}
.access-toggle-row input:focus-visible + .access-toggle {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}
[data-theme="light"] .user-row-card {
  box-shadow: 0 14px 30px rgba(35, 62, 111, .10);
}
[data-theme="light"] .access-toggle::before {
  background: #fff;
}

/* User dropdown visual refresh */
.user-menu {
  align-items: center;
}

.user-chip {
  min-height: 36px !important;
  gap: 7px !important;
  padding: 3px 9px 3px 4px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}

.user-chip:hover,
.user-menu:focus-within .user-chip,
.user-menu:hover .user-chip {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--line) 68%, transparent) !important;
  transform: none !important;
}

.user-avatar {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  box-shadow: none !important;
}

.user-name {
  max-width: 128px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
  color: inherit !important;
  padding-bottom: 1px !important;
  transform: translateY(.5px);
}

.user-chip svg {
  width: 13px !important;
  height: 13px !important;
  opacity: .62 !important;
  transition: transform .18s ease, opacity .18s ease;
}

.user-menu:hover .user-chip svg,
.user-menu:focus-within .user-chip svg {
  transform: rotate(180deg);
  opacity: .9 !important;
}

.user-popover {
  width: 260px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--card) 96%, #020617) !important;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(22px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
  transform-origin: top right !important;
}

.user-popover-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 4px 4px 10px;
}

.user-popover-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #00b7ff, #2563eb);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}

.user-popover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-popover-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.user-popover-id strong {
  display: block;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 820;
  letter-spacing: -.02em;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-popover-id small {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-popover-divider {
  height: 1px;
  margin: 0 2px 8px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}

.user-popover-name,
.user-popover-email {
  display: none !important;
}

.logout-btn.menu-action {
  width: 100%;
  min-height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px !important;
  border-radius: 13px;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.logout-btn.menu-action svg {
  width: 16px;
  height: 16px;
  opacity: .78;
  flex: 0 0 auto;
}

.logout-btn.menu-action:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--text) 7%, transparent) !important;
  transform: translateX(2px);
}

.logout-btn.menu-action.danger-action:hover {
  color: #ff6b89 !important;
  background: color-mix(in srgb, #ff5574 12%, transparent) !important;
}

[data-theme="light"] .user-popover {
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .14) !important;
}

[data-theme="light"] .user-chip:hover,
[data-theme="light"] .user-menu:focus-within .user-chip,
[data-theme="light"] .user-menu:hover .user-chip {
  background: rgba(15, 23, 42, .045) !important;
}

/* Admin traffic metrics */
.traffic-nav-link[hidden] { display: none !important; }
.traffic-lock[hidden] { display: none !important; }
.traffic-page { min-height: calc(100vh - 62px); padding: 72px 0 80px; }
.traffic-wrap { position: relative; }
.traffic-lock { min-height: 62vh; display: grid; place-items: center; }
.traffic-lock-card {
  width: min(560px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 84%, transparent), color-mix(in srgb, var(--bg-2) 66%, transparent));
  box-shadow: var(--shadow);
}
.traffic-lock-card h1 { margin: 0 0 8px; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.06em; }
.traffic-lock-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.traffic-dashboard { display: none; }
.traffic-dashboard.active { display: block; animation: trafficIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes trafficIn { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.traffic-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-end;
  margin: 20px 0 28px;
}
.traffic-kicker {
  display: inline-flex;
  margin: 0 0 12px;
  color: var(--accent-2);
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.traffic-hero h1 { margin: 0; font-size: clamp(48px, 8vw, 94px); line-height: .9; letter-spacing: -.08em; }
.traffic-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.traffic-updated {
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 13px;
  white-space: nowrap;
}
.traffic-error {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--text);
  border-radius: 18px;
}
.traffic-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0;
}
.traffic-metric {
  min-height: 134px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--metric, var(--accent)) 26%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--bg-2) 72%, transparent));
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.traffic-metric.blue { --metric: #60a5fa; }
.traffic-metric.cyan { --metric: #22d3ee; }
.traffic-metric.purple { --metric: #a78bfa; }
.traffic-metric.orange { --metric: #fb923c; }
.traffic-metric.green { --metric: #34d399; }
.traffic-metric.pink { --metric: #fb7185; }
.traffic-metric span { color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.traffic-metric strong { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.06em; line-height: .9; }
.traffic-metric small { color: var(--muted); font-weight: 650; }
.traffic-panel-grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 16px;
}
.traffic-panel {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--bg-2) 72%, transparent));
  padding: 20px;
  min-height: 280px;
  box-shadow: 0 18px 52px rgba(0,0,0,.16);
}
.traffic-panel.wide { min-height: 320px; }
.traffic-panel-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 18px; }
.traffic-panel-head h2 { margin: 0; letter-spacing: -.04em; }
.traffic-panel-head span { color: var(--muted); font-size: 13px; font-weight: 700; }
.traffic-bars, .traffic-list, .traffic-table { display: grid; gap: 10px; }
.traffic-bar-row {
  display: grid;
  gap: 8px;
  padding: 10px 0;
}
.traffic-bar-row div, .traffic-list-row, .traffic-jam-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.traffic-bar-row strong, .traffic-list-row span, .traffic-jam-row strong { font-weight: 800; }
.traffic-bar-row span, .traffic-jam-row span { color: var(--muted); font-size: 13px; }
.traffic-bar-row i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: var(--w, 0%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
.traffic-list-row, .traffic-jam-row {
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 16px;
  padding: 12px 13px;
}
.traffic-jam-row div { display: grid; gap: 3px; }
.traffic-jam-row div:last-child { text-align: right; }
.traffic-jam-row b { font-size: 18px; }
.traffic-empty { color: var(--muted); padding: 18px; border: 1px dashed var(--line-2); border-radius: 18px; text-align: center; }
[data-theme="light"] .traffic-lock-card,
[data-theme="light"] .traffic-metric,
[data-theme="light"] .traffic-panel {
  box-shadow: 0 18px 48px rgba(37,55,99,.10);
}
@media (max-width: 980px) {
  .traffic-hero { align-items: flex-start; flex-direction: column; }
  .traffic-actions { justify-content: flex-start; }
  .traffic-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-panel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .traffic-page { padding-top: 42px; }
  .traffic-metrics-grid { grid-template-columns: 1fr; }
  .traffic-lock-card { padding: 24px; }
}

/* Final navbar/login polish */
.login-slot { display: inline-flex; align-items: center; }
.login-slot.admin-unlocked { display: none !important; }
.login-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 8px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
}
.login-link:hover { color: var(--text) !important; background: transparent !important; transform: none !important; }
.login-link::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .18s ease !important;
}
.login-link:hover::after { transform: scaleX(1) !important; }

/* Traffic top jam severity colors */
.traffic-jam-row { position: relative; overflow: hidden; }
.traffic-jam-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: var(--delay-color, var(--accent));
  opacity: .95;
}
.traffic-jam-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--delay-color, var(--accent)) 18%, transparent), transparent 62%);
  opacity: .9;
}
.traffic-jam-row > * { position: relative; z-index: 1; }
.traffic-jam-row.delay-low { --delay-color: #34d399; }
.traffic-jam-row.delay-medium { --delay-color: #fbbf24; }
.traffic-jam-row.delay-high { --delay-color: #fb923c; }
.traffic-jam-row.delay-critical { --delay-color: #fb3b5f; }
.traffic-jam-row.delay-medium b { color: #fbbf24; }
.traffic-jam-row.delay-high b { color: #fb923c; }
.traffic-jam-row.delay-critical b { color: #ff6b85; text-shadow: 0 0 22px rgba(251, 59, 95, .25); }
[data-theme="light"] .traffic-jam-row.delay-critical b { color: #dc1239; }
[data-theme="light"] .traffic-jam-row.delay-high b { color: #c75a08; }
[data-theme="light"] .traffic-jam-row.delay-medium b { color: #a16207; }

/* Final navbar alignment + admin state */
.nav {
  align-items: center !important;
  gap: 14px !important;
}
.nav > a,
.nav-drop-btn,
.login-link,
.admin-nav-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: var(--muted) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 34px !important;
  letter-spacing: -.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
}
.nav > a:hover,
.nav-drop-btn:hover,
.nav-dropdown:focus-within .nav-drop-btn,
.login-link:hover {
  color: var(--text) !important;
  background: transparent !important;
  transform: none !important;
}
.nav-drop-btn svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: 1px !important;
}
.nav > a::after,
.login-link::after,
.admin-nav-pill::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 4px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .18s ease !important;
}
.nav > a:hover::after,
.login-link:hover::after,
.admin-nav-pill:hover::after { transform: scaleX(1) !important; }
.login-slot,
.login-slot.admin-unlocked {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
}
.admin-nav-pill {
  color: #34d399 !important;
}
.admin-nav-pill::after {
  background: linear-gradient(90deg, #22c55e, #14b8a6) !important;
  transform: scaleX(.55) !important;
}
.admin-nav-pill:hover { color: #6ee7b7 !important; }
.iconbtn { flex: 0 0 auto !important; }

/* Mobile navigation */
.mobile-nav-btn {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.mobile-nav-btn span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.mobile-nav-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-panel {
  position: fixed;
  top: 74px;
  left: 14px;
  right: 14px;
  z-index: 99;
  display: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
}
.mobile-nav-panel.active { display: grid; animation: mobileNavIn .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mobileNavIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.mobile-nav-panel a,
.mobile-nav-panel button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-weight: 850;
  padding: 14px 14px;
  border-radius: 16px;
  cursor: pointer;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mobile-nav-panel [hidden] { display: none !important; }
.mobile-nav-panel .mobile-admin { color: #34d399; }
@media (max-width: 860px) {
  .topbar { left: 12px; right: 12px; width: auto; }
  .nav > a,
  .nav > .nav-dropdown,
  .login-slot { display: none !important; }
  .mobile-nav-btn { display: inline-flex !important; }
  .nav { gap: 8px !important; }
}

/* Traffic dashboard upgrades */
.traffic-filter-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 12px 0 22px;
  flex-wrap: wrap;
}
.traffic-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.traffic-tab {
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.traffic-tab:hover { color: var(--text); transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.traffic-tab.active {
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}
.traffic-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 999px;
  padding: 10px 13px;
}
.traffic-live-dot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.45);
  animation: trafficPulse 1.8s ease-out infinite;
}
@keyframes trafficPulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.traffic-map-panel { margin: 0 0 16px; min-height: auto !important; }
.traffic-map {
  position: relative;
  min-height: clamp(320px, 45vw, 560px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 45% 38%, rgba(34,211,238,.14), transparent 30%),
    radial-gradient(circle at 58% 65%, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-2) 78%, #0f2b45), color-mix(in srgb, var(--card) 88%, #102d45));
}
.traffic-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image: linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 52% 48%, #000 0 55%, transparent 85%);
}
.traffic-map::after {
  content: "GREECE LIVE";
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: color-mix(in srgb, var(--text) 48%, transparent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
}
.traffic-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.traffic-map-line { fill: none; stroke-width: .48; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(56,189,248,.3)); opacity: .9; }
.traffic-map-line.low { stroke: #34d399; }
.traffic-map-line.medium { stroke: #fbbf24; }
.traffic-map-line.high { stroke: #fb923c; }
.traffic-map-line.critical { stroke: #fb3b5f; stroke-width: .72; }
.traffic-map-dot {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: help;
}
.traffic-map-dot span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--dot, #60a5fa);
  border: 2px solid color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot, #60a5fa) 18%, transparent), 0 0 24px color-mix(in srgb, var(--dot, #60a5fa) 42%, transparent);
}
.traffic-map-dot.jam { --dot: #fb923c; }
.traffic-map-dot.closure { --dot: #fb3b5f; }
.traffic-map-dot.irregularity { --dot: #a78bfa; }
.traffic-map-dot.alert { --dot: #60a5fa; }
.traffic-ops-grid { margin-bottom: 16px; }
.traffic-corridors { display: grid; gap: 10px; }
.corridor-row {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 18px;
  padding: 13px 14px;
}
.corridor-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--corridor, #34d399); }
.corridor-row div, .corridor-row b { position: relative; z-index: 1; }
.corridor-row div { display: grid; gap: 3px; }
.corridor-row strong { font-weight: 900; }
.corridor-row span { color: var(--muted); font-size: 13px; font-weight: 700; }
.corridor-row b { color: var(--corridor, #34d399); }
.corridor-row.low { --corridor: #34d399; }
.corridor-row.medium { --corridor: #fbbf24; }
.corridor-row.high { --corridor: #fb923c; }
.corridor-row.critical { --corridor: #fb3b5f; }
.traffic-trend { min-height: 220px; display: grid; align-content: center; gap: 12px; }
.trend-svg { width: 100%; height: 170px; overflow: visible; }
.trend-svg polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(34,211,238,.18)); }
.trend-svg .alerts { stroke: #60a5fa; }
.trend-svg .jams { stroke: #fb923c; }
.trend-svg .closures { stroke: #fb3b5f; }
.trend-svg .delay { stroke: #22d3ee; stroke-dasharray: 7 7; }
.trend-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.trend-legend span { border: 1px solid var(--line); background: var(--card-2); border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 850; }
.trend-legend .alerts { color: #60a5fa; }
.trend-legend .jams { color: #fb923c; }
.trend-legend .closures { color: #fb7185; }
.trend-legend .delay { color: #22d3ee; }
body.traffic-fullscreen { overflow: hidden; }
body.traffic-fullscreen .topbar,
body.traffic-fullscreen .orb,
body.traffic-fullscreen footer { display: none !important; }
body.traffic-fullscreen .traffic-page { padding: 0 !important; }
body.traffic-fullscreen .traffic-wrap { width: 100%; max-width: none; padding: 22px; }
body.traffic-fullscreen .traffic-dashboard.active { min-height: 100vh; }
body.traffic-fullscreen .traffic-hero { margin-top: 0; }
body.traffic-fullscreen .traffic-map { min-height: 52vh; }
@media (max-width: 980px) {
  .traffic-filter-strip { align-items: flex-start; flex-direction: column; }
  .traffic-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .traffic-tab { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .traffic-map { min-height: 300px; border-radius: 20px; }
  .traffic-map-dot { width: 12px; height: 12px; }
  .traffic-actions { width: 100%; }
  .traffic-actions .btn, .traffic-actions .traffic-updated { flex: 1 1 auto; justify-content: center; }
}

/* Fixes: OSM map, mobile nav lightbox, mobile header, traffic value sizing */
.traffic-metric.compact-value strong {
  font-size: clamp(24px, 2.8vw, 36px) !important;
  letter-spacing: -.045em !important;
}
.traffic-map {
  background: #07111f !important;
  isolation: isolate;
}
.traffic-map::before,
.traffic-map-svg,
.traffic-map-dot { display: none !important; }
.traffic-map .leaflet-container,
.traffic-map.leaflet-container {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #07111f;
  font-family: inherit;
}
.traffic-map .leaflet-control-attribution {
  background: color-mix(in srgb, #07111f 82%, transparent);
  color: rgba(226,232,240,.72);
  border-radius: 10px 0 0 0;
  padding: 4px 8px;
  font-size: 10px;
}
.traffic-map .leaflet-control-attribution a { color: #67e8f9; }
.traffic-map .leaflet-control-zoom {
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.traffic-map .leaflet-control-zoom a {
  background: rgba(15,23,42,.84) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.2) !important;
}
.traffic-map .leaflet-popup-content-wrapper,
.traffic-map .leaflet-popup-tip {
  background: rgba(15,23,42,.96);
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.34);
}
.traffic-map .leaflet-popup-content { margin: 12px 14px; min-width: 170px; }
.traffic-map .leaflet-popup-content strong { display:block; margin-bottom: 7px; font-size: 14px; }
.traffic-map .leaflet-popup-content div { display:flex; flex-wrap:wrap; gap:6px; }
.traffic-map .leaflet-popup-content span {
  display:inline-flex;
  padding:5px 7px;
  border-radius:999px;
  background: rgba(96,165,250,.12);
  color:#bfdbfe;
  font-size:11px;
  font-weight:800;
}
.traffic-map-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:850;
  padding:24px;
  text-align:center;
}

.mobile-nav-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
    radial-gradient(circle at 90% 84%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%),
    color-mix(in srgb, var(--bg) 94%, transparent) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(100%) !important;
  transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .28s ease !important;
}
.mobile-nav-panel.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
  animation: none !important;
}
.mobile-nav-panel::before {
  content: "Navigation";
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 12px 8px;
}
.mobile-nav-panel a,
.mobile-nav-panel button {
  position: relative;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--card) 76%, transparent) !important;
  backdrop-filter: blur(18px);
  padding: 18px 18px !important;
  border-radius: 20px !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
  transform: translateX(24px);
  opacity: 0;
  transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .25s ease, background .18s ease, border-color .18s ease !important;
}
.mobile-nav-panel.active a,
.mobile-nav-panel.active button { transform: translateX(0); opacity: 1; }
.mobile-nav-panel.active a:nth-child(2) { transition-delay: .03s !important; }
.mobile-nav-panel.active a:nth-child(3) { transition-delay: .06s !important; }
.mobile-nav-panel.active a:nth-child(4) { transition-delay: .09s !important; }
.mobile-nav-panel.active a:nth-child(5) { transition-delay: .12s !important; }
.mobile-nav-panel.active button { transition-delay: .15s !important; }
.mobile-nav-panel a:hover,
.mobile-nav-panel button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--card)) !important;
}
body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open .mobile-nav-btn { z-index: 130; }
body.mobile-nav-open .mobile-nav-btn span { background: var(--text); }

@media (max-width: 860px) {
  .topbar,
  .topbar.is-compact {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    top: 10px !important;
    padding: 10px 12px !important;
    border-radius: 22px !important;
  }
  .brand strong { font-size: 13px !important; }
  .brand span { font-size: 10px !important; margin-top: 3px !important; }
  .brand-mark { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
  .iconbtn { width: 38px !important; height: 38px !important; }
  .mobile-nav-btn { width: 38px !important; height: 38px !important; }
  .traffic-map { min-height: 360px !important; border-radius: 18px !important; }
  .traffic-metric strong { font-size: clamp(28px, 13vw, 42px) !important; }
  .traffic-metric.compact-value strong { font-size: clamp(22px, 9vw, 32px) !important; }
}

/* Open-on-demand live map */
.traffic-map-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.traffic-map-open[disabled] { opacity: .72; cursor: default; transform: none !important; }
.traffic-map.is-collapsed {
  min-height: 220px;
  display: grid;
  place-items: center;
}
.traffic-map-placeholder {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 560px;
  text-align: center;
  padding: 28px;
}
.traffic-map-placeholder strong { font-size: clamp(24px, 4vw, 42px); letter-spacing: -.05em; }
.traffic-map-placeholder span { color: var(--muted); line-height: 1.55; max-width: 520px; }
.traffic-map.leaflet-active::before,
.traffic-map.leaflet-active::after { pointer-events: none; z-index: 401; }
.traffic-map .leaflet-container,
.traffic-map.leaflet-container { background: #07111f; }
.traffic-map .leaflet-tile { filter: saturate(.85) contrast(1.04); }
.traffic-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--card) 84%, transparent);
  color: var(--muted);
  border-radius: 10px 0 0 0;
  padding: 3px 8px;
}
.traffic-map .leaflet-control-attribution a { color: var(--accent); }
@media (max-width: 720px) {
  .traffic-map-actions { justify-content: flex-start; }
  .traffic-map.is-collapsed { min-height: 250px; }
}

/* Stable Greece-only OSM dark map */
.traffic-map.leaflet-active,
.traffic-map.leaflet-container {
  background: #07111f !important;
  overflow: hidden !important;
}
.traffic-map .leaflet-pane,
.traffic-map .leaflet-tile-container,
.traffic-map .leaflet-layer,
.traffic-map .leaflet-map-pane {
  will-change: transform;
}
.traffic-map .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) saturate(.72) brightness(.62) contrast(1.08) !important;
  opacity: 1 !important;
  background: #07111f !important;
}
.traffic-map .leaflet-container { background: #07111f !important; }
.traffic-map.leaflet-active::before,
.traffic-map.leaflet-active::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 401;
}
.traffic-map.leaflet-active::before {
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12), inset 0 0 90px rgba(2, 6, 23, .38);
}
.traffic-map.leaflet-active::after {
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgba(7,17,31,.55));
}


/* Traffic page cleanup: map/corridor/trend removed */
.traffic-jam-row > div:last-child span {
  font-size: 12px;
  opacity: .9;
}
.traffic-jam-row.delay-critical {
  border-color: rgba(251, 59, 95, .48);
  background: linear-gradient(135deg, rgba(251, 59, 95, .13), rgba(251, 146, 60, .08));
}
.traffic-jam-row.delay-high {
  border-color: rgba(251, 146, 60, .42);
  background: linear-gradient(135deg, rgba(251, 146, 60, .12), rgba(15, 23, 42, .08));
}
.traffic-jam-row.delay-medium {
  border-color: rgba(251, 191, 36, .36);
  background: linear-gradient(135deg, rgba(251, 191, 36, .10), rgba(15, 23, 42, .08));
}
[data-theme="light"] .traffic-jam-row.delay-critical { background: linear-gradient(135deg, rgba(254, 226, 226, .95), rgba(255, 247, 237, .8)); }
[data-theme="light"] .traffic-jam-row.delay-high { background: linear-gradient(135deg, rgba(255, 237, 213, .9), rgba(255, 251, 235, .75)); }
[data-theme="light"] .traffic-jam-row.delay-medium { background: linear-gradient(135deg, rgba(254, 249, 195, .85), rgba(255, 251, 235, .72)); }

/* Traffic hazard drill-down */
.traffic-click-list .traffic-list-row,
.traffic-list-row.hazard-row {
  width: 100%;
  appearance: none;
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}
.traffic-list-row.hazard-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--card-2));
}
.traffic-list-row.hazard-row:active { transform: translateY(0); }
.traffic-hazard-modal[hidden] { display: none !important; }
.traffic-hazard-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 18, .62);
  backdrop-filter: blur(18px);
}
.traffic-hazard-card {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86vh, 860px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
  box-shadow: 0 38px 120px rgba(0,0,0,.48);
  padding: 26px;
}
.traffic-hazard-card h2 {
  margin: 4px 48px 6px 0;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .95;
  letter-spacing: -.07em;
}
.traffic-hazard-subtitle { margin: 0 0 18px; color: var(--muted); font-weight: 650; }
.traffic-hazard-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.traffic-hazard-close::before,
.traffic-hazard-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.traffic-hazard-close::before { transform: rotate(45deg); }
.traffic-hazard-close::after { transform: rotate(-45deg); }
.traffic-hazard-items { display: grid; gap: 10px; }
.traffic-hazard-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--card-2) 84%, transparent);
}
.traffic-hazard-index {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: #06111f;
  background: linear-gradient(135deg, #67e8f9, #38bdf8);
}
.traffic-hazard-item strong { display: block; font-size: 16px; }
.traffic-hazard-item span,
.traffic-hazard-item small { display: block; color: var(--muted); margin-top: 3px; }
.traffic-hazard-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.traffic-hazard-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.traffic-hazard-links a:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-theme="light"] .traffic-hazard-modal { background: rgba(226, 232, 240, .62); }
@media (max-width: 700px) {
  .traffic-hazard-card { padding: 20px; border-radius: 24px; }
  .traffic-hazard-item { grid-template-columns: 1fr; }
  .traffic-hazard-index { width: 30px; height: 30px; }
}

/* Traffic hazard subtype polish */
.traffic-click-list {
  gap: 10px;
}
.traffic-list-row.hazard-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 12px 0 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background:
    radial-gradient(120px 80px at 0% 50%, color-mix(in srgb, var(--hazard-color, var(--accent)) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--card-2) 92%, transparent);
  color: var(--text) !important;
  font: inherit;
  font-weight: 850;
  letter-spacing: -.02em;
  text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.traffic-list-row.hazard-row .hazard-row-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.traffic-list-row.hazard-row .hazard-row-main i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--hazard-color, var(--accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--hazard-color, var(--accent)) 45%, transparent);
}
.traffic-list-row.hazard-row .hazard-row-main b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 900;
}
.traffic-list-row.hazard-row .hazard-row-count {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--text) 92%, white 8%);
  background: color-mix(in srgb, var(--hazard-color, var(--accent)) 13%, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--hazard-color, var(--accent)) 28%, var(--line));
  font-weight: 950;
}
.traffic-list-row.hazard-row .hazard-row-arrow {
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  opacity: .75;
  transition: transform .18s ease, opacity .18s ease;
}
.traffic-list-row.hazard-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hazard-color, var(--accent)) 52%, var(--line));
  background:
    radial-gradient(140px 90px at 0% 50%, color-mix(in srgb, var(--hazard-color, var(--accent)) 18%, transparent), transparent 72%),
    color-mix(in srgb, var(--card-2) 82%, var(--hazard-color, var(--accent)) 5%);
  box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--hazard-color, var(--accent)) 15%, transparent);
}
.traffic-list-row.hazard-row:hover .hazard-row-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.traffic-list-row.hazard-row:active { transform: translateY(0); }
.traffic-list-row.hazard-row.tone-closed { --hazard-color: #fb3b5f; }
.traffic-list-row.hazard-row.tone-jam { --hazard-color: #fb923c; }
.traffic-list-row.hazard-row.tone-road { --hazard-color: #38bdf8; }
.traffic-list-row.hazard-row.tone-work { --hazard-color: #fbbf24; }
.traffic-list-row.hazard-row.tone-hot { --hazard-color: #a78bfa; }
.traffic-list-row.hazard-row.tone-default { --hazard-color: #22c55e; }

.traffic-hazard-modal {
  z-index: 4000;
}
.traffic-hazard-card {
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(56, 189, 248, .13), transparent 65%),
    color-mix(in srgb, var(--bg-2) 94%, transparent);
}
.traffic-hazard-items {
  max-height: min(58vh, 540px);
  overflow: auto;
  padding-right: 4px;
}
.traffic-hazard-items::-webkit-scrollbar { width: 8px; }
.traffic-hazard-items::-webkit-scrollbar-track { background: transparent; }
.traffic-hazard-items::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.traffic-hazard-item {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-2) 92%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
}
.traffic-hazard-item strong { color: var(--text); }
.traffic-hazard-item small { line-height: 1.5; word-break: break-word; }
[data-theme="light"] .traffic-list-row.hazard-row {
  background:
    radial-gradient(120px 80px at 0% 50%, color-mix(in srgb, var(--hazard-color, var(--accent)) 14%, transparent), transparent 70%),
    rgba(255,255,255,.82);
  color: var(--text) !important;
}
[data-theme="light"] .traffic-list-row.hazard-row .hazard-row-count {
  color: color-mix(in srgb, var(--text) 88%, black 12%);
  background: color-mix(in srgb, var(--hazard-color, var(--accent)) 12%, white 88%);
}
[data-theme="light"] .traffic-hazard-card {
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(14, 165, 233, .13), transparent 65%),
    rgba(255,255,255,.95);
}

/* Traffic social snapshot builder */
.traffic-snapshot-open {
  border-color: rgba(56, 189, 248, .35);
  background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(34, 211, 238, .10));
  color: var(--text);
}
.traffic-snapshot-open:hover { transform: translateY(-1px); border-color: rgba(56, 189, 248, .62); }
.traffic-snapshot-modal[hidden] { display: none !important; }
.traffic-snapshot-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2, 8, 18, .78);
  backdrop-filter: blur(22px);
}
.traffic-snapshot-card {
  width: min(1340px, 96vw);
  max-height: min(860px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(7, 17, 31, .96), rgba(8, 27, 45, .94));
  box-shadow: 0 34px 120px rgba(0, 0, 0, .42);
  padding: 26px 26px 24px;
  position: relative;
}
.traffic-snapshot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-right: 56px;
}
.traffic-snapshot-head h2 { margin: 6px 0 0; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.06em; }
.snapshot-download-btn {
  min-width: 142px;
  border-radius: 999px;
  padding-inline: 18px;
}
.traffic-snapshot-builder {
  display: grid;
  grid-template-columns: minmax(320px, 370px) 1fr;
  gap: 24px;
  align-items: start;
  min-height: 0;
}
.traffic-snapshot-options {
  border: 1px solid rgba(148,163,184,.16);
  background: linear-gradient(180deg, rgba(11, 22, 38, .84), rgba(10, 20, 34, .70));
  border-radius: 24px;
  padding: 18px;
  display: grid;
  gap: 14px;
  min-height: 620px;
}
.snapshot-label,
.snapshot-road-head span {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
}
.snapshot-select {
  width: 100%;
  cursor: pointer;
  min-height: 52px;
  border-radius: 18px;
  border-color: rgba(56,189,248,.28);
  background: rgba(8, 18, 31, .82);
}
.snapshot-road-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.mini-action {
  border: 1px solid rgba(56,189,248,.30);
  color: #67e8f9;
  background: rgba(34,211,238,.08);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 900;
  cursor: pointer;
}
.snapshot-road-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}
.snapshot-road-list::-webkit-scrollbar { width: 7px; }
.snapshot-road-list::-webkit-scrollbar-thumb { background: rgba(148,163,184,.34); border-radius: 99px; }
.snapshot-road {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(56,189,248,.28);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(10, 28, 45, .82);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.snapshot-road:hover { transform: translateY(-1px); border-color: rgba(56,189,248,.48); }
.snapshot-road.active { background: rgba(11, 74, 112, .38); border-color: rgba(56,189,248,.62); }
.snapshot-road input { position: absolute; opacity: 0; pointer-events: none; }
.snapshot-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(56,189,248,.40);
  background: rgba(34,211,238,.08);
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.snapshot-check::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  left: 4px;
  top: 5px;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .18s ease, border-color .18s ease;
}
.snapshot-road.active .snapshot-check { background: #22d3ee; border-color: #22d3ee; }
.snapshot-road.active .snapshot-check::after { border-left-color: #082033; border-bottom-color: #082033; transform: rotate(-45deg) scale(1); }
.snapshot-road-main { display: grid; gap: 4px; min-width: 0; }
.snapshot-road-main b { font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-road-main small { color: var(--muted); font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-road-meta { color: #f6c84f; font-weight: 850; font-size: 13px; white-space: nowrap; }
.snapshot-preview-btn {
  border: 1px solid rgba(56,189,248,.44);
  background: linear-gradient(90deg, rgba(31, 111, 182, .55), rgba(34,211,238,.38));
  color: #eaf6ff;
  border-radius: 999px;
  min-height: 48px;
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
}
.snapshot-help {
  margin: 2px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.traffic-snapshot-preview-wrap { display: grid; place-items: stretch; min-width: 0; }
.traffic-snapshot-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  background: #08111f;
}
.social-snapshot-card {
  height: 100%;
  padding: 36px 40px;
  color: #f8fbff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #091522 0%, #10253d 54%, #183754 100%);
}
.social-snapshot-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: linear-gradient(rgba(125,211,252,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,.14) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: -2;
}
.social-snapshot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 11, 20, .08), rgba(4, 11, 20, .02) 55%, rgba(255, 174, 0, .08) 100%);
  z-index: -1;
}
.social-snapshot-card.tone-low::after { background: linear-gradient(90deg, rgba(4, 11, 20, .10), rgba(4,11,20,.03) 50%, rgba(16, 185, 129, .14) 100%); }
.social-snapshot-card.tone-medium::after { background: linear-gradient(90deg, rgba(4, 11, 20, .08), rgba(4,11,20,.03) 50%, rgba(245, 158, 11, .14) 100%); }
.social-snapshot-card.tone-high::after,
.social-snapshot-card.tone-critical::after { background: linear-gradient(90deg, rgba(4, 11, 20, .08), rgba(4,11,20,.03) 50%, rgba(251, 146, 60, .14) 82%, rgba(244, 63, 94, .12) 100%); }
.snapshot-map-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 24%, rgba(255, 193, 7, .18), transparent 22%), radial-gradient(circle at 18% 78%, rgba(56, 189, 248, .18), transparent 28%);
  z-index: -1;
}
.social-snapshot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 900;
  color: #67e8f9;
}
.snapshot-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.20);
  font-size: 13px;
  letter-spacing: .08em;
}
.social-snapshot-top strong { color: #a8b8cc; font-size: 15px; }
.social-snapshot-card h3 { margin: 28px 0 10px; font-size: clamp(52px, 5vw, 76px); line-height: .98; letter-spacing: -.07em; }
.snapshot-generated { margin: 0 0 22px; color: #b7c5d8; line-height: 1.45; font-weight: 650; font-size: 18px; }
.social-snapshot-stats.wide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 28px;
}
.snapshot-stat-card {
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(10, 23, 39, .82);
  border-radius: 24px;
  padding: 18px 20px 16px;
  display: grid;
  gap: 8px;
}
.snapshot-stat-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: #38bdf8;
}
.snapshot-stat-icon svg { width: 24px; height: 24px; }
.snapshot-stat-card b { display: block; font-size: 28px; letter-spacing: -.04em; }
.snapshot-stat-card span { color: #91a2b8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.snapshot-section-title { font-size: 24px; font-weight: 900; margin-bottom: 14px; }
.social-snapshot-roads.lanes { display: grid; gap: 12px; }
.snapshot-road-lane {
  display: grid;
  grid-template-columns: 58px minmax(180px, 1.25fr) minmax(200px, 1fr) auto 24px;
  gap: 14px;
  align-items: center;
  border-radius: 28px;
  padding: 14px 18px 14px 12px;
  background: rgba(10, 23, 39, .72);
  border: 1px solid rgba(148,163,184,.20);
}
.snapshot-road-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(6, 17, 31, .96);
  border: 1px solid currentColor;
  color: #f8fbff;
  font-weight: 900;
}
.snapshot-road-copy { min-width: 0; display: grid; gap: 6px; }
.snapshot-road-copy strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-road-copy small { color: #91a2b8; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-road-track {
  position: relative;
  height: 28px;
}
.snapshot-road-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 9px;
  border-top: 2px dashed rgba(148,163,184,.45);
}
.snapshot-road-track i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: var(--lane-fill, 50%);
  background: currentColor;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,255,255,.16);
}
.snapshot-road-lane em { font-style: normal; font-weight: 900; font-size: 16px; white-space: nowrap; }
.snapshot-road-arrow { color: #94a3b8; font-size: 28px; font-weight: 800; }
.snapshot-road-lane.tone-low { color: #34d399; }
.snapshot-road-lane.tone-medium { color: #fbbf24; }
.snapshot-road-lane.tone-high { color: #fb923c; }
.snapshot-road-lane.tone-critical { color: #fb3b5f; }
.snapshot-no-roads {
  border-radius: 22px;
  background: rgba(10, 23, 39, .72);
  border: 1px solid rgba(148,163,184,.20);
  padding: 18px;
  color: #a8b8cc;
  font-weight: 700;
}
[data-theme="light"] .traffic-snapshot-modal { background: rgba(226, 232, 240, .72); }
[data-theme="light"] .traffic-snapshot-card { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,248,255,.96)); }
[data-theme="light"] .traffic-snapshot-options,
[data-theme="light"] .snapshot-road,
[data-theme="light"] .snapshot-stat-card,
[data-theme="light"] .snapshot-road-lane { background: rgba(255,255,255,.82); }
[data-theme="light"] .social-snapshot-card { color: #0f172a; background: linear-gradient(135deg, #eff7ff 0%, #dff1ff 54%, #ecfbff 100%); }
[data-theme="light"] .social-snapshot-card h3,
[data-theme="light"] .snapshot-section-title,
[data-theme="light"] .snapshot-stat-card b,
[data-theme="light"] .snapshot-road-copy strong { color: #0f172a; }
[data-theme="light"] .snapshot-generated,
[data-theme="light"] .snapshot-road-copy small,
[data-theme="light"] .social-snapshot-top strong,
[data-theme="light"] .snapshot-stat-card span,
[data-theme="light"] .snapshot-no-roads { color: #475569; }
@media (max-width: 1180px) {
  .traffic-snapshot-builder { grid-template-columns: 1fr; }
  .traffic-snapshot-options { min-height: unset; }
  .traffic-snapshot-preview { aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) {
  .traffic-snapshot-modal { padding: 12px; }
  .traffic-snapshot-card { padding: 18px; border-radius: 24px; max-height: 94vh; overflow: auto; }
  .traffic-snapshot-head { display: grid; padding-right: 48px; }
  .traffic-snapshot-preview { width: 100%; aspect-ratio: 4 / 5; }
  .social-snapshot-card { padding: 24px; }
  .social-snapshot-card h3 { font-size: clamp(34px, 8vw, 56px); }
  .social-snapshot-stats.wide { grid-template-columns: repeat(2, 1fr); }
  .snapshot-road-lane { grid-template-columns: 52px 1fr; }
  .snapshot-road-track, .snapshot-road-arrow { display: none; }
  .snapshot-road-lane em { grid-column: 2; }
}

}


/* Snapshot mockup C/A final refinement */
.traffic-snapshot-card {
  width: min(1450px, 97vw);
  max-height: min(850px, 94vh);
  padding: 22px 24px 24px;
  background:
    radial-gradient(circle at 80% -10%, rgba(30, 94, 156, .22), transparent 38%),
    linear-gradient(145deg, rgba(5, 13, 25, .98), rgba(8, 24, 41, .96));
}
.traffic-snapshot-head { margin-bottom: 18px; }
.traffic-snapshot-head h2 { font-size: clamp(32px, 3.2vw, 48px); }
.traffic-snapshot-builder { grid-template-columns: 360px minmax(0, 1fr); gap: 28px; }
.traffic-snapshot-options {
  min-height: 620px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(13, 27, 47, .86), rgba(10, 20, 35, .80));
}
.snapshot-road-list { max-height: 395px; }
.snapshot-road {
  grid-template-columns: 24px minmax(0, 1fr);
  position: relative;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(18, 35, 58, .74);
  border-color: rgba(148,163,184,.15);
}
.snapshot-road::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(34, 211, 238, .65);
  opacity: 0;
}
.snapshot-road.active::before { opacity: 1; }
.snapshot-check { margin-left: 12px; }
.snapshot-road-main { padding: 13px 8px 13px 0; }
.snapshot-road-main b { font-size: 14px; }
.snapshot-road-meta { position: absolute; right: 14px; top: 15px; font-size: 12px; color: #9fb1c8; }
.snapshot-preview-btn { margin-top: auto; min-height: 52px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px rgba(14, 165, 233, .16); }
.traffic-snapshot-preview { border-radius: 22px; aspect-ratio: 16 / 9; }
.social-snapshot-card {
  padding: 34px 40px 34px;
  background:
    linear-gradient(180deg, rgba(11, 35, 67, .78), rgba(8, 18, 32, .94) 58%, rgba(7, 16, 28, .98)),
    radial-gradient(circle at 82% 22%, rgba(245, 158, 11, .22), transparent 26%),
    linear-gradient(135deg, #091522 0%, #10253d 54%, #17314f 100%);
}
.social-snapshot-card::before {
  opacity: .13;
  background-image:
    linear-gradient(rgba(125,211,252,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.12) 1px, transparent 1px);
  background-size: 46px 46px;
}
.social-snapshot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 18, 32, .10), rgba(8, 18, 32, .78) 58%, rgba(8, 18, 32, .94) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='250' viewBox='0 0 720 250'%3E%3Cpath d='M0 207 C88 180 120 167 198 185 C260 200 294 159 360 154 C438 148 480 176 536 146 C602 111 662 120 720 88 L720 250 L0 250 Z' fill='%23233243' fill-opacity='.62'/%3E%3Cpath d='M500 130 h112 v12 h-112z M512 96 h88 v34 h-88z M520 86 h72 v10 h-72z M524 74 h64 v12 h-64z' fill='%23c7b07a' fill-opacity='.45'/%3E%3Cg fill='%23d7c28d' fill-opacity='.54'%3E%3Crect x='520' y='102' width='7' height='28'/%3E%3Crect x='535' y='102' width='7' height='28'/%3E%3Crect x='550' y='102' width='7' height='28'/%3E%3Crect x='565' y='102' width='7' height='28'/%3E%3Crect x='580' y='102' width='7' height='28'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 38px top 54px;
  background-size: 520px auto;
  z-index: -1;
}
.social-snapshot-card.tone-low::after,
.social-snapshot-card.tone-medium::after,
.social-snapshot-card.tone-high::after,
.social-snapshot-card.tone-critical::after { background-blend-mode: screen, normal; }
.social-snapshot-card.tone-critical { background:
  linear-gradient(180deg, rgba(35, 17, 28, .80), rgba(8, 18, 32, .94) 58%, rgba(7, 16, 28, .98)),
  radial-gradient(circle at 82% 18%, rgba(244, 63, 94, .22), transparent 28%),
  linear-gradient(135deg, #091522 0%, #10253d 54%, #301929 100%);
}
.social-snapshot-card.tone-high { background:
  linear-gradient(180deg, rgba(35, 22, 14, .76), rgba(8, 18, 32, .94) 58%, rgba(7, 16, 28, .98)),
  radial-gradient(circle at 82% 18%, rgba(251, 146, 60, .20), transparent 28%),
  linear-gradient(135deg, #091522 0%, #10253d 54%, #312416 100%);
}
.social-snapshot-card h3 { margin: 22px 0 8px; max-width: 840px; font-size: clamp(54px, 5.4vw, 86px); }
.snapshot-generated { font-size: 17px; margin-bottom: 18px; }
.social-snapshot-stats.wide { margin: 18px 0 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 940px; }
.snapshot-stat-card { min-height: 82px; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; padding: 15px 18px; }
.snapshot-stat-card .snapshot-stat-icon { grid-row: 1 / span 2; }
.snapshot-stat-card b { font-size: 30px; }
.snapshot-stat-card span { grid-column: 2; }
.snapshot-section-title { margin-top: 4px; margin-bottom: 12px; }
.social-snapshot-roads.lanes { gap: 10px; }
.snapshot-road-lane {
  min-height: 48px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  grid-template-columns: 48px minmax(230px, .9fr) minmax(230px, 1fr) auto 18px;
  background: rgba(12, 24, 41, .80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.snapshot-road-index { width: 38px; height: 38px; }
.snapshot-road-copy strong { font-size: 16px; }
.snapshot-road-copy small { font-size: 13px; }
.snapshot-road-track { height: 26px; }
.snapshot-road-lane em { font-size: 16px; }
.snapshot-road-lane.tone-critical .snapshot-road-index { color: #fb3b5f; }
.snapshot-road-lane.tone-high .snapshot-road-index { color: #fb923c; }
.snapshot-road-lane.tone-medium .snapshot-road-index { color: #fbbf24; }
.snapshot-road-lane.tone-low .snapshot-road-index { color: #34d399; }

/* Snapshot polish pass */
.traffic-snapshot-card {
  width: min(1420px, 96vw);
  max-height: min(860px, 94vh);
  padding: 28px 30px 30px;
  border-radius: 32px;
}
.traffic-snapshot-head {
  align-items: center;
  margin-bottom: 22px;
}
.traffic-snapshot-head .traffic-kicker {
  margin-bottom: 8px;
  color: #3fd6ff;
  letter-spacing: .09em;
}
.traffic-snapshot-head h2 {
  margin: 0;
  font-size: clamp(38px, 3.6vw, 56px);
  line-height: 1.02;
}
.snapshot-download-btn {
  min-height: 46px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.traffic-snapshot-builder {
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 28px;
}
.traffic-snapshot-options {
  min-height: 645px;
  padding: 16px;
  border-radius: 22px;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.snapshot-label, .snapshot-road-head span {
  font-size: 11px;
  color: #91a4bd;
}
.snapshot-select {
  min-height: 50px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 750;
  color: #f4f8ff;
}
.snapshot-road-head {
  margin-top: 2px;
}
.mini-action {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}
.snapshot-road-list {
  gap: 10px;
  max-height: 440px;
  padding-right: 2px;
}
.snapshot-road {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 62px;
  padding: 0 14px 0 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 34, 56, .92), rgba(11, 24, 41, .88));
  border: 1px solid rgba(80, 116, 160, .22);
}
.snapshot-road::before {
  width: 4px;
  background: linear-gradient(180deg, #32d7ff, #0ea5e9);
}
.snapshot-road.active {
  border-color: rgba(61, 214, 255, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(2, 132, 199, .10);
}
.snapshot-check {
  margin-left: 12px;
}
.snapshot-road-main {
  padding: 12px 10px 12px 2px;
  gap: 2px;
}
.snapshot-road-main b {
  color: #f3f7fd;
  font-size: 14px;
  font-weight: 850;
}
.snapshot-road-main small {
  color: #90a4bd;
  font-size: 12px;
}
.snapshot-road-meta {
  position: static;
  top: auto;
  right: auto;
  padding-left: 14px;
  color: #f6c85f;
  font-size: 12px;
  font-weight: 850;
}
.snapshot-preview-btn {
  margin-top: 8px;
  min-height: 50px;
  font-size: 18px;
}
.snapshot-help {
  font-size: 12px;
  margin-top: 0;
}
.traffic-snapshot-preview {
  border-radius: 24px;
  border-color: rgba(148,163,184,.16);
}
.social-snapshot-card {
  padding: 34px 40px 30px;
}
.social-snapshot-top {
  margin-bottom: 10px;
}
.snapshot-live-pill {
  padding: 11px 18px;
  font-size: 13px;
}
.social-snapshot-top strong {
  font-size: 16px;
  font-weight: 800;
}
.social-snapshot-card h3 {
  margin: 16px 0 8px;
  max-width: 820px;
  font-size: clamp(54px, 5.3vw, 82px);
}
.snapshot-generated {
  margin-bottom: 22px;
  color: #aebed1;
}
.social-snapshot-stats.wide {
  gap: 16px;
  margin: 0 0 24px;
  max-width: 980px;
}
.snapshot-stat-card {
  min-height: 108px;
  padding: 16px 18px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}
.snapshot-stat-card .snapshot-stat-icon {
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 4px;
}
.snapshot-stat-card b {
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}
.snapshot-stat-card span {
  grid-column: 2;
  align-self: end;
  margin-top: 4px;
}
.snapshot-section-title {
  margin: 8px 0 12px;
  font-size: 22px;
}
.social-snapshot-roads.lanes {
  gap: 10px;
}
.snapshot-road-lane {
  min-height: 66px;
  padding: 10px 16px 10px 10px;
  grid-template-columns: 46px minmax(250px, .95fr) minmax(240px, 1fr) auto 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
}
.snapshot-road-index {
  width: 36px;
  height: 36px;
  font-size: 15px;
}
.snapshot-road-copy {
  gap: 3px;
}
.snapshot-road-copy strong {
  font-size: 15px;
  font-weight: 850;
}
.snapshot-road-copy small {
  font-size: 12px;
}
.snapshot-road-track {
  height: 24px;
}
.snapshot-road-track::before {
  top: 8px;
  border-top: 2px dashed rgba(148,163,184,.32);
}
.snapshot-road-track i {
  height: 4px;
  bottom: 1px;
}
.snapshot-road-lane em {
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}
.snapshot-road-arrow {
  font-size: 22px;
}
.snapshot-road-lane.tone-critical em,
.snapshot-road-lane.tone-critical .snapshot-road-copy strong { color: #ff9c92; }
.snapshot-road-lane.tone-high em,
.snapshot-road-lane.tone-high .snapshot-road-copy strong { color: #ffb06c; }
.snapshot-road-lane.tone-medium em { color: #ffc94d; }
.snapshot-road-lane.tone-low em { color: #58e3aa; }
@media (max-width: 1260px) {
  .traffic-snapshot-builder { grid-template-columns: 330px minmax(0, 1fr); gap: 22px; }
  .social-snapshot-card h3 { font-size: clamp(44px, 4.8vw, 72px); }
  .snapshot-road-lane { grid-template-columns: 44px minmax(200px, .9fr) minmax(170px, 1fr) auto 14px; }
}
@media (max-width: 1020px) {
  .traffic-snapshot-card { overflow: auto; }
  .traffic-snapshot-builder { grid-template-columns: 1fr; }
  .traffic-snapshot-options { min-height: unset; }
}

/* Snapshot aspect / cleaner pass */
.traffic-snapshot-preview-wrap {
  place-items: start center;
}
.traffic-snapshot-preview {
  width: min(760px, 100%);
  max-width: 760px;
  aspect-ratio: 5 / 6;
}
.social-snapshot-card.compact-portrait {
  padding: 34px 34px 30px;
}
.social-snapshot-card.compact-portrait .social-snapshot-top {
  margin-bottom: 12px;
}
.social-snapshot-card.compact-portrait h3 {
  max-width: 640px;
  font-size: clamp(50px, 4.4vw, 74px);
  line-height: .98;
}
.social-snapshot-card.compact-portrait .snapshot-generated {
  margin-bottom: 20px;
  font-size: 16px;
}
.social-snapshot-stats.wide.no-icons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
  max-width: none;
}
.social-snapshot-stats.wide.no-icons .snapshot-stat-card {
  min-height: 98px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.social-snapshot-stats.wide.no-icons .snapshot-stat-icon {
  display: none !important;
}
.social-snapshot-stats.wide.no-icons .snapshot-stat-card b {
  font-size: 36px;
  line-height: 1;
}
.social-snapshot-stats.wide.no-icons .snapshot-stat-card span {
  grid-column: auto;
  margin-top: 0;
}
.social-snapshot-roads.lanes.no-circles {
  gap: 12px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-lane {
  min-height: 86px;
  padding: 12px 16px 12px 14px;
  border-radius: 28px;
  grid-template-columns: 42px minmax(0, 1fr) auto 0;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-index {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  place-items: start;
  align-self: center;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.05em;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-copy {
  grid-column: 2;
  grid-row: 1;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-copy strong {
  font-size: 17px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-copy small {
  font-size: 13px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-track {
  grid-column: 2 / 4;
  grid-row: 2;
  width: 100%;
  height: 22px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-track::before {
  top: 6px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-track i {
  bottom: 0;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-lane em {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 17px;
}
.social-snapshot-roads.lanes.no-circles .snapshot-road-arrow {
  display: none;
}
@media (max-width: 1260px) {
  .traffic-snapshot-preview {
    width: min(700px, 100%);
    max-width: 700px;
  }
}
@media (max-width: 1020px) {
  .traffic-snapshot-preview {
    width: min(620px, 100%);
    max-width: 620px;
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 860px) {
  .traffic-snapshot-preview {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 5;
  }
  .social-snapshot-card.compact-portrait h3 {
    font-size: clamp(40px, 8vw, 58px);
  }
  .social-snapshot-stats.wide.no-icons {
    grid-template-columns: 1fr 1fr;
  }
  .social-snapshot-roads.lanes.no-circles .snapshot-road-lane {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .social-snapshot-roads.lanes.no-circles .snapshot-road-lane em {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
  .social-snapshot-roads.lanes.no-circles .snapshot-road-track {
    grid-column: 2;
  }
}

/* Snapshot proportion and numbering refinement */
.traffic-snapshot-preview-wrap {
  place-items: start center;
}
.traffic-snapshot-preview {
  width: min(860px, 100%);
  aspect-ratio: 5 / 4;
  margin: 0 auto;
}
.social-snapshot-card.compact-portrait {
  padding: 32px 36px 32px;
}
.social-snapshot-card.compact-portrait h3 {
  max-width: 760px;
  font-size: clamp(48px, 4.9vw, 74px);
}
.social-snapshot-card.compact-portrait .snapshot-generated {
  margin-bottom: 20px;
}
.social-snapshot-card.compact-portrait .social-snapshot-stats.wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  gap: 14px;
  margin-bottom: 20px;
}
.social-snapshot-card.compact-portrait .snapshot-stat-card {
  min-height: 98px;
  padding: 18px 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  row-gap: 6px;
}
.social-snapshot-card.compact-portrait .snapshot-stat-card b {
  font-size: 34px;
}
.social-snapshot-card.compact-portrait .snapshot-stat-card span {
  grid-column: auto;
  margin-top: 0;
}
.social-snapshot-card.compact-portrait .snapshot-section-title {
  margin: 4px 0 10px;
}
.social-snapshot-card.compact-portrait .snapshot-road-lane {
  min-height: 68px;
  padding: 10px 16px 10px 12px;
  grid-template-columns: 64px minmax(230px, .92fr) minmax(170px, 1fr) auto 16px;
}
.social-snapshot-card.compact-portrait .snapshot-road-index {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}
.social-snapshot-card.compact-portrait .snapshot-road-index::before {
  content: "";
  width: 4px;
  height: 30px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px rgba(255,255,255,.08);
}
.social-snapshot-card.compact-portrait .snapshot-road-copy strong {
  font-size: 15px;
}
.social-snapshot-card.compact-portrait .snapshot-road-copy small {
  font-size: 12px;
}
.social-snapshot-card.compact-portrait .snapshot-road-track {
  height: 24px;
}
.social-snapshot-card.compact-portrait .snapshot-road-lane em {
  font-size: 15px;
}
@media (max-width: 1260px) {
  .traffic-snapshot-preview {
    width: min(780px, 100%);
  }
}
@media (max-width: 860px) {
  .traffic-snapshot-preview {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .social-snapshot-card.compact-portrait .social-snapshot-stats.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-snapshot-card.compact-portrait .snapshot-road-lane {
    grid-template-columns: 60px 1fr;
  }
}

/* Snapshot UI cleanup requested */
.social-snapshot-card.no-summary-cards {
  padding: 34px 42px 40px;
}
.social-snapshot-card.no-summary-cards .snapshot-generated {
  margin-bottom: 18px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-stats,
.social-snapshot-card.no-summary-cards .snapshot-stat-card,
.social-snapshot-card.no-summary-cards .snapshot-stat-icon {
  display: none !important;
}
.social-snapshot-card.no-summary-cards .snapshot-section-title {
  margin: 0 0 14px;
  font-size: 24px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-roads {
  margin-top: 0;
}
.snapshot-road-list {
  max-height: 432px;
}
.snapshot-road {
  min-height: 64px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 12px 18px 12px 12px;
  grid-template-columns: 64px minmax(250px, .95fr) minmax(180px, 1fr) auto 16px;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(12, 24, 41, .80);
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane::after {
  content: "";
  position: absolute;
  inset: 16px 14px;
  border-radius: 20px;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 18%, transparent), transparent 70%);
  opacity: .85;
  pointer-events: none;
}
.social-snapshot-card.no-summary-cards .snapshot-road-index {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: currentColor;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  z-index: 1;
}
.social-snapshot-card.no-summary-cards .snapshot-road-index::before {
  content: "";
  width: 4px;
  height: 34px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy {
  gap: 4px;
  z-index: 1;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy strong {
  font-size: 15px;
  font-weight: 850;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy small {
  font-size: 12px;
  color: #9fb1c8;
}
.social-snapshot-card.no-summary-cards .snapshot-road-track {
  height: 26px;
  z-index: 1;
}
.social-snapshot-card.no-summary-cards .snapshot-road-track::before {
  top: 9px;
  border-top: 2px dashed rgba(148,163,184,.26);
}
.social-snapshot-card.no-summary-cards .snapshot-road-track i {
  height: 5px;
  bottom: 0;
  border-radius: 999px;
  box-shadow: 0 0 18px currentColor, 0 0 30px color-mix(in srgb, currentColor 48%, transparent);
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane em {
  z-index: 1;
  font-size: 16px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-arrow {
  z-index: 1;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-critical .snapshot-road-copy strong,
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-critical em { color: #ff5c86; }
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-high .snapshot-road-copy strong,
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-high em { color: #ff9c4a; }
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-medium .snapshot-road-copy strong,
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-medium em { color: #ffc93a; }
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-low .snapshot-road-copy strong,
.social-snapshot-card.no-summary-cards .snapshot-road-lane.tone-low em { color: #50e3a4; }
@media (max-width: 860px) {
  .social-snapshot-card.no-summary-cards .snapshot-road-lane {
    grid-template-columns: 62px 1fr;
  }
}

/* Mockup A — Dark Premium / Balanced final implementation */
.native-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.snapshot-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.snapshot-download-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.snapshot-city-picker {
  position: relative;
  z-index: 8;
}
.snapshot-city-button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px 1fr 22px;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid rgba(61, 214, 255, .34);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 24, 40, .92), rgba(7, 18, 32, .88));
  color: #eef6ff;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.snapshot-city-button:hover,
.snapshot-city-picker.open .snapshot-city-button {
  border-color: rgba(61, 214, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(14, 165, 233, .12);
}
.snapshot-city-icon,
.snapshot-city-chevron {
  width: 22px;
  height: 22px;
  color: #38d7ff;
}
.snapshot-city-chevron {
  justify-self: end;
  color: #b7c6da;
  transition: transform .18s ease;
}
.snapshot-city-picker.open .snapshot-city-chevron { transform: rotate(180deg); }
.snapshot-city-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 310px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(95, 134, 184, .32);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 24, 42, .98), rgba(8, 18, 32, .98));
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.snapshot-city-menu::-webkit-scrollbar { width: 7px; }
.snapshot-city-menu::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 999px; }
.snapshot-city-option {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #d9e6f7;
  text-align: left;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}
.snapshot-city-option:hover { background: rgba(56, 189, 248, .10); color: #fff; }
.snapshot-city-option.active {
  background: linear-gradient(90deg, rgba(14, 165, 233, .28), rgba(34, 211, 238, .12));
  color: #ffffff;
}
.snapshot-city-option svg { width: 18px; height: 18px; color: #67e8f9; }
.traffic-snapshot-card {
  width: min(1240px, 95vw);
  max-height: min(900px, 94vh);
  overflow: auto;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 2%, rgba(56, 189, 248, .16), transparent 34%),
    linear-gradient(145deg, rgba(5, 13, 25, .98), rgba(8, 24, 41, .96));
}
.traffic-snapshot-head {
  margin-bottom: 20px;
  padding-right: 52px;
}
.traffic-snapshot-head h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.02;
}
.traffic-snapshot-builder {
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.traffic-snapshot-options {
  min-height: 660px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12, 26, 44, .88), rgba(8, 18, 31, .80));
  border-color: rgba(148, 163, 184, .18);
}
.traffic-snapshot-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.traffic-snapshot-preview {
  width: min(740px, 100%);
  aspect-ratio: 4 / 5;
  border-radius: 28px;
}
.social-snapshot-card.no-summary-cards {
  padding: 34px 34px 36px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(11, 35, 67, .72), rgba(8, 18, 32, .94) 54%, rgba(7, 16, 28, .98)),
    radial-gradient(circle at 78% 18%, rgba(56, 189, 248, .16), transparent 30%),
    radial-gradient(circle at 94% 92%, rgba(251, 146, 60, .12), transparent 36%),
    #07111f;
}
.social-snapshot-card.no-summary-cards::after {
  opacity: .55;
  background-position: right 26px top 72px;
  background-size: 430px auto;
}
.social-snapshot-card.no-summary-cards .social-snapshot-top {
  margin-bottom: 22px;
}
.social-snapshot-card.no-summary-cards .snapshot-live-pill {
  padding: 10px 15px;
  font-size: 12px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-top strong {
  font-size: 13px;
}
.social-snapshot-card.no-summary-cards h3 {
  margin: 0 0 8px;
  max-width: 620px;
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: .98;
  letter-spacing: -.07em;
}
.social-snapshot-card.no-summary-cards .snapshot-generated {
  margin: 0 0 30px;
  font-size: 16px;
  color: #aebed1;
}
.social-snapshot-card.no-summary-cards .snapshot-section-title {
  margin: 0 0 16px;
  font-size: 25px;
  letter-spacing: -.03em;
}
.social-snapshot-card.no-summary-cards .social-snapshot-roads.lanes {
  gap: 12px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane {
  min-height: 84px;
  grid-template-columns: 62px minmax(170px, .92fr) minmax(130px, 1fr) auto 16px;
  padding: 12px 16px 12px 12px;
  border-radius: 24px;
  background: rgba(11, 23, 39, .78);
}
.social-snapshot-card.no-summary-cards .snapshot-road-index {
  font-size: 26px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-index::before {
  height: 32px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy strong {
  font-size: 16px;
  color: #f4f8ff;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy small {
  font-size: 12px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane em {
  font-size: 14px;
}
@media (max-width: 980px) {
  .traffic-snapshot-builder { grid-template-columns: 1fr; }
  .traffic-snapshot-options { min-height: unset; }
  .traffic-snapshot-preview { width: min(720px, 100%); }
}

/* Mockup A fitting + preview/export alignment */
.traffic-snapshot-card {
  width: min(1320px, 95vw);
  max-height: min(840px, 92vh);
  padding: 20px 22px 22px;
  overflow: hidden;
}
.traffic-snapshot-head {
  margin-bottom: 14px;
  padding-right: 56px;
}
.traffic-snapshot-head .traffic-kicker {
  margin: 0 0 6px;
  font-size: 12px;
}
.traffic-snapshot-head h2 {
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.02;
}
.traffic-snapshot-builder {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  height: calc(92vh - 132px);
  min-height: 640px;
}
.traffic-snapshot-options {
  min-height: 0;
  height: 100%;
  padding: 14px;
  gap: 12px;
}
.snapshot-city-picker,
.snapshot-city-button {
  width: 100%;
}
.snapshot-city-button {
  min-height: 52px;
}
.snapshot-road-head {
  margin-top: 4px;
}
.snapshot-road-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow: auto;
}
.snapshot-road {
  min-height: 60px;
}
.snapshot-road-main b {
  font-size: 14px;
}
.snapshot-road-main small {
  font-size: 11px;
}
.snapshot-road-meta {
  font-size: 12px;
}
.snapshot-preview-btn {
  min-height: 48px;
  margin-top: 2px;
}
.snapshot-help {
  margin-top: -2px;
}
.traffic-snapshot-preview-wrap {
  height: 100%;
  align-items: center;
  justify-content: center;
}
.traffic-snapshot-preview {
  width: min(900px, 100%);
  aspect-ratio: 16 / 10;
  height: auto;
}
.social-snapshot-card.no-summary-cards {
  padding: 28px 34px 28px;
}
.social-snapshot-card.no-summary-cards::after {
  opacity: .42;
  background-size: 360px auto;
  background-position: right 18px top 58px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-top {
  margin-bottom: 14px;
}
.social-snapshot-card.no-summary-cards .snapshot-live-pill {
  padding: 8px 14px;
  font-size: 11px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-top strong {
  font-size: 13px;
}
.social-snapshot-card.no-summary-cards h3 {
  margin: 0 0 6px;
  max-width: 720px;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .95;
}
.social-snapshot-card.no-summary-cards .snapshot-generated {
  margin: 0 0 18px;
  font-size: 14px;
}
.social-snapshot-card.no-summary-cards .snapshot-section-title {
  margin: 0 0 12px;
  font-size: 20px;
}
.social-snapshot-card.no-summary-cards .social-snapshot-roads.lanes {
  gap: 10px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane {
  min-height: 72px;
  padding: 10px 16px 10px 12px;
  grid-template-columns: 56px minmax(180px, .95fr) minmax(160px, 1fr) auto 12px;
  border-radius: 22px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane::after {
  inset: 12px;
  border-radius: 16px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-index {
  font-size: 22px;
  gap: 10px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-index::before {
  height: 28px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy strong {
  font-size: 14px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-copy small {
  font-size: 11px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-track {
  height: 22px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-track::before {
  top: 8px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-track i {
  height: 4px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-lane em {
  font-size: 13px;
}
.social-snapshot-card.no-summary-cards .snapshot-road-arrow {
  font-size: 18px;
}
@media (max-width: 1180px) {
  .traffic-snapshot-card {
    max-height: 94vh;
    overflow: auto;
  }
  .traffic-snapshot-builder {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .traffic-snapshot-options {
    height: auto;
  }
  .traffic-snapshot-preview {
    width: min(880px, 100%);
  }
}
.traffic-snapshot-options {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}

/* Athens header photo + title/date refinements */
.social-snapshot-card.no-summary-cards.has-header-photo::after {
  display: none;
}
.snapshot-header-photo {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 330px;
  height: 156px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  z-index: 0;
}
.snapshot-header-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,17,31,.08), rgba(7,17,31,.18) 55%, rgba(7,17,31,.42));
}
.snapshot-header-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-snapshot-top.no-pill {
  justify-content: flex-end;
  min-height: 22px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.social-snapshot-top.no-pill strong {
  font-size: 13px;
}
.snapshot-main-title {
  position: relative;
  z-index: 1;
}
.snapshot-main-title.title-compact {
  font-size: clamp(34px, 4vw, 58px) !important;
  max-width: 760px !important;
}
.social-snapshot-card.no-summary-cards .snapshot-generated {
  position: relative;
  z-index: 1;
  margin-top: -2px;
  margin-bottom: 14px;
  font-size: 13px;
}
.social-snapshot-card.no-summary-cards .snapshot-section-title {
  position: relative;
  z-index: 1;
}
.social-snapshot-card.no-summary-cards .social-snapshot-roads {
  position: relative;
  z-index: 1;
}
.social-snapshot-card.no-summary-cards.has-header-photo h3 {
  max-width: 760px;
}
@media (max-width: 1180px) {
  .snapshot-header-photo {
    width: 280px;
    height: 132px;
  }
  .social-snapshot-card.no-summary-cards.has-header-photo h3 {
    max-width: 620px;
  }
}
@media (max-width: 860px) {
  .snapshot-header-photo {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 160px;
    margin-bottom: 12px;
  }
  .social-snapshot-top.no-pill {
    justify-content: flex-start;
  }
  .social-snapshot-card.no-summary-cards.has-header-photo h3,
  .snapshot-main-title.title-compact {
    max-width: 100% !important;
  }
}

/* Athens photo header + title spacing fix */
.social-snapshot-card.no-summary-cards.has-header-photo {
  padding-top: 28px;
}
.social-snapshot-card.no-summary-cards.has-header-photo::after {
  display: none !important;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-header-photo {
  display: block;
  top: 22px;
  right: 24px;
  width: 320px;
  height: 150px;
  z-index: 0;
}
.social-snapshot-card.no-summary-cards.has-header-photo .social-snapshot-top.no-pill {
  min-height: 20px;
  margin-bottom: 10px;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-main-title {
  max-width: 560px !important;
  font-size: clamp(34px, 4.2vw, 54px) !important;
  line-height: 1.02 !important;
  margin-bottom: 4px !important;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-main-title.title-compact {
  font-size: clamp(30px, 3.8vw, 48px) !important;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-generated {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-section-title {
  margin-top: 0 !important;
}
@media (max-width: 1180px) {
  .social-snapshot-card.no-summary-cards.has-header-photo .snapshot-header-photo {
    width: 260px;
    height: 124px;
  }
  .social-snapshot-card.no-summary-cards.has-header-photo .snapshot-main-title {
    max-width: 520px !important;
  }
}

/* Full-width blended Acropolis header */
.snapshot-header-photo {
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 250px;
  border-radius: 34px 34px 0 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  opacity: .82;
}
.snapshot-header-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,14,26,.26) 0%, rgba(6,14,26,.48) 58%, rgba(6,14,26,.98) 100%),
    linear-gradient(90deg, rgba(6,14,26,.72) 0%, rgba(6,14,26,.34) 34%, rgba(6,14,26,.18) 70%, rgba(6,14,26,.50) 100%);
  z-index: 1;
}
.snapshot-header-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 110px;
  background: linear-gradient(180deg, rgba(6,14,26,0) 0%, rgba(6,14,26,.92) 100%);
  z-index: 2;
}
.snapshot-header-photo img {
  object-position: center 38%;
  filter: saturate(1.02) brightness(.92);
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-map-glow {
  opacity: .45;
}
.social-snapshot-card.no-summary-cards.has-header-photo .social-snapshot-top,
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-main-title,
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-generated,
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-section-title,
.social-snapshot-card.no-summary-cards.has-header-photo .social-snapshot-roads {
  position: relative;
  z-index: 3;
}
.social-snapshot-card.no-summary-cards.has-header-photo h3 {
  margin-top: 22px;
  max-width: 860px;
}
.social-snapshot-card.no-summary-cards.has-header-photo .snapshot-generated {
  margin-bottom: 16px;
}
@media (max-width: 860px) {
  .snapshot-header-photo {
    height: 180px;
    border-radius: 24px 24px 0 0;
  }
}

/* Dark OSM-style map header with traffic overlays */
.social-snapshot-card.no-summary-cards.has-map-header::after,
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-header-photo {
  display: none !important;
}
.snapshot-header-map {
  position: absolute;
  inset: 0 0 auto 0;
  height: 250px;
  border-radius: 34px 34px 0 0;
  overflow: hidden;
  z-index: 0;
  opacity: .96;
}
.snapshot-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.social-snapshot-card.no-summary-cards.has-map-header .social-snapshot-top,
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-main-title,
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-generated,
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-section-title,
.social-snapshot-card.no-summary-cards.has-map-header .social-snapshot-roads {
  position: relative;
  z-index: 3;
}
.social-snapshot-card.no-summary-cards.has-map-header h3 {
  margin-top: 18px;
  max-width: 860px;
}
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-generated {
  margin-top: -2px;
  margin-bottom: 16px;
}
.social-snapshot-card.no-summary-cards.has-map-header .snapshot-map-glow {
  opacity: .40;
}
@media (max-width: 860px) {
  .snapshot-header-map { height: 180px; border-radius: 24px 24px 0 0; }
}


/* Real dark map header tiles + traffic overlays */
.snapshot-header-map {
  background: #09121f;
}
.snapshot-map-tiles,
.snapshot-map-overlay {
  position: absolute;
  inset: 0;
}
.snapshot-map-tiles {
  overflow: hidden;
}
.snapshot-map-tile {
  position: absolute;
  display: block;
  image-rendering: auto;
  filter: saturate(.95) brightness(.92);
}
.snapshot-map-overlay {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.snapshot-header-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(7,17,31,.12) 0%, rgba(7,17,31,.30) 52%, rgba(7,17,31,.92) 100%);
  pointer-events: none;
}
.snapshot-header-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(7,17,31,.72) 0%, rgba(7,17,31,.24) 28%, rgba(7,17,31,.12) 74%, rgba(7,17,31,.34) 100%);
  pointer-events: none;
}

/* Full snapshot as map view without road rows */
.social-snapshot-card.full-map-view {
  position: relative;
  overflow: hidden;
  padding: 28px 30px 28px;
  min-height: 100%;
}
.snapshot-full-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #09121f;
}
.snapshot-full-map-bg .snapshot-map-tiles,
.snapshot-full-map-bg .snapshot-map-overlay {
  position: absolute;
  inset: 0;
}
.snapshot-full-map-bg .snapshot-map-tile {
  position: absolute;
  display: block;
  filter: saturate(.95) brightness(.92);
}
.snapshot-full-map-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(7,17,31,.82) 0%, rgba(7,17,31,.48) 34%, rgba(7,17,31,.18) 56%, rgba(7,17,31,.72) 100%),
    linear-gradient(90deg, rgba(7,17,31,.30) 0%, rgba(7,17,31,.10) 40%, rgba(7,17,31,.16) 70%, rgba(7,17,31,.32) 100%);
  pointer-events: none;
}
.snapshot-full-map-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(7,17,31,0) 0%, rgba(7,17,31,.88) 100%);
  pointer-events: none;
}
.social-snapshot-card.full-map-view .social-snapshot-top,
.social-snapshot-card.full-map-view .snapshot-main-title,
.social-snapshot-card.full-map-view .snapshot-generated,
.social-snapshot-card.full-map-view .snapshot-map-subtitle,
.social-snapshot-card.full-map-view .snapshot-map-road-tags {
  position: relative;
  z-index: 3;
}
.social-snapshot-card.full-map-view .social-snapshot-top {
  margin-bottom: 12px;
}
.social-snapshot-card.full-map-view h3 {
  max-width: 860px;
  margin: 0 0 8px;
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: .95;
}
.social-snapshot-card.full-map-view .snapshot-generated {
  margin: 0 0 8px;
  color: #b8c6d8;
  font-size: 14px;
}
.social-snapshot-card.full-map-view .snapshot-map-subtitle {
  color: #d7e3ef;
  font-size: 14px;
  font-weight: 650;
}
.social-snapshot-card.full-map-view .snapshot-map-road-tags {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.snapshot-road-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(9, 18, 31, .74);
  border: 1px solid rgba(148,163,184,.16);
  color: #e8f0fb;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.snapshot-road-tag i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  flex: 0 0 auto;
}
.snapshot-road-tag small {
  color: #b7c5d7;
  font-size: 12px;
  font-weight: 650;
}
.snapshot-road-tag.tone-critical { color: #ff4f7a; }
.snapshot-road-tag.tone-high { color: #ff9c45; }
.snapshot-road-tag.tone-medium { color: #ffd039; }
.snapshot-road-tag.tone-low { color: #43e0a3; }
.social-snapshot-card.full-map-view .snapshot-section-title,
.social-snapshot-card.full-map-view .social-snapshot-roads {
  display: none !important;
}
@media (max-width: 860px) {
  .social-snapshot-card.full-map-view {
    padding: 22px 22px 22px;
  }
  .social-snapshot-card.full-map-view .snapshot-map-road-tags {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
}

/* Overlay labels and directional arrows without glow */
.snapshot-map-overlay text {
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.snapshot-map-overlay .snapshot-map-annotation {
  pointer-events: none;
}
.snapshot-map-overlay .snapshot-map-annotation line,
.snapshot-map-overlay .snapshot-map-annotation path,
.snapshot-map-overlay polyline {
  filter: none !important;
}
.social-snapshot-card.full-map-view .snapshot-map-road-tags {
  display: none !important;
}


/* Apply selected Mockup A real-map direction */
.social-snapshot-card.full-map-view.mockup-a-map {
  padding: 38px;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-full-map-bg::before {
  background:
    linear-gradient(180deg, rgba(5,12,22,.90) 0%, rgba(5,12,22,.48) 28%, rgba(5,12,22,.10) 55%, rgba(5,12,22,.86) 100%),
    linear-gradient(90deg, rgba(5,12,22,.55), transparent 40%, rgba(5,12,22,.22));
}
.social-snapshot-card.full-map-view.mockup-a-map .social-snapshot-top {
  justify-content: flex-end;
  margin-bottom: 8px;
}
.social-snapshot-card.full-map-view.mockup-a-map .social-snapshot-top strong {
  color: #dbe6f3;
  font-size: 15px;
  font-weight: 850;
}
.social-snapshot-card.full-map-view.mockup-a-map h3 {
  max-width: 860px;
  margin: 0 0 12px;
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: .94;
  letter-spacing: -.055em;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-generated {
  max-width: 860px;
  color: #b8c7d8;
  font-size: 15px;
  font-weight: 750;
  margin: 0;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-map-road-tags {
  display: flex !important;
  left: 34px;
  right: 34px;
  bottom: 28px;
  gap: 10px;
  flex-wrap: wrap;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag {
  color: #eaf2ff;
  gap: 9px;
  padding: 11px 14px;
  background: rgba(7,17,31,.76);
  border: 1px solid rgba(148,163,184,.17);
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag b {
  font-size: 13px;
  font-weight: 850;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag small {
  color: #b8c7d8;
  font-size: 12px;
  margin-left: 2px;
}
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag.tone-critical i { background:#ff4f7a; color:#ff4f7a; }
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag.tone-high i { background:#ff9c45; color:#ff9c45; }
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag.tone-medium i { background:#ffd039; color:#ffd039; }
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-road-tag.tone-low i { background:#45e0a5; color:#45e0a5; }
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-map-subtitle,
.social-snapshot-card.full-map-view.mockup-a-map .snapshot-section-title,
.social-snapshot-card.full-map-view.mockup-a-map .social-snapshot-roads {
  display: none !important;
}
.snapshot-map-overlay .snapshot-map-road .flow,
.snapshot-map-overlay polyline {
  filter: none !important;
}
.snapshot-map-overlay .snapshot-map-annotation text {
  paint-order: stroke;
  stroke: rgba(7,17,31,.92);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Reference-style full map snapshot, based on the user's sample */
.social-snapshot-card.full-map-view.map-reference-style {
  min-height: 620px;
  padding: 34px 34px 30px;
  overflow: hidden;
}
.social-snapshot-card.full-map-view.map-reference-style .snapshot-full-map-bg::before {
  background:
    linear-gradient(180deg, rgba(6,12,22,.78) 0%, rgba(6,12,22,.24) 36%, rgba(6,12,22,.72) 100%),
    linear-gradient(90deg, rgba(6,12,22,.26), rgba(6,12,22,.08));
}
.social-snapshot-card.full-map-view.map-reference-style .social-snapshot-top {
  justify-content: flex-end;
  margin-bottom: 6px;
}
.social-snapshot-card.full-map-view.map-reference-style .social-snapshot-top strong {
  color: #e2eaf4;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.01em;
}
.social-snapshot-card.full-map-view.map-reference-style h3 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(42px, 6vw, 74px);
  line-height: .95;
  letter-spacing: -.06em;
}
.social-snapshot-card.full-map-view.map-reference-style .snapshot-generated {
  margin: 10px 0 0;
  color: #d0dbe8;
  font-size: 15px;
  font-weight: 760;
}
.social-snapshot-card.full-map-view.map-reference-style .snapshot-map-road-tags,
.social-snapshot-card.full-map-view.map-reference-style .snapshot-map-subtitle,
.social-snapshot-card.full-map-view.map-reference-style .snapshot-section-title,
.social-snapshot-card.full-map-view.map-reference-style .social-snapshot-roads,
.social-snapshot-card.full-map-view.map-reference-style .snapshot-rail,
.social-snapshot-card.full-map-view.map-reference-style .snapshot-summary-grid {
  display: none !important;
}
.snapshot-map-road-base {
  fill: none;
  stroke: rgba(8, 11, 18, .94);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snapshot-map-road-color {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snapshot-map-arrow line {
  stroke: currentColor;
  stroke-width: 3.8;
  stroke-linecap: round;
}
.snapshot-map-arrow path {
  fill: currentColor;
}
.snapshot-map-delay-text {
  font-family: Inter, Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
  fill: currentColor;
  paint-order: stroke;
  stroke: rgba(8, 12, 18, .96);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.snapshot-map-overlay .snapshot-map-annotation,
.snapshot-map-overlay .snapshot-map-arrow,
.snapshot-map-overlay .snapshot-map-road {
  filter: none !important;
}

/* Greek city labels + hazard detail simplification */
.traffic-metric.compact-value strong {
  font-size: clamp(22px, 2.35vw, 32px) !important;
  line-height: .95 !important;
}
.traffic-metric.green.compact-value strong {
  font-size: clamp(20px, 2.15vw, 30px) !important;
}
.traffic-tab {
  white-space: nowrap;
}
.traffic-hazard-item.inline-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.traffic-hazard-item.inline-item .traffic-hazard-main {
  min-width: 0;
}
.traffic-hazard-item.inline-item strong {
  display: block;
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.traffic-hazard-item.inline-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.traffic-hazard-item.inline-item .traffic-hazard-actions {
  margin-left: auto;
}
.traffic-hazard-item.inline-item .traffic-hazard-links {
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.traffic-hazard-item.inline-item .traffic-hazard-links a {
  min-width: 112px;
}
@media (max-width: 760px) {
  .traffic-hazard-item.inline-item {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .traffic-hazard-item.inline-item .traffic-hazard-actions {
    margin-left: 0;
    width: 100%;
  }
  .traffic-hazard-item.inline-item .traffic-hazard-links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Snapshot: map only with floating overlays */
.social-snapshot-card.map-only-preview {
  padding: 0;
  min-height: 470px;
  border-radius: 34px;
  overflow: hidden;
  background: #09111d;
  border: 1px solid rgba(148,163,184,.14);
}
.social-snapshot-card.map-only-preview .snapshot-full-map-bg.only-map {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  overflow: hidden;
}
.social-snapshot-card.map-only-preview .snapshot-full-map-bg.only-map::before,
.social-snapshot-card.map-only-preview .snapshot-map-glow,
.social-snapshot-card.map-only-preview .social-snapshot-top,
.social-snapshot-card.map-only-preview h3,
.social-snapshot-card.map-only-preview .snapshot-generated,
.social-snapshot-card.map-only-preview .snapshot-section-title,
.social-snapshot-card.map-only-preview .snapshot-summary-grid,
.social-snapshot-card.map-only-preview .snapshot-map-road-tags,
.social-snapshot-card.map-only-preview .social-snapshot-roads,
.social-snapshot-card.map-only-preview .snapshot-rail {
  display: none !important;
}
.snapshot-map-overlay.map-only {
  overflow: visible;
}
.snapshot-map-overlay.map-only .snapshot-map-road-base {
  stroke: rgba(7,10,16,.96);
  stroke-width: 13;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snapshot-map-overlay.map-only .snapshot-map-road-color {
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, currentColor 36%, transparent));
}
.snapshot-map-overlay.map-only .snapshot-map-road.tone-critical .snapshot-map-road-color { filter: drop-shadow(0 6px 16px rgba(255,79,122,.48)); }
.snapshot-map-overlay.map-only .snapshot-map-road.tone-high .snapshot-map-road-color { filter: drop-shadow(0 6px 16px rgba(255,156,69,.42)); }
.snapshot-map-overlay.map-only .snapshot-map-road.tone-medium .snapshot-map-road-color { filter: drop-shadow(0 6px 16px rgba(255,208,57,.36)); }
.snapshot-map-overlay.map-only .snapshot-map-road.tone-low .snapshot-map-road-color { filter: drop-shadow(0 6px 16px rgba(69,224,165,.36)); }
.snapshot-map-overlay.map-only .snapshot-map-road-name {
  font-family: Inter, Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
  fill: #f4f8ff;
  paint-order: stroke;
  stroke: rgba(8,12,18,.96);
  stroke-width: 5px;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.snapshot-map-overlay.map-only .snapshot-map-delay-pill rect {
  fill: rgba(7,17,31,.88);
  stroke: currentColor;
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.42));
}
.snapshot-map-overlay.map-only .snapshot-map-delay-pill text {
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  fill: currentColor;
  paint-order: stroke;
  stroke: rgba(8,12,18,.88);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Live traffic monitor preview */
.traffic-monitor-shell{
  margin-top:22px;
}
.traffic-monitor-preview{
  width:100%;
}
.monitor-preview-card{
  border:1px solid rgba(148,163,184,.14);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(7,16,28,.88),rgba(8,18,31,.82));
  box-shadow:0 24px 90px rgba(0,0,0,.34);
  overflow:hidden;
}
.monitor-preview-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 312px;
  gap:16px;
  padding:16px;
}
.monitor-preview-map{
  position:relative;
  min-height:760px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.12);
  background:#08111b;
}
.monitor-map-tiles,
.monitor-map-overlay{
  position:absolute;
  inset:0;
}
.monitor-map-tiles{
  overflow:hidden;
}
.monitor-map-tile{
  position:absolute;
  image-rendering:auto;
  filter:saturate(.86) brightness(.78) contrast(1.08);
}
.monitor-preview-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 82%, rgba(59,130,246,.16), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(34,211,238,.10), transparent 22%),
    linear-gradient(180deg, rgba(5,10,18,.34), rgba(5,10,18,.08) 16%, rgba(5,10,18,.18) 58%, rgba(5,10,18,.56));
  pointer-events:none;
  z-index:1;
}
.monitor-preview-topbar,
.monitor-preview-title,
.monitor-preview-city,
.monitor-preview-attrib{
  position:absolute;
  z-index:4;
}
.monitor-preview-topbar{
  top:18px;
  left:18px;
  right:18px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}
.monitor-search{
  min-width:360px;
  max-width:430px;
  height:56px;
  border-radius:20px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(7,17,31,.74);
  border:1px solid rgba(148,163,184,.16);
  color:#95a9c4;
  font-weight:700;
  backdrop-filter:blur(14px);
}
.monitor-search svg{width:22px;height:22px;color:#b6c6da;flex:0 0 auto}
.monitor-controls{display:flex;gap:10px}
.monitor-controls button{
  width:48px;height:48px;border-radius:16px;border:1px solid rgba(148,163,184,.16);
  background:rgba(7,17,31,.74);color:#d8e4f3;display:grid;place-items:center;backdrop-filter:blur(14px);
}
.monitor-controls svg{width:22px;height:22px}
.monitor-preview-title{
  left:24px;
  bottom:26px;
}
.monitor-preview-title h3{
  margin:0;
  font-size:44px;
  line-height:.96;
  letter-spacing:-.06em;
}
.monitor-preview-title p{
  margin:8px 0 0;
  color:#b5c3d5;
  font-size:18px;
  font-weight:680;
}
.monitor-preview-city{
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  font-size:26px;
  letter-spacing:-.05em;
  font-weight:900;
  color:rgba(244,248,255,.96);
  text-shadow:0 8px 28px rgba(0,0,0,.5);
}
.monitor-preview-attrib{
  right:14px;
  bottom:14px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(7,17,31,.66);
  color:#8fa3bb;
  font-size:12px;
  border:1px solid rgba(148,163,184,.14);
}
.monitor-map-overlay{
  z-index:2;
  overflow:visible;
}
.monitor-route-base{
  fill:none;
  stroke:rgba(6,10,16,.95);
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.monitor-route-line{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.monitor-route.tone-critical .monitor-route-line{filter:drop-shadow(0 0 18px rgba(255,79,122,.24)) drop-shadow(0 10px 22px rgba(255,79,122,.22));}
.monitor-route.tone-high .monitor-route-line{filter:drop-shadow(0 0 18px rgba(255,156,69,.22)) drop-shadow(0 10px 22px rgba(255,156,69,.18));}
.monitor-route.tone-medium .monitor-route-line{filter:drop-shadow(0 0 18px rgba(255,208,57,.18)) drop-shadow(0 10px 22px rgba(255,208,57,.16));}
.monitor-route.tone-low .monitor-route-line{filter:drop-shadow(0 0 18px rgba(69,224,165,.16)) drop-shadow(0 10px 22px rgba(69,224,165,.14));}
.monitor-route-arrow line{
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.34));
}
.monitor-route-arrow path{fill:currentColor;filter:drop-shadow(0 2px 8px rgba(0,0,0,.34));}
.monitor-route-label text{
  font-size:18px;
  font-weight:850;
  letter-spacing:-.04em;
  fill:#f7fbff;
  paint-order:stroke;
  stroke:rgba(5,10,18,.96);
  stroke-width:4px;
  stroke-linejoin:round;
  text-shadow:0 3px 10px rgba(0,0,0,.4);
}
.monitor-delay-pill rect{
  fill:rgba(7,17,31,.78);
  stroke:currentColor;
  stroke-opacity:.4;
  stroke-width:1.3;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.monitor-delay-pill text{
  font-size:18px;
  font-weight:900;
  fill:currentColor;
  paint-order:stroke;
  stroke:rgba(5,10,18,.88);
  stroke-width:3.4px;
}
.monitor-preview-rail{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.monitor-rail-card{
  border-radius:26px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg,rgba(10,22,38,.82),rgba(7,16,29,.74));
  padding:18px 18px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.monitor-rail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.monitor-rail-head span{
  color:#f4f8ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.monitor-rail-head b{
  color:#c0d1e4;
  font-size:13px;
  font-weight:800;
}
.monitor-health-card p,
.monitor-trend-foot{
  color:#a3b4c8;
  font-size:14px;
  line-height:1.5;
}
.monitor-gauge{
  --size:180px;
  width:var(--size);
  height:var(--size);
  margin:4px auto 16px;
  border-radius:50%;
  background:conic-gradient(from 210deg, #ff6b6b 0deg, #ff9c45 88deg, #ffd039 150deg, #45e0a5 calc(var(--score) * 2.4deg), rgba(255,255,255,.08) 0);
  position:relative;
}
.monitor-gauge::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(7,16,28,.98),rgba(8,18,31,.96));
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.08);
}
.monitor-gauge-inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:1;
  text-align:center;
}
.monitor-gauge-inner strong{font-size:58px;line-height:.9;letter-spacing:-.06em}
.monitor-gauge-inner small{color:#91a5bd;font-size:18px;font-weight:800}
.monitor-gauge-inner span{margin-top:4px;color:#54e4ae;font-weight:900;font-size:24px;letter-spacing:-.04em}
.monitor-trend-svg{width:100%;height:98px;display:block}
.monitor-trend-svg polyline{fill:none;stroke:#42b8ff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 8px 14px rgba(66,184,255,.18));}
.monitor-trend-svg circle{fill:#72d0ff;stroke:#0d233d;stroke-width:2}
.monitor-trend-svg text{fill:#dff3ff;font-size:12px;font-weight:900}
.monitor-incidents{display:grid;gap:10px}
.monitor-incident-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(148,163,184,.1);
}
.monitor-incident-row:last-child{border-bottom:0;padding-bottom:0}
.monitor-incident-row .tone{width:10px;height:10px;border-radius:50%;background:currentColor}
.monitor-incident-row .tone.critical{color:#ff4f7a;background:#ff4f7a}
.monitor-incident-row .tone.high{color:#ff9c45;background:#ff9c45}
.monitor-incident-row .tone.medium{color:#ffd039;background:#ffd039}
.monitor-incident-row .tone.low{color:#45e0a5;background:#45e0a5}
.monitor-incident-row strong{display:block;font-size:16px;line-height:1.1}
.monitor-incident-row small{display:block;color:#9fb2c8;font-size:13px;font-weight:700;margin-top:3px}
.monitor-incident-row b{font-size:15px;font-weight:850;white-space:nowrap}
.monitor-weather{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.monitor-weather strong{font-size:48px;line-height:1;letter-spacing:-.06em}
.monitor-weather span{color:#b7c7d8;font-size:16px;font-weight:700}
.monitor-weather-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;color:#9eb1c6;font-size:13px;font-weight:700}
@media (max-width: 1180px){
  .monitor-preview-main{grid-template-columns:1fr}
  .monitor-preview-map{min-height:640px}
}
@media (max-width: 760px){
  .monitor-preview-main{padding:12px}
  .monitor-search{min-width:0;max-width:none;flex:1}
  .monitor-preview-topbar{flex-wrap:wrap}
  .monitor-preview-map{min-height:540px}
  .monitor-preview-title h3{font-size:34px}
}


/* Monitor mode opens only when the Monitor mode button is clicked */
.traffic-monitor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 7, 13, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.traffic-monitor-overlay[hidden] {
  display: none !important;
}
.traffic-monitor-stage {
  position: relative;
  width: min(1720px, 98vw);
  height: min(980px, 96vh);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 310px;
  gap: 14px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(135deg, rgba(5,13,24,.98), rgba(7,19,32,.94));
  box-shadow: 0 36px 120px rgba(0,0,0,.52);
}
.traffic-monitor-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7,17,31,.78);
  color: #dbe7f6;
  cursor: pointer;
}
.traffic-monitor-close::before,
.traffic-monitor-close::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.traffic-monitor-close::before { transform: rotate(45deg); }
.traffic-monitor-close::after { transform: rotate(-45deg); }
.traffic-monitor-side,
.traffic-monitor-info {
  position: relative;
  z-index: 4;
  padding: 22px;
  background: linear-gradient(180deg, rgba(6,16,29,.88), rgba(4,11,20,.84));
  border-right: 1px solid rgba(148,163,184,.14);
  overflow: auto;
}
.traffic-monitor-info {
  border-right: 0;
  border-left: 1px solid rgba(148,163,184,.14);
  padding-right: 18px;
}
.traffic-monitor-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.traffic-monitor-logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #35f0d4;
  background: rgba(53,240,212,.10);
  border: 1px solid rgba(53,240,212,.22);
}
.traffic-monitor-logo svg {
  width: 26px;
  height: 26px;
}
.traffic-monitor-brand h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.traffic-monitor-brand p {
  margin: 4px 0 0;
  color: #9fb2c8;
  font-size: 14px;
  font-weight: 650;
}
.traffic-monitor-selector {
  padding: 16px;
  border-radius: 18px;
  background: rgba(9, 20, 35, .78);
  border: 1px solid rgba(148,163,184,.15);
  margin-bottom: 16px;
}
.traffic-monitor-selector span,
.traffic-monitor-section-title {
  display: block;
  color: #a9b9cc;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.traffic-monitor-selector strong {
  display: block;
  margin-top: 8px;
  font-size: 16px;
}
.traffic-monitor-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a9b9cc;
  font-weight: 700;
  margin-bottom: 22px;
}
.traffic-monitor-live-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 18px #22c55e;
}
.traffic-monitor-live-row b {
  margin-left: auto;
  color: #d9e6f4;
}
.traffic-monitor-section-title {
  margin: 18px 0 10px;
}
.traffic-monitor-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.traffic-monitor-metric {
  min-height: 112px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(9,20,35,.76);
  border: 1px solid rgba(148,163,184,.14);
}
.traffic-monitor-metric span {
  color: #b7c7d8;
  font-size: 12px;
  font-weight: 800;
}
.traffic-monitor-metric strong {
  display: block;
  margin-top: 12px;
  font-size: 28px;
  letter-spacing: -.045em;
}
.traffic-monitor-routes {
  display: grid;
  gap: 10px;
}
.traffic-monitor-route-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(9,20,35,.76);
  color: #f3f8ff;
  text-align: left;
  cursor: pointer;
}
.traffic-monitor-route-row:hover {
  border-color: rgba(53,214,255,.34);
  background: rgba(12,30,50,.82);
}
.traffic-monitor-route-row i {
  width: 9px;
  height: 40px;
  border-radius: 999px;
  background: currentColor;
}
.traffic-monitor-route-row.critical { color: #ff4f7a; }
.traffic-monitor-route-row.high { color: #ff9c45; }
.traffic-monitor-route-row.medium { color: #ffd039; }
.traffic-monitor-route-row.low { color: #45e0a5; }
.traffic-monitor-route-row strong {
  color: #f3f8ff;
  display: block;
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.traffic-monitor-route-row span {
  display: block;
  margin-top: 4px;
  color: #9fb2c8;
  font-size: 12px;
  font-weight: 700;
}
.traffic-monitor-route-row b {
  font-size: 13px;
  white-space: nowrap;
}
.traffic-monitor-map-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #08111d;
}
.traffic-monitor-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #08111d;
}
.traffic-monitor-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 82%, rgba(59,130,246,.12), transparent 25%),
    linear-gradient(180deg, rgba(5,10,18,.30), rgba(5,10,18,.04) 18%, rgba(5,10,18,.22) 72%, rgba(5,10,18,.56));
}
.traffic-monitor-search {
  position: absolute;
  z-index: 600;
  top: 22px;
  left: 22px;
  width: min(440px, calc(100% - 140px));
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(7,17,31,.78);
  border: 1px solid rgba(148,163,184,.16);
  color: #b7c7d8;
  backdrop-filter: blur(14px);
}
.traffic-monitor-search svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.traffic-monitor-search input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #f4f8ff;
  font: inherit;
  font-weight: 700;
}
.traffic-monitor-search input::placeholder {
  color: #879bb4;
}
.traffic-monitor-map-actions {
  position: absolute;
  z-index: 600;
  top: 22px;
  right: 22px;
}
.traffic-monitor-map-actions button {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(7,17,31,.78);
  color: #dce8f7;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.traffic-monitor-map-actions svg {
  width: 22px;
  height: 22px;
}
.traffic-monitor-map-title {
  position: absolute;
  z-index: 600;
  left: 24px;
  bottom: 24px;
  max-width: 540px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(7,17,31,.56);
  border: 1px solid rgba(148,163,184,.12);
  backdrop-filter: blur(12px);
}
.traffic-monitor-map-title h3 {
  margin: 0;
  font-size: 34px;
  line-height: .95;
  letter-spacing: -.055em;
}
.traffic-monitor-map-title p {
  margin: 8px 0 0;
  color: #b6c5d8;
  font-size: 14px;
  font-weight: 680;
}
.traffic-monitor-route-label-icon,
.traffic-monitor-delay-icon,
.traffic-monitor-arrow-icon {
  background: transparent !important;
  border: 0 !important;
}
.traffic-monitor-route-label {
  color: #f7fbff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 3px 12px rgba(0,0,0,.58),
    0 0 3px rgba(5,10,18,.96),
    0 0 6px rgba(5,10,18,.96);
}
.traffic-monitor-delay-pill {
  min-width: 72px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 15px;
  background: rgba(7,17,31,.86);
  border: 1px solid color-mix(in srgb, var(--route-color) 45%, transparent);
  color: var(--route-color);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.035em;
  box-shadow: 0 8px 22px rgba(0,0,0,.48);
  text-shadow: 0 2px 8px rgba(0,0,0,.48);
}
.traffic-monitor-flow-arrow {
  position: relative;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.40));
}
.traffic-monitor-flow-arrow::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: var(--route-color);
}
.traffic-monitor-flow-arrow::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--route-color);
  border-right: 4px solid var(--route-color);
  transform: rotate(45deg);
  border-radius: 2px;
}
.monitor-leaflet-base {
  filter: none;
}
.monitor-leaflet-flow.monitor-tone-critical {
  filter: drop-shadow(0 0 16px rgba(255,79,122,.26)) drop-shadow(0 8px 18px rgba(255,79,122,.22));
}
.monitor-leaflet-flow.monitor-tone-high {
  filter: drop-shadow(0 0 16px rgba(255,156,69,.24)) drop-shadow(0 8px 18px rgba(255,156,69,.18));
}
.monitor-leaflet-flow.monitor-tone-medium {
  filter: drop-shadow(0 0 16px rgba(255,208,57,.20)) drop-shadow(0 8px 18px rgba(255,208,57,.14));
}
.monitor-leaflet-flow.monitor-tone-low {
  filter: drop-shadow(0 0 16px rgba(69,224,165,.18)) drop-shadow(0 8px 18px rgba(69,224,165,.14));
}
.traffic-monitor-card {
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.14);
  background: linear-gradient(180deg, rgba(10,22,38,.82), rgba(7,16,29,.74));
  padding: 18px;
  margin-bottom: 14px;
}
.traffic-monitor-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.traffic-monitor-card p,
.traffic-monitor-note {
  color: #a5b6ca;
  font-size: 14px;
  line-height: 1.45;
  margin: 12px 0 0;
}
.traffic-monitor-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.traffic-monitor-card-head h3 {
  margin: 0;
}
.traffic-monitor-card-head span,
.traffic-monitor-card-head b {
  color: #b8c9dc;
  font-weight: 800;
  font-size: 13px;
}

.traffic-monitor-gauge {
  --score: 50;
  --fill-angle: calc((var(--score) / 100) * 180deg);
  width: min(210px, 100%);
  height: 118px;
  margin: 14px auto 12px;
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .26));
}
.traffic-monitor-gauge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from 180deg at 50% 100%,
      #ff5876 0deg,
      #ff9f45 58deg,
      #ffd34a 108deg,
      #4ee39e 180deg
    );
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 58px, #000 59px 103px, transparent 104px);
  mask: radial-gradient(circle at 50% 100%, transparent 0 58px, #000 59px 103px, transparent 104px);
  opacity: .28;
}
.traffic-monitor-gauge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from 180deg at 50% 100%,
      #ff5876 0deg,
      #ff9f45 58deg,
      #ffd34a 108deg,
      #4ee39e var(--fill-angle),
      rgba(255,255,255,.06) 0deg,
      rgba(255,255,255,.06) 180deg
    );
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 58px, #000 59px 103px, transparent 104px);
  mask: radial-gradient(circle at 50% 100%, transparent 0 58px, #000 59px 103px, transparent 104px);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.08);
}
.traffic-monitor-gauge-inner {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 76%;
  min-height: 72px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(8,18,31,.92), rgba(7,16,28,.78));
  border: 1px solid rgba(148,163,184,.08);
  box-shadow: 0 14px 30px rgba(2, 10, 20, .32), inset 0 1px 0 rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 12px;
  z-index: 1;
  backdrop-filter: blur(10px);
}
.traffic-monitor-gauge strong {
  display: block;
  color: #f3f7fd;
  font-size: 56px;
  line-height: .95;
  letter-spacing: -.06em;
  font-weight: 900;
}
.traffic-monitor-gauge small {
  display: block;
  margin-top: 2px;
  color: #8ea5bd;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
}
.traffic-monitor-gauge span {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}
.traffic-monitor-gauge[data-tone="good"] span { color: #56e7af; }
.traffic-monitor-gauge[data-tone="watch"] span { color: #ffcc51; }
.traffic-monitor-gauge[data-tone="critical"] span { color: #ff617e; }

.traffic-monitor-trend-svg {
  width: 100%;
  height: 110px;
  display: block;
}
.traffic-monitor-trend-svg polyline {
  fill: none;
  stroke: #42b8ff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 14px rgba(66,184,255,.18));
}
.traffic-monitor-trend-svg circle {
  fill: #72d0ff;
  stroke: #0d233d;
  stroke-width: 2;
}
.traffic-monitor-trend-svg text {
  fill: #dff3ff;
  font-size: 12px;
  font-weight: 900;
}
.traffic-monitor-incidents {
  display: grid;
  gap: 10px;
}
.traffic-monitor-incident {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.traffic-monitor-incident:last-child {
  border-bottom: 0;
}
.traffic-monitor-incident > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
.traffic-monitor-incident > span.critical { color: #ff4f7a; }
.traffic-monitor-incident > span.high { color: #ff9c45; }
.traffic-monitor-incident > span.medium { color: #ffd039; }
.traffic-monitor-incident > span.low { color: #45e0a5; }
.traffic-monitor-incident strong {
  display: block;
  font-size: 15px;
}
.traffic-monitor-incident small {
  display: block;
  margin-top: 3px;
  color: #9fb2c8;
  font-size: 12px;
  font-weight: 700;
}
.traffic-monitor-incident b {
  font-size: 13px;
  white-space: nowrap;
}
body.traffic-monitor-open {
  overflow: hidden;
}
@media (max-width: 1280px) {
  .traffic-monitor-stage {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .traffic-monitor-info {
    display: none;
  }
}
@media (max-width: 860px) {
  .traffic-monitor-stage {
    grid-template-columns: 1fr;
  }
  .traffic-monitor-side {
    display: none;
  }
}


/* Monitor mode fixes: no header branding, dark custom Leaflet controls, reports on map */
.traffic-monitor-brand {
  display: none !important;
}
.traffic-monitor-side {
  padding-top: 24px;
}
.traffic-monitor-map-title {
  display: none !important;
}
.traffic-monitor-map .leaflet-control-zoom {
  border: 0 !important;
  margin-top: 86px !important;
  margin-right: 22px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(7,17,31,.78) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.traffic-monitor-map .leaflet-control-zoom a {
  width: 48px !important;
  height: 48px !important;
  line-height: 47px !important;
  border: 0 !important;
  color: #dbe7f6 !important;
  background: transparent !important;
  font-size: 24px !important;
  font-weight: 850 !important;
}
.traffic-monitor-map .leaflet-control-zoom a + a {
  border-top: 1px solid rgba(148,163,184,.14) !important;
}
.traffic-monitor-map .leaflet-control-zoom a:hover {
  color: #67e8f9 !important;
  background: rgba(53,214,255,.10) !important;
}
.traffic-monitor-map .leaflet-control-attribution {
  right: 14px !important;
  bottom: 14px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  background: rgba(7,17,31,.72) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: #9fb2c8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.traffic-monitor-map .leaflet-control-attribution a {
  color: #7dd3fc !important;
}
.traffic-monitor-map .leaflet-control-container .leaflet-bottom.leaflet-right {
  right: 0 !important;
  bottom: 0 !important;
}
.traffic-monitor-report-icon {
  background: transparent !important;
  border: 0 !important;
}
.traffic-monitor-report-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(7,17,31,.88);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
}
.traffic-monitor-report-dot span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 12px #7dd3fc;
}
.traffic-monitor-report-dot.hazard span { background: #ffd039; box-shadow: 0 0 12px #ffd039; }
.traffic-monitor-report-dot.accident span { background: #ff4f7a; box-shadow: 0 0 12px #ff4f7a; }
.traffic-monitor-report-dot.closure span { background: #ff9c45; box-shadow: 0 0 12px #ff9c45; }
.traffic-monitor-report-dot.police span { background: #60a5fa; box-shadow: 0 0 12px #60a5fa; }
.traffic-monitor-route-row strong {
  max-width: 155px;
}
.traffic-monitor-route-row span {
  max-width: 155px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.traffic-monitor-incident strong,
.traffic-monitor-incident small {
  max-width: 165px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.traffic-monitor-close {
  right: 20px !important;
  top: 20px !important;
}
.traffic-monitor-info {
  padding-top: 68px;
}


/* Monitor refresh / zoom-dependent labels / animated arrows / glass tooltips */
.traffic-monitor-route-label-icon.monitor-zoom-name,
.traffic-monitor-delay-icon.monitor-zoom-delay {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.traffic-monitor-map.monitor-show-names .traffic-monitor-route-label-icon.monitor-zoom-name {
  opacity: 1;
  transform: scale(1);
}
.traffic-monitor-map.monitor-show-delay .traffic-monitor-delay-icon.monitor-zoom-delay {
  opacity: 1;
  transform: scale(1);
}
.traffic-monitor-map:not(.monitor-show-reports) .traffic-monitor-report-icon {
  opacity: 0;
  pointer-events: none;
}
.traffic-monitor-delay-pill.side {
  transform: translate(10px, 0);
}
.traffic-monitor-delay-pill.top {
  transform: translate(0, -12px);
}
.traffic-monitor-flow-arrow.modern {
  width: 38px;
  height: 38px;
  position: relative;
  animation: monitorArrowPulse 1.15s linear infinite;
  animation-delay: var(--delay, 0ms);
  opacity: .95;
}
.traffic-monitor-flow-arrow.modern::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--route-color) 28%, var(--route-color));
  box-shadow: 0 0 14px color-mix(in srgb, var(--route-color) 45%, transparent);
}
.traffic-monitor-flow-arrow.modern::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--route-color);
  border-right: 4px solid var(--route-color);
  transform: rotate(45deg);
  border-radius: 2px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--route-color) 42%, transparent));
}
.traffic-monitor-flow-arrow.modern.tone-critical::before,
.traffic-monitor-flow-arrow.modern.tone-critical::after { --route-color: #ff4f7a; }
.traffic-monitor-flow-arrow.modern.tone-high::before,
.traffic-monitor-flow-arrow.modern.tone-high::after { --route-color: #ff9c45; }
.traffic-monitor-flow-arrow.modern.tone-medium::before,
.traffic-monitor-flow-arrow.modern.tone-medium::after { --route-color: #ffd039; }
.traffic-monitor-flow-arrow.modern.tone-low::before,
.traffic-monitor-flow-arrow.modern.tone-low::after { --route-color: #45e0a5; }
@keyframes monitorArrowPulse {
  0% { opacity: .25; transform: translateX(-8px) scale(.86); }
  42% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: .25; transform: translateX(8px) scale(.86); }
}
.traffic-monitor-report-dot {
  width: 30px !important;
  height: 30px !important;
}
.traffic-monitor-report-dot svg {
  width: 17px;
  height: 17px;
  color: currentColor;
  display: block;
}
.traffic-monitor-report-dot.hazard { color: #ffd039; background: rgba(255,208,57,.12); border-color: rgba(255,208,57,.34); }
.traffic-monitor-report-dot.accident { color: #ff4f7a; background: rgba(255,79,122,.12); border-color: rgba(255,79,122,.34); }
.traffic-monitor-report-dot.closure { color: #ff9c45; background: rgba(255,156,69,.12); border-color: rgba(255,156,69,.34); }
.traffic-monitor-report-dot.police { color: #60a5fa; background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.34); }
.traffic-monitor-report-dot.report { color: #7dd3fc; background: rgba(125,211,252,.12); border-color: rgba(125,211,252,.34); }
.traffic-monitor-report-dot span {
  display: none !important;
}
.traffic-monitor-map .leaflet-popup-content-wrapper,
.traffic-monitor-map .leaflet-popup-tip {
  background: rgba(7,17,31,.72) !important;
  color: #eef6ff !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.traffic-monitor-map .leaflet-popup-content-wrapper {
  border-radius: 18px !important;
}
.traffic-monitor-map .leaflet-popup-content {
  margin: 13px 15px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}
.traffic-monitor-map .leaflet-popup-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.traffic-monitor-map .leaflet-popup-close-button {
  color: #dbeafe !important;
  top: 8px !important;
  right: 8px !important;
}
.traffic-monitor-map .leaflet-tooltip {
  background: rgba(7,17,31,.72) !important;
  color: #eef6ff !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 14px !important;
  padding: 9px 11px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: Inter, Arial, sans-serif !important;
  font-weight: 750 !important;
}
.traffic-monitor-map .leaflet-tooltip::before {
  display: none !important;
}


/* Monitor refinement: zoom-gated labels/delays/arrows and readable route names */
.traffic-monitor-map .traffic-monitor-arrow-icon.monitor-zoom-arrow {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.traffic-monitor-map.monitor-show-arrows .traffic-monitor-arrow-icon.monitor-zoom-arrow {
  opacity: 1;
  transform: scale(1);
}
.traffic-monitor-map.monitor-show-delay .traffic-monitor-delay-icon.monitor-zoom-delay {
  opacity: 1;
  transform: scale(1);
}
.traffic-monitor-map.monitor-show-names .traffic-monitor-route-label-icon.monitor-zoom-name {
  opacity: 1;
  transform: scale(1);
}
.traffic-monitor-route-label {
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(7, 17, 31, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow:
    0 2px 8px rgba(0,0,0,.62),
    0 0 3px rgba(5,10,18,.95),
    0 0 6px rgba(5,10,18,.95) !important;
}
.traffic-monitor-delay-pill {
  min-width: 68px !important;
  height: 32px !important;
  font-size: 14px !important;
}
.traffic-monitor-delay-pill.side {
  transform: translate(30px, -4px) !important;
}
.traffic-monitor-delay-pill.top {
  transform: translate(12px, -30px) !important;
}
.traffic-monitor-flow-arrow-rotor {
  position: relative;
  width: 38px;
  height: 38px;
  transform-origin: 50% 50%;
}
.traffic-monitor-flow-arrow.modern {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  animation: monitorArrowTravel 1.08s linear infinite;
  animation-delay: var(--delay, 0ms);
}
.traffic-monitor-flow-arrow.modern::before,
.traffic-monitor-flow-arrow.modern::after {
  content: none !important;
}
.traffic-monitor-flow-arrow.modern span {
  position: absolute;
  inset: 0;
  display: block;
}
.traffic-monitor-flow-arrow.modern span::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--route-color) 28%, var(--route-color));
  box-shadow: 0 0 14px color-mix(in srgb, var(--route-color) 45%, transparent);
}
.traffic-monitor-flow-arrow.modern span::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--route-color);
  border-right: 4px solid var(--route-color);
  transform: rotate(45deg);
  border-radius: 2px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--route-color) 42%, transparent));
}
@keyframes monitorArrowTravel {
  0% { opacity: .15; transform: translateX(-12px) scale(.84); }
  35% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: .15; transform: translateX(12px) scale(.84); }
}


/* Monitor: no street names/arrows, only directional glow inside overlays */
.traffic-monitor-route-label-icon,
.traffic-monitor-arrow-icon {
  display: none !important;
}
.monitor-leaflet-flow-pulse {
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: monitorRouteInnerGlow 1.35s linear infinite;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 18px currentColor);
  opacity: .98;
  mix-blend-mode: screen;
}
.monitor-leaflet-flow-pulse.monitor-tone-critical {
  filter: drop-shadow(0 0 10px rgba(255,79,122,.75)) drop-shadow(0 0 22px rgba(255,79,122,.45));
}
.monitor-leaflet-flow-pulse.monitor-tone-high {
  filter: drop-shadow(0 0 10px rgba(255,156,69,.75)) drop-shadow(0 0 22px rgba(255,156,69,.42));
}
.monitor-leaflet-flow-pulse.monitor-tone-medium {
  filter: drop-shadow(0 0 10px rgba(255,208,57,.68)) drop-shadow(0 0 22px rgba(255,208,57,.36));
}
.monitor-leaflet-flow-pulse.monitor-tone-low {
  filter: drop-shadow(0 0 10px rgba(69,224,165,.68)) drop-shadow(0 0 22px rgba(69,224,165,.36));
}
@keyframes monitorRouteInnerGlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}

/* Hide report markers unless one report is clicked from the incident list */
.traffic-monitor-report-icon:not(.selected-report) {
  display: none !important;
}
.traffic-monitor-report-icon.selected-report {
  display: block !important;
}
.traffic-monitor-report-dot.selected {
  width: 38px !important;
  height: 38px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.48), 0 0 22px currentColor;
}
.traffic-monitor-report-dot.selected svg {
  width: 22px;
  height: 22px;
}
.traffic-monitor-incident.report-row {
  width: 100%;
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 1px solid rgba(148,163,184,.1);
  cursor: pointer;
  text-align: left;
}
.traffic-monitor-incident.report-row:hover {
  background: rgba(53,214,255,.07);
  border-radius: 14px;
}
.traffic-monitor-incident.report-row > span.hazard { color: #ffd039; background: #ffd039; }
.traffic-monitor-incident.report-row > span.accident { color: #ff4f7a; background: #ff4f7a; }
.traffic-monitor-incident.report-row > span.closure { color: #ff9c45; background: #ff9c45; }
.traffic-monitor-incident.report-row > span.police { color: #60a5fa; background: #60a5fa; }
.traffic-monitor-incident.report-row > span.report { color: #7dd3fc; background: #7dd3fc; }

/* Make the constant glow visible even from zoomed-out levels */
.traffic-monitor-map .monitor-leaflet-flow,
.traffic-monitor-map .monitor-leaflet-flow-pulse {
  opacity: .98;
}


/* Monitor performance update: no top search, custom city dropdown, zoom-gated overlays */
.traffic-monitor-search {
  display: none !important;
}
.traffic-monitor-selector.custom-city {
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
}
.traffic-monitor-selector.custom-city > span {
  margin: 0 0 8px;
}
.traffic-monitor-city-button {
  width: 100%;
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.15);
  background: rgba(9,20,35,.78);
  color: #f3f8ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  text-align: left;
}
.traffic-monitor-city-button strong {
  font-size: 16px;
  font-weight: 850;
}
.traffic-monitor-city-button i {
  width: 10px;
  height: 10px;
  border-right: 2px solid #9fb2c8;
  border-bottom: 2px solid #9fb2c8;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .18s ease;
}
.traffic-monitor-city-button[aria-expanded="true"] i {
  transform: rotate(225deg) translateY(-3px);
}
.traffic-monitor-city-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 310px;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(7,17,31,.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
  padding: 8px;
}
.traffic-monitor-city-menu[hidden] {
  display: none !important;
}
.traffic-monitor-city-menu button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #dbe7f6;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 750;
  text-align: left;
}
.traffic-monitor-city-menu button:hover,
.traffic-monitor-city-menu button.active {
  background: rgba(53,214,255,.12);
  color: #67e8f9;
}
.traffic-monitor-map:not(.monitor-show-overlays) .monitor-zoom-overlay,
.traffic-monitor-map:not(.monitor-show-overlays) .traffic-monitor-delay-icon {
  opacity: 0 !important;
  pointer-events: none !important;
}
.traffic-monitor-map.monitor-show-overlays .monitor-zoom-overlay {
  opacity: 1;
}
.monitor-leaflet-flow-pulse {
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: monitorRouteInnerGlowSlow 4.8s linear infinite !important;
  stroke-width: 10 !important;
  opacity: .84 !important;
}
@keyframes monitorRouteInnerGlowSlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -640; }
}
.traffic-monitor-metric.compact-length strong {
  font-size: clamp(21px, 1.6vw, 26px) !important;
  letter-spacing: -.055em;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .traffic-monitor-metric.compact-length strong {
    font-size: 22px !important;
  }
}


/* Hotfix: smaller monitor city dropdown and stable map render */
.traffic-monitor-city-button {
  min-height: 54px !important;
  border-radius: 16px !important;
  padding: 0 14px !important;
}
.traffic-monitor-city-button strong {
  font-size: 14px !important;
}
.traffic-monitor-selector.custom-city > span {
  margin-bottom: 7px !important;
}
.traffic-monitor-city-menu {
  max-height: 240px !important;
  border-radius: 16px !important;
  padding: 6px !important;
}
.traffic-monitor-city-menu button {
  min-height: 34px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}


/* Monitor perf/overlay refinement */
.monitor-leaflet-base {
  display: none !important;
  opacity: 0 !important;
}
.monitor-leaflet-flow {
  stroke-width: 5px !important;
  filter: none !important;
}
.monitor-leaflet-flow-pulse {
  stroke-width: 8px !important;
  opacity: .68 !important;
  animation-duration: 6.8s !important;
}
.traffic-monitor-map:not(.monitor-show-overlays) .monitor-zoom-overlay,
.traffic-monitor-map:not(.monitor-show-overlays) .traffic-monitor-delay-icon {
  opacity: 0 !important;
  pointer-events: none !important;
}
.traffic-monitor-metric.compact-length strong {
  font-size: clamp(19px, 1.35vw, 24px) !important;
  line-height: 1 !important;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.traffic-monitor-gauge-inner span,
.traffic-monitor-gauge span {
  color: #ff9c45 !important;
}
.traffic-monitor-gauge {
  background: conic-gradient(from 210deg, #45e0a5 0deg, #ffd039 72deg, #ff9c45 145deg, #ff4f7a calc(var(--score) * 2.4deg), rgba(255,255,255,.08) 0) !important;
}


/* Key metrics: unified value size */
.traffic-monitor-metrics .traffic-monitor-metric strong,
.traffic-monitor-metrics .traffic-monitor-metric.compact-length strong {
  font-size: clamp(19px, 1.35vw, 24px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap;
}

/* Restore network health to goodness color logic */
.traffic-monitor-gauge {
  background: conic-gradient(from 210deg, #ff6b6b 0deg, #ff9c45 88deg, #ffd039 150deg, #45e0a5 calc(var(--score) * 2.4deg), rgba(255,255,255,.08) 0) !important;
}
.traffic-monitor-gauge-inner span,
.traffic-monitor-gauge span {
  color: #54e4ae !important;
}


/* Fix monitor Location dropdown text alignment/overflow */
.traffic-monitor-city-button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 0 14px 0 14px !important;
  line-height: 1 !important;
}
.traffic-monitor-city-button strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  transform: translateY(0) !important;
}
.traffic-monitor-city-button i {
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  transform: rotate(45deg) translate(-1px, -1px) !important;
}
.traffic-monitor-city-button[aria-expanded="true"] i {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}


/* Final fix: truly center Location dropdown text vertically */
.traffic-monitor-selector.custom-city {
  display: block !important;
}
.traffic-monitor-city-button {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 14px !important;
  line-height: 54px !important;
}
.traffic-monitor-city-button strong,
.traffic-monitor-city-button #trafficMonitorCityLabel {
  display: flex !important;
  align-items: center !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.traffic-monitor-city-button i {
  flex: 0 0 auto !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  transform: rotate(45deg) !important;
}
.traffic-monitor-city-button[aria-expanded="true"] i {
  transform: rotate(225deg) !important;
}


/* Monitor overlay quality: keep SVG paths crisp and stable during zoom */
.traffic-monitor-map .leaflet-overlay-pane svg path.monitor-leaflet-flow,
.traffic-monitor-map .leaflet-overlay-pane svg path.monitor-leaflet-flow-pulse {
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}
.monitor-leaflet-flow,
.monitor-leaflet-flow-pulse {
  transform: translateZ(0);
  will-change: stroke-dashoffset;
}


/* Monitor: show glow only at high zoom; hide tiny segments until zoomed in */
.traffic-monitor-map:not(.monitor-show-glow) .monitor-leaflet-flow-pulse {
  opacity: 0 !important;
  display: none !important;
}
.traffic-monitor-map.monitor-show-glow .monitor-leaflet-flow-pulse {
  opacity: .62 !important;
  display: block !important;
}
.traffic-monitor-map:not(.monitor-show-overlays) .monitor-leaflet-flow,
.traffic-monitor-map:not(.monitor-show-overlays) .monitor-leaflet-flow-pulse {
  opacity: 0 !important;
  pointer-events: none !important;
}



/* Network Health: open arc gauge, fitted correctly inside the card */
.traffic-monitor-health {
  padding: 18px 16px 18px !important;
}
.traffic-monitor-health h3 {
  margin: 0 0 10px !important;
  position: relative;
  z-index: 5;
}
.traffic-monitor-gauge {
  --score: 50;
  --fill-angle: calc((var(--score) / 100) * 180deg);
  width: min(188px, calc(100% - 12px)) !important;
  height: 128px !important;
  margin: 14px auto 12px !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: none !important;
  filter: none !important;
}
.traffic-monitor-gauge::before,
.traffic-monitor-gauge::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  width: 176px !important;
  height: 176px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  inset: auto auto 12px 50% !important;
  -webkit-mask: radial-gradient(circle, transparent 0 67px, #000 68px 81px, transparent 82px) !important;
  mask: radial-gradient(circle, transparent 0 67px, #000 68px 81px, transparent 82px) !important;
}
.traffic-monitor-gauge::before {
  background:
    conic-gradient(from 270deg,
      rgba(255,255,255,.085) 0deg,
      rgba(255,255,255,.085) 180deg,
      transparent 180deg 360deg) !important;
}
.traffic-monitor-gauge::after {
  background:
    conic-gradient(from 270deg,
      #ff517a 0deg,
      #ff9f45 58deg,
      #ffd84d 112deg,
      #41e0a4 var(--fill-angle),
      rgba(255,255,255,0) var(--fill-angle) 180deg,
      transparent 180deg 360deg) !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.22)) !important;
}
.traffic-monitor-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 2px;
  height: 79px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(calc((var(--score) * 1.8deg) - 90deg));
  z-index: 3;
  pointer-events: none;
}
.traffic-monitor-gauge-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 0;
  height: 0;
  transform: translateX(-50%) rotate(90deg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #9fb2c8;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
.traffic-monitor-gauge-inner {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  width: 126px !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
.traffic-monitor-gauge strong {
  font-size: 48px !important;
  line-height: .88 !important;
  letter-spacing: -.06em !important;
  color: #f3f8ff !important;
}
.traffic-monitor-gauge small {
  margin-top: 4px !important;
  color: #92a8bf !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.traffic-monitor-gauge span {
  margin-top: 8px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}
.traffic-monitor-gauge-scale {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  color: #8da2ba;
  font-weight: 800;
  font-size: 12px;
  z-index: 2;
}
.traffic-monitor-gauge-scale em {
  font-style: normal;
}
.traffic-monitor-gauge[data-tone="good"] span { color: #34e7b4 !important; }
.traffic-monitor-gauge[data-tone="watch"] span { color: #ffd84d !important; }
.traffic-monitor-gauge[data-tone="critical"] span { color: #ff617e !important; }



.traffic-monitor-health p {
  margin: 8px 0 0 !important;
  line-height: 1.45 !important;
}

@media (max-width: 1440px) {
  .traffic-monitor-gauge {
    width: min(176px, calc(100% - 10px)) !important;
    height: 122px !important;
  }
  .traffic-monitor-gauge::before,
  .traffic-monitor-gauge::after {
    width: 166px !important;
    height: 166px !important;
    bottom: 10px !important;
    inset: auto auto 10px 50% !important;
    -webkit-mask: radial-gradient(circle, transparent 0 63px, #000 64px 76px, transparent 77px) !important;
    mask: radial-gradient(circle, transparent 0 63px, #000 64px 76px, transparent 77px) !important;
  }
  .traffic-monitor-gauge-needle {
    bottom: 21px;
    height: 74px;
  }
  .traffic-monitor-gauge-inner {
    bottom: 20px !important;
  }
  .traffic-monitor-gauge strong {
    font-size: 44px !important;
  }
}


/* Final Network Health gauge fit: compact card-safe open arc */
.traffic-monitor-health {
  padding: 18px 16px 16px !important;
  overflow: hidden !important;
}
.traffic-monitor-health h3 {
  margin: 0 0 8px !important;
  font-size: 15px !important;
  position: relative !important;
  z-index: 10 !important;
}
.traffic-monitor-gauge {
  --score: 50;
  --fill-angle: calc((var(--score) / 100) * 180deg);
  width: 178px !important;
  height: 116px !important;
  margin: 4px auto 8px !important;
  overflow: visible !important;
}
.traffic-monitor-gauge::before,
.traffic-monitor-gauge::after {
  width: 154px !important;
  height: 154px !important;
  bottom: 10px !important;
  inset: auto auto 10px 50% !important;
  -webkit-mask: radial-gradient(circle, transparent 0 59px, #000 60px 70px, transparent 71px) !important;
  mask: radial-gradient(circle, transparent 0 59px, #000 60px 70px, transparent 71px) !important;
}
.traffic-monitor-gauge-needle {
  bottom: 20px !important;
  height: 65px !important;
}
.traffic-monitor-gauge-needle::after {
  border-top-width: 5px !important;
  border-bottom-width: 5px !important;
  border-left-width: 8px !important;
}
.traffic-monitor-gauge-inner {
  bottom: 18px !important;
  width: 112px !important;
}
.traffic-monitor-gauge strong {
  font-size: 40px !important;
  line-height: .86 !important;
}
.traffic-monitor-gauge small {
  margin-top: 3px !important;
  font-size: 12px !important;
}
.traffic-monitor-gauge span {
  margin-top: 7px !important;
  font-size: 15px !important;
}
.traffic-monitor-gauge-scale {
  bottom: 0 !important;
  padding: 0 14px !important;
  font-size: 11px !important;
}
.traffic-monitor-health p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}


/* Re-created Network Health: compact horizontal meter that always fits */
.traffic-monitor-health {
  padding: 18px !important;
  overflow: hidden !important;
}
.traffic-monitor-health-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.traffic-monitor-health h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: -.015em !important;
  position: static !important;
}
.traffic-monitor-health-pill {
  flex: 0 0 auto;
  min-width: 58px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.14);
  color: #a9b9cc;
}
.traffic-monitor-health-pill[data-tone="good"] {
  color: #56e7af;
  background: rgba(86,231,175,.10);
  border-color: rgba(86,231,175,.22);
}
.traffic-monitor-health-pill[data-tone="watch"] {
  color: #ffd84d;
  background: rgba(255,216,77,.10);
  border-color: rgba(255,216,77,.24);
}
.traffic-monitor-health-pill[data-tone="critical"] {
  color: #ff617e;
  background: rgba(255,97,126,.10);
  border-color: rgba(255,97,126,.24);
}
.traffic-monitor-gauge {
  --score: 50;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: none !important;
  position: relative !important;
}
.traffic-monitor-gauge::before,
.traffic-monitor-gauge::after,
.traffic-monitor-gauge-needle,
.traffic-monitor-gauge-needle::after {
  display: none !important;
  content: none !important;
}
.traffic-monitor-gauge-score {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.traffic-monitor-gauge-score strong,
.traffic-monitor-gauge strong {
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  color: #f3f8ff !important;
}
.traffic-monitor-gauge-score small,
.traffic-monitor-gauge small {
  margin: 0 !important;
  color: #8ea5bd !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
.traffic-monitor-gauge-track {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.12);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 -10px 18px rgba(0,0,0,.14);
}
.traffic-monitor-gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--score) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff517a 0%, #ff9f45 38%, #ffd84d 66%, #41e0a4 100%);
  box-shadow: 0 0 18px rgba(65,224,164,.20);
}
.traffic-monitor-gauge-marker {
  position: absolute;
  top: 50%;
  left: clamp(8px, calc(var(--score) * 1%), calc(100% - 8px));
  width: 10px;
  height: 26px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #d7e4f6;
  box-shadow: 0 0 0 4px rgba(7,17,31,.82), 0 8px 18px rgba(0,0,0,.34);
}
.traffic-monitor-gauge-scale {
  position: static !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 8px 1px 0 !important;
  color: #8da2ba !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}
.traffic-monitor-gauge-scale em {
  font-style: normal !important;
}
.traffic-monitor-gauge-inner,
.traffic-monitor-gauge span {
  display: none !important;
}
.traffic-monitor-health p {
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #a9b8ca !important;
}


/* Network Health – clean compact style, no gauge marker */
.traffic-monitor-health {
  padding: 16px 16px 18px !important;
}

.traffic-monitor-health-head {
  margin-bottom: 12px !important;
}

.traffic-monitor-health h3 {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

.traffic-monitor-health-pill {
  min-width: 64px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.traffic-monitor-gauge {
  width: 100% !important;
  margin: 0 !important;
}

.traffic-monitor-gauge-score {
  gap: 5px !important;
  margin-bottom: 10px !important;
  align-items: baseline !important;
}

.traffic-monitor-gauge-score strong {
  font-size: 50px !important;
  line-height: .88 !important;
  letter-spacing: -.07em !important;
}

.traffic-monitor-gauge-score small {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #8fa5bd !important;
}

.traffic-monitor-gauge-track {
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .08) !important;
  border: 1px solid rgba(148, 163, 184, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 -8px 18px rgba(0,0,0,.18) !important;
}

.traffic-monitor-gauge-fill {
  width: calc(var(--score) * 1%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff5b81 0%, #ff9a45 35%, #ffd54d 68%, #44e0a5 100%) !important;
  box-shadow: 0 0 18px rgba(68, 224, 165, .12) !important;
}

.traffic-monitor-gauge-marker {
  display: none !important;
}

.traffic-monitor-gauge-scale {
  padding-top: 8px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #8ea3bb !important;
}

.traffic-monitor-health p {
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #b4c1d0 !important;
}


/* Monitor smart alert banner */
.traffic-monitor-smart-alert {
  position: absolute;
  z-index: 650;
  left: 22px;
  top: 22px;
  max-width: min(560px, calc(100% - 118px));
  min-height: 54px;
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(7,17,31,.76);
  color: #f4f8ff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.traffic-monitor-smart-alert[hidden] {
  display: none !important;
}
.traffic-monitor-smart-alert:hover {
  transform: translateY(-1px);
  border-color: rgba(103,232,249,.34);
  background: rgba(10,25,42,.84);
}
.traffic-monitor-smart-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  transform: translateX(-100%);
  animation: trafficSmartAlertSweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
.traffic-monitor-smart-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
}
.traffic-monitor-smart-alert strong {
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.traffic-monitor-smart-alert em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: #c6d5e7;
  font-weight: 800;
}
.traffic-monitor-smart-alert.critical {
  color: #ff617e;
  border-color: rgba(255,97,126,.28);
}
.traffic-monitor-smart-alert.warning {
  color: #ffb24a;
  border-color: rgba(255,178,74,.28);
}
.traffic-monitor-smart-alert.good {
  color: #56e7af;
  border-color: rgba(86,231,175,.24);
}
.traffic-monitor-smart-alert.info {
  color: #67e8f9;
}
@keyframes trafficSmartAlertSweep {
  0%, 52% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (max-width: 980px) {
  .traffic-monitor-smart-alert {
    left: 14px;
    right: 74px;
    max-width: none;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
  }
  .traffic-monitor-smart-alert strong {
    display: none;
  }
}


/* Monitor as its own full page, not a lightbox */
.traffic-monitor-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2200 !important;
  display: block !important;
  padding: 0 !important;
  background: #050b13 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.traffic-monitor-overlay[hidden] {
  display: none !important;
}
.traffic-monitor-stage {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  background: linear-gradient(135deg, rgba(5,13,24,.99), rgba(7,19,32,.97)) !important;
}
.traffic-monitor-close {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 900 !important;
  width: auto !important;
  height: 44px !important;
  min-width: 108px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(7,17,31,.78) !important;
  color: #e8f1ff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: -.02em !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.32) !important;
}
.traffic-monitor-close::before,
.traffic-monitor-close::after {
  display: none !important;
}
.traffic-monitor-close span {
  font-size: 18px;
  line-height: 1;
}
.traffic-monitor-side {
  padding-top: 74px !important;
}
.traffic-monitor-info {
  padding-top: 74px !important;
}

/* Remove the blue glow from the monitor map */
.traffic-monitor-map::after {
  background: linear-gradient(180deg, rgba(5,10,18,.24), rgba(5,10,18,.02) 20%, rgba(5,10,18,.20) 74%, rgba(5,10,18,.48)) !important;
}


/* Smart alert: no forced uppercase, avoids Greek uppercase accent issues */
.traffic-monitor-smart-alert strong {
  text-transform: none !important;
  letter-spacing: .01em !important;
}


/* Facebook-style city snapshot preview */
.fb-city-snapshot {
  width: min(560px, 100%);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: #07111f;
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.fb-snapshot-map {
  position: absolute;
  inset: 0;
  opacity: .96;
}
.fb-snapshot-map .snapshot-map-layer,
.fb-snapshot-map svg {
  width: 100%;
  height: 100%;
}
.fb-snapshot-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(103,232,249,.10), transparent 32%),
    linear-gradient(180deg, rgba(5,10,18,.28) 0%, rgba(5,10,18,.78) 34%, rgba(5,10,18,.91) 75%, rgba(5,10,18,.96) 100%);
}
.fb-city-snapshot.tone-critical .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,59,95,.23), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.30) 0%, rgba(5,10,18,.78) 34%, rgba(5,10,18,.91) 75%, rgba(5,10,18,.96) 100%);
}
.fb-city-snapshot.tone-high .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,146,60,.22), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.30) 0%, rgba(5,10,18,.78) 34%, rgba(5,10,18,.91) 75%, rgba(5,10,18,.96) 100%);
}
.fb-city-snapshot.tone-medium .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,191,36,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.30) 0%, rgba(5,10,18,.78) 34%, rgba(5,10,18,.91) 75%, rgba(5,10,18,.96) 100%);
}
.fb-snapshot-header,
.fb-snapshot-stats,
.fb-snapshot-roads,
.fb-snapshot-footer {
  position: relative;
  z-index: 2;
}
.fb-snapshot-header {
  padding: 34px 34px 0;
  display: grid;
  gap: 18px;
}
.fb-snapshot-header p {
  margin: 0 0 10px;
  color: #67e8f9;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fb-snapshot-header h1 {
  margin: 0;
  color: #f5f8ff;
  font-size: clamp(35px, 6vw, 58px);
  line-height: .94;
  letter-spacing: -.065em;
  max-width: 94%;
}
.fb-snapshot-header span {
  display: block;
  margin-top: 12px;
  color: #b7c7da;
  font-size: 16px;
  font-weight: 850;
}
.fb-snapshot-header > strong {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: #67e8f9;
  background: rgba(103,232,249,.11);
  border: 1px solid rgba(103,232,249,.22);
  font-size: 14px;
  font-weight: 950;
}
.fb-city-snapshot.tone-critical .fb-snapshot-header > strong { color: #fb3b5f; background: rgba(251,59,95,.12); border-color: rgba(251,59,95,.24); }
.fb-city-snapshot.tone-high .fb-snapshot-header > strong { color: #fb923c; background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.24); }
.fb-city-snapshot.tone-medium .fb-snapshot-header > strong { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.24); }
.fb-snapshot-stats {
  margin: 28px 34px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.fb-snapshot-stats div {
  min-height: 76px;
  border-radius: 18px;
  background: rgba(8,18,32,.78);
  border: 1px solid rgba(148,163,184,.13);
  padding: 13px 14px;
}
.fb-snapshot-stats b {
  display: block;
  color: #f5f8ff;
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}
.fb-snapshot-stats span {
  display: block;
  margin-top: 8px;
  color: #9fb2c8;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
}
.fb-snapshot-roads {
  margin: 28px 34px 0;
}
.fb-snapshot-roads h2 {
  margin: 0 0 13px;
  color: #f5f8ff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.04em;
}
.fb-snapshot-roads ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fb-snapshot-road {
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 18px;
  background: rgba(8,18,32,.84);
  border: 1px solid rgba(148,163,184,.13);
}
.fb-snapshot-road > span {
  font-size: 19px;
  font-weight: 950;
  color: #34d399;
}
.fb-snapshot-road.medium > span,
.fb-snapshot-road.medium > b { color: #fbbf24; }
.fb-snapshot-road.high > span,
.fb-snapshot-road.high > b { color: #fb923c; }
.fb-snapshot-road.critical > span,
.fb-snapshot-road.critical > b { color: #fb3b5f; }
.fb-snapshot-road strong {
  display: block;
  color: #f5f8ff;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-snapshot-road em {
  display: block;
  margin-top: 5px;
  color: #9fb2c8;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-snapshot-road b {
  font-size: 16px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
  color: #34d399;
}
.fb-snapshot-empty {
  color: #b7c7da;
  padding: 16px;
  border-radius: 18px;
  background: rgba(8,18,32,.84);
  border: 1px solid rgba(148,163,184,.13);
  font-weight: 850;
}
.fb-snapshot-footer {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #9fb2c8;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fb-snapshot-footer span {
  color: #67e8f9;
}


/* Snapshot preview alignment / Facebook card polish */
.snapshot-help,
.snapshot-preview-btn {
  display: none !important;
}
.traffic-snapshot-lightbox .snapshot-side {
  justify-content: flex-start;
}
.traffic-snapshot-preview-wrap {
  display: grid;
  place-items: center;
}
.traffic-snapshot-preview {
  width: min(620px, 100%);
  aspect-ratio: 4 / 5 !important;
  border-radius: 30px;
}
.fb-city-snapshot {
  width: 100%;
  aspect-ratio: 4 / 5;
}
.fb-snapshot-map .snapshot-map-tiles {
  filter: brightness(.44) contrast(1.05) saturate(.8);
}
.fb-snapshot-map .snapshot-map-overlay {
  opacity: .95;
}
.fb-snapshot-map .snapshot-map-road-name {
  display: none !important;
}
.fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(103,232,249,.08), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.80) 34%, rgba(5,10,18,.92) 75%, rgba(5,10,18,.97) 100%);
}
.fb-city-snapshot.tone-low .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(52,211,153,.16), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.80) 34%, rgba(5,10,18,.92) 75%, rgba(5,10,18,.97) 100%);
}
.fb-city-snapshot.tone-medium .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,191,36,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.80) 34%, rgba(5,10,18,.92) 75%, rgba(5,10,18,.97) 100%);
}
.fb-city-snapshot.tone-high .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,146,60,.24), transparent 36%),
    linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.80) 34%, rgba(5,10,18,.92) 75%, rgba(5,10,18,.97) 100%);
}
.fb-city-snapshot.tone-critical .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,59,95,.24), transparent 36%),
    linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.80) 34%, rgba(5,10,18,.92) 75%, rgba(5,10,18,.97) 100%);
}
.fb-snapshot-header > strong { color: #34d399; background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.24); }
.fb-city-snapshot.tone-medium .fb-snapshot-header > strong { color: #fbbf24; background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.24); }
.fb-city-snapshot.tone-high .fb-snapshot-header > strong { color: #fb923c; background: rgba(251,146,60,.16); border-color: rgba(251,146,60,.26); }
.fb-city-snapshot.tone-critical .fb-snapshot-header > strong { color: #fb3b5f; background: rgba(251,59,95,.16); border-color: rgba(251,59,95,.26); }


/* Snapshot preview smaller so it fits comfortably in the lightbox */
.traffic-snapshot-preview-wrap {
  align-items: start;
}
.traffic-snapshot-preview {
  width: min(540px, 100%) !important;
  max-width: 540px !important;
}
@media (max-width: 1400px) {
  .traffic-snapshot-preview {
    width: min(500px, 100%) !important;
    max-width: 500px !important;
  }
}


/* More compact snapshot preview so the full card always fits */
.traffic-snapshot-preview {
  width: min(470px, 100%) !important;
  max-width: 470px !important;
}
.fb-city-snapshot {
  width: min(470px, 100%) !important;
  max-width: 470px !important;
}
.fb-snapshot-header {
  padding: 24px 24px 0 !important;
  gap: 12px !important;
}
.fb-snapshot-header p {
  margin: 0 0 7px !important;
  font-size: 11px !important;
}
.fb-snapshot-header h1 {
  font-size: clamp(27px, 4.2vw, 46px) !important;
  line-height: .92 !important;
  max-width: 100% !important;
}
.fb-snapshot-header span {
  margin-top: 8px !important;
  font-size: 14px !important;
}
.fb-snapshot-header > strong {
  min-height: 32px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}
.fb-snapshot-stats {
  margin: 18px 24px 0 !important;
  gap: 8px !important;
}
.fb-snapshot-stats div {
  min-height: 68px !important;
  border-radius: 16px !important;
  padding: 11px 12px !important;
}
.fb-snapshot-stats b {
  font-size: 24px !important;
}
.fb-snapshot-stats span {
  margin-top: 6px !important;
  font-size: 10px !important;
}
.fb-snapshot-roads {
  margin: 18px 24px 0 !important;
}
.fb-snapshot-roads h2 {
  margin: 0 0 10px !important;
  font-size: 20px !important;
}
.fb-snapshot-roads ol {
  gap: 8px !important;
}
.fb-snapshot-road {
  min-height: 56px !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 8px 11px !important;
  border-radius: 16px !important;
}
.fb-snapshot-road > span {
  font-size: 16px !important;
}
.fb-snapshot-road strong {
  font-size: 14px !important;
}
.fb-snapshot-road em {
  margin-top: 4px !important;
  font-size: 11px !important;
}
.fb-snapshot-road b {
  font-size: 14px !important;
}
.fb-snapshot-footer {
  left: 24px !important;
  right: 24px !important;
  bottom: 20px !important;
  font-size: 11px !important;
}


/* Final compact snapshot preview fix: prevent overlap and keep full card visible */
.traffic-snapshot-preview-wrap {
  align-items: start !important;
  justify-items: center !important;
}
.traffic-snapshot-preview {
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  aspect-ratio: 4 / 5 !important;
  margin-inline: auto !important;
}
.fb-city-snapshot {
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 4 / 5 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 14px !important;
}
.fb-snapshot-header,
.fb-snapshot-stats,
.fb-snapshot-roads,
.fb-snapshot-footer {
  position: relative !important;
  z-index: 2 !important;
}
.fb-snapshot-header {
  padding: 18px 18px 0 !important;
  gap: 8px !important;
}
.fb-snapshot-header p {
  margin: 0 0 6px !important;
  font-size: 10px !important;
  letter-spacing: .07em !important;
}
.fb-snapshot-header h1 {
  font-size: clamp(20px, 3.5vw, 32px) !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  max-width: 94% !important;
}
.fb-snapshot-header span {
  margin-top: 7px !important;
  font-size: 11px !important;
}
.fb-snapshot-header > strong {
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.fb-snapshot-stats {
  margin: 12px 18px 0 !important;
  gap: 7px !important;
}
.fb-snapshot-stats div {
  min-height: 54px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}
.fb-snapshot-stats b {
  font-size: 18px !important;
  line-height: 1 !important;
}
.fb-snapshot-stats span {
  margin-top: 5px !important;
  font-size: 9px !important;
}
.fb-snapshot-roads {
  margin: 12px 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.fb-snapshot-roads h2 {
  margin: 0 0 8px !important;
  font-size: 16px !important;
}
.fb-snapshot-roads ol {
  gap: 7px !important;
}
.fb-snapshot-road {
  min-height: 46px !important;
  grid-template-columns: 26px minmax(0,1fr) auto !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
}
.fb-snapshot-road > span {
  font-size: 13px !important;
}
.fb-snapshot-road strong {
  font-size: 11px !important;
  line-height: 1.06 !important;
}
.fb-snapshot-road em {
  margin-top: 3px !important;
  font-size: 9px !important;
}
.fb-snapshot-road b {
  font-size: 12px !important;
}
.fb-snapshot-footer {
  position: static !important;
  margin-top: auto !important;
  padding: 8px 18px 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  font-size: 10px !important;
}


/* Patch 36: real website fixes for snapshot preview/export */
.traffic-snapshot-builder {
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}
.snapshot-road-list {
  align-content: start !important;
  max-height: 440px !important;
}
.snapshot-road-list.few-items,
.snapshot-road-list[data-count="1"],
.snapshot-road-list[data-count="2"] {
  max-height: none !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  align-content: start !important;
}
.snapshot-road-list.few-items .snapshot-road,
.snapshot-road-list[data-count="1"] .snapshot-road,
.snapshot-road-list[data-count="2"] .snapshot-road {
  min-height: 62px !important;
}
.traffic-snapshot-options {
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}
.traffic-snapshot-preview-wrap {
  display: grid !important;
  place-items: start center !important;
  min-width: 0 !important;
}
.traffic-snapshot-preview {
  width: min(560px, 100%) !important;
  max-width: 560px !important;
  aspect-ratio: 4 / 5 !important;
  margin-inline: auto !important;
}
.fb-city-snapshot {
  width: 100% !important;
  max-width: 560px !important;
  aspect-ratio: 4 / 5 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 10px !important;
}
.fb-snapshot-map {
  opacity: 1 !important;
}
.fb-snapshot-map .snapshot-map-tiles {
  filter: brightness(.94) contrast(1.06) saturate(.72) !important;
}
.fb-snapshot-map .snapshot-map-overlay,
.fb-snapshot-map svg {
  display: none !important;
}
.fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,146,60,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.12) 0%, rgba(5,10,18,.42) 38%, rgba(5,10,18,.70) 74%, rgba(5,10,18,.86) 100%) !important;
}
.fb-city-snapshot.tone-critical .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,59,95,.22), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.12) 0%, rgba(5,10,18,.42) 38%, rgba(5,10,18,.70) 74%, rgba(5,10,18,.86) 100%) !important;
}
.fb-city-snapshot.tone-high .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,146,60,.20), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.12) 0%, rgba(5,10,18,.42) 38%, rgba(5,10,18,.70) 74%, rgba(5,10,18,.86) 100%) !important;
}
.fb-city-snapshot.tone-medium .fb-snapshot-shade {
  background:
    radial-gradient(circle at 78% 18%, rgba(251,191,36,.18), transparent 34%),
    linear-gradient(180deg, rgba(5,10,18,.12) 0%, rgba(5,10,18,.42) 38%, rgba(5,10,18,.70) 74%, rgba(5,10,18,.86) 100%) !important;
}
.fb-snapshot-header,
.fb-snapshot-stats,
.fb-snapshot-roads,
.fb-snapshot-footer {
  position: relative !important;
  z-index: 2 !important;
}
.fb-snapshot-header {
  padding: 22px 22px 0 !important;
  gap: 10px !important;
}
.fb-snapshot-header p {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.fb-snapshot-header h1 {
  font-size: clamp(32px, 4.3vw, 46px) !important;
  line-height: .93 !important;
  letter-spacing: -.055em !important;
  max-width: 96% !important;
}
.fb-snapshot-header span {
  margin-top: 9px !important;
  font-size: 14px !important;
}
.fb-snapshot-header > strong {
  min-height: 34px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
}
.fb-snapshot-stats {
  margin: 18px 22px 0 !important;
  gap: 10px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.fb-snapshot-stats div {
  min-height: 78px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.fb-snapshot-stats b {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 23px !important;
  line-height: 1 !important;
}
.fb-snapshot-stats span {
  display: block !important;
  width: 100% !important;
  margin-top: 7px !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.fb-snapshot-roads {
  margin: 18px 22px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.fb-snapshot-roads h2 {
  margin: 0 0 10px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.fb-snapshot-roads ol {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fb-snapshot-road {
  min-height: 56px !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
}
.fb-snapshot-road > span {
  font-size: 16px !important;
}
.fb-snapshot-road strong {
  font-size: 14px !important;
  line-height: 1.06 !important;
}
.fb-snapshot-road em {
  margin-top: 4px !important;
  font-size: 11px !important;
}
.fb-snapshot-road b {
  font-size: 15px !important;
}
.fb-snapshot-footer {
  position: static !important;
  margin-top: auto !important;
  padding: 10px 22px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 11px !important;
}
.fb-snapshot-footer,
.fb-snapshot-footer span,
.fb-snapshot-footer b {
  text-transform: uppercase !important;
}
@media (max-width: 1320px) {
  .traffic-snapshot-preview {
    width: min(500px, 100%) !important;
    max-width: 500px !important;
  }
  .fb-city-snapshot {
    max-width: 500px !important;
  }
}


/* Patch 37: remove snapshot stat labels */
.fb-snapshot-stats div {justify-content:center !important; align-items:center !important;}
.fb-snapshot-stats span {display:none !important;}
.fb-snapshot-stats b {margin:0 !important; font-size:26px !important; line-height:1 !important;}


/* Patch 38: remove metric cards entirely and shorten the snapshot */
.fb-snapshot-stats {
  display: none !important;
}
.traffic-snapshot-preview {
  aspect-ratio: 4 / 4.4 !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
}
.fb-city-snapshot {
  aspect-ratio: 4 / 4.4 !important;
  width: 100% !important;
  max-width: 560px !important;
  padding-bottom: 12px !important;
}
.fb-snapshot-roads {
  margin: 56px 22px 0 !important;
}
.fb-snapshot-roads h2 {
  margin-bottom: 10px !important;
}
.fb-snapshot-road {
  min-height: 54px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.fb-snapshot-footer {
  padding-top: 10px !important;
}
@media (max-width: 1320px) {
  .traffic-snapshot-preview {
    width: min(500px, 100%) !important;
    max-width: 500px !important;
  }
  .fb-city-snapshot {
    max-width: 500px !important;
  }
}


/* Patch 41: per-road direction dropdowns for snapshot cards */
.snapshot-road {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 86px !important;
}
.snapshot-road-main {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.snapshot-direction-control {
  margin-top: 5px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.snapshot-direction-control span {
  color: #6ee7ff;
  font-size: 9px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.snapshot-direction-control select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 28px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .30);
  background:
    linear-gradient(45deg, transparent 50%, #bfe9ff 50%) calc(100% - 15px) 11px / 6px 6px no-repeat,
    linear-gradient(135deg, #bfe9ff 50%, transparent 50%) calc(100% - 11px) 11px / 6px 6px no-repeat,
    rgba(4, 17, 31, .72);
  color: #eaf6ff;
  font-size: 11px;
  font-weight: 850;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.snapshot-direction-control select:focus {
  border-color: rgba(103, 232, 249, .65);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}
.snapshot-direction-control select option {
  color: #0f172a;
}


/* Patch 43: show real road/place name + visible per-card direction selector */
.snapshot-road {
  min-height: 108px !important;
  align-items: start !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.snapshot-road-main {
  gap: 4px !important;
  min-width: 0 !important;
}
.snapshot-road-main b {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.snapshot-road-main small {
  color: #9fb4cc !important;
  white-space: nowrap !important;
}
.snapshot-direction-control {
  margin-top: 8px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(230px, 100%) !important;
}
.snapshot-direction-control span {
  color: #6ee7ff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.snapshot-direction-control select {
  display: block !important;
  width: 100% !important;
  min-width: 150px !important;
  height: 32px !important;
  padding: 0 30px 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, .35) !important;
  background:
    linear-gradient(45deg, transparent 50%, #bfe9ff 50%) calc(100% - 15px) 12px / 6px 6px no-repeat,
    linear-gradient(135deg, #bfe9ff 50%, transparent 50%) calc(100% - 11px) 12px / 6px 6px no-repeat,
    rgba(4, 17, 31, .82) !important;
  color: #eaf6ff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.snapshot-direction-control select:focus {
  border-color: rgba(103, 232, 249, .75) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12) !important;
}
.snapshot-direction-control select option {
  color: #0f172a !important;
}


/* Patch 45: destination-only direction selector, no duplicate description */
.snapshot-road-main small {
  display: none !important;
}
.snapshot-road {
  min-height: 92px !important;
}
.snapshot-direction-control {
  margin-top: 9px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  width: min(220px, 100%) !important;
}
.snapshot-direction-control select {
  min-width: 130px !important;
}


/* Patch 46: custom destination dropdown + directional delay recalculation */
.snapshot-direction-control {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.snapshot-direction-button {
  width: 100% !important;
  min-width: 130px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(56, 189, 248, .38) !important;
  border-radius: 999px !important;
  background: rgba(4, 17, 31, .82) !important;
  color: #eaf6ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.snapshot-direction-button b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.snapshot-direction-button i {
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #bfe9ff !important;
  border-bottom: 2px solid #bfe9ff !important;
  transform: rotate(45deg) translateY(-2px) !important;
  flex: 0 0 auto !important;
}
.snapshot-direction-control.open .snapshot-direction-button {
  border-color: rgba(103, 232, 249, .78) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .13) !important;
}
.snapshot-direction-menu {
  position: absolute !important;
  z-index: 50 !important;
  top: calc(100% + 6px) !important;
  left: 42px !important;
  width: min(190px, calc(100% - 42px)) !important;
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  background: rgba(7, 17, 31, .96) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
}
.snapshot-direction-menu[hidden] {
  display: none !important;
}
.snapshot-direction-menu button {
  width: 100% !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #dcecff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: left !important;
  padding: 0 10px !important;
  cursor: pointer !important;
}
.snapshot-direction-menu button:hover,
.snapshot-direction-menu button.active {
  background: rgba(34, 211, 238, .18) !important;
  color: #ffffff !important;
}
.snapshot-direction-control select {
  display: none !important;
}
.snapshot-road {
  overflow: visible !important;
}
.snapshot-road-list {
  overflow: visible auto !important;
}


/* Patch 47: fully custom destination dropdown + extra-delay labels */
.snapshot-direction-control select {
  display: none !important;
}
.snapshot-direction-control {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.snapshot-direction-button {
  width: 100% !important;
  min-width: 132px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(56, 189, 248, .42) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(10, 33, 55, .96), rgba(3, 17, 31, .94)) !important;
  color: #effaff !important;
  font: 900 11px/1 inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}
.snapshot-direction-button b {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.snapshot-direction-button i {
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #bfe9ff !important;
  border-bottom: 2px solid #bfe9ff !important;
  transform: rotate(45deg) translateY(-2px) !important;
  flex: 0 0 auto !important;
}
.snapshot-direction-control.open .snapshot-direction-button {
  border-color: rgba(103, 232, 249, .82) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.snapshot-direction-menu {
  position: absolute !important;
  z-index: 999 !important;
  top: calc(100% + 7px) !important;
  left: 42px !important;
  width: min(190px, calc(100% - 42px)) !important;
  padding: 6px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(125, 211, 252, .26) !important;
  background: rgba(5, 16, 29, .97) !important;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(16px) !important;
}
.snapshot-direction-menu[hidden] {
  display: none !important;
}
.snapshot-direction-menu button {
  width: 100% !important;
  min-height: 31px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #dcecff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-align: left !important;
  padding: 0 10px !important;
  cursor: pointer !important;
}
.snapshot-direction-menu button:hover,
.snapshot-direction-menu button.active {
  background: rgba(34, 211, 238, .18) !important;
  color: #ffffff !important;
}
.snapshot-road,
.snapshot-road-main,
.snapshot-road-list {
  overflow: visible !important;
}


/* Patch 48: dropdown should behave like a real custom popover and stay above cards */
.snapshot-road-list {
  overflow-y: auto !important;
  overflow-x: visible !important;
  padding-right: 8px !important;
}
.snapshot-road {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}
.snapshot-road.dropdown-open {
  z-index: 9999 !important;
}
.snapshot-road.meta-updated .snapshot-road-meta {
  animation: snapshotMetaPulse .42s ease both;
}
@keyframes snapshotMetaPulse {
  0% { transform: scale(.96); filter: brightness(1.8); }
  100% { transform: scale(1); filter: brightness(1); }
}
.snapshot-direction-control {
  position: relative !important;
  z-index: 5 !important;
}
.snapshot-direction-control.open {
  z-index: 10000 !important;
}
.snapshot-direction-button {
  background:
    linear-gradient(180deg, rgba(11, 38, 61, .98), rgba(3, 18, 33, .98)) !important;
  border-color: rgba(91, 216, 255, .58) !important;
  color: #f3fbff !important;
}
.snapshot-direction-menu {
  left: 42px !important;
  right: auto !important;
  top: calc(100% + 8px) !important;
  width: 170px !important;
  padding: 7px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(7, 24, 41, .99), rgba(3, 13, 25, .99)) !important;
  border: 1px solid rgba(103, 232, 249, .34) !important;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 28px rgba(34,211,238,.10) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}
.snapshot-direction-menu button {
  display: flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: 11px !important;
  color: #dff4ff !important;
  background: transparent !important;
}
.snapshot-direction-menu button + button {
  margin-top: 3px !important;
}
.snapshot-direction-menu button:hover {
  background: rgba(34, 211, 238, .13) !important;
}
.snapshot-direction-menu button.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .26), rgba(14, 165, 233, .10)) !important;
  color: #ffffff !important;
}
.snapshot-direction-menu button.active::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, .75);
}
.snapshot-direction-control select,
.snapshot-direction-control option {
  display: none !important;
}