*{ margin:0; padding:0; box-sizing:border-box; }
  :root{
    --surface:rgba(10,10,10,0.92);
    --border:rgba(255,255,255,0.08);
    --text:#f0f0f0;
    --dim:#7a7a7a;
    --accent:#E10600;
    --accent-glow:rgba(225,6,0,0.25);
  }
  html, body{ overscroll-behavior:none; }
  body{
    font-family:'Instrument Sans', sans-serif;
    background:#0a0a0a;
    color:var(--text);
    overflow:hidden;
    height:100vh; width:100vw;
    user-select:none;
  }

  #map{ position:absolute; inset:0; z-index:1; touch-action:none; }
  #map .mapboxgl-canvas{ touch-action:none; }
  .btn, .settings-item, .location-item, .seg-tab,
  .welcome-mode-tab, .format-card, .mobile-bar-btn, .map-zoom-btn{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .welcome-screen{
    position:fixed; inset:0; z-index:9999;
    background:#0a0a0a;
    display:flex; align-items:stretch;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:opacity 0.7s ease, visibility 0.7s ease;
  }
  .welcome-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .format-screen{
    position:fixed; inset:0; z-index:9999;
    background:#0a0a0a;
    display:flex; align-items:stretch;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transition:opacity 0.5s ease, visibility 0.5s ease;
  }
  .format-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .format-body{
    flex:1; display:flex; flex-direction:column;
    padding:60px 80px; justify-content:center; max-width:900px; margin:0 auto;
    min-height:min-content; width:100%;
    position:relative; z-index:2;
  }
  .format-title{
    font-family:'Instrument Sans', sans-serif;
    font-size:clamp(30px, 4vw, 48px); font-weight:700;
    line-height:1.05; letter-spacing:-1px;
    color:var(--text); margin-bottom:14px;
  }
  .format-title em{ font-style:normal; color:var(--accent); }
  .format-subtitle{
    font-family:'DM Mono', monospace; font-size:12px;
    color:var(--dim); letter-spacing:0.5px; line-height:1.7;
    margin-bottom:36px; max-width:520px;
  }
  .format-cards{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    margin-bottom:32px;
  }
  .format-cards.three{ grid-template-columns:1fr 1fr 1fr; }
  .format-card.selected{
    background:rgba(225,6,0,0.08);
    border-color:rgba(225,6,0,0.65);
  }
  .location-picker-row{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:18px;
  }
  .location-picker-row.hidden{ display:none; }
  #locationContinueBtn.hidden{ display:none; }
  .format-card{
    text-align:left; cursor:pointer; outline:none;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1); border-radius:2px;
    padding:26px 26px 22px;
    transition:all 0.2s;
  }
  .format-card:hover, .format-card:focus-visible{
    background:rgba(225,6,0,0.06);
    border-color:rgba(225,6,0,0.5);
    transform:translateY(-2px);
  }
  .format-card-title{
    font-family:'Instrument Sans', sans-serif;
    font-size:18px; font-weight:600; color:var(--text);
    margin-bottom:10px;
  }
  .format-card-desc{
    font-family:'DM Mono', monospace; font-size:11px;
    color:var(--dim); letter-spacing:0.3px; line-height:1.7;
    margin-bottom:16px;
  }
  .format-card-tag{
    font-family:'DM Mono', monospace; font-size:9px; font-weight:500;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);
  }
  .format-back-btn{
    align-self:flex-start;
    font-family:'DM Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:1px; text-transform:uppercase;
    background:transparent; color:var(--dim);
    border:none; padding:6px 0; cursor:pointer;
    transition:color 0.2s; outline:none;
  }
  .format-back-btn:hover{ color:var(--text); }
  @media (max-width: 1040px){
    .format-cards.three{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 700px){
    .format-body{ padding:40px 24px 60px; justify-content:flex-start; }
    .format-cards, .format-cards.three{ grid-template-columns:1fr; }
  }

  .settings-item.hidden{ display:none; }

  .welcome-body{
    flex:1; display:flex; flex-direction:column;
    padding:60px 80px; justify-content:center; max-width:900px; margin:0 auto;
    min-height:min-content;
    width:100%;
  }

  .welcome-title{
    font-family:'Instrument Sans', sans-serif;
    font-size:clamp(36px, 5vw, 60px); font-weight:700;
    line-height:1.05; letter-spacing:-1px;
    color:var(--text); margin-bottom:16px;
  }
  .welcome-title em{
    font-style:normal; color:var(--accent);
  }

  .welcome-subtitle{
    font-family:'DM Mono', monospace; font-size:12px;
    color:var(--dim); letter-spacing:0.5px; line-height:1.7;
    margin-bottom:24px; max-width:520px;
  }
  .welcome-support-row{
    display:grid; grid-template-columns:1fr;
    column-gap:48px; row-gap:24px;
    margin-top:48px; padding-top:28px;
    border-top:1px solid var(--border);
  }
  .welcome-support-label{
    font-family:'DM Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase; color:var(--accent);
    margin-bottom:10px;
  }
  .welcome-support-text{
    font-family:'DM Mono', monospace; font-size:11px;
    color:var(--dim); letter-spacing:0.3px; line-height:1.7;
    margin-bottom:14px;
  }
  .welcome-support-email{
    font-family:'DM Mono', monospace; font-size:11px;
    color:var(--text); letter-spacing:0.5px;
    text-decoration:none; border-bottom:1px solid rgba(225,6,0,0.4);
    padding-bottom:2px; transition:border-color 0.2s, color 0.2s;
  }
  .welcome-support-email:hover{ border-color:var(--accent); color:#fff; }
  @media (max-width: 768px){
    .welcome-support-row{ grid-template-columns:1fr; margin-top:32px; }
  }
  .welcome-steps{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:48px; row-gap:0;
    margin-bottom:48px;
    border-top:1px solid var(--border);
  }
  .welcome-step{
    display:flex; flex-direction:column; gap:6px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
  }
  .step-label{
    font-family:'Instrument Sans', sans-serif; font-size:13px;
    font-weight:600; color:var(--text);
  }
  .step-right{
    display:contents;
  }
  .step-desc{
    font-family:'DM Mono', monospace; font-size:10px;
    color:var(--dim); line-height:1.6; letter-spacing:0.2px;
  }
  .step-keys{
    display:flex; gap:4px; align-items:center; flex-wrap:wrap;
  }
  .step-key{
    display:inline-block; font-family:'DM Mono', monospace; font-size:9px;
    color:var(--dim); border:1px solid rgba(255,255,255,0.1);
    padding:1px 6px; border-radius:2px; background:rgba(255,255,255,0.04);
    white-space:nowrap;
  }
  @media (max-width: 700px){
    .welcome-steps{ grid-template-columns:1fr; }
    .welcome-body{ padding:0 32px; }
  }
  .btn-start{
    font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase;
    background:var(--accent); color:#fff; border:none;
    padding:14px 36px; cursor:pointer;
    transition:all 0.2s; outline:none;
    position:relative; overflow:hidden;
  }
  .btn-start::after{
    content:''; position:absolute; inset:0;
    background:rgba(255,255,255,0); transition:background 0.2s;
  }
  .btn-start:hover::after{ background:rgba(255,255,255,0.1); }
  .btn-start:active{ transform:scale(0.98); }
  .welcome-grid{
    position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0.03;
    background-image:linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size:60px 60px;
  }
  .welcome-grid::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 60% 50%, #0a0a0a 30%, transparent 80%);
  }
  .loading-splash{
    position:fixed; inset:0; z-index:9998;
    background:#0a0a0a;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:20px;
    transition:opacity 0.6s ease, visibility 0.6s ease;
    pointer-events:none; opacity:0; visibility:hidden;
  }
  .loading-splash.visible{ opacity:1; visibility:visible; pointer-events:all; }
  .loading-splash.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .loading-title{
    font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
    letter-spacing:3px; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .loading-title .dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse-dot 1.2s ease infinite; }
  @keyframes pulse-dot{ 0%, 100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.7); } }
  .loading-bar-track{
    width:200px; height:2px; background:var(--border); border-radius:1px; overflow:hidden;
  }
  .loading-bar-fill{
    height:100%; width:0%; background:var(--accent); border-radius:1px;
  }
  .loading-bar-fill.animating{
    animation:load-fill 1.8s ease-out forwards;
  }
  @keyframes load-fill{ 0%{ width:0%; } 60%{ width:70%; } 100%{ width:100%; } }
  .top-bar{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    background:linear-gradient(to bottom, rgba(10,10,10,0.85) 40%, transparent);
    pointer-events:none;
    opacity:0; animation:fade-in 0.5s ease 0.4s forwards;
  }
  @keyframes fade-in{ to{ opacity:1; } }
  .top-bar > *{ pointer-events:all; }
  .logo{
    font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
    letter-spacing:3px; text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .logo-dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; }
  .logo-sub{ font-size:9px; letter-spacing:1.5px; color:var(--dim); margin-left:8px; }
  .controls{ display:flex; align-items:center; gap:6px; }
  .btn{
    font-family:'DM Mono', monospace; font-size:10px; letter-spacing:1px;
    text-transform:uppercase; padding:8px 14px;
    background:var(--surface); border:1px solid var(--border);
    color:var(--dim); cursor:pointer; transition:all 0.2s;
    backdrop-filter:blur(20px); outline:none;
    position:relative;
  }
  .btn:hover{ color:var(--text); border-color:rgba(255,255,255,0.2); }
  .btn.danger:hover{ color:var(--accent); border-color:rgba(225,6,0,0.3); }
  .btn.active{ color:var(--accent); border-color:rgba(225,6,0,0.3); }
  .btn:active{ transform:scale(0.97); }
  .btn .shortcut{
    font-size:8px; color:#666; margin-left:6px; letter-spacing:0;
  }

  .panel{
    position:fixed; z-index:100; background:var(--surface);
    border:1px solid var(--border); backdrop-filter:blur(30px);
    padding:20px 24px; transition:opacity 0.3s, transform 0.3s;
    border-radius:2px;
  }
  .panel.hidden{ opacity:0; transform:translateY(10px); pointer-events:none; }
  .stats-panel{ bottom:24px; left:24px; min-width:260px; }
  .sector-panel{ bottom:24px; right:24px; }
  .panel-label{
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:2px;
    text-transform:uppercase; color:var(--dim); margin-bottom:14px;
    display:flex; align-items:center; gap:8px;
  }
  .panel-label::before{
    content:''; width:3px; height:10px; background:var(--accent); border-radius:1px;
  }
  .stat-row{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:5px 0; border-bottom:1px solid var(--border);
  }
  .stat-row:last-child{ border-bottom:none; }
  .stat-key{ font-family:'DM Mono', monospace; font-size:10px; color:var(--dim); }
  .stat-value{ font-family:'DM Mono', monospace; font-size:13px; font-weight:500; }
  .unit{ font-size:9px; color:var(--dim); margin-left:2px; }
  .hl{ color:var(--accent); }

  .sector-item{
    display:flex; align-items:center; gap:8px; padding:3px 0;
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
  }
  .sector-dot{ width:8px; height:8px; border-radius:50%; }

  .instructions{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    z-index:100; font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:1px; color:var(--dim); background:var(--surface);
    border:1px solid var(--border); padding:10px 18px;
    backdrop-filter:blur(20px); transition:opacity 0.3s; white-space:nowrap;
    border-radius:2px;
  }
  .instructions.hidden{ opacity:0; pointer-events:none; }
  .toast{
    position:fixed; top:60px; left:50%; transform:translateX(-50%) translateY(-20px);
    z-index:9999; font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:1px; color:var(--text); background:var(--surface);
    border:1px solid rgba(225,6,0,0.3); padding:10px 20px;
    backdrop-filter:blur(20px); opacity:0; pointer-events:none;
    transition:opacity 0.3s, transform 0.3s; border-radius:2px;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .location-dropdown{
    position:relative; margin-left:12px;
  }
  .location-menu{
    position:absolute; top:calc(100% + 6px); left:0;
    background:var(--surface); border:1px solid var(--border);
    backdrop-filter:blur(30px); border-radius:2px;
    min-width:280px; z-index:200;
    transition:opacity 0.2s ease, transform 0.2s ease;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
  }
  .location-menu.hidden{
    opacity:0; transform:translateY(-6px); pointer-events:none;
  }
  .location-menu-scroll{
    max-height:420px; overflow-y:auto; padding:4px 0;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .location-menu-scroll::-webkit-scrollbar{ width:4px; }
  .location-menu-scroll::-webkit-scrollbar-track{ background:transparent; }
  .location-menu-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }
  .location-item{
    font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:0.5px; padding:9px 16px; cursor:pointer;
    color:var(--dim); transition:all 0.15s ease;
    display:flex; justify-content:space-between; align-items:center;
  }
  .location-item:hover{ color:var(--text); background:rgba(255,255,255,0.04); }
  .location-item.active{ color:var(--accent); }
  .location-detail{
    font-size:9px; color:#666; margin-left:12px; text-transform:uppercase;
    letter-spacing:1px;
  }
  .location-item:hover .location-detail{ color:var(--dim); }
  .location-item.active .location-detail{ color:rgba(225,6,0,0.5); }
  .share-overlay{
    position:fixed; inset:0; z-index:9998;
    background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 0.25s ease, visibility 0.25s ease;
  }
  .share-overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .share-overlay.non-blocking{
    background:none; backdrop-filter:none; pointer-events:none;
  }
  .share-overlay.non-blocking .share-modal{
    pointer-events:auto;
    box-shadow:0 12px 40px rgba(0,0,0,0.55);
  }
  .share-modal{
    background:var(--surface); border:1px solid var(--border);
    backdrop-filter:blur(30px); padding:28px 32px;
    min-width:480px; max-width:90vw; border-radius:2px;
  }
  .share-desc{
    font-size:12px; color:var(--dim); margin-bottom:18px; line-height:1.5;
  }
  .share-name-row{ margin:-8px 0 14px; }
  .share-name-input{
    width:100%; box-sizing:border-box;
    font-family:'Instrument Sans', sans-serif; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text); padding:10px 12px; outline:none;
    letter-spacing:0.3px; border-radius:2px;
  }
  .share-name-input::placeholder{ color:var(--dim); font-weight:400; }
  .share-name-input:focus{ border-color:rgba(255,255,255,0.15); }
  .share-url-row{
    display:flex; gap:6px; margin-bottom:18px;
  }
  .share-url-input{
    flex:1; font-family:'DM Mono', monospace; font-size:10px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text); padding:10px 12px; outline:none;
    letter-spacing:0.3px; border-radius:2px;
  }
  .share-url-input:focus{ border-color:rgba(255,255,255,0.15); }
  .share-shorten-status{
    font-family:'DM Mono', monospace; font-size:9px;
    letter-spacing:1px; text-transform:uppercase;
    color:var(--dim); margin:-10px 0 16px; min-height:12px;
  }
  .share-shorten-status.ok{ color:#3DDC84; }
  .share-shorten-status.warn{ color:rgba(225,6,0,0.8); }
  .share-copy-btn{ white-space:nowrap; }
  .share-copy-btn.copied{ color:#3DDC84; border-color:rgba(61,220,132,0.3); }
  .share-modal-wide{ width:600px; max-width:92vw; }
  .share-card-wrap{
    position:relative; margin-bottom:14px;
    border:1px solid var(--border); border-radius:2px;
    background:#0a0a0a; overflow:hidden;
    aspect-ratio:1200 / 630;
  }
  .share-card-preview{
    display:block; width:100%; height:100%; object-fit:contain;
  }
  .share-style-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,10,10,0.65); border:1px solid var(--border);
    color:var(--text); font-size:20px; line-height:1; padding:0 0 3px;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .share-style-arrow:hover{
    background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3);
  }
  .share-style-arrow.prev{ left:10px; }
  .share-style-arrow.next{ right:10px; }
  .share-style-indicator{
    position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
    z-index:3; pointer-events:none; white-space:nowrap;
    font-family:'DM Mono', monospace; font-size:9px;
    letter-spacing:1.2px; text-transform:uppercase;
    color:rgba(255,255,255,0.8);
    background:rgba(10,10,10,0.65); border:1px solid var(--border);
    padding:4px 10px; border-radius:2px;
  }
  .share-card-loading{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
    background:#0a0a0a;
    transition:opacity 0.3s ease;
  }
  .share-card-loading.done{ opacity:0; pointer-events:none; }
  .share-primary-row{
    display:flex; gap:6px; margin-bottom:14px;
  }
  .share-primary-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:11px 10px;
  }
  .share-primary-btn.accent{
    color:var(--text); border-color:rgba(225,6,0,0.55);
    background:rgba(225,6,0,0.1);
  }
  .share-primary-btn.accent:hover{ border-color:var(--accent); background:rgba(225,6,0,0.18); }
  .share-primary-btn.copied{ color:#3DDC84; border-color:rgba(61,220,132,0.3); }
  .share-primary-btn.unavailable{ display:none; }
  .share-actions{ display:flex; justify-content:flex-end; }
  .share-social-row{
    display:flex; align-items:center; gap:8px;
    margin-bottom:18px; flex-wrap:wrap;
  }
  .share-social-label{
    font-family:'DM Mono', monospace; font-size:10px;
    color:var(--dim); text-transform:uppercase; letter-spacing:1.2px;
    margin-right:4px;
  }
  .share-social-btn{
    display:inline-flex; align-items:center; gap:6px;
  }
  .share-social-icon{
    width:12px; height:12px; display:block;
  }
  .settings-location-submenu{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:rgba(0,0,0,0.25);
    margin-bottom:2px;
  }
  .settings-location-submenu.hidden{ display:none; }
  .settings-location-submenu .location-menu-scroll{ max-height:220px; }
  .settings-location-submenu .location-item{ padding:8px 24px; font-size:10px; }
  #locationChevron{
    display:inline-block;
    transition:transform 0.2s ease;
  }
  #locationChevron.open{ transform:rotate(90deg); }
  .settings-export-submenu{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:rgba(0,0,0,0.25);
    margin-bottom:2px;
  }
  .settings-export-submenu.hidden{ display:none; }
  .settings-export-submenu .settings-item{ padding:8px 24px; font-size:10px; }
  #exportChevron{
    display:inline-block;
    transition:transform 0.2s ease;
  }
  #exportChevron.open{ transform:rotate(90deg); }
  .tools-dropdown{ position:relative; display:block; }
  .tools-menu{
    position:absolute; top:calc(100% + 6px); right:0;
    background:var(--surface); border:1px solid var(--border);
    backdrop-filter:blur(30px); border-radius:2px;
    min-width:192px; z-index:200;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    transition:opacity 0.2s ease, transform 0.2s ease;
    padding:4px 0;
  }
  .tools-menu.hidden{ opacity:0; transform:translateY(-6px); pointer-events:none; }
  .settings-menu{
    max-height:80vh;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .settings-menu::-webkit-scrollbar{ width:4px; }
  .settings-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }

  .welcome-mobile-disclaimer{
    display:none;
    margin-bottom:24px;
  }

  @media (max-width: 768px){
    #sectorPanel, #exportBtn{ display:none !important; }
    .stats-panel{
      display:none;
      left:12px; right:12px; top:auto;
      bottom:calc(84px + env(safe-area-inset-bottom, 0px));
      min-width:0; max-height:42vh; overflow-y:auto;
      z-index:120;
      transform:none;
    }
    .stats-panel.mobile-open:not(.hidden){ display:block; opacity:1; transform:none; pointer-events:auto; }
    .top-bar{ padding:12px 16px; }
    .controls{ gap:4px; }
    .btn{ padding:8px 10px; font-size:9px; }
    .instructions{ display:none !important; }
    #shareBtn{ display:none !important; }
    .share-overlay{ padding:12px; }
    .share-overlay .share-modal{
      min-width:0; width:100%;
      padding:20px 18px;
      max-height:calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
      overflow-y:auto;
    }
    .settings-item{ min-height:44px; padding:10px 16px; font-size:11px; }
    .location-item{ min-height:44px; }
    .settings-menu, .tools-menu{ max-height:calc(100vh - 140px); overflow-y:auto; }
    .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right{
      bottom:calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .welcome-body{
      padding:40px 24px 60px;
      justify-content:flex-start;
    }
    .welcome-title{ font-size:clamp(28px, 8vw, 44px); }
    .welcome-mobile-disclaimer{
      display:block;
      font-family:'DM Mono', monospace; font-size:10px;
      color:var(--dim); letter-spacing:0.3px; line-height:1.6;
      margin-top:20px;
      padding:10px 14px;
      border:1px solid var(--border);
      border-left:2px solid rgba(225,6,0,0.4);
      background:rgba(225,6,0,0.04);
    }
  }
  .welcome-start-label{
    font-family:'DM Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase; color:var(--dim);
    margin-bottom:10px;
  }
  .welcome-mode-tabs{
    display:inline-flex; margin-bottom:12px;
    border:1px solid rgba(255,255,255,0.1); border-radius:2px;
    overflow:hidden;
  }
  .welcome-mode-tab{
    font-family:'DM Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:1px; text-transform:uppercase;
    background:transparent; color:var(--dim);
    border:none; padding:9px 16px; cursor:pointer;
    transition:all 0.2s; outline:none;
  }
  .welcome-mode-tab + .welcome-mode-tab{ border-left:1px solid rgba(255,255,255,0.1); }
  .welcome-mode-tab:hover{ color:var(--text); background:rgba(255,255,255,0.05); }
  .welcome-mode-tab.active{
    color:var(--text); background:rgba(225,6,0,0.12);
    box-shadow:inset 0 -2px 0 var(--accent);
  }
  .welcome-start-row{
    display:flex; align-items:center; gap:0;
    margin-bottom:12px;
  }
  .welcome-custom-location{
    position:relative; display:flex; align-items:stretch;
  }
  .welcome-custom-location.hidden{ display:none; }
  .welcome-location-input{
    font-family:'DM Mono', monospace; font-size:11px;
    letter-spacing:0.5px;
    background:rgba(255,255,255,0.05); color:var(--text);
    border:1px solid rgba(255,255,255,0.1); border-right:none;
    padding:14px 16px; outline:none; width:280px;
    transition:all 0.2s; border-radius:0;
  }
  .welcome-location-input::placeholder{ color:var(--dim); }
  .welcome-location-input:focus{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
  .welcome-geo-btn{
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05); color:var(--dim);
    border:1px solid rgba(255,255,255,0.1); border-right:none;
    padding:0 14px; cursor:pointer; transition:all 0.2s; outline:none;
  }
  .welcome-geo-btn:hover{ color:var(--text); background:rgba(255,255,255,0.08); }
  .welcome-custom-location .location-menu{
    bottom:calc(100% + 6px); top:auto; left:0;
    min-width:320px; max-width:420px;
  }
  .welcome-start-hint{
    font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:0.5px; color:var(--accent);
    margin-bottom:24px; min-height:14px;
  }
  .welcome-start-hint.hidden{ visibility:hidden; }
  @media (max-width: 768px){
    .welcome-start-row{ flex-wrap:wrap; gap:12px; }
    .welcome-start-row .btn-start{ margin-left:0 !important; }
    .welcome-custom-location{ flex:1 1 100%; }
    .welcome-location-input{ width:100%; flex:1; }
    .welcome-geo-btn{ border-right:1px solid rgba(255,255,255,0.1); }
  }
  .welcome-location-dropdown{
    position:relative;
  }
  .welcome-location-dropdown.hidden{ display:none; }
  .welcome-location-btn{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; min-width:440px;
    font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
    letter-spacing:1px; text-transform:uppercase;
    background:rgba(255,255,255,0.05); color:var(--dim);
    border:1px solid rgba(255,255,255,0.1);
    padding:14px 20px; cursor:pointer;
    transition:all 0.2s; outline:none;
    white-space:nowrap;
  }
  .welcome-location-btn:hover{ color:var(--text); background:rgba(255,255,255,0.08); }
  .welcome-location-dropdown .location-menu{
    bottom:calc(100% + 6px); top:auto; left:0;
    min-width:440px; width:100%;
  }
  @media (max-width: 768px){
    .welcome-location-dropdown{ flex:1 1 100%; }
    .welcome-location-btn{ min-width:0; }
    .location-picker-row #locationContinueBtn{ order:2; width:100%; }
    .welcome-location-dropdown .location-menu{
      min-width:0; left:0; right:0;
    }
  }
  .settings-dropdown{
    position:relative;
  }
  .settings-menu{
    position:absolute; top:calc(100% + 6px); right:0;
    background:var(--surface); border:1px solid var(--border);
    backdrop-filter:blur(30px); border-radius:2px;
    min-width:264px; z-index:200;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    transition:opacity 0.2s ease, transform 0.2s ease;
    padding:4px 0;
  }
  .settings-menu.hidden{ opacity:0; transform:translateY(-6px); pointer-events:none; }
  .settings-item{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'DM Mono', monospace; font-size:10px; letter-spacing:0.5px;
    padding:10px 16px; cursor:pointer; color:var(--dim);
    transition:all 0.15s ease; border-bottom:1px solid var(--border);
  }
  .settings-item:last-child{ border-bottom:none; }
  .settings-item:not(.settings-item-inactive):hover{ color:var(--text); background:rgba(255,255,255,0.04); }
  .settings-item-inactive{ cursor:default; opacity:0.4; }
  .settings-item-label{ flex:1; }
  .settings-toggle{
    font-size:9px; letter-spacing:1.5px; font-weight:500;
    padding:2px 7px; border-radius:2px; border:1px solid;
  }
  .settings-toggle.on{ color:#3DDC84; border-color:rgba(61,220,132,0.35); }
  .settings-toggle.off{ color:var(--dim); border-color:rgba(255,255,255,0.1); }
  .settings-item-soon{
    font-size:9px; letter-spacing:1px; color:#666;
  }
  .settings-item-chevron{
    font-size:14px; color:var(--dim); line-height:1;
  }
  .settings-item:hover .settings-item-chevron{ color:var(--text); }
  .race-type-badge{
    font-size:9px; letter-spacing:1.5px; font-weight:500;
    padding:2px 7px; border-radius:2px; border:1px solid;
    transition:color 0.2s, border-color 0.2s;
  }
  .rt-f1{ color:#E10600; border-color:rgba(225,6,0,0.35); }
  .rt-gt3{ color:#FFD23F; border-color:rgba(255,210,63,0.35); }
  .rt-motogp{ color:#818cf8; border-color:rgba(129,140,248,0.35); }
  .rt-indycar{ color:#00b4d8; border-color:rgba(0,180,216,0.35); }
  .rt-wrc{ color:#4f9cf7; border-color:rgba(79,156,247,0.35); }
  .rt-marathon{ color:#3DDC84; border-color:rgba(61,220,132,0.35); }
  .rt-triathlon{ color:#f97316; border-color:rgba(249,115,22,0.35); }
  .runoff-shape-menu{
    position:fixed; z-index:200;
    background:var(--surface); border:1px solid var(--border);
    backdrop-filter:blur(20px); border-radius:2px;
    padding:12px; min-width:180px;
    display:flex; flex-direction:column; gap:6px;
    box-shadow:0 12px 40px rgba(0,0,0,0.55);
  }
  .runoff-shape-menu.hidden{ display:none; }
  .runoff-shape-menu-title{
    font-family:'DM Mono', monospace; font-size:10px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase; color:var(--dim);
    margin-bottom:2px;
  }
  .runoff-shape-menu-row{ display:flex; gap:6px; }
  .runoff-shape-menu-row .btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; }
  .runoff-swatch{
    width:8px; height:8px; border-radius:1px; display:inline-block;
    border:1px solid rgba(0,0,0,0.3);
  }
  .runoff-swatch-tarmac{ background:#b0b0b0; }
  .runoff-swatch-asphalt{ background:#6e6e73; }
  .runoff-swatch-concrete{ background:#d8d6cf; }
  .runoff-swatch-gravel{ background:#d6c294; }
  .runoff-swatch-grass{ background:#7fae63; }
  .runoff-swatch-darkgrass{ background:#4e7a3c; }
  .building-swatch-grandstand{ background:#9c4a56; }
  .building-swatch-paddock{ background:#5c6570; }
  .runoff-delete-btn{ width:100%; }
  .support-modal{ min-width:0; width:460px; max-width:90vw; }
  .support-bmc{ display:flex; justify-content:center; padding-top:4px; }
  .changelog-modal-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px;
  }
  .changelog-modal{
    max-width:520px; max-height:70vh;
    display:flex; flex-direction:column;
  }
  .changelog-body{
    overflow-y:auto; flex:1;
    margin-bottom:18px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .changelog-body::-webkit-scrollbar{ width:4px; }
  .changelog-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }
  .changelog-version{ padding:14px 0; border-bottom:1px solid var(--border); }
  .changelog-version:last-child{ border-bottom:none; }
  .changelog-version-header{
    display:flex; align-items:baseline; gap:10px; margin-bottom:8px;
  }
  .changelog-version-num{
    font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
    color:var(--accent); letter-spacing:1px;
  }
  .changelog-version-date{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
  }
  .changelog-entries{
    list-style:none; padding:0;
  }
  .changelog-entries li{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    line-height:1.7; padding:1px 0; padding-left:14px; position:relative;
  }
  .changelog-entries li::before{
    content:'–'; position:absolute; left:0; color:#666;
  }
  .mobile-only{ display:none; }
  @media (max-width: 640px){
    .mobile-only{ display:flex; }
  }
  .map-zoom-controls{
    display:none;
    position:fixed; right:12px;
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    z-index:110;
    flex-direction:column; gap:8px;
  }
  .map-zoom-btn{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    font-family:'DM Mono', monospace; font-size:20px; font-weight:500;
    background:var(--surface); color:var(--text);
    border:1px solid var(--border); border-radius:2px;
    backdrop-filter:blur(20px);
    cursor:pointer; outline:none;
    transition:transform 0.1s, background 0.15s;
  }
  .map-zoom-btn:active{ transform:scale(0.94); background:rgba(255,255,255,0.08); }
  .mobile-action-bar{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:110;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background:var(--surface);
    border-top:1px solid var(--border);
    backdrop-filter:blur(30px);
    gap:4px;
  }
  .mobile-bar-btn{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-height:54px;
    background:transparent; color:var(--text);
    border:none; border-radius:2px;
    font-family:'DM Mono', monospace; font-size:9px; font-weight:500;
    letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; outline:none;
    transition:background 0.15s, color 0.2s, opacity 0.2s;
  }
  .mobile-bar-btn:active{ background:rgba(255,255,255,0.06); }
  .mobile-bar-icon{ width:18px; height:18px; }
  .mobile-bar-btn.accent{ color:var(--accent); }
  .mobile-bar-btn.accent.done{ color:#3DDC84; }
  .mobile-bar-btn.disabled{ opacity:0.35; pointer-events:auto; }

  @media (max-width: 768px){
    .map-zoom-controls{ display:flex; }
    .mobile-action-bar{ display:flex; }
  }
  .imgexport-overlay{
    position:fixed; inset:0; z-index:500;
    background:rgba(6,6,8,0.94);
    backdrop-filter:blur(14px);
    display:flex;
    transition:opacity 0.25s ease, visibility 0.25s ease;
  }
  .imgexport-overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .imgexport-modal{ width:100%; height:100%; display:flex; flex-direction:column; }
  .imgexport-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 28px;
    border-bottom:1px solid var(--border);
    background:rgba(10,10,10,0.6);
    flex-shrink:0; gap:16px;
  }
  .imgexport-header-left{ display:flex; align-items:baseline; gap:16px; min-width:0; }
  .imgexport-sub{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    letter-spacing:0.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .imgexport-header-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .imgexport-all-btn{ color:var(--accent); border-color:rgba(225,6,0,0.35); }
  .imgexport-all-btn:hover{ background:rgba(225,6,0,0.08); }
  .imgexport-body{
    flex:1; overflow-y:auto;
    width:100%; max-width:1180px; margin:0 auto;
    padding:24px 28px 56px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .imgexport-body::-webkit-scrollbar{ width:5px; }
  .imgexport-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }
  .imgexport-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:18px;
  }
  .imgexport-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border); border-radius:2px;
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  .imgexport-thumb{
    position:relative;
    height:220px;
    background:linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%), linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.025) 75%), #0d0d10;
    background-size:18px 18px; background-position:0 0, 9px 9px;
    display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid var(--border);
    cursor:pointer;
  }
  .imgexport-thumb img{
    max-width:100%; max-height:100%;
    display:block;
    box-shadow:0 6px 24px rgba(0,0,0,0.5);
    transition:transform 0.2s ease;
  }
  .imgexport-thumb.ready:hover img{ transform:scale(1.025); }
  .imgexport-loading{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    letter-spacing:1px; text-transform:uppercase;
    animation:imgexport-pulse 1.2s ease-in-out infinite;
  }
  .imgexport-thumb.ready .imgexport-loading{ display:none; }
  .imgexport-thumb.failed .imgexport-loading{
    animation:none; opacity:0.6; color:rgba(225,6,0,0.7);
    text-align:center; padding:0 20px; text-transform:none; line-height:1.6;
  }
  @keyframes imgexport-pulse{ 0%, 100%{ opacity:0.35; } 50%{ opacity:0.9; } }
  .imgexport-dims{
    position:absolute; right:8px; bottom:8px;
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:1px;
    background:rgba(10,10,10,0.75); border:1px solid var(--border);
    padding:2px 7px; border-radius:2px;
    pointer-events:none;
  }
  .imgexport-info{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
  .imgexport-title{
    font-family:'Instrument Sans', sans-serif; font-size:14px; font-weight:600;
    color:var(--text); margin-bottom:6px;
  }
  .imgexport-desc{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    letter-spacing:0.3px; line-height:1.6;
    margin-bottom:12px; flex:1;
  }
  .imgexport-dl-btn{ align-self:flex-start; }

  @media (max-width: 768px){
    .imgexport-header{ padding:12px 16px; flex-wrap:wrap; }
    .imgexport-sub{ display:none; }
    .imgexport-body{ padding:16px 14px 48px; }
    .imgexport-grid{ grid-template-columns:1fr; }
    .imgexport-thumb{ height:200px; }
  }
  .analysis-overlay{
    position:fixed; inset:0; z-index:500;
    background:rgba(6,6,8,0.94);
    backdrop-filter:blur(14px);
    display:flex;
    transition:opacity 0.25s ease, visibility 0.25s ease;
  }
  .analysis-overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .analysis-modal{ width:100%; height:100%; display:flex; flex-direction:column; }
  .analysis-header{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 28px;
    border-bottom:1px solid var(--border);
    background:rgba(10,10,10,0.6);
    flex-shrink:0;
  }
  .analysis-header-right{ display:flex; align-items:center; gap:12px; }
  .analysis-body{
    flex:1; overflow-y:auto;
    width:100%; max-width:1180px; margin:0 auto;
    padding:24px 28px 56px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .analysis-body::-webkit-scrollbar{ width:5px; }
  .analysis-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }

  .analysis-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border);
    border-radius:2px;
    padding:18px 20px;
    margin-bottom:16px;
  }
  .analysis-card-title{
    font-family:'DM Mono', monospace; font-size:9px; font-weight:500;
    letter-spacing:2px; text-transform:uppercase; color:var(--dim);
    margin-bottom:14px;
    display:flex; align-items:center; gap:8px;
  }
  .analysis-card-title::before{
    content:''; width:3px; height:10px; background:var(--accent); border-radius:1px;
  }
  .analysis-hero{
    display:grid; grid-template-columns:1.15fr 1fr; gap:16px;
    margin-bottom:0;
  }
  .analysis-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .analysis-grid-2 .analysis-card{ margin-bottom:0; }
  .analysis-full{ width:100%; }
  .analysis-track-map{ width:100%; height:auto; display:block; }
  .analysis-speed-trace{ width:100%; height:240px; display:block; }
  .analysis-sectors{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
    margin-bottom:16px;
  }
  .analysis-sector{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border); border-radius:2px;
    padding:14px 18px;
  }
  .analysis-sector.fastest{ border-color:rgba(225,6,0,0.4); background:rgba(225,6,0,0.05); }
  .analysis-sector-label{
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:2px;
    text-transform:uppercase; color:var(--dim); margin-bottom:8px;
    display:flex; align-items:center; gap:8px;
  }
  .analysis-sector-tag{
    font-size:8px; letter-spacing:1px; color:var(--accent);
    border:1px solid rgba(225,6,0,0.35); padding:1px 6px; border-radius:2px;
  }
  .analysis-sector-time{
    font-family:'DM Mono', monospace; font-size:22px; font-weight:500;
    color:var(--text); margin-bottom:6px;
  }
  .analysis-sector-meta{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    letter-spacing:0.3px;
  }
  .analysis-table-wrap{ max-height:340px; overflow:auto; }
  .analysis-table{
    width:100%; border-collapse:collapse;
    font-family:'DM Mono', monospace; font-size:11px;
  }
  .analysis-table th{
    position:sticky; top:0; background:#101014; text-align:left;
    font-size:9px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--dim); padding:6px 10px 8px;
    border-bottom:1px solid var(--border);
  }
  .analysis-table td{
    padding:6px 10px; color:var(--text);
    border-bottom:1px solid rgba(255,255,255,0.04);
    white-space:nowrap;
  }
  .analysis-table td .dim{ color:#666; }
  .analysis-dir{
    display:inline-block; width:18px; text-align:center;
    border:1px solid rgba(255,255,255,0.12); border-radius:2px;
    font-size:9px; padding:1px 0;
  }
  .dir-l{ color:#6ab7ff; } .dir-r{ color:#ffb36a; }
  .analysis-cat{ font-size:9px; letter-spacing:1px; text-transform:uppercase; }
  .cat-fast{ color:#E10600; } .cat-medium{ color:#C49B2D; }
  .cat-slow{ color:#7ECA5E; } .cat-hairpin{ color:#3DDC84; }
  .analysis-declare-row{
    display:flex; align-items:center; gap:6px; margin-bottom:14px;
  }
  .analysis-declare-label{
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:1.5px; text-transform:uppercase; margin-right:4px;
  }
  .analysis-declare-btn{
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:1px;
    text-transform:uppercase; color:var(--dim); cursor:pointer;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
    border-radius:2px; padding:4px 9px; transition:all 0.15s; outline:none;
  }
  .analysis-declare-btn:hover{ color:var(--text); background:rgba(255,255,255,0.08); }
  .analysis-declare-btn.active{
    color:#fff; background:rgba(225,6,0,0.18);
    border-color:rgba(225,6,0,0.65);
  }
  .analysis-grade-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .analysis-grade-badge{
    font-family:'DM Mono', monospace; font-size:15px; font-weight:700;
    letter-spacing:2px; color:#fff; background:var(--accent);
    padding:9px 14px; border-radius:2px; white-space:nowrap; flex-shrink:0;
  }
  .analysis-grade-badge.none{ background:rgba(255,255,255,0.08); color:var(--dim); }
  .analysis-grade-cats{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    letter-spacing:0.5px; line-height:1.6;
  }
  .analysis-req-heading{
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:1.5px; text-transform:uppercase;
    padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .analysis-req-row{
    display:flex; align-items:baseline; gap:10px; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .analysis-req-row:last-child{ border-bottom:none; }
  .analysis-req-mark{
    font-family:'DM Mono', monospace; font-size:10px;
    width:12px; flex-shrink:0; text-align:center;
  }
  .analysis-req-row.pass .analysis-req-mark{ color:#3ddc84; }
  .analysis-req-row.fail .analysis-req-mark{ color:var(--accent); }
  .analysis-req-label{ flex:1; font-family:'DM Mono', monospace; font-size:10px; color:var(--dim); }
  .analysis-req-row.fail .analysis-req-label{ color:var(--text); }
  .analysis-req-value{ font-family:'DM Mono', monospace; font-size:10px; color:var(--text); }
  .analysis-empty{
    font-family:'DM Mono', monospace; font-size:11px; color:var(--dim);
    line-height:1.6;
  }
  .analysis-zone-bar{
    display:flex; height:12px; border-radius:2px; overflow:hidden;
    margin-bottom:12px; border:1px solid rgba(255,255,255,0.08);
  }
  .analysis-zone-row{
    display:flex; align-items:center; gap:8px; padding:3px 0;
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
  }
  .analysis-zone-dot{ width:8px; height:8px; border-radius:1px; flex-shrink:0; }
  .analysis-zone-name{ flex:1; }
  .analysis-zone-share{ color:var(--text); }
  .analysis-rating-row{ display:flex; align-items:center; gap:12px; padding:6px 0; }
  .analysis-rating-label{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    width:120px; flex-shrink:0;
  }
  .analysis-rating-bar{
    flex:1; height:6px; background:rgba(255,255,255,0.06); border-radius:3px;
    overflow:hidden;
  }
  .analysis-rating-bar div{
    height:100%; background:linear-gradient(90deg, rgba(225,6,0,0.55), var(--accent));
    border-radius:3px;
  }
  .analysis-rating-val{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--text);
    width:26px; text-align:right; flex-shrink:0;
  }
  .analysis-class-row{
    display:flex; align-items:baseline; gap:12px; padding:6px 0;
    font-family:'DM Mono', monospace; font-size:11px;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .analysis-class-row:last-child{ border-bottom:none; }
  .analysis-class-row.active .analysis-class-name{ color:var(--accent); }
  .analysis-class-name{ flex:1; color:var(--text); }
  .analysis-class-time{ color:var(--text); }
  .analysis-class-delta{ color:var(--dim); font-size:10px; width:74px; text-align:right; }
  .analysis-lr-bar{
    display:flex; height:12px; border-radius:2px; overflow:hidden;
    border:1px solid rgba(255,255,255,0.08); margin-bottom:6px;
  }
  .analysis-lr-bar .lr-left{ background:#6ab7ff; }
  .analysis-lr-bar .lr-right{ background:#ffb36a; }
  .analysis-lr-legend{
    display:flex; justify-content:space-between;
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    margin-bottom:10px;
  }
  .analysis-lr-legend span:first-child{ color:#6ab7ff; }
  .analysis-lr-legend span:last-child{ color:#ffb36a; }
  .analysis-match-row{
    display:flex; align-items:baseline; gap:12px; padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .analysis-match-row:last-child{ border-bottom:none; }
  .analysis-match-row.top .analysis-match-pct{ color:var(--accent); }
  .analysis-match-name{
    flex:1; font-family:'Instrument Sans', sans-serif; font-size:12px;
    font-weight:600; color:var(--text);
  }
  .analysis-match-country{
    display:block; font-family:'DM Mono', monospace; font-size:9px;
    font-weight:400; color:var(--dim); letter-spacing:0.5px; margin-top:2px;
  }
  .analysis-match-meta{
    font-family:'DM Mono', monospace; font-size:10px; color:var(--dim);
    white-space:nowrap;
  }
  .analysis-match-pct{
    font-family:'DM Mono', monospace; font-size:15px; font-weight:500;
    color:var(--text); width:48px; text-align:right;
  }

  .analysis-footnote{
    font-family:'DM Mono', monospace; font-size:9px; color:#666;
    letter-spacing:0.5px; margin-top:20px; text-align:center;
  }
  .analysis-open-btn{
    display:block; width:100%; margin-top:12px; text-align:center;
    color:var(--accent); border-color:rgba(225,6,0,0.35);
  }
  .analysis-open-btn:hover{ background:rgba(225,6,0,0.08); }
  .analysis-locked-hint{
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:0.5px; margin-top:12px; text-align:center;
    padding:6px 0; border-top:1px solid var(--border);
  }

  @media (max-width: 768px){
    .analysis-header{ padding:12px 16px; }
    .analysis-body{ padding:16px 14px 48px; }
    .analysis-hero, .analysis-grid-2{ grid-template-columns:1fr; }
    .analysis-grid-2 .analysis-card{ margin-bottom:0; }
    .analysis-sectors{ grid-template-columns:1fr; }
    .analysis-speed-trace{ height:200px; }
    .analysis-rating-label{ width:96px; }
  }
  .mapboxgl-ctrl-attrib{ font-family:'DM Mono', monospace !important; font-size:9px !important; }
  .mapboxgl-ctrl-group{ display:none !important; }
  .mapboxgl-canvas{ cursor:crosshair !important; }
  #segmentsOverlay{
    align-items:flex-start;
    justify-content:flex-start;
    padding:64px 24px 24px 24px;
  }
  @media (max-width: 768px){
    #segmentsOverlay{ padding:56px 16px 16px 16px; }
    #segmentsOverlay .share-modal{ min-width:0; width:100%; }
  }
  .segments-modal{
    max-width:440px; max-height:75vh;
    display:flex; flex-direction:column;
  }
  .segments-list{
    overflow-y:auto; flex:1;
    max-height:50vh;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
  }
  .segments-list::-webkit-scrollbar{ width:4px; }
  .segments-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:2px; }
  .seg-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0;
    border-bottom:1px solid var(--border);
  }
  .seg-row:last-child{ border-bottom:none; }
  .seg-label{
    font-family:'DM Mono', monospace; font-size:10px;
    color:var(--text); letter-spacing:0.5px;
    flex:1; min-width:0;
  }
  .seg-sublabel{
    color:var(--dim); font-size:9px;
  }
  .seg-input-group{
    display:flex; align-items:center; gap:4px; flex-shrink:0;
  }
  .seg-width-input{
    width:60px; font-family:'DM Mono', monospace; font-size:11px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text); padding:6px 8px; outline:none;
    border-radius:2px; text-align:right;
    -moz-appearance:textfield;
  }
  .seg-width-input::-webkit-outer-spin-button,
  .seg-width-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .seg-width-input:focus{ border-color:rgba(0,212,255,0.4); }
  .seg-unit{
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:0.5px; min-width:14px;
  }
  .seg-row-lr{
    flex-wrap:wrap;
  }
  .seg-row-lr .seg-label{
    width:100%; flex:none; margin-bottom:4px;
  }
  .seg-lr-group{
    display:flex; gap:8px; width:100%; justify-content:flex-end;
  }
  .seg-side-label{
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
    letter-spacing:0.5px; min-width:10px; text-align:center;
  }
  .seg-width-input{
    width:52px;
  }
  .seg-actions-row{
    margin-top:8px; padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.12);
    border-bottom:none;
  }
  .seg-set-all-btn{
    font-size:9px; padding:6px 12px;
  }
  .seg-kerb-group{
    display:flex; align-items:center; gap:6px;
    flex-shrink:0; margin-left:8px;
    border-left:1px solid var(--border); padding-left:8px;
  }
  .seg-kerb-title{
    font-family:'DM Mono', monospace; font-size:9px;
    color:var(--dim); letter-spacing:0.5px;
  }
  .seg-kerb-label{
    display:flex; align-items:center; gap:3px;
    cursor:pointer; flex-shrink:0;
  }
  .seg-kerb-cb{
    appearance:none; -webkit-appearance:none;
    width:14px; height:14px; border:1px solid var(--border);
    background:rgba(255,255,255,0.04); border-radius:2px;
    cursor:pointer; position:relative; flex-shrink:0;
  }
  .seg-kerb-cb:checked{
    background:var(--accent); border-color:var(--accent);
  }
  .seg-kerb-cb:checked::after{
    content:'✓'; position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; color:#fff; font-weight:600;
  }
  .seg-kerb-text{
    font-family:'DM Mono', monospace; font-size:9px;
    color:var(--dim); letter-spacing:0.5px;
  }
  .edit-mode-badge{
    font-size:9px; letter-spacing:1.5px; font-weight:500;
    padding:2px 7px; border-radius:2px; border:1px solid;
    transition:color 0.2s, border-color 0.2s;
  }
  .em-track{ color:#00d4ff; border-color:rgba(0,212,255,0.35); }
  .em-runoff{ color:#ff8c00; border-color:rgba(255,140,0,0.35); }
  .em-pitlane{ color:#FFD23F; border-color:rgba(255,210,63,0.35); }
  .em-measure{ color:#34d399; border-color:rgba(52,211,153,0.35); }
  .edit-mode-btn{ display:inline-flex; align-items:center; gap:7px; }
  .edit-mode-btn .edit-mode-badge{ pointer-events:none; }
  @media (max-width: 768px){
    .edit-mode-btn{ display:none; }
  }
  @media (min-width: 769px){
    #editModeItem, #editPitlaneItem{ display:none; }
  }
  .seg-tabs{
    display:flex; gap:0; margin-bottom:14px;
    border:1px solid var(--border); border-radius:2px;
    overflow:hidden;
  }
  .seg-tab{
    flex:1; font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:1px; text-transform:uppercase;
    padding:8px 0; cursor:pointer;
    background:transparent; border:none;
    color:var(--dim); transition:all 0.15s ease;
    border-right:1px solid var(--border);
    outline:none;
  }
  .seg-tab:last-child{ border-right:none; }
  .seg-tab:hover{ color:var(--text); background:rgba(255,255,255,0.04); }
  .seg-tab.active{
    color:var(--text); background:rgba(255,255,255,0.08);
    font-weight:500;
  }
  .seg-tab.active:nth-child(1){ color:#00d4ff; }
  .seg-tab.active:nth-child(2){ color:#ff8c00; }
  .seg-tab.active:nth-child(3){ color:#a78bfa; }
  .seg-tab.active:nth-child(4){ color:#e0a34e; }
  .seg-tab.hidden{ display:none; }
  .seg-surface-group{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .seg-surface-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'DM Mono', monospace;
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--dim);
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:4px;
    padding:4px 8px;
    cursor:pointer;
    transition:color 0.15s, border-color 0.15s, background 0.15s;
  }
  .seg-surface-btn:hover{ color:var(--text); border-color:rgba(255,255,255,0.25); }
  .seg-surface-btn.active.surf-road{ color:#cfd2e8; border-color:rgba(207,210,232,0.5);  background:rgba(207,210,232,0.08); }
  .seg-surface-btn.active.surf-dirt{ color:#e0a34e; border-color:rgba(224,163,78,0.55);  background:rgba(224,163,78,0.1); }
  .seg-surface-btn.active.surf-bike{ color:#2ea77a; border-color:rgba(46,167,122,0.55);  background:rgba(46,167,122,0.1); }
  .seg-surface-btn.active.surf-water{ color:#3b8fd4; border-color:rgba(59,143,212,0.55);  background:rgba(59,143,212,0.12); }
  .surf-swatch{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
  .surf-swatch-road{ background:#4a4a63; }
  .surf-swatch-dirt{ background:#a87a45; }
  .surf-swatch-bike{ background:#2ea77a; }
  .surf-swatch-water{ background:#3b8fd4; }
  .seg-surface-setall .seg-label{ color:var(--dim); }
  .turn-row{
    display:flex; flex-direction:column; gap:6px;
    padding:10px 0;
    border-bottom:1px solid var(--border);
  }
  .turn-row:last-child{ border-bottom:none; }
  .turn-row-top{
    display:flex; align-items:center; gap:8px;
  }
  .turn-label-input{
    flex:1; font-family:'DM Mono', monospace; font-size:11px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text); padding:6px 8px; outline:none;
    border-radius:2px;
  }
  .turn-label-input::placeholder{ color:var(--dim); opacity:0.6; }
  .turn-label-input:focus{ border-color:rgba(167,139,250,0.5); }
  .turn-del-btn{
    font-family:'DM Mono', monospace; font-size:10px;
    background:transparent; border:1px solid rgba(225,6,0,0.3);
    color:#E10600; padding:5px 8px; cursor:pointer;
    border-radius:2px; flex-shrink:0;
  }
  .turn-del-btn:hover{ background:rgba(225,6,0,0.1); }
  .turn-row-bottom{
    display:flex; align-items:center; gap:6px;
    font-family:'DM Mono', monospace; font-size:9px; color:var(--dim);
  }
  .turn-seg-select{
    font-family:'DM Mono', monospace; font-size:10px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    color:var(--text); padding:4px 6px; outline:none;
    border-radius:2px;
  }
  .turn-seg-select:focus{ border-color:rgba(167,139,250,0.5); }
  .turn-add-btn{
    width:100%; font-family:'DM Mono', monospace; font-size:10px;
    letter-spacing:1px; text-transform:uppercase;
    background:rgba(167,139,250,0.1); border:1px dashed rgba(167,139,250,0.3);
    color:#a78bfa; padding:10px 0; cursor:pointer;
    border-radius:2px; margin-top:8px;
    transition:background 0.15s ease;
  }
  .turn-add-btn:hover{ background:rgba(167,139,250,0.18); }
  .tutorial-overlay{
    position:fixed; inset:0; z-index:9997;
    pointer-events:none;
    transition:opacity 0.4s ease, visibility 0.4s ease;
  }
  .tutorial-overlay.hidden{ opacity:0; visibility:hidden; }
  .tutorial-overlay::before{
    content:''; position:absolute; inset:0;
    background:rgba(0,0,0,0.65);
    pointer-events:all;
  }

  .tutorial-spotlight{
    position:absolute;
    border-radius:6px;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.65);
    transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events:none;
    z-index:1;
  }
  .tutorial-spotlight.pulse{
    animation:spotlight-pulse 2s ease-in-out infinite;
  }
  @keyframes spotlight-pulse{
    0%, 100%{ box-shadow:0 0 0 9999px rgba(0,0,0,0.65), 0 0 0 0 rgba(225,6,0,0.3); }
    50%{ box-shadow:0 0 0 9999px rgba(0,0,0,0.65), 0 0 20px 4px rgba(225,6,0,0.15); }
  }

  .tutorial-card{
    position:absolute;
    background:var(--surface);
    border:1px solid var(--border);
    backdrop-filter:blur(30px);
    padding:34px 38px 26px;
    border-radius:3px;
    max-width:520px;
    min-width:420px;
    pointer-events:all;
    z-index:2;
    box-shadow:0 16px 48px rgba(0,0,0,0.6);
    transition:transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    border-top:2px solid var(--accent);
  }
  .tutorial-card.animating{
    opacity:0;
    transform:translateY(12px);
  }
  .tutorial-step-indicator{
    display:flex; gap:5px; margin-bottom:22px; flex-wrap:wrap;
  }
  .tutorial-step-dot{
    width:18px; height:4px; border-radius:2px;
    background:rgba(255,255,255,0.1);
    transition:background 0.3s, width 0.3s;
  }
  .tutorial-step-dot.active{
    background:var(--accent); width:28px;
  }
  .tutorial-step-dot.done{
    background:rgba(225,6,0,0.35);
  }

  .tutorial-title{
    font-family:'Instrument Sans', sans-serif;
    font-size:22px; font-weight:600;
    color:var(--text); margin-bottom:12px;
    letter-spacing:-0.3px; line-height:1.25;
  }
  .tutorial-desc{
    font-family:'DM Mono', monospace; font-size:13px;
    color:var(--dim); line-height:1.85;
    letter-spacing:0.2px; margin-bottom:20px;
  }
  .tutorial-keys{
    display:flex; gap:7px; flex-wrap:wrap;
    margin-bottom:24px; min-height:0;
  }
  .tutorial-keys:empty{ margin-bottom:6px; }
  .tutorial-key{
    display:inline-block; font-family:'DM Mono', monospace; font-size:11px;
    color:var(--dim); border:1px solid rgba(255,255,255,0.12);
    padding:5px 11px; border-radius:2px; background:rgba(255,255,255,0.04);
    white-space:nowrap; letter-spacing:0.5px;
  }

  .tutorial-nav{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px;
    border-top:1px solid var(--border); padding-top:20px;
  }
  .tutorial-nav-right{ display:flex; gap:8px; }
  .tutorial-nav .btn{
    font-size:11px; padding:9px 16px;
  }
  .tutorial-skip-btn{ color:#6b6b6b; font-size:11px; }
  .tutorial-skip-btn:hover{ color:var(--dim); }
  .tutorial-next-btn{
    background:rgba(225,6,0,0.12); border-color:rgba(225,6,0,0.3);
    color:var(--accent);
  }
  .tutorial-next-btn:hover{
    background:rgba(225,6,0,0.2); color:#ff2a24;
  }
  .tutorial-optout{
    display:flex; align-items:center; gap:9px;
    margin-top:16px;
  }
  .tutorial-check{
    flex:none;
    width:15px; height:15px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:2px;
    background:rgba(255,255,255,0.03);
    cursor:pointer;
    position:relative;
    transition:border-color 0.15s ease, background 0.15s ease;
  }
  .tutorial-check:hover{ border-color:rgba(255,255,255,0.4); }
  .tutorial-check:focus-visible{
    outline:1px solid var(--accent); outline-offset:2px;
  }
  .tutorial-check.checked{
    background:rgba(225,6,0,0.18);
    border-color:rgba(225,6,0,0.55);
  }
  .tutorial-check.checked::after{
    content:'';
    position:absolute; left:4px; top:1px;
    width:4px; height:8px;
    border:solid var(--accent);
    border-width:0 1.5px 1.5px 0;
    transform:rotate(45deg);
  }
  .tutorial-optout-label{
    font-family:'DM Mono', monospace; font-size:11px;
    color:#6b6b6b; letter-spacing:0.3px; cursor:pointer;
    user-select:none;
  }
  .tutorial-optout:hover .tutorial-optout-label{ color:var(--dim); }
  .tutorial-card.centered{
    left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
  }
  .tutorial-card.centered.animating{
    transform:translate(-50%, -50%) translateY(12px) !important;
    opacity:0;
  }
  @media (max-height: 720px){
    .tutorial-card{ padding:24px 30px 20px; }
    .tutorial-title{ font-size:19px; margin-bottom:9px; }
    .tutorial-desc{ font-size:12px; line-height:1.7; margin-bottom:16px; }
    .tutorial-keys{ margin-bottom:18px; }
    .tutorial-step-indicator{ margin-bottom:16px; }
    .tutorial-nav{ padding-top:16px; }
    .tutorial-optout{ margin-top:12px; }
  }

  @media (max-width: 640px){
    .tutorial-card{
      max-width:calc(100vw - 32px);
      min-width:0;
      width:calc(100vw - 32px);
      padding:24px 22px 20px;
      left:16px !important; right:16px !important;
      bottom:24px !important; top:auto !important;
    }
    .tutorial-title{ font-size:19px; }
    .tutorial-desc{ font-size:12px; line-height:1.75; }
    .tutorial-check{ width:18px; height:18px; }
    .tutorial-check.checked::after{ left:5px; top:2px; width:5px; height:10px; }
    .tutorial-optout-label{ font-size:12px; }
    .tutorial-nav .btn{ padding:10px 14px; }
  }
  @media (max-width: 640px){
    .tutorial-card.centered{
      bottom:auto !important; top:50% !important;
    }
  }
  #saveTrackBtn.hidden,
  #myTracksBtn.hidden{
    display:none;
  }
  #accountSettingsItem .settings-item-label{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .account-features{
    margin:0 0 18px;
  }
  .account-feature{
    position:relative;
    padding-left:20px;
    margin-bottom:7px;
    font-family:'DM Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.3px;
    line-height:1.6;
    color:var(--text);
  }
  .account-feature::before{
    position:absolute;
    left:0;
    top:-1px;
    font-size:11px;
  }
  .account-feature.yes::before{
    content:'\2713';
    color:#3ddc84;
  }
  .account-feature.yes.accent{
    color:var(--text);
    font-weight:500;
  }
  .account-feature.no{
    color:var(--dim);
  }
  .account-feature.no::before{
    content:'\2715';
    color:var(--dim);
  }

  .mytracks-modal{
    min-width:420px;
  }

  .mytracks-list{
    max-height:46vh;
    overflow-y:auto;
    margin:4px 0 16px;
    border-top:1px solid var(--border);
  }

  .mytracks-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 2px;
    border-bottom:1px solid var(--border);
  }
  .mytracks-item-main{
    flex:1 1 auto;
    min-width:0;
  }
  .mytracks-item-name{
    font-size:13px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mytracks-rename-input{
    width:100%;
    font-family:'Instrument Sans', sans-serif;
    font-size:13px;
    color:var(--text);
    background:rgba(0,0,0,0.4);
    border:1px solid var(--border);
    border-radius:2px;
    padding:2px 6px;
    outline:none;
  }
  .mytracks-rename-input:focus{
    border-color:var(--accent);
  }
  .mytracks-item-meta{
    font-family:"DM Mono", monospace;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--dim);
    margin-top:4px;
  }
  .mytracks-item .btn{
    flex:0 0 auto;
  }

  .mytracks-empty{
    font-size:12px;
    color:var(--dim);
    line-height:1.5;
    padding:26px 2px;
    text-align:center;
  }

  .mytracks-footer{
    display:flex;
    justify-content:flex-start;
    gap:8px;
  }
  .cl-modalBackdrop,
  .cl-modalContent{
    z-index:10050 !important;
  }

  .btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  @media (max-width: 768px){
    .btn-long-label{
      display:none;
    }
    .top-bar .logo{
      min-width:0;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .top-bar .controls{
      flex:0 0 auto;
    }

    .account-feature{
      font-size:10px;
    }

    .mytracks-modal{
      min-width:0;
      width:100%;
    }
    .mytracks-list{
      max-height:50vh;
    }
    .mytracks-item{
      flex-wrap:wrap;
    }
    .mytracks-item-main{
      flex:1 0 100%;
      margin-bottom:8px;
    }
    .mytracks-item .btn{
      min-height:44px;
    }
  }

  .race-hud{
    top:58px; left:24px; width:302px; z-index:130;
    max-height:calc(100vh - 110px); overflow-y:auto;
    padding:16px 18px;
  }
  .race-hud-header{ display:flex; align-items:center; gap:10px; }
  .race-hud-header .race-type-badge{ margin-left:auto; }
  .race-hud-close-btn{ padding:4px 8px; line-height:1; }

  .race-hud-desc{
    font-family:'DM Mono', monospace; font-size:10px; line-height:1.7;
    color:var(--dim); margin:14px 0 12px;
  }
  .race-hud-laps-row{ display:flex; align-items:center; gap:6px; margin-bottom:12px; }
  .race-hud-laps-row.hidden{ display:none; }
  .race-hud-laps-label{
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--dim); margin-right:4px;
  }
  .race-lap-btn{ width:36px; padding:6px 0; text-align:center; }

  .race-start-btn{
    display:block; width:100%; margin-top:4px; padding:10px 0;
    text-align:center; background:var(--accent); border:none; color:#fff;
    letter-spacing:2px;
  }
  .race-start-btn:hover{ color:#fff; filter:brightness(1.12); }
  .race-start-btn.hidden{ display:none; }
  #raceAgainBtn{ margin-top:12px; }

  .race-hud-clockrow{
    display:flex; align-items:baseline; justify-content:space-between;
    margin:14px 0 8px;
  }
  .race-hud-clock{
    font-family:'DM Mono', monospace; font-size:20px; font-weight:500;
    font-variant-numeric:tabular-nums; color:var(--text);
  }
  .race-hud-lapinfo{
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:2px;
    text-transform:uppercase; color:var(--dim);
  }
  .race-hud-controls{ display:flex; gap:6px; margin-bottom:10px; }
  .race-ctrl-btn{ flex:1; padding:6px 0; text-align:center; }

  .race-hud-board{ border-top:1px solid var(--border); }
  .race-row{
    display:flex; align-items:center; gap:8px; padding:5px 0;
    border-bottom:1px solid var(--border);
    font-family:'DM Mono', monospace; font-size:10px;
  }
  .race-row:last-child{ border-bottom:none; }
  .race-pos{ width:14px; text-align:right; color:var(--dim); flex:none; }
  .race-row.lead .race-pos{ color:var(--accent); }
  .race-dot{
    width:8px; height:8px; border-radius:50%; flex:none;
    box-shadow:0 0 0 1px rgba(0,0,0,0.5);
  }
  .race-num{ width:26px; color:var(--dim); flex:none; }
  .race-name{
    flex:1; min-width:0; letter-spacing:0.5px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .race-row.done .race-name{ color:var(--dim); }
  .race-flchip{
    flex:none; font-size:8px; letter-spacing:1px; color:#c084fc;
    border:1px solid rgba(192,132,252,0.4); border-radius:2px; padding:0 3px;
  }
  .race-gap{
    flex:none; min-width:58px; text-align:right; color:var(--dim);
    font-variant-numeric:tabular-nums;
  }
  .race-row.lead .race-gap{ color:var(--text); }
  .race-gap.race-inpit{ color:#FFD23F; letter-spacing:0.5px; }

  .race-hud-footer{
    margin-top:10px; padding-top:8px; border-top:1px solid var(--border);
    font-family:'DM Mono', monospace; font-size:9px; letter-spacing:1px;
    text-transform:uppercase; color:var(--dim); line-height:1.9;
  }
  .race-hud-footer.hidden{ display:none; }
  .race-win-line{ color:var(--text); }
  .race-fl-line{ color:#c084fc; }
  .race-fl-flash{ animation:race-fl-pulse 0.6s ease 3; }
  @keyframes race-fl-pulse{
    0%, 100%{ color:#c084fc; }
    50%{ color:#f0e7ff; }
  }
  .race-countdown{
    position:fixed; inset:0; z-index:400;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    font-family:'Instrument Sans', sans-serif; font-weight:700;
    font-size:clamp(90px, 18vw, 180px); letter-spacing:-4px;
    color:var(--accent); text-shadow:0 0 70px var(--accent-glow);
    transition:opacity 0.25s ease;
  }
  .race-countdown.go{ color:#3DDC84; text-shadow:0 0 70px rgba(61,220,132,0.35); }
  .race-countdown.hidden{ opacity:0; }
  .race-countdown.pop{ animation:race-count-pop 0.3s ease; }
  @keyframes race-count-pop{
    from{ transform:scale(1.35); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }

  @media (max-width: 768px){
    .race-hud{ top:52px; left:12px; right:12px; width:auto; max-height:52vh; padding:14px; }
    .race-hud-clock{ font-size:16px; }
    .race-gap{ min-width:48px; }
  }
  @media (prefers-reduced-motion: reduce){
    .race-countdown.pop, .race-fl-flash{ animation:none; }
  }
  .race-open-btn{ margin-top:6px; }
  .race-report{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
  .race-rating-row{ display:flex; justify-content:space-between; align-items:baseline; }
  .race-rating-num{
    font-size:16px; color:var(--text); font-weight:500;
    font-variant-numeric:tabular-nums; letter-spacing:0;
  }
  .race-rating-den{ font-size:9px; color:var(--dim); margin-left:1px; }
  .race-rating-bar{
    height:3px; background:var(--border); border-radius:2px;
    overflow:hidden; margin:6px 0 9px;
  }
  .race-rating-fill{ height:100%; background:var(--accent); }
  .race-report-text{
    text-transform:none; letter-spacing:0.3px; font-size:10px;
    line-height:1.75; color:var(--text); opacity:0.85;
  }