@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --asphalt:#16171a;
  --asphalt-2:#232529;
  --asphalt-3:#2f3238;
  --amber:#e8a23c;
  --amber-bright:#f4b85a;
  --amber-dark:#a8691c;
  --hud-green:#4ee8a0;
  --hud-green-dim:#2a8a63;
  --mist:#f7f6f2;
  --mist-card:#ffffff;
  --paper:#efeee7;
  --slate:#5b6b73;
  --slate-light:#8b969c;
  --line:#e1dfd6;
  --danger:#c14a3a;
  --success:#3a7d5c;
  --radius:8px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(22,23,26,.05),0 8px 20px rgba(22,23,26,.06);
  --shadow-lg:0 4px 8px rgba(22,23,26,.08),0 20px 40px rgba(22,23,26,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--mist);
  color:var(--asphalt);
  font-family:'Noto Sans TC',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Barlow Condensed','Noto Sans TC',sans-serif;
  font-weight:700;
  letter-spacing:.005em;
  margin:0;
  color:var(--asphalt);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mono{font-family:'JetBrains Mono',monospace;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* dashed lane-line divider — signature element */
.lane-divider{
  height:0;
  border-top:3px dashed var(--amber);
  opacity:.4;
  margin:56px 0;
}
.lane-divider.tight{margin:28px 0;}

/* header */
.site-header{
  background:var(--asphalt);
  color:#fff;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.logo{
  font-family:'Barlow Condensed',sans-serif;
  font-size:23px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:9px;
  letter-spacing:.01em;
}
.logo .badge{
  background:var(--hud-green);color:var(--asphalt);
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
}
.nav-links{display:flex;gap:30px;align-items:center;font-size:15px;}
.nav-links a{color:#b7b5ad;transition:color .15s;position:relative;}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:var(--hud-green);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;border-radius:var(--radius);
  font-size:15px;font-weight:500;cursor:pointer;border:1.5px solid transparent;
  transition:transform .12s ease, background .15s, border-color .15s;
}
.btn:active{transform:scale(.97);}
.btn-amber{background:var(--amber);color:var(--asphalt);font-weight:600;}
.btn-amber:hover{background:var(--amber-bright);}
.btn-outline{border-color:rgba(255,255,255,.3);color:#fff;background:transparent;}
.btn-outline:hover{border-color:#fff;}
.btn-dark{background:var(--asphalt);color:#fff;}
.btn-dark:hover{background:var(--asphalt-3);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--asphalt);}
.btn-ghost:hover{border-color:var(--slate);}
.btn-sm{padding:7px 15px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* footer */
.site-footer{
  background:var(--asphalt);color:#8f8d86;
  padding:36px 0;margin-top:72px;font-size:13px;
}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.site-footer a{color:#c9c7c0;}
.site-footer a:hover{color:#fff;}

/* card */
.card{
  background:var(--mist-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition:box-shadow .2s, transform .2s;
}
a.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}

/* road shield badge (highway number tag) */
.shield{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--asphalt);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  padding:4px 10px;border-radius:5px;border:1.5px solid var(--amber);
  letter-spacing:.02em;
}

/* HUD overlay — signature element on video thumbnails */
.hud-frame{
  position:relative;
  background:linear-gradient(160deg,#1c1e22,#101113);
  overflow:hidden;
  color:#eae9e4;
}
.hud-frame::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
  pointer-events:none;
}
.hud-rec{
  position:absolute;top:10px;right:12px;
  display:flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--hud-green);
  text-shadow:0 0 6px rgba(78,232,160,.5);
}
.hud-rec .dot{
  width:7px;height:7px;border-radius:50%;background:#e8483c;
  box-shadow:0 0 6px rgba(232,72,60,.8);
  animation:hud-blink 1.4s ease-in-out infinite;
}
@keyframes hud-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hud-timestamp{
  position:absolute;bottom:10px;left:12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--hud-green);
  text-shadow:0 0 6px rgba(78,232,160,.4);line-height:1.5;
}
.hud-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-size:22px;
}

/* form controls */
label{font-size:13px;color:var(--slate);display:block;margin-bottom:6px;font-weight:500;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius);
  font-size:14px;font-family:inherit;background:#fff;color:var(--asphalt);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,162,60,.15);}
.field{margin-bottom:18px;}

/* grid helpers */
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}.site-header .nav-links{display:none;}}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;padding:3px 10px;border-radius:20px;
  background:var(--mist);color:var(--slate);border:1px solid var(--line);
}
.tag.status-pending{background:#fbeed9;color:var(--amber-dark);border-color:#f0d9ad;}
.tag.status-approved{background:#e2f0e8;color:var(--success);border-color:#c6e3d2;}
.tag.status-rejected{background:#f6e0dc;color:var(--danger);border-color:#eeccc4;}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hud-green-dim);font-weight:500;margin-bottom:10px;
}

.stat-num{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:30px;color:var(--asphalt);letter-spacing:-.01em;
}

.page-section{padding:44px 0;}

/* hero */
.hero{
  background:var(--asphalt);color:#fff;
  position:relative;overflow:hidden;
  padding:88px 0 96px;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(232,162,60,.35) 78px 82px,transparent 82px 160px);
  mask-image:linear-gradient(to bottom,transparent, rgba(0,0,0,.5) 40%, transparent 90%);
  opacity:.5;
}
.hero .wrap{position:relative;z-index:1;}
.hero-hud{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--hud-green);
  background:rgba(78,232,160,.08);border:1px solid rgba(78,232,160,.3);
  padding:6px 14px;border-radius:20px;margin-bottom:22px;
}
.hero-hud .dot{width:6px;height:6px;border-radius:50%;background:var(--hud-green);animation:hud-blink 1.4s ease-in-out infinite;}