/* ccnodes TX Highway — night-drive theme, kin to the landing's schematic look */

:root{
  --bg:#0c0e0b;--panel:#12150f;--ink:#e8eadf;--dim:#9aa08c;--faint:#666c58;
  --line:#23271c;--line-2:#333827;--accent:#3ddc97;--accent-soft:rgba(61,220,151,.08);
  --grid:rgba(232,234,223,.035);
  --amber:#e8b923;--red:#e0563f;
  --asphalt:#16181a;--asphalt-edge:#2a2d30;--lane-paint:rgba(232,234,223,.28);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.5;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;}

.wrap{max-width:1180px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 90%, transparent);min-height:100vh;display:flex;flex-direction:column;}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 24px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10;}
.brand{display:flex;align-items:center;gap:9px;font-size:1.02rem;letter-spacing:-.01em;}
.brand strong{color:var(--accent);font-weight:700;}
.brand .lights{display:inline-flex;gap:3px;}
.brand .lights i{width:7px;height:7px;border-radius:50%;background:var(--faint);opacity:.5;}
.brand .lights i:nth-child(1){background:var(--red);opacity:.9;}
.brand .lights i:nth-child(2){background:var(--amber);opacity:.9;}
.brand .lights i:nth-child(3){background:var(--accent);opacity:.9;}
.nav-r{display:flex;align-items:center;gap:18px;}
.nav-links{display:flex;gap:16px;}
.nav-links a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.nav-links a:hover{color:var(--accent);}
#conn{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);}
#conn .dot{width:8px;height:8px;border-radius:50%;background:var(--red);transition:background .3s;}
#conn.live .dot{background:var(--accent);box-shadow:0 0 8px var(--accent);}
#conn.live .lbl::after{content:"live";}
#conn:not(.live) .lbl::after{content:"connecting";}

/* intro strip */
.intro{padding:18px 24px 14px;border-bottom:1px solid var(--line);}
.intro-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px;}
.intro h1{margin:0;font-size:1.35rem;letter-spacing:-.02em;}
.intro h1 .em{color:var(--accent);}
.intro p{margin:0;color:var(--dim);font-size:.86rem;max-width:760px;}

/* view switcher */
.views{display:inline-flex;border:1px solid var(--line-2);}
.views button{appearance:none;border:0;background:transparent;color:var(--dim);cursor:pointer;
  padding:6px 14px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:inherit;border-right:1px solid var(--line-2);}
.views button:last-child{border-right:0;}
.views button:hover{color:var(--ink);}
.views button.on{color:var(--accent);background:var(--accent-soft);}

/* "how it works" explainer */
#howto-btn{appearance:none;border:1px solid var(--line-2);background:transparent;color:var(--dim);
  cursor:pointer;padding:6px 12px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;}
#howto-btn:hover{color:var(--ink);}
#howto-btn.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:var(--accent-soft);}
#howto{margin-top:12px;border:1px solid var(--line-2);background:var(--panel);padding:4px 18px 10px;}
#howto h5{margin:10px 0 2px;color:var(--accent);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;}
#howto ul{margin:6px 0;padding-left:18px;}
#howto li{margin:5px 0;color:var(--dim);font-size:.8rem;}
#howto li b{color:var(--ink);}

/* speedway view */
.speedway{border-bottom:1px solid var(--line);}
.sw-wrap{position:relative;padding:10px 24px 18px;}
.sw-wrap canvas{display:block;width:100%;cursor:crosshair;}
.pitboard{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:left;font-size:.7rem;color:var(--dim);pointer-events:none;
  background:color-mix(in srgb, var(--bg) 55%, transparent);padding:10px 14px;}
.pitboard .pb-title{color:var(--faint);letter-spacing:.18em;text-transform:uppercase;
  font-size:.6rem;text-align:center;margin-bottom:7px;}
.pb-row{display:flex;align-items:center;gap:8px;margin:4px 0;white-space:nowrap;}
.pb-row .coin-dot{width:8px;height:8px;}
.pb-row .pb-tk{color:var(--ink);font-weight:700;min-width:44px;}
.pb-row .pb-lap{color:var(--faint);min-width:74px;}
.pb-row .pb-q{min-width:86px;}
.pb-row.dim .pb-h{color:var(--amber);}
.pitboard .pb-foot{color:var(--faint);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;margin-top:8px;}
@media (max-width:760px){
  .pitboard{display:none;}
}

/* railway view */
.railway{border-bottom:1px solid var(--line);}
.rw-wrap{padding:10px 24px 18px;}
.rw-wrap canvas{display:block;width:100%;cursor:crosshair;}

/* highways */
#highways{flex:1;}
.hw{border-bottom:1px solid var(--line);}
.hw-head{display:flex;align-items:center;gap:14px;padding:10px 24px 6px;flex-wrap:wrap;}
.coin-dot{width:11px;height:11px;border-radius:50%;background:var(--c,#888);
  box-shadow:0 0 10px var(--c,#888);flex:none;}
.hw-head h2{margin:0;font-size:.95rem;font-weight:700;letter-spacing:.01em;display:flex;align-items:baseline;gap:8px;}
.hw-head h2 small{color:var(--faint);font-weight:500;font-size:.7rem;letter-spacing:.14em;}
.hw-stats{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;align-items:center;
  font-size:.72rem;color:var(--dim);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
.hw-stats b{color:var(--ink);font-weight:600;}
.chip{padding:2px 8px;border:1px solid var(--line-2);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;}
.chip.sync{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);}
.chip.off{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);}
.chip[hidden]{display:none;}

.hw-roadwrap{position:relative;padding:4px 24px 14px;}
.hw canvas{display:block;width:100%;cursor:crosshair;}

/* tx card */
#txcard{position:fixed;z-index:50;min-width:250px;max-width:330px;background:var(--panel);
  border:1px solid var(--line-2);box-shadow:0 10px 36px rgba(0,0,0,.55);padding:12px 14px;
  font-size:.78rem;display:none;}
#txcard.show{display:block;}
#txcard .row{display:flex;justify-content:space-between;gap:12px;margin:3px 0;}
#txcard .row span:first-child{color:var(--faint);text-transform:uppercase;font-size:.64rem;letter-spacing:.12em;padding-top:2px;}
#txcard .txid{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;color:var(--dim);
  font-size:.7rem;margin:6px 0 8px;}
#txcard .head{display:flex;align-items:center;gap:8px;font-weight:700;}
#txcard .head .coin-dot{width:9px;height:9px;}
#txcard a.ex{display:inline-block;margin-top:8px;color:var(--accent);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;}
#txcard a.ex:hover{text-decoration:underline;}
#txcard .x{position:absolute;top:6px;right:9px;color:var(--faint);cursor:pointer;font-size:.85rem;}
#txcard .x:hover{color:var(--ink);}

/* secret-offramp explainer (ETH private order flow) */
#privcard{position:fixed;z-index:50;min-width:250px;max-width:340px;background:var(--panel);
  border:1px solid #6b54c4;box-shadow:0 10px 36px rgba(0,0,0,.55);padding:12px 14px;
  font-size:.78rem;display:none;}
#privcard.show{display:block;}
#privcard .head{display:flex;align-items:center;gap:8px;font-weight:700;}
#privcard .head .coin-dot{width:9px;height:9px;}
#privcard p{margin:8px 0 0;color:var(--dim);line-height:1.45;}
#privcard p.hint{color:var(--faint);font-size:.7rem;}
#privcard .x{position:absolute;top:6px;right:9px;color:var(--faint);cursor:pointer;font-size:.85rem;}
#privcard .x:hover{color:var(--ink);}

/* footer */
.foot{padding:14px 24px;border-top:1px solid var(--line);color:var(--faint);font-size:.72rem;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.foot a{color:var(--dim);}
.foot a:hover{color:var(--accent);}

@media (max-width:640px){
  .intro p{font-size:.8rem;}
  .hw-head{gap:8px;}
  .hw-stats{gap:10px;font-size:.66rem;}
  .nav-links{display:none;}
}