@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Roboto+Mono:wght@500&display=swap');

:root{
  --asphalt: #12151b;
  --surface: #1b212b;
  --surface-2: #232a36;
  --line: #2d3543;
  --text: #edeff3;
  --text-muted: #9aa3b4;
  --yellow: #ffc53d;
  --green: #35c48b;
  --red: #ff5d5d;
  --blue: #4c8dff;
  --purple: #b983ff;
  --orange: #ff9f45;
  --teal: #3ac7c7;
  --slate: #8a93a6;
  --radius: 14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--asphalt), var(--asphalt)) fixed,
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,197,61,.05) 38px 40px);
  color:var(--text);
  font-family:'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3{ font-family:'Oswald','Noto Sans SC',sans-serif; letter-spacing:.02em; margin:0 0 .4em; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ===== Header ===== */
.site-header{
  background:var(--surface);
  border-bottom:3px solid var(--yellow);
  position:sticky; top:0; z-index:20;
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand-mark{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:22px;
  background:var(--yellow); color:var(--asphalt);
  padding:3px 10px; border-radius:6px; letter-spacing:.05em;
}
.brand-sub{ color:var(--text-muted); font-size:14px; }
.site-nav{ display:flex; align-items:center; gap:18px; font-size:15px; }
.site-nav a{ text-decoration:none; color:var(--text-muted); }
.site-nav a:hover{ color:var(--text); }
.nav-user{ color:var(--text); font-weight:500; }
.nav-cta{
  background:var(--yellow); color:var(--asphalt) !important;
  padding:7px 16px; border-radius:999px; font-weight:700;
}
.nav-logout{ color:var(--red) !important; }

.site-main{ flex:1; max-width:1180px; margin:0 auto; padding:32px 20px 60px; width:100%; }

.site-footer{
  border-top:1px solid var(--line); padding:18px 20px; text-align:center;
  color:var(--text-muted); font-size:12.5px;
}

/* ===== Buttons ===== */
.btn{
  border:none; border-radius:10px; padding:10px 20px; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .1s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--yellow); color:var(--asphalt); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }

/* ===== Auth pages ===== */
.auth-wrap{ display:flex; justify-content:center; padding:40px 0; }
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; width:100%; max-width:380px;
}
.auth-card h1{ font-size:26px; }
.auth-form{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.auth-form label{ font-size:13px; color:var(--text-muted); display:flex; flex-direction:column; gap:6px; }
.auth-form input{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:11px 12px; border-radius:8px; font-size:15px;
}
.auth-form input:focus{ outline:2px solid var(--yellow); }
.auth-form .btn{ margin-top:6px; }
.auth-switch{ margin-top:16px; font-size:14px; color:var(--text-muted); }
.auth-switch a{ color:var(--yellow); text-decoration:none; }
.alert{ padding:10px 14px; border-radius:8px; font-size:14px; }
.alert-err{ background:rgba(255,93,93,.12); color:var(--red); border:1px solid rgba(255,93,93,.3); }
.alert-ok{ background:rgba(53,196,139,.12); color:var(--green); border:1px solid rgba(53,196,139,.3); }

/* ===== Home / hero ===== */
.hero{ padding:10px 0 34px; border-bottom:1px dashed var(--line); margin-bottom:34px; }
.hero h1{ font-size:34px; }
.hero p{ color:var(--text-muted); max-width:720px; font-size:15.5px; }

.route-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;
}
.route-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; text-decoration:none; color:var(--text); position:relative; overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.route-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--yellow) 0 18px, transparent 18px 30px);
}
.route-card:hover{ transform:translateY(-3px); border-color:var(--yellow); }
.route-card-badge{
  display:inline-block; background:var(--surface-2); color:var(--yellow);
  font-family:'Roboto Mono',monospace; font-size:12px; padding:3px 10px;
  border-radius:999px; margin-bottom:12px; border:1px solid var(--line);
}
.route-card h2{ font-size:18px; margin-bottom:10px; }
.route-card-summary{ color:var(--text-muted); font-size:13.5px; min-height:60px; }
.route-card-foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:16px;
  font-size:13px; color:var(--text-muted);
}
.route-card-go{ color:var(--yellow); font-weight:700; }

/* ===== Route simulation page ===== */
.route-page-head{ margin-bottom:24px; }
.back-link{ text-decoration:none; color:var(--text-muted); font-size:14px; }
.route-page-head h1{ font-size:26px; margin:10px 0 8px; }
.route-page-summary{ color:var(--text-muted); font-size:14.5px; }

.sim-layout{
  display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start;
}
@media (max-width: 860px){ .sim-layout{ grid-template-columns:1fr; } }

.sim-map-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; position:sticky; top:88px;
}
@media (max-width: 860px){ .sim-map-wrap{ position:static; } }

.sim-map-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sim-progress{ flex:1; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; min-width:80px; }
.sim-progress-fill{ height:100%; width:0%; background:var(--yellow); transition:width .25s ease; }

.road-map{
  max-height:560px; overflow-y:auto; padding:6px 4px 6px 4px;
  background:
    linear-gradient(var(--asphalt), var(--asphalt)) padding-box;
  border-radius:10px;
}
.road-node{
  display:flex; gap:14px; position:relative; padding:0 6px 26px 6px; cursor:pointer;
}
.road-node:not(:last-child)::after{
  content:''; position:absolute; left:25px; top:44px; bottom:0; width:2px;
  background:repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
}
.road-node-dot{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--surface-2); border:2px solid var(--line); z-index:1;
}
.road-node-body{ padding-top:4px; }
.road-node-num{ font-family:'Roboto Mono',monospace; font-size:11px; color:var(--text-muted); }
.road-node-title{ font-size:14.5px; font-weight:500; }
.road-node.is-active .road-node-dot{ border-color:var(--yellow); box-shadow:0 0 0 4px rgba(255,197,61,.15); }
.road-node.is-active .road-node-title{ color:var(--yellow); font-weight:700; }
.road-node.is-done .road-node-dot{ opacity:.55; }
.road-node.is-done .road-node-title{ color:var(--text-muted); }

.type-start   .road-node-dot,.detail-icon.type-start   { background:rgba(53,196,139,.18); }
.type-end     .road-node-dot                           { background:rgba(255,93,93,.18); }
.type-cross   .road-node-dot                           { background:rgba(76,141,255,.18); }
.type-turn    .road-node-dot                           { background:rgba(255,197,61,.18); }
.type-uturn   .road-node-dot                           { background:rgba(185,131,255,.18); }
.type-lane    .road-node-dot                           { background:rgba(58,199,199,.18); }
.type-overtake.road-node-dot                           { background:rgba(255,159,69,.18); }
.type-straight.road-node-dot                           { background:rgba(154,163,180,.18); }
.type-gear    .road-node-dot                           { background:rgba(138,147,166,.18); }
.type-park    .road-node-dot                           { background:rgba(53,196,139,.18); }

/* ===== Detail card ===== */
.detail-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; min-height:260px;
}
.detail-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.detail-icon{
  font-size:28px; width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; background:var(--surface-2);
}
.detail-eyebrow{ font-family:'Roboto Mono',monospace; font-size:12px; color:var(--yellow); margin-bottom:4px; }
.detail-head h2{ font-size:22px; margin:0; }
.detail-row{ margin-bottom:16px; }
.detail-label{ font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.detail-value{ font-size:15px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  background:rgba(255,197,61,.12); color:var(--yellow); border:1px solid rgba(255,197,61,.35);
  font-size:12.5px; padding:4px 10px; border-radius:999px;
}
.detail-meta{
  display:inline-block; margin-top:4px; font-family:'Roboto Mono',monospace; font-size:12.5px;
  color:var(--asphalt); background:var(--yellow); padding:4px 10px; border-radius:6px;
}

.sim-nav{ display:flex; align-items:center; justify-content:space-between; margin:18px 0; }
.step-counter{ font-family:'Roboto Mono',monospace; color:var(--text-muted); font-size:14px; }

.legend{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
}
.legend h3{ font-size:15px; margin-bottom:10px; }
.legend ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 18px; }
.legend li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-muted); }
.legend-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; background:var(--surface-2);
}