:root{
      --font-body:"Sora","Segoe UI",sans-serif;
      --font-display:"Chakra Petch","Segoe UI",sans-serif;
      --radius-xl:22px;
      --radius-lg:16px;
      --radius-md:12px;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --shadow-soft:0 12px 28px rgba(0,0,0,.22);
    }
    [data-theme="night"]{
      --bg-1:#0c1116;
      --bg-2:#141d26;
      --card:#101720;
      --card-2:#17222d;
      --text:#e7edf4;
      --muted:#9aa7b4;
      --accent:#ffb347;
      --accent-rgb:255,179,71;
      --accent-2:#2ec4b6;
      --accent-2-rgb:46,196,182;
      --border:rgba(255,255,255,.08);
      --nav-bg:rgba(10,13,17,.86);
      --chip-bg:rgba(255,255,255,.08);
      --chip-border:rgba(255,255,255,.14);
      --chip-hover:rgba(255,255,255,.18);
      --hero-bg-1:rgba(255,255,255,.08);
      --hero-bg-2:rgba(255,255,255,.03);
      --ad-bg:rgba(255,255,255,.06);
      --ad-text:#ffd7a2;
      --pattern-opacity:.1;
    }
    [data-theme="day"]{
      --bg-1:#f8f3ea;
      --bg-2:#e9f3f6;
      --card:#ffffff;
      --card-2:#f2f7f9;
      --text:#121821;
      --muted:#566574;
      --accent:#ff7a18;
      --accent-rgb:255,122,24;
      --accent-2:#0ea5a6;
      --accent-2-rgb:14,165,166;
      --border:rgba(18,24,33,.12);
      --nav-bg:rgba(248,243,234,.92);
      --chip-bg:rgba(18,24,33,.06);
      --chip-border:rgba(18,24,33,.14);
      --chip-hover:rgba(18,24,33,.12);
      --hero-bg-1:rgba(255,255,255,.85);
      --hero-bg-2:rgba(255,255,255,.6);
      --ad-bg:rgba(18,24,33,.06);
      --ad-text:#4b5a68;
      --pattern-opacity:.16;
    }
    body{
      font-family:var(--font-body);
      background:
        radial-gradient(1000px 520px at 5% -10%, rgba(var(--accent-rgb),.18), transparent 60%),
        radial-gradient(900px 520px at 95% 5%, rgba(var(--accent-2-rgb),.16), transparent 60%),
        linear-gradient(160deg,var(--bg-1),var(--bg-2));
      color:var(--text);
      min-height:100vh;
      position:relative;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px),
        radial-gradient(420px 260px at 80% 20%, rgba(255,255,255,.06), transparent 60%);
      opacity:var(--pattern-opacity);
      mix-blend-mode:soft-light;
      z-index:0;
    }
    .navbar,
    .page-shell,
    footer{
      position:relative;
      z-index:1;
    }
    .navbar-blur{
      background:var(--nav-bg);
      border-bottom:1px solid var(--border);
      backdrop-filter:blur(12px);
    }
    .navbar-brand .brand-logo{height:40px; width:auto;}
    .logo-night{display:inline-block;}
    .logo-day{display:none;}
    .logo-mobile{display:none;}
    [data-theme="day"] .logo-night{display:none;}
    [data-theme="day"] .logo-day{display:inline-block;}
    [data-theme="day"] .text-white{color:var(--text) !important;}
    [data-theme="day"] a.text-white:hover{color:var(--text) !important;}
    [data-theme="day"] .navbar.navbar-dark .nav-link{color:var(--text);}
    [data-theme="day"] .navbar.navbar-dark .nav-link:hover,
    [data-theme="day"] .navbar.navbar-dark .nav-link:focus,
    [data-theme="day"] .navbar.navbar-dark .nav-link.active{color:var(--accent);}
    .navbar-brand span{
      font-family:var(--font-display);
      letter-spacing:.6px;
      font-weight:600;
    }
    .navbar-brand,
    .navbar-brand:hover{color:var(--text) !important;}
    .navbar-toggler{border-color:var(--border);}
    .navbar-mobile-header{display:flex;align-items:center;flex:0 0 100%;width:100%;}
    @media (min-width:992px){.navbar-mobile-header{display:contents;}}
    .navbar-mobile-actions{display:flex;align-items:center;gap:.5rem;}
    .navbar-share-btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:.25rem .75rem;border:1px solid var(--border);border-radius:.375rem;
      background:transparent;color:var(--text);font-size:1.25rem;line-height:1;
    }
    .navbar-share-btn:hover,.navbar-share-btn:focus-visible{background:var(--surface-2);color:var(--text);}
    [data-theme="day"] .navbar-toggler-icon{filter:invert(1) brightness(.25);}

    .page-shell{padding:18px var(--bs-gutter-x, .75rem) 64px;}
    .cardx{
      background:linear-gradient(160deg,var(--card),var(--card-2));
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }
    .hero{
      background:linear-gradient(140deg,var(--hero-bg-1),var(--hero-bg-2));
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      border-radius:var(--radius-xl);
      padding:1.5rem;
    }
    .hero-grid{display:grid; gap:18px;}
    .hero-copy h1{
      font-family:var(--font-display);
      font-size:clamp(1.7rem,5vw,2.8rem);
      letter-spacing:.4px;
    }
    .hero-copy .eyebrow{color:var(--muted); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;}
    .hero-copy .lead{color:var(--muted); font-size:1rem;}
    .hero-stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:1rem;}
    .stat-card{
      background:rgba(255,255,255,.05);
      border:1px solid var(--border);
      border-radius:12px;
      padding:.6rem .8rem;
      min-width:110px;
    }
    .stat-card span{display:block; font-family:var(--font-display); font-size:1.2rem;}
    .stat-card small{color:var(--muted);}

    .hero-side{display:flex; flex-direction:column; gap:.6rem;}
    .hero-side .mini-title{font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
    .hero-side .btn-link{text-decoration:none; color:var(--text);} 
    .hero-actions{display:flex; flex-wrap:wrap; gap:8px;}
    .hero-actions a{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.45rem .75rem;
      border-radius:999px;
      border:1px solid var(--border);
      text-decoration:none;
      color:var(--text);
      background:rgba(var(--accent-rgb),.08);
      font-size:.85rem;
    }
    .hero-actions a:hover{background:rgba(var(--accent-rgb),.18);}

    .theme-switch{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px;
      border-radius:999px;
      background:var(--chip-bg);
      border:1px solid var(--chip-border);
    }
    .theme-switch .btn-theme{
      border:0;
      border-radius:999px;
      background:transparent;
      color:var(--muted);
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      transition:all .2s ease;
    }
    .theme-switch .btn-theme.active{
      background:var(--accent);
      color:#11151c;
      box-shadow:0 10px 18px rgba(var(--accent-rgb),.25);
    }
    .theme-switch .btn-theme:focus-visible{
      outline:2px solid rgba(var(--accent-rgb),.45);
      outline-offset:2px;
    }    .search-form{
      display:flex;
      align-items:center;
      gap:8px;
      background:var(--chip-bg);
      border:1px solid var(--chip-border);
      border-radius:999px;
      padding:4px 8px;
    }
    .search-form input{
      border:0;
      background:transparent;
      color:var(--text);
      min-width:180px;
      flex:1;
      padding:6px 4px;
      outline:none;
      font-size:.9rem;
    }
    .search-form button{
      border:0;
      background:var(--accent);
      color:#11151c;
      border-radius:999px;
      padding:6px 10px;
      font-weight:600;
      font-size:.85rem;
      margin-left:auto;
    }
    .search-form.search-hero{
      width:100%;
      max-width:100%;
      padding:10px 14px;
      min-height:64px;
      gap:12px;
      border:1.5px solid var(--border);
      background:linear-gradient(120deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-2-rgb),.08));
      box-shadow:var(--shadow-soft);
    }
    .search-form.search-hero:focus-within{
      border-color:rgba(var(--accent-rgb),.6);
      box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18), var(--shadow-soft);
    }
    .search-form.search-hero .search-icon{
      display:flex;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border-radius:12px;
      background:rgba(var(--accent-rgb),.18);
      color:var(--accent);
      font-size:1.1rem;
      flex:0 0 auto;
    }
    .search-form.search-hero input{
      font-size:1.05rem;
    }
    .search-form.search-hero input::placeholder{
      color:var(--muted);
      opacity:.9;
    }
    .search-form.search-hero button{
      padding:10px 18px;
      font-size:.95rem;
      box-shadow:0 10px 18px rgba(var(--accent-rgb),.2);
    }
    .mobile-top-ad{
      display:none;
    }
    .mobile-top-ad a{
      position:relative;
      display:block;
      overflow:hidden;
      border-radius:12px;
      box-shadow:var(--shadow-soft);
    }
    .mobile-top-ad-label{
      position:relative;
      z-index:1;
      display:block;
      width:max-content;
      margin:-5px auto 0;
      padding:3px 7px;
      border-radius:999px;
      background:rgba(17,21,28,.68);
      color:#fff;
      font-size:.62rem;
      line-height:1;
      font-weight:600;
      letter-spacing:.02em;
      backdrop-filter:blur(6px);
      pointer-events:none;
    }
    .mobile-top-ad a::after{
      content:"";
      position:absolute;
      inset:-40% auto -40% -70%;
      width:45%;
      transform:skewX(-20deg);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
      animation:ad-shine 3.2s ease-in-out infinite;
      pointer-events:none;
    }
    .mobile-top-ad img{
      display:block;
      width:100%;
      height:auto;
    }
    @keyframes ad-shine{
      0%,35%{left:-70%;}
      70%,100%{left:125%;}
    }
    .breadcrumbs{
      margin:18px 0 10px;
      font-size:.85rem;
    }
    .breadcrumbs a{color:var(--muted); text-decoration:none;}
    .breadcrumbs a:hover{color:var(--text);}
    .breadcrumbs .separator{color:var(--muted); padding:0 6px;}

    .section-title{
      font-family:var(--font-display);
      font-size:1.2rem;
      letter-spacing:.3px;
      margin-bottom:12px;
    }
    .section-sub{color:var(--muted); font-size:.92rem; margin-bottom:12px;}
    .muted{color:var(--muted)}

    .chip{
      display:inline-flex;
      align-items:center;
      padding:4px 10px;
      border-radius:999px;
      background:var(--chip-bg);
      border:1px solid var(--chip-border);
      font-size:.85rem;
      margin:2px 6px 2px 0;
      color:var(--text);
      cursor:pointer;
    }
    .chip:hover{background:var(--chip-hover)}
    button.chip{border:1px solid var(--chip-border); background:var(--chip-bg); color:var(--text);}
    .search-tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .search-tag-chip{
      margin:0;
      cursor:default;
      font-size:.8rem;
      line-height:1.2;
      padding:5px 9px;
    }
    .search-tag-chip:hover{background:var(--chip-bg);}

    .badge-soft{
      background:rgba(var(--accent-rgb),.18);
      color:var(--accent);
      border:1px solid rgba(var(--accent-rgb),.35);
    }
    .route-summary{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:16px;
      margin-bottom:18px;
    }
    .route-no-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:88px;
      padding:.55rem 1.1rem;
      background:linear-gradient(150deg,rgba(var(--accent-rgb),.95),rgba(var(--accent-2-rgb),.8));
      color:#10121a;
      font-family:var(--font-display);
      font-size:clamp(1.6rem,4vw,2.3rem);
      font-weight:700;
      line-height:1.1;
      letter-spacing:.5px;
      border-radius:16px;
      box-shadow:0 10px 24px rgba(var(--accent-rgb),.25);
    }
    .route-summary-body{flex:1; min-width:220px;}
    .route-summary-name{
      font-family:var(--font-display);
      font-size:clamp(1.05rem,2.4vw,1.45rem);
      font-weight:600;
      line-height:1.25;
    }
    .route-summary-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
    .route-tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border:1px solid var(--border);
      background:var(--card-2);
      color:var(--muted);
      border-radius:999px;
      padding:.25rem .7rem;
      font-size:.82rem;
    }
    .route-stat-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      gap:12px;
    }
    .route-stat{
      border:1px solid var(--border);
      background:var(--card-2);
      border-radius:14px;
      padding:.85rem 1rem;
    }
    .route-stat strong{
      display:block;
      font-family:var(--font-display);
      font-size:1.4rem;
      font-weight:600;
      line-height:1.2;
      margin-top:.15rem;
    }
    .direction-card{
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--card-2);
      padding:16px;
      box-shadow:var(--shadow-soft);
    }
    .direction-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .direction-title{
      display:flex;
      align-items:center;
      gap:10px;
      font-family:var(--font-display);
      letter-spacing:.2px;
      font-weight:600;
    }
    .direction-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);
    }
    .direction-dot.d{
      background:var(--accent-2);
      box-shadow:0 0 0 4px rgba(var(--accent-2-rgb),.18);
    }
    .schedule-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(175px, 1fr));
      gap:12px;
    }
    .schedule-day{
      border:1px solid var(--border);
      border-radius:14px;
      background:var(--card);
      padding:12px;
      min-height:120px;
    }
    .schedule-day-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .schedule-day-name{font-weight:600; font-size:.95rem;}
    .schedule-day-date{font-size:.78rem; color:var(--muted);}
    .schedule-day-dir{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:.7rem;
      padding:2px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      color:var(--muted);
      margin-top:4px;
    }
    .schedule-day-dir.g{
      color:var(--accent);
      border-color:rgba(var(--accent-rgb),.35);
      background:rgba(var(--accent-rgb),.08);
    }
    .schedule-day-dir.d{
      color:var(--accent-2);
      border-color:rgba(var(--accent-2-rgb),.35);
      background:rgba(var(--accent-2-rgb),.08);
    }
    .schedule-day-count{
      font-size:.72rem;
      color:var(--muted);
      border:1px solid var(--border);
      padding:2px 8px;
      border-radius:999px;
      white-space:nowrap;
    }
    .schedule-day-note-list{
      display:grid;
      gap:4px;
      margin:0 0 8px;
    }
    .schedule-day-note{
      display:block;
      width:100%;
      font-size:.73rem;
      font-weight:500;
      line-height:1.35;
      color:#f0a447;
      border-left:2px solid rgba(240,164,71,.45);
      padding-left:8px;
      letter-spacing:.01em;
    }
    [data-theme="day"] .schedule-day-note{
      color:#b6671c;
      border-left-color:rgba(182,103,28,.4);
    }
    .schedule-day-body{
      display:grid;
      grid-template-columns:repeat(auto-fill, 72px);
      justify-content:start;
      gap:6px;
      align-items:center;
    }
    .schedule-day-body .chip{
      margin:0;
      width:100%;
      justify-content:center;
      text-align:center;
      font-variant-numeric: tabular-nums;
    }
    .schedule-day-actions{
      margin-top:10px;
      display:flex;
      justify-content:center;
    }
    .schedule-expand-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      border:1px solid var(--border);
      background:rgba(var(--accent-rgb),.08);
      color:var(--accent);
      border-radius:999px;
      padding:4px 10px;
      font-size:.74rem;
      font-weight:600;
      line-height:1.1;
      transition:all .2s ease;
    }
    .schedule-expand-btn:hover{
      border-color:rgba(var(--accent-rgb),.45);
      background:rgba(var(--accent-rgb),.16);
    }
    .schedule-expand-btn:disabled{
      opacity:.82;
      cursor:default;
    }
    .schedule-expand-btn .spinner-border{
      width:.8rem;
      height:.8rem;
      border-width:.14em;
    }
    [data-theme="day"] .schedule-expand-btn{
      background:rgba(var(--accent-rgb),.12);
    }
    .scroll-top{
      position:fixed;
      right:22px;
      bottom:22px;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(var(--accent-rgb),.35);
      background:var(--accent);
      color:#11151c;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 12px 24px rgba(0,0,0,.25);
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
      z-index:20;
    }
    .scroll-top i{font-size:1.6rem; line-height:1;}
    .scroll-top:hover{box-shadow:0 16px 30px rgba(0,0,0,.3);}
    .scroll-top.show{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }
    body.install-visible .scroll-top{bottom:86px;}
    .install-bar{
      position:fixed;
      left:18px;
      right:18px;
      bottom:18px;
      display:none;
      align-items:center;
      gap:12px;
      padding:12px 14px;
      background:var(--nav-bg);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(12px);
      z-index:21;
    }
    .install-bar.show{display:flex;}
    .install-title{font-weight:600; font-size:.95rem;}
    .install-text{font-size:.85rem; color:var(--muted);}
    .install-actions{
      display:flex;
      gap:8px;
      margin-left:auto;
      flex-wrap:wrap;
    }
    .install-btn{
      border-radius:999px;
      padding:6px 14px;
      font-size:.85rem;
      border:1px solid rgba(var(--accent-rgb),.4);
      background:var(--accent);
      color:#11151c;
    }
    .install-btn.secondary{
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
    }

    .route-card{
      position:relative;
      overflow:hidden;
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .route-card::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:4px;
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      opacity:.75;
      pointer-events:none;
    }
    .route-card > *{position:relative; z-index:1;}
    .route-card:hover{transform:translateY(-3px); box-shadow:0 24px 60px rgba(0,0,0,.25);}
    .route-card-head{display:flex; flex-direction:column; gap:.35rem;}
    .route-badge-row{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;}
    .route-badge.alt{
      border-color:rgba(var(--accent-2-rgb),.35);
      background:rgba(var(--accent-2-rgb),.12);
      color:var(--accent-2);
    }
    .route-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.25rem .6rem;
      border-radius:999px;
      border:1px solid rgba(var(--accent-rgb),.35);
      background:rgba(var(--accent-rgb),.12);
      color:var(--accent);
      font-family:var(--font-display);
      font-size:.78rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      width:fit-content;
    }
    .route-name{
      margin:0;
      font-weight:600;
      font-size:1rem;
      letter-spacing:.2px;
      color:var(--text);
    }
    .route-lines{
      display:grid;
      gap:.55rem;
      margin-top:.85rem;
    }
    .route-line{
      display:grid;
      grid-template-columns:auto 1fr;
      align-items:start;
      gap:.6rem;
      padding:.55rem .7rem;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
    }
    [data-theme="day"] .route-line{background:rgba(18,24,33,.04);}
    .route-line-label{
      display:inline-flex;
      align-items:center;
      padding:.2rem .45rem;
      border-radius:999px;
      font-size:.7rem;
      font-weight:600;
      letter-spacing:.04em;
      white-space:nowrap;
      border:1px solid transparent;
    }
    .route-line.g .route-line-label{
      color:var(--accent-2);
      background:rgba(var(--accent-2-rgb),.12);
      border-color:rgba(var(--accent-2-rgb),.35);
    }
    .route-line.d .route-line-label{
      color:var(--accent);
      background:rgba(var(--accent-rgb),.12);
      border-color:rgba(var(--accent-rgb),.35);
    }
    .route-line-text{
      color:var(--text);
      font-size:.92rem;
      line-height:1.3;
      word-break:break-word;
    }
    .route-meta{color:var(--muted); font-size:.85rem;}
    .route-desc{color:var(--muted); font-size:.9rem;}

    .list-scroll{max-height:320px; overflow:auto; padding-right:8px;}
    .list-group-item{border-color:var(--border);}

    #map{
      height:clamp(240px,42vh,420px);
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      background:var(--card);
      position:relative;
      z-index:0;
    }
    #nearbyMap{
      min-height:clamp(280px,48vh,520px);
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      background:var(--card);
      box-shadow:var(--shadow-soft);
    }
    .stop-card{
      border:1px solid var(--border);
      border-radius:16px;
      background:
        linear-gradient(180deg,var(--accent),var(--accent-2)) 0 0 / 3px 100% no-repeat,
        linear-gradient(160deg,var(--card),var(--card-2));
      padding:1rem 1.2rem;
      box-shadow:var(--shadow-soft);
      transition:box-shadow .2s ease, transform .2s ease;
    }
    .stop-card:hover{box-shadow:0 18px 34px rgba(0,0,0,.2); transform:translateY(-2px);}
    .stop-head{
      background:linear-gradient(120deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-2-rgb),.12));
      border-bottom:1px solid rgba(var(--accent-rgb),.25);
      border-radius:12px 12px 0 0;
      margin:-1rem -1.2rem .75rem;
      padding:.75rem 1.2rem;
    }
    .stop-eyebrow{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
    .stop-title{font-weight:700; margin:0; font-size:1.05rem; color:var(--text);}
    .stop-meta{color:var(--muted); font-size:.9rem;}
    .dist-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.72rem;
      padding:.25rem .5rem;
      border-radius:999px;
      color:var(--text);
      white-space:nowrap;
      border:1px solid transparent;
      font-weight:600;
      letter-spacing:.03em;
    }
    .dist-very-close{
      color:var(--accent-2);
      background:rgba(var(--accent-2-rgb),.22);
      border-color:rgba(var(--accent-2-rgb),.5);
    }
    .dist-close{
      color:var(--accent-2);
      background:rgba(var(--accent-2-rgb),.14);
      border-color:rgba(var(--accent-2-rgb),.3);
    }
    .dist-far{
      color:var(--accent);
      background:rgba(var(--accent-rgb),.14);
      border-color:rgba(var(--accent-rgb),.32);
    }
    .dist-very-far{
      color:#ef4444;
      background:rgba(239,68,68,.14);
      border-color:rgba(239,68,68,.35);
    }
    #yakin-durak .nearby-head{
      background:
        linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-2-rgb),.12)),
        linear-gradient(160deg,var(--card),var(--card-2));
      border-color:rgba(var(--accent-rgb),.25);
      box-shadow:var(--shadow);
    }
    #yakin-durak .nearby-panel{
      background:linear-gradient(160deg,var(--card),var(--card-2));
      border-color:var(--border);
      box-shadow:var(--shadow-soft);
    }
    #yakin-durak .nearby-alert{
      border:1px dashed rgba(var(--accent-rgb),.35);
      background:rgba(var(--accent-rgb),.08);
      color:var(--text);
    }
    #yakin-durak .btn-outline-secondary{
      border-color:rgba(var(--accent-rgb),.45);
      color:var(--accent);
    }
    #yakin-durak .btn-outline-secondary:hover,
    #yakin-durak .btn-outline-secondary:focus{
      background:rgba(var(--accent-rgb),.12);
      color:var(--accent);
      border-color:rgba(var(--accent-rgb),.65);
    }
    #yakin-durak .stop-card .btn-outline-success{
      border-color:rgba(var(--accent-2-rgb),.45);
      color:var(--accent-2);
    }
    #yakin-durak .stop-card .btn-outline-success:hover,
    #yakin-durak .stop-card .btn-outline-success:focus{
      background:rgba(var(--accent-2-rgb),.12);
      color:var(--accent-2);
      border-color:rgba(var(--accent-2-rgb),.7);
    }
    #yakin-durak .stop-card .btn-outline-primary{
      border-color:rgba(var(--accent-rgb),.45);
      color:var(--accent);
    }
    #yakin-durak .stop-card .btn-outline-primary:hover,
    #yakin-durak .stop-card .btn-outline-primary:focus{
      background:rgba(var(--accent-rgb),.12);
      color:var(--accent);
      border-color:rgba(var(--accent-rgb),.7);
    }
    .line-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      border:1px solid var(--border);
      background:var(--card);
      border-radius:.6rem;
      padding:.55rem .75rem;
      margin-bottom:.5rem;
      gap:.75rem;
    }
    .line-item:hover{
      border-color:rgba(var(--accent-rgb),.6);
      box-shadow:0 10px 22px rgba(0,0,0,.12);
    }
    .contact-card{
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .contact-card:hover{
      border-color:rgba(var(--accent-rgb),.6);
      box-shadow:0 10px 22px rgba(0,0,0,.12);
      transform:translateY(-2px);
    }
    .contact-card:focus-visible{
      outline:2px solid rgba(var(--accent-rgb),.6);
      outline-offset:2px;
    }
    .spin{
      width:1.1rem;
      height:1.1rem;
      border:.2rem solid var(--border);
      border-top-color:var(--accent);
      border-radius:50%;
      animation:sp .8s linear infinite;
    }
    @keyframes sp{to{transform:rotate(360deg)}}
    .map-shell{position:relative;}
    .legend-wrap{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:8px;
      z-index:1100;
    }
    .legend-toggle{
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:var(--shadow-soft);
    }
    .legend-toggle:focus-visible{
      outline:2px solid rgba(var(--accent-rgb),.6);
      outline-offset:2px;
    }
    .legend{
      background:var(--card);
      border-radius:10px;
      padding:8px 10px;
      border:1px solid var(--border);
      box-shadow:var(--shadow-soft);
      font-size:12px;
    }
    .fullscreen-btn{
      width:34px;height:34px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:var(--shadow-soft);
    }
    .fullscreen-btn:focus-visible{
      outline:2px solid rgba(var(--accent-rgb),.6);
      outline-offset:2px;
    }
    .map-shell.fullscreen{
      position:fixed;
      inset:0;
      margin:0;
      padding:0;
      border-radius:0;
      z-index:99999;
      background:var(--card);
    }
    .map-shell.fullscreen #map{
      height:100vh;
      border-radius:0;
      box-shadow:none;
    }
    .leaflet-popup-content-wrapper{
      border-radius:14px !important;
      box-shadow:0 10px 25px -5px rgba(0,0,0,.18), 0 8px 10px -6px rgba(0,0,0,.1) !important;
    }
    .leaflet-popup-content{
      margin:12px 14px !important;
      line-height:1.45 !important;
    }
    body.map-fullscreen{overflow:hidden;}
    body.map-fullscreen .page-shell{z-index:99999 !important;}
    body.map-fullscreen footer,
    body.map-fullscreen .footer,
    body.map-fullscreen .navbar,
    body.map-fullscreen .scroll-top,
    body.map-fullscreen .install-bar{
      display:none !important;
    }
    .dot{
      display:inline-block;
      width:10px;height:10px;
      border-radius:50%;
      margin-right:6px;
      vertical-align:middle;
    }
    .stop-dot{
      width:16px;height:16px;
      border-radius:50%;
      background:#495057;
      box-shadow:0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.25);
      transform:translate(-50%,-50%);
    }
    .stop-badge{
      width:22px;height:22px;
      border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      color:#fff;font-weight:700;font-size:12px;
      box-shadow:0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.25);
      transform:translate(-50%,-50%);
      user-select:none;
    }
    .stop-badge.g{background:#0d6efd;}
    .stop-badge.d{background:#ff6f00;}

    .veh{position:relative; width:40px; height:40px; color:#0d6efd;}
    .veh.d{color:#ff6f00;}
    .veh .circle{
      position:absolute; inset:0; border-radius:50%;
      background:currentColor;
      box-shadow:0 0 0 3px #fff, inset 0 0 0 2px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.25);
    }
    .veh .arrow{
      position:absolute; left:50%; top:50%;
      width:24px; height:24px; transform-origin:50% 55%;
      translate:-50% -55%;
    }
    .veh .arrow polygon{fill:#fff; opacity:.98;}
    .veh.live::after{
      content:""; position:absolute; inset:-6px; border-radius:50%;
      border:3px solid currentColor; opacity:.4;
      animation:ping 1.6s ease-out infinite;
    }
    @keyframes ping{
      0%{transform:scale(.85);opacity:.55}
      70%{transform:scale(1.35);opacity:.15}
      100%{transform:scale(1.45);opacity:0}
    }
    .veh.bob{animation:bob 1.8s ease-in-out infinite;}
    @keyframes bob{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-2px)}
    }
    .pin-follow{
      font-size:26px; line-height:1;
      transform:translateY(-8px);
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    .follow-ring{
      width:42px; height:42px; border-radius:50%;
      border:3px solid rgba(13,110,253,.65);
      animation:ring 1.5s ease-in-out infinite;
    }
    @keyframes ring{
      0%{transform:scale(.8);opacity:.8}
      70%{transform:scale(1.25);opacity:.2}
      100%{transform:scale(1.3);opacity:0}
    }
    .live-pill{
      display:inline-flex; align-items:center; gap:6px;
      background:#dc3545; color:#fff; padding:4px 10px; border-radius:999px;
      font-weight:600; font-size:13px; letter-spacing:.2px;
      box-shadow:0 2px 6px rgba(220,53,69,.35);
    }
    .live-dot{
      width:8px;height:8px;border-radius:50%; background:#fff; position:relative;
    }
    .live-dot::after{
      content:""; position:absolute; inset:-6px; border-radius:50%;
      border:2px solid rgba(255,255,255,.9); animation:livepulse 1.4s ease-out infinite;
    }
    @keyframes livepulse{
      0%{transform:scale(.6); opacity:.9}
      70%{transform:scale(1.5); opacity:.15}
      100%{transform:scale(1.6); opacity:0}
    }
    .btn-live-jump{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:8px 18px;
      min-height:42px;
      font-weight:700;
      font-size:.9rem;
      border-radius:12px;
      color:#2a1f00 !important;
      text-decoration:none !important;
      background:linear-gradient(135deg, #ffd95a, #ffbe0b);
      border:1px solid rgba(255,193,7,.78);
      box-shadow:0 8px 18px rgba(255,193,7,.28);
      transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    .btn-live-jump:hover,
    .btn-live-jump:focus{
      color:#2a1f00 !important;
      text-decoration:none !important;
      transform:translateY(-1px);
      filter:brightness(1.02);
      box-shadow:0 12px 24px rgba(255,193,7,.34);
    }
    .btn-live-jump-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#fff;
      position:relative;
      box-shadow:0 0 0 2px rgba(0,0,0,.08);
    }
    .btn-live-jump-dot::after{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.95);
      animation:livejumpPulse 1.4s ease-out infinite;
    }
    @keyframes livejumpPulse{
      0%{transform:scale(.6);opacity:.9}
      70%{transform:scale(1.5);opacity:.18}
      100%{transform:scale(1.6);opacity:0}
    }
    .btn-live-jump-text{
      transition: opacity .2s ease;
    }
    .btn-live-jump.has-active-vehicles .btn-live-jump-dot{
      background:#10b981;
    }
    .btn-live-jump.has-active-vehicles .btn-live-jump-dot::after{
      border-color:rgba(16,185,129,.9);
    }
    .btn-live-jump.no-active-vehicles .btn-live-jump-dot{
      background:#94a3b8;
    }
    .btn-live-jump.no-active-vehicles .btn-live-jump-dot::after{
      animation:none;
      opacity:0;
    }
    .btn-live-no-tracking,
    .btn-live-jump.btn-live-no-tracking{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      gap:8px !important;
      padding:8px 18px !important;
      min-height:46px !important;
      font-weight:700 !important;
      font-size:.95rem !important;
      border-radius:12px !important;
      color:#fff !important;
      text-decoration:none !important;
      background:linear-gradient(135deg, #ef4444, #dc2626) !important;
      border:1px solid rgba(239,68,68,.85) !important;
      box-shadow:0 4px 14px rgba(220,38,38,.28) !important;
      pointer-events:none !important;
      cursor:not-allowed !important;
      transform:none !important;
      filter:none !important;
    }
    .btn-live-no-tracking:hover,
    .btn-live-no-tracking:focus,
    .btn-live-jump.btn-live-no-tracking:hover,
    .btn-live-jump.btn-live-no-tracking:focus{
      color:#fff !important;
      transform:none !important;
      filter:none !important;
      box-shadow:0 4px 14px rgba(220,38,38,.28) !important;
    }
    .btn-live-no-tracking .btn-live-jump-dot,
    .btn-live-jump.btn-live-no-tracking .btn-live-jump-dot{
      display:none !important;
    }
    .btn-live-count-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#1e293b;
      color:#fff;
      font-size:.9rem;
      font-weight:800;
      padding:4px 12px;
      border-radius:8px;
      line-height:1.2;
      box-shadow:0 2px 6px rgba(0,0,0,.24);
      letter-spacing:.3px;
      margin-left:6px;
    }
    .btn-live-no-tracking .btn-live-count-badge,
    .btn-live-jump.btn-live-no-tracking .btn-live-count-badge{
      display:none !important;
    }

    .table-dark{
      --bs-table-bg:var(--card);
      --bs-table-striped-bg:rgba(0,0,0,.04);
      --bs-table-color:var(--text);
      --bs-table-border-color:var(--border);
      color:var(--text);
    }
    [data-theme="night"] .table-dark{--bs-table-striped-bg:rgba(255,255,255,.04);}
    .modal-content{
      background:var(--card);
      color:var(--text);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
    }
    .duyuru-card{
      border:1px solid var(--border);
    }
    .duyuru-text{
      white-space:pre-line;
      color:var(--text);
      opacity:.95;
    }
    .duyuru-time{
      font-size:.82rem;
      color:var(--muted);
    }
    .footer{
      border-top:1px solid var(--border);
      padding:32px 0 50px;
      color:var(--muted);
    }
    .footer a{color:var(--text); text-decoration:none;}
    .footer a:hover{color:var(--accent);}

    @media (min-width: 992px){
      .page-shell{padding:28px 0 72px;}
      .hero{padding:2.2rem;}
      .hero-grid{grid-template-columns:1.3fr .7fr; align-items:stretch;}
      .navbar-brand .brand-logo{height:54px;}
    }
    @media (max-width: 991px){
      .hero-side{padding-top:8px;}
      .search-form{width:100%;}
      .search-form input{width:100%;}
    }
    @media (max-width: 768px){
      .list-scroll{max-height:240px;}
      .hero{padding:1.2rem;}
      .mobile-top-ad{
        display:block;
        padding:12px 10px 0;
      }
      .search-ad-section{
        margin-bottom:.75rem !important;
      }
      .navbar-brand .brand-logo{height:36px;}
      .navbar-brand span{font-size:.9rem;}
      [data-theme] .logo-night,
      [data-theme] .logo-day{display:none;}
      [data-theme] .logo-mobile{display:inline-block;}
    }
    @media (max-width: 576px){
      .theme-switch .btn-theme span{font-size:.75rem;}
      .search-form{flex-direction:row;}
      .scroll-top{
        right:16px;
        bottom:16px;
        width:40px;
        height:40px;
        border-radius:12px;
      }
      .install-bar{
        left:12px;
        right:12px;
        bottom:12px;
        flex-direction:column;
        align-items:flex-start;
      }
      .install-actions{width:100%; justify-content:flex-end;}
      body.install-visible .scroll-top{bottom:86px;}
    }
    @media (max-width: 400px){
      .navbar-brand{min-width:0;max-width:calc(100% - 88px);gap:.4rem !important;overflow:hidden;white-space:nowrap;}
      .navbar-brand .brand-logo{height:32px;}
      .navbar-brand span{font-size:.78rem;letter-spacing:.25px;overflow:hidden;text-overflow:ellipsis;}
      .navbar-mobile-actions{gap:.25rem;flex:0 0 auto;}
      .navbar-mobile-actions .navbar-toggler,
      .navbar-share-btn{width:38px;height:38px;padding:0;flex:0 0 38px;}
      .navbar-toggler-icon{width:1.2em;height:1.2em;}
      .navbar-share-btn{font-size:1.05rem;}
    }

/* --- LIVE TRACKING & MODAL STYLES FROM BALIKESIR --- */
    /* Standart Canlı Hat Kartları ve Modal Stilleri */
    .live-line-search { background: var(--card, #142131); border: 1px solid var(--border, rgba(255,255,255,0.12)); color: var(--text, #f1f5f9); border-radius: 12px; padding: .72rem .95rem; }
    .live-line-search:focus { background: var(--card, #142131); border-color: var(--accent, #f59e0b); color: var(--text, #f1f5f9); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
    .live-line-card { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; height: 100%; min-height: 128px; padding: .9rem 1rem; background: var(--card, #142131); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 14px; color: var(--text, #f1f5f9); text-decoration: none; transition: all .2s ease; position: relative; overflow: hidden; cursor: pointer; }
    .live-line-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent, #f59e0b), var(--accent-2, #3b82f6)); opacity: .8; transition: opacity .2s ease; }
    .live-line-card:hover, .live-line-card:focus-visible { color: var(--text, #f1f5f9); background: var(--card-2, #1c2e42); border-color: var(--accent, #f59e0b); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
    .live-line-card:hover::before { opacity: 1; }
    .live-line-card.loading { opacity: .75; pointer-events: none; }
    .live-line-card-code-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; width: 100%; }
    .live-line-card-code { display: inline-flex; align-items: center; justify-content: center; padding: .24rem .55rem; border-radius: 8px; background: rgba(var(--accent-rgb, 245, 158, 11), 0.15); border: 1px solid rgba(var(--accent-rgb, 245, 158, 11), 0.4); color: var(--accent, #f59e0b); font-weight: 700; font-size: .82rem; letter-spacing: .02em; flex-shrink: 0; }
    .live-line-card-code-alt { display: inline-flex; align-items: center; justify-content: center; padding: .24rem .55rem; border-radius: 8px; background: rgba(var(--accent-2-rgb, 46, 196, 182), 0.15); border: 1px solid rgba(var(--accent-2-rgb, 46, 196, 182), 0.45); color: var(--accent-2, #2ec4b6); font-weight: 700; font-size: .82rem; letter-spacing: .02em; flex-shrink: 0; }
    .live-line-card-name { font-weight: 600; font-size: .88rem; line-height: 1.35; color: var(--text, #f1f5f9); margin-top: .5rem; margin-bottom: .6rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
    .live-line-card-footer { display: flex; align-items: center; justify-content: flex-start; padding-top: .45rem; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); width: 100%; margin-top: auto; }
    .live-line-card-count { white-space: nowrap; color: #10b981; font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; }
    .live-line-card-count::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: live-card-pulse 1.8s infinite; flex-shrink: 0; }
    @keyframes live-card-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
    @media (max-width: 575.98px) {
      .live-line-card { padding: .75rem .8rem; min-height: 120px; border-radius: 12px; }
      .live-line-card-code-wrap { gap: .3rem; }
      .live-line-card-name { font-size: .82rem; margin-top: .4rem; margin-bottom: .5rem; }
      .live-line-card-code, .live-line-card-code-alt { font-size: .76rem; padding: .18rem .45rem; }
      .live-line-card-count { font-size: .76rem; }
    }

    /* Modal Çerçeve ve Görünüm Tasarımı */
    .live-map-modal {
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .live-map-modal .modal-dialog {
      max-width: min(940px, 92vw);
      height: min(640px, 80vh);
      max-height: min(640px, 80vh);
      margin: 1.75rem auto;
      display: flex;
      align-items: center;
    }
    .live-map-modal .modal-content {
      width: 100%;
      height: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(165deg, #162438 0%, #0d1624 100%);
      border: 1.5px solid rgba(245, 158, 11, 0.4);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,0.75), 0 0 30px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .live-map-modal .modal-header {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .85rem 1.25rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(18, 30, 46, 0.92);
      backdrop-filter: blur(6px);
    }
    .live-map-modal .modal-header .modal-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #f8fafc;
      letter-spacing: -0.01em;
    }
    .live-modal-badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .28rem .65rem;
      border-radius: 9px;
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.14) 100%);
      border: 1px solid rgba(245, 158, 11, 0.5);
      color: #fbbf24;
      font-weight: 700;
      font-size: .82rem;
      white-space: nowrap;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.18);
    }
    .live-map-modal .modal-body {
      flex: 1 1 0;
      min-height: 0;
      padding: .85rem 1rem !important;
      position: relative;
      background: rgba(10, 17, 27, 0.7);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .modal-map-shell {
      width: 100%;
      height: 100% !important;
      min-height: 0 !important;
      border-radius: 14px !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      position: relative;
      overflow: hidden;
    }
    .modal-map-shell #map {
      width: 100%;
      height: 100%;
      min-height: 100%;
      border-radius: 13px;
    }
    .modal-map-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 14, 20, 0.65);
      backdrop-filter: blur(4px);
      z-index: 1000;
      pointer-events: all;
      transition: opacity .2s ease;
    }
    [data-theme="day"] .modal-map-loading {
      background: rgba(240, 244, 248, 0.78);
    }
    .modal-map-loading-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      border-radius: 14px;
      border: 1px solid var(--border, rgba(255,255,255,0.15));
      background: var(--card, #111a28);
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      min-width: 200px;
    }
    .modal-map-loading-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px solid rgba(245, 158, 11, 0.25);
      border-top-color: #f59e0b;
      animation: liveLoaderSpin .85s linear infinite;
    }
    .modal-map-loading-text {
      font-size: .86rem;
      font-weight: 600;
      color: var(--text, #e2e8f0);
      text-align: center;
    }
    .live-map-modal .modal-footer {
      flex: 0 0 auto;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(14, 23, 36, 0.95);
      padding: .75rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }
    .live-map-modal .modal-footer .btn {
      border-radius: 10px;
      font-weight: 600;
      font-size: .84rem;
      padding: .42rem .9rem;
      transition: all .2s ease;
    }
    .live-map-modal .modal-footer .btn-secondary {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #94a3b8;
    }
    .live-map-modal .modal-footer .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.14);
      color: #f8fafc;
    }
    .live-map-modal .modal-footer .btn-outline-warning,
    .live-map-modal .modal-footer .btn-outline-primary {
      border-color: rgba(245, 158, 11, 0.6);
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.08);
    }
    .live-map-modal .modal-footer .btn-outline-warning:hover,
    .live-map-modal .modal-footer .btn-outline-primary:hover {
      background: #f59e0b;
      color: #0f172a;
      border-color: #f59e0b;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    }
    .live-map-modal .btn-close {
      transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
      border-radius: 50%;
      padding: .45rem;
      opacity: .75;
    }
    .live-map-modal .btn-close:hover {
      opacity: 1;
      transform: scale(1.1);
      background-color: rgba(255, 255, 255, 0.1);
    }

    /* Mobil Optimizasyon ve Şık Çerçeve */
    @media (max-width: 768px) {
      .live-map-modal {
        padding: 0 !important;
      }
      .live-map-modal .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: 520px !important;
        margin: 10px auto !important;
        height: min(580px, calc(100dvh - 20px)) !important;
        max-height: min(580px, calc(100dvh - 20px)) !important;
      }
      .live-map-modal .modal-content {
        border-radius: 18px !important;
        border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
        box-shadow: 0 16px 45px rgba(0,0,0,0.85), 0 0 25px rgba(245, 158, 11, 0.15) !important;
      }
      .live-map-modal .modal-header {
        padding: .65rem .85rem !important;
      }
      .live-map-modal .modal-header .modal-title {
        font-size: .88rem !important;
      }
      .live-modal-badge {
        font-size: .74rem !important;
        padding: .22rem .48rem !important;
      }
      .live-map-modal .modal-body {
        padding: .6rem .65rem !important;
      }
      .modal-map-shell {
        border-radius: 12px !important;
      }
      .live-map-modal .modal-footer {
        padding: .5rem .85rem !important;
      }
      .live-map-modal .modal-footer .btn {
        padding: .35rem .7rem !important;
        font-size: .8rem !important;
      }
    }


/* City Selection Modal & Dropdown */
.city-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  background: rgba(var(--accent-rgb, 255, 179, 71), 0.12);
  border: 1px solid rgba(var(--accent-rgb, 255, 179, 71), 0.35);
  color: var(--accent, #ffb347);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.city-pill-btn:hover {
  background: var(--accent, #ffb347);
  color: #0c1116;
  border-color: var(--accent, #ffb347);
}
.city-select-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--card-2, #17222d);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  color: var(--text, #e7edf4);
  text-decoration: none;
  transition: all 0.2s ease;
}
.city-select-card:hover {
  border-color: var(--accent, #ffb347);
  transform: translateY(-2px);
  color: var(--text, #e7edf4);
}
.city-select-card.active {
  border-color: var(--accent, #ffb347);
  background: rgba(var(--accent-rgb, 255, 179, 71), 0.1);
}