:root{
    --bg:#0c0e11;
    --panel:#14171c;
    --panel-2:#1b1f26;
    --line:#262b34;
    --ink:#eef1f5;
    --muted:#8b95a3;
    --accent:#d6ff3f;
    --accent-2:#ff5c39;
    --blue:#4fc3f7;
    --climb:#ff5c39;
    --descent:#4fc3f7;
    --flat:#d6ff3f;
    --roll:#b388ff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:
      radial-gradient(circle at 85% -10%, rgba(214,255,63,.07), transparent 40%),
      radial-gradient(circle at 0% 110%, rgba(255,92,57,.08), transparent 45%),
      var(--bg);
    color:var(--ink);
    font-family:'Archivo',sans-serif;
    min-height:100vh;
    padding:32px 20px 80px;
    line-height:1.45;
  }
  .wrap{max-width:1040px;margin:0 auto}
  header{margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:22px}
  .kicker{font-family:'Space Mono',monospace;color:var(--accent);font-size:12px;letter-spacing:.32em;text-transform:uppercase}
  h1{font-size:clamp(34px,6vw,64px);font-weight:900;letter-spacing:-.03em;line-height:.95;margin-top:8px}
  h1 span{color:var(--accent-2)}
  .sub{color:var(--muted);max-width:560px;margin-top:12px;font-size:15px}

  .grid{display:flex;flex-direction:column;gap:24px;margin-top:30px}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
  .panel h2{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
  .panel h2::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%}

  .drop{border:2px dashed var(--line);border-radius:12px;padding:14px 16px;text-align:center;cursor:pointer;transition:.2s;background:var(--panel-2)}
  .drop:hover,.drop.over{border-color:var(--accent);background:#1d2127}
  .drop strong{display:block;font-size:14px;margin-bottom:2px}
  .drop small{color:var(--muted);font-size:12px}
  .drop.loaded{border-color:var(--accent);border-style:solid}
  .drop.loaded strong{color:var(--accent)}

  /* drop sits in column 1, row 1; both parameter columns start on row 2 so the
     right column (Crr/CdA) aligns at the top with System weight on the left */
  .inputgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;align-items:start}
  .inputgrid>:nth-child(1){grid-column:1;grid-row:1}  /* file drop */
  .inputgrid>:nth-child(2){grid-column:1;grid-row:2}  /* weight / power / ftp */
  .inputgrid>:nth-child(3){grid-column:2;grid-row:2}  /* crr / cda / advanced */
  @media(max-width:720px){
    .inputgrid{grid-template-columns:1fr}
    .inputgrid>:nth-child(1),.inputgrid>:nth-child(2),.inputgrid>:nth-child(3){grid-column:1;grid-row:auto}
  }
  .inputcol{display:flex;flex-direction:column}
  .inputcol>:first-child{margin-top:0}  /* align both columns at the top */
  .field{margin-top:12px}
  .field label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
  .field label b{color:var(--ink);font-family:'Space Mono',monospace}
  input[type=number]{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    padding:10px 12px;border-radius:9px;font-family:'Space Mono',monospace;font-size:15px}
  input[type=number]:focus{outline:none;border-color:var(--accent)}
  input[type=range]{width:100%;accent-color:var(--accent);margin-top:4px}
  .hint{font-size:11px;color:var(--muted);margin-top:5px}
  select{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    padding:10px 12px;border-radius:9px;font-family:'Space Mono',monospace;font-size:14px}


  /* results */
  .empty{display:flex;align-items:center;justify-content:center;min-height:340px;color:var(--muted);
    text-align:center;flex-direction:column;gap:10px}
  .empty .big{font-size:46px;opacity:.3}

  /* uniform 22px spacing between every box in the results section */
  #results{flex-direction:column;gap:22px}        /* display:flex set when shown */
  #rHero,#rPlan{display:flex;flex-direction:column;gap:22px}

  .hero{display:flex;gap:18px;flex-wrap:wrap}
  .stat{flex:1;min-width:120px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px}
  .stat .v{font-family:'Space Mono',monospace;font-size:30px;font-weight:700;letter-spacing:-.02em}
  .stat .v small{font-size:14px;color:var(--muted)}
  .stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:4px}
  .stat.feature{background:linear-gradient(135deg,#1d2410,#14171c);border-color:#3a4a14}
  .stat.feature .v{color:var(--accent);font-size:36px}

  /* map (left) + elevation profile (right), side by side above the table */
  .routerow{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
  @media(max-width:720px){.routerow{grid-template-columns:1fr}}
  .routerow .mapbox,.routerow .profile{margin-top:0}

  .profile{margin-top:22px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px}
  .profile h3{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}
  .routerow .profile svg{height:300px}

  .mapbox{margin-top:22px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px}
  .mapbox h3{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}
  #map{height:300px;border-radius:10px;overflow:hidden;background:#8c8985;z-index:0}
  .leaflet-container{background:#8c8985;font-family:'Archivo',sans-serif}
  .leaflet-tile{filter:brightness(.6)}  /* dim the basemap, not the route lines */
  .leaflet-control-attribution{background:rgba(12,14,17,.7)!important;color:var(--muted)!important;font-size:10px}
  .leaflet-control-attribution a{color:var(--muted)!important}
  .leaflet-bar a{background:var(--panel-2)!important;color:var(--ink)!important;border-color:var(--line)!important}
  .leaflet-bar a:hover{background:var(--panel)!important}
  .profile svg{width:100%;display:block}

  .planwrap{max-height:60vh;overflow-y:auto;border-radius:10px}
  table{width:100%;border-collapse:collapse;font-size:14px}
  th,td{text-align:right;padding:10px 8px;border-bottom:1px solid var(--line)}
  th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
  .planwrap thead th{position:sticky;top:0;background:var(--panel);z-index:1}
  td:first-child,th:first-child{text-align:left}
  td{font-family:'Space Mono',monospace}
  .tag{display:inline-block;padding:3px 9px;border-radius:20px;font-family:'Archivo';font-weight:700;
    font-size:11px;letter-spacing:.04em}
  .tag.climb{background:rgba(255,92,57,.15);color:var(--climb)}
  .tag.descent{background:rgba(79,195,247,.15);color:var(--descent)}
  .tag.flat{background:rgba(214,255,63,.15);color:var(--flat)}
  .tag.rolling{background:rgba(179,136,255,.15);color:var(--roll)}

  .planhead{font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);
    font-weight:800;margin-top:26px;margin-bottom:2px}
  .planbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .planbar .planhead{margin-top:0}
  .planbtns{display:flex;gap:10px;flex-wrap:wrap}

  /* profile section bands: hoverable, linked to the matching plan row.
     The area/line are drawn on top of the bands, so let hovers fall through. */
  .profile svg polygon,.profile svg polyline{pointer-events:none}
  .band{cursor:pointer;transition:opacity .12s}
  .band:hover,.band.hot{opacity:.28}
  .band.sel{opacity:.5}
  /* invisible per-segment hit-lines on the map (hover targets along the route) */
  .seghit{pointer-events:stroke;cursor:pointer}
  .datarow{cursor:pointer}
  .datarow{transition:background .12s}
  .datarow.hot td{background:rgba(214,255,63,.10)}
  .datarow.hot td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
  .datarow.sel td{background:rgba(255,92,57,.14)}
  .datarow.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent-2)}
  .export{background:var(--panel-2);border:1px solid var(--accent);color:var(--accent);
    padding:9px 14px;border-radius:9px;font-family:'Archivo';font-weight:700;font-size:12px;
    cursor:pointer;white-space:nowrap;transition:.15s}
  .export:hover{background:var(--accent);color:#0c0e11}
  .grade{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);margin-left:8px}
  .datarow td{padding:10px 8px;border-bottom:1px solid var(--line)}
  table tbody tr:last-child{border-bottom:none}
  td.cum{color:var(--accent);font-weight:700}
  .phi b{color:var(--climb)} .plo b{color:var(--descent)} .pmid b{color:var(--ink)}
  .parr{font-size:10px;opacity:.7;margin-left:2px}
  .phi .parr{color:var(--climb)} .plo .parr{color:var(--descent)} .pmid .parr{color:var(--muted)}
  table td:nth-child(6) b{color:var(--ink)}
  th:nth-child(n+3),td:nth-child(n+3){white-space:nowrap}

  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
  .legend span{display:flex;align-items:center;gap:6px}
  .dot{width:10px;height:10px;border-radius:3px}
  .err{background:rgba(255,92,57,.12);border:1px solid var(--accent-2);color:#ffb3a3;
    padding:12px 14px;border-radius:10px;margin-top:16px;font-size:13px}
  .foot{margin-top:30px;color:var(--muted);font-size:11px;font-family:'Space Mono',monospace;line-height:1.7}
  .copyright{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;font-family:'Space Mono',monospace;text-align:center;letter-spacing:.08em}
  .copyright a{color:var(--accent);text-decoration:none}
  .copyright a:hover{text-decoration:underline}