:root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#2d3748;
    --gold:#f5b301; --gold-dim:#8a6a12; --gray:#8b949e; --text:#e6edf3;
    --red:#ff5c5c; --green:#3fb950; --blue:#58a6ff;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.55;}
  a{color:var(--blue);}
  header{border-bottom:1px solid var(--line); padding:18px 20px; display:flex; align-items:center; gap:14px; position:sticky; top:0; background:rgba(13,17,23,.96); z-index:50; backdrop-filter:blur(6px);}
  .logo{font-size:26px; font-weight:800; letter-spacing:-.5px; display:flex; align-items:baseline; gap:0;}
  .logo .brand-i77{color:var(--gold);}
  .logo .brand-watch{color:var(--text); font-weight:700; margin-left:2px;}
  .logo .seven{color:var(--gold);}
  .tag{font-size:13px; color:var(--gray);}
  nav{margin-left:auto; display:flex; gap:16px; font-size:14px;}
  nav a{color:var(--gray); text-decoration:none;}
  nav a:hover{color:var(--text);}
  .wrap{max-width:1180px; margin:0 auto; padding:28px 20px 60px;}
  .hero{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-bottom:44px;}
  @media(max-width:900px){.hero{grid-template-columns:1fr;}}
  .hero h1{font-size:40px; line-height:1.1; letter-spacing:-1px; margin-bottom:12px;}
  .hero h1 .seven{color:var(--gold);}
  .hero p{color:var(--gray); font-size:17px; margin-bottom:18px;}
  .stat-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px;}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 16px; min-width:130px;}
  .stat .v{font-size:22px; font-weight:800; color:var(--gold);}
  .stat .l{font-size:12px; color:var(--gray);}
  section{margin-bottom:52px;}
  h2{font-size:26px; letter-spacing:-.5px; margin-bottom:6px;}
  .sub{color:var(--gray); margin-bottom:20px; font-size:15px;}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px;}

  /* corridor map */
  .map-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start;}
  @media(max-width:900px){.map-layout{grid-template-columns:1fr;}}
  .map-stage{position:relative; min-width:0;}
  .map-legend-sticky{
    position:sticky; top:72px; z-index:5;
    display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
    padding:10px 12px; margin-bottom:10px;
    background:rgba(22,27,34,.92); border:1px solid var(--line); border-radius:10px;
    backdrop-filter:blur(8px); font-size:12px; color:var(--gray);
  }
  .map-legend-sticky .sw{width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; display:inline-block;}
  .map-legend-sticky .sw.round{border-radius:50%;}
  .map-legend-sticky .sw.diamond{
    width:10px; height:10px; border-radius:2px;
    transform:rotate(45deg); vertical-align:0;
  }
  #corridor-live, #corridor-planned{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:12px 8px 16px; overflow:auto; -webkit-overflow-scrolling:touch;
    max-height:min(78vh, 920px);
  }
  #corridor-live{
    background:linear-gradient(180deg,#161b22 0%,#141a12 100%);
    border-color:#3d4a28;
  }
  #corridor-planned{
    background:linear-gradient(180deg,#161b22 0%,#1a1528 100%);
    border-color:#5b4a8a;
  }
  #corridor-live svg, #corridor-planned svg{
    display:block; margin:0 auto; width:100%; max-width:480px; height:auto; cursor:default;
  }
  .exit-hit{cursor:pointer; outline:none;}
  .exit-hit .exit-box{transition:stroke .15s ease, fill .15s ease, filter .15s ease;}
  .exit-hit .exit-node{transition:stroke .15s ease, fill .15s ease;}
  .exit-hit .exit-tick{transition:stroke .15s ease;}
  .exit-hit:hover .exit-box,
  .exit-hit:focus-visible .exit-box{
    stroke:var(--gold); stroke-width:2.25;
  }
  .exit-hit:hover .exit-node,
  .exit-hit:focus-visible .exit-node{
    stroke:var(--gold); fill:#3d2f0e;
  }
  .exit-hit:hover .exit-tick,
  .exit-hit:focus-visible .exit-tick{stroke:var(--gold);}
  /* No translucent fill across the roadway - chip/node/tick carry the active state */
  .exit-hit:focus-visible .exit-hitarea,
  .exit-hit.active .exit-hitarea{fill:transparent;}
  .exit-hit.active .exit-box{
    stroke:var(--gold); stroke-width:2.5; fill:#3d2f0e;
  }
  .exit-hit.active .exit-node{
    stroke:var(--gold); fill:var(--gold);
  }
  .exit-hit.active .exit-tick{stroke:var(--gold);}
  #corridor-planned .exit-hit:hover .exit-box,
  #corridor-planned .exit-hit:focus-visible .exit-box,
  #corridor-planned .exit-hit.active .exit-box{
    stroke:#a78bfa; stroke-width:2.5; fill:#2a1f45;
  }
  #corridor-planned .exit-hit:hover .exit-node,
  #corridor-planned .exit-hit:focus-visible .exit-node,
  #corridor-planned .exit-hit.active .exit-node{
    stroke:#a78bfa; fill:#a78bfa;
  }
  #corridor-planned .exit-hit:hover .exit-tick,
  #corridor-planned .exit-hit:focus-visible .exit-tick,
  #corridor-planned .exit-hit.active .exit-tick{stroke:#a78bfa;}
  #corridor-planned .exit-hit.active .exit-hitarea,
  #corridor-planned .exit-hit:focus-visible .exit-hitarea{
    fill:transparent;
  }
  .legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--gray); margin-top:10px; justify-content:flex-start;}
  .sw{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:5px;}
  #exit-detail-live, #exit-detail-planned{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:22px; position:sticky; top:84px; align-self:start; min-height:160px;
  }
  #exit-detail-live h3, #exit-detail-planned h3{font-size:20px; margin-bottom:4px; letter-spacing:-.3px;}
  #exit-detail-live .city, #exit-detail-planned .city{color:var(--gray); font-size:14px; margin-bottom:12px;}
  #exit-detail-live .note, #exit-detail-planned .note{
    font-size:14px; color:var(--text); background:var(--panel2); border-radius:8px; padding:12px; margin-top:12px;
  }
  .map-title{font-size:20px; letter-spacing:-.3px; margin-bottom:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .pill.purple{background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid #5b4a8a;}
  .facts-btn{display:inline-block; margin:14px 0 6px; padding:12px 24px; border:1px solid var(--gold); background:rgba(245,179,1,.08); color:var(--gold); font-weight:700; font-size:15px; border-radius:10px; cursor:pointer;}
  .facts-btn:hover{background:rgba(245,179,1,.16);}
  #facts-overlay{position:fixed; inset:0; background:rgba(0,0,0,.74); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:100; overflow-y:auto;}
  #facts-overlay.open{display:flex;}
  #facts-modal{background:#141a23; border:1px solid var(--line); border-radius:16px; max-width:880px; width:100%; padding:28px; position:relative;}
  #facts-close{position:absolute; top:12px; right:16px; background:none; border:none; color:var(--gray); font-size:30px; cursor:pointer; line-height:1;}
  #facts-close:hover{color:#fff;}
  #facts-modal h2{font-size:24px; letter-spacing:-.4px; margin-bottom:4px; padding-right:40px;}
  .facts-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
  .fact-block{background:var(--panel2); border-radius:10px; padding:16px 18px;}
  .fact-block h4{color:var(--gold); font-size:12.5px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px;}
  .fact-block ul{list-style:none;}
  .fact-block li{font-size:13.5px; color:var(--text); margin-bottom:9px; line-height:1.5;}
  .fact-block li strong{color:#fff;}
  .cite{font-size:10.5px; font-weight:700; color:var(--blue); text-decoration:none; margin-left:6px; white-space:nowrap;}
  .cite:hover{text-decoration:underline;}
  .sources{margin-top:18px; font-size:12px; color:var(--gray); line-height:1.6;}
  .sources a{color:var(--blue);}
  @media(max-width:640px){.facts-grid{grid-template-columns:1fr;}}
  .pill{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; margin:2px 4px 2px 0;}
  .pill.gold{background:rgba(245,179,1,.15); color:var(--gold); border:1px solid var(--gold-dim);}
  .pill.red{background:rgba(255,92,92,.12); color:var(--red); border:1px solid #7a2e2e;}
  .pill.blue{background:rgba(88,166,255,.12); color:var(--blue); border:1px solid #2e4a7a;}
  .pill.gray{background:rgba(139,148,158,.12); color:var(--gray); border:1px solid #3a4556;}
  .pill.green{background:rgba(63,185,80,.12); color:#3fb950; border:1px solid #2a6b3a;}
  .map-hint{font-size:12px; color:var(--gray); margin-top:8px;}
  .corridor-svg .free-band{opacity:.95;}
  .corridor-svg .express-band{opacity:1;}
  .corridor-svg .free-badge{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}
  .corridor-svg .lane-label{letter-spacing:.4px;}
  .corridor-svg .side-callout{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
  .corridor-svg .side-callout-label{letter-spacing:.2px;}
  .corridor-svg .callout-leader{pointer-events:none;}
  .corridor-svg .aux-lane{opacity:.85;}
  .corridor-svg .aux-label{letter-spacing:.2px;}
  .exit-hit.express-only-hit .xo-chip{transition:stroke .15s ease, fill .15s ease;}
  .exit-hit.express-only-hit:hover .xo-chip,
  .exit-hit.express-only-hit:focus-visible .xo-chip,
  .exit-hit.express-only-hit.active .xo-chip{
    stroke:var(--gold); stroke-width:2; fill:#3d2f0e;
  }
  .exit-hit.express-only-hit:hover .xo-node,
  .exit-hit.express-only-hit:focus-visible .xo-node,
  .exit-hit.express-only-hit.active .xo-node{
    stroke:#fff; fill:var(--gold);
  }
  @media(max-width:520px){
    .corridor-svg .exit-name{display:none;}
    /* Keep geometry / express-only / aux chips readable on mobile */
    .corridor-svg .lane-label,
    .corridor-svg .side-callout-label,
    .corridor-svg .aux-label{display:block;}
    .corridor-svg .side-callout{opacity:1;}
    .map-legend-sticky{top:64px; font-size:11px; gap:8px 10px; padding:8px 10px;}
    #corridor-live, #corridor-planned{padding:8px 2px 12px; max-height:70vh;}
    #corridor-live svg, #corridor-planned svg{max-width:100%;}
  }

  /* tables */
  table{width:100%; border-collapse:collapse; font-size:14px;}
  th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
  th{color:var(--gray); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.5px;}
  tr:hover td{background:var(--panel2);}

  /* calculators */
  .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media(max-width:900px){.calc-grid{grid-template-columns:1fr;}}
  label{display:block; font-size:13px; color:var(--gray); margin:12px 0 4px;}
  input[type=number],input[type=text]{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px 12px; font-size:16px;}
  input:focus{outline:none; border-color:var(--gold);}
  .result{margin-top:16px; background:var(--panel2); border-radius:10px; padding:16px; font-size:15px;}
  .result .big{font-size:30px; font-weight:800;}
  .verdict-yes{color:var(--green);} .verdict-no{color:var(--red);} .verdict-meh{color:var(--gold);}

  /* news */
  .news-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px;}
  .news-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column;}
  .news-card h4{font-size:16px; margin-bottom:8px;}
  .news-card h4 a{color:var(--text); text-decoration:none;}
  .news-card h4 a:hover{color:var(--gold);}
  .news-card p{font-size:13px; color:var(--gray); flex:1;}
  .news-card .src{font-size:12px; color:var(--gray); margin-top:10px;}

  .ad-slot{background:var(--panel); border:1px dashed var(--line); border-radius:10px; color:var(--gray); font-size:12px; text-align:center; padding:26px; margin:34px 0;}
  footer{border-top:1px solid var(--line); padding:26px 20px; color:var(--gray); font-size:13px; text-align:center;}
  .disclaimer{font-size:12px; color:var(--gray); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-top:30px;}
  /* faq accordions */
  details.faq{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:0 18px;}
  details.faq summary{cursor:pointer; padding:16px 0; font-weight:700; font-size:15px; list-style:none;}
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary::after{content:"+"; float:right; color:var(--gold); font-size:20px; line-height:1;}
  details.faq[open] summary::after{content:"\2013";}
  details.faq .a{padding:0 0 18px; color:var(--gray); font-size:14.5px; line-height:1.65;}
  /* time bars */
  .tbar-row{display:grid; grid-template-columns:150px 1fr 70px; gap:12px; align-items:center; margin-bottom:10px; font-size:14px;}
  .tbar-track{background:#1a212b; border-radius:8px; height:22px; overflow:hidden;}
  .tbar-fill{height:100%; border-radius:8px; background:linear-gradient(90deg,#1f7a3d,#f5b301,#e5484d);}
  .tbar-row .cost{text-align:right; font-weight:700;}
  @media(max-width:600px){.tbar-row{grid-template-columns:110px 1fr 60px; font-size:13px;}}
  /* report form */
  .report-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:600px){.report-grid{grid-template-columns:1fr;}}
  select,input[type="number"],input[type="text"]{width:100%; background:#1a212b; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px 12px; font-size:15px; margin-top:6px;}
  label{font-size:13px; color:var(--gray); display:block;}
  .btn{background:var(--gold); color:#231a00; border:none; border-radius:10px; padding:12px 24px; font-weight:800; font-size:15px; cursor:pointer; margin-top:14px;}
  .btn:active{transform:scale(.97);}


.report-status {
  font-size: 13px;
  color: var(--gray);
  margin-top: 10px;
}
.report-status.warn {
  color: var(--gold);
}
.recent-reports {
  margin-top: 16px;
  font-size: 13px;
}
.recent-reports h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--gray);
}
.recent-reports li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
@media (max-width: 600px) {
  .hero h1 { font-size: 30px; }
  nav { gap: 10px; font-size: 13px; }
  #corridor-live, #corridor-planned { padding: 12px 8px; }
}