/*
 * ATM 公開首頁
 *
 * 設計語言跟系統內部一致：賽車遙測儀表板 / 監控台，
 * 但對外頁面把能量開大：藍黑機艙底 + 兩團訊號輝光，
 * 重點色由「訊號橙 → 洋紅 → 青」組成一條賽車霓虹光譜——
 * 橙做行動（按鍵、標題），洋紅做強調，青做讀數與數據。
 * 跑道畫布仍然保留真實跑道的紅膠面與草綠內場。
 */
:root{
  color-scheme:dark;
  /* 機艙底色：帶藍的黑，比純黑更有深度 */
  --bg-1:#04070f;
  --bg-2:#070d1a;
  --bg-3:#0a1222;
  --paper:#070d1a;
  --white:#0d1526;      /* 面板底色 */
  --panel-2:#111c31;    /* 面板亮一階（hover / 表頭） */

  /* 文字與線條 */
  --ink:#f2f6fb;
  --body:#aebbd0;
  --mute:#7d8ca6;
  --rule:#1c2740;
  --rule2:rgba(255,255,255,.14);

  /* 賽車霓虹光譜 */
  --accent:#ff6b35;     /* 訊號橙：行動 */
  --accent-2:#ff2e7e;   /* 洋紅：強調 */
  --accent-3:#22d3ee;   /* 青：讀數與數據 */
  --accent-ink:#0b0f14;
  --accent-soft:rgba(255,107,53,.14);
  --neon:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 52%,var(--accent-3) 100%);

  /* 深色區塊（結尾 / 頁尾） */
  --deep-1:#0a1222;
  --deep-2:#04070f;

  /* 跑道本身的顏色，只供畫布與圖例使用 */
  --track:#bf4029;
  --line:#ffffff;
  --infield:#4f8b4a;

  /* 儀器盤方格底紋 */
  --grid-line:rgba(120,180,255,.055);

  --mono:"JetBrains Mono","Cascadia Mono","SF Mono",Consolas,"Roboto Mono",ui-monospace,monospace;
  --max:1200px;
}
*{box-sizing:border-box}
/* hidden 屬性要壓得過下面那些 display:flex／grid 的規則，否則彈窗關不掉 */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  /* 方格底紋 + 左上訊號橙、右下青色兩團輝光，讓深色底不會死板 */
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    radial-gradient(80% 60% at 8% -6%,rgba(255,107,53,.16) 0%,transparent 62%),
    radial-gradient(70% 60% at 100% 12%,rgba(255,46,126,.12) 0%,transparent 60%),
    radial-gradient(90% 70% at 88% 96%,rgba(34,211,238,.10) 0%,transparent 62%),
    linear-gradient(168deg,var(--bg-1) 0%,var(--bg-2) 52%,var(--bg-3) 100%);
  background-size:32px 32px,32px 32px,auto,auto,auto,auto;
  background-attachment:fixed;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
a{color:inherit}
img{max-width:100%}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- 共用 */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 14px;font-family:var(--mono);
}
/* 每個小標前面一顆亮著的訊號燈 */
.kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:currentColor;box-shadow:0 0 8px currentColor;
}
.kicker.on-dark{color:rgba(255,255,255,.62)}
.hero .kicker.on-dark{color:var(--accent)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.25}
/* 大標題用霓虹漸層字，襯不到漸層的瀏覽器會退回亮字 */
.hero h1,.cta h2{
  background:linear-gradient(96deg,#fff 0%,#ffd9c7 26%,var(--accent) 58%,var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
h1{font-size:clamp(30px,4.4vw,52px)}
h2{font-size:clamp(23px,2.8vw,34px)}
h3{font-size:17px;line-height:1.5}
p{margin:0}
.lead{font-size:clamp(15px,1.6vw,18px);color:var(--body);line-height:1.85}
.arrow{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:700;color:var(--accent-3);
  border-bottom:1px solid transparent;transition:border-color .18s,gap .18s;
}
.arrow::after{content:"→"}
.arrow:hover{border-color:currentColor;gap:12px}
.arrow.on-dark{color:#fff}
.hero .arrow.on-dark{color:var(--accent)}

/* ------------------------------------------------- 起跑架風格的登入鍵 */
.signin{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border:0;border-radius:3px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;color:#fff;
  background:linear-gradient(96deg,var(--accent) 0%,var(--accent-2) 100%);
  box-shadow:0 0 22px rgba(255,107,53,.42),0 0 42px rgba(255,46,126,.22);
  transition:transform .16s,box-shadow .16s,background .16s;
}
.signin::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(100deg,
    transparent 0 13px,rgba(255,255,255,.22) 13px 16px);
  transform:translateX(-115%);transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.signin::after{content:"›››";font-size:12px;letter-spacing:.08em;transition:transform .25s}
.signin:hover{transform:translateY(-1px);
  background:linear-gradient(96deg,#ff8348 0%,#ff4a90 100%);
  box-shadow:0 0 30px rgba(255,107,53,.6),0 0 60px rgba(255,46,126,.35)}
.signin:hover::before{transform:translateX(0)}
.signin:hover::after{transform:translateX(4px)}
.signin:active{transform:translateY(0)}
.signin:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------------- 頁首 */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(8,11,16,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:68px}
.brand{font-weight:700;letter-spacing:.14em;text-decoration:none;font-size:17px;
  font-family:var(--mono)}
.brand i{font-style:normal;color:var(--accent-3);margin:0 4px;
  text-shadow:0 0 10px rgba(34,211,238,.7)}
.top nav{display:flex;align-items:center;gap:26px}
.top nav a{font-size:14px;text-decoration:none;color:var(--body);transition:color .16s}
.top nav a:hover{color:var(--accent-3)}
.top nav .signin{color:#fff}
/* 頁首下緣的霓虹光譜條 */
.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--neon);
  box-shadow:0 0 14px rgba(255,107,53,.5);
}

/* ---------------------------------------------------------------- 主視覺 */
.hero{
  position:relative;
  background:
    radial-gradient(78% 120% at 14% 4%,rgba(255,107,53,.20) 0%,transparent 60%),
    radial-gradient(60% 100% at 96% 88%,rgba(34,211,238,.16) 0%,transparent 62%),
    linear-gradient(150deg,#0c1425 0%,#080e1c 55%,#04070f 100%);
  border-bottom:1px solid transparent;
}
/* 主視覺下緣的霓虹分隔線 */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--neon);opacity:.75;
}
.hero .wrap{
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  padding-top:72px;padding-bottom:64px;
}
.hero h1{margin-bottom:20px}
.hero .lead{max-width:32em}
.acts{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}

.hero-foot{border-top:1px solid var(--rule);background:rgba(10,18,34,.6)}
.hero-foot .wrap{display:flex;align-items:baseline;gap:18px;
  padding-top:14px;padding-bottom:14px;font-size:12px;color:var(--mute);
  font-family:var(--mono);letter-spacing:.04em}
.hero-foot strong{color:var(--accent-3);font-weight:700;letter-spacing:.01em}

/* ------------------------------------------------------------ 跑道畫布 */
.hero-track{display:flex;flex-direction:column;gap:14px}
.track-stage{
  position:relative;height:clamp(320px,50vh,470px);
  border-radius:4px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%,#132038 0%,#0b1524 60%,#04070f 100%);
  border:1px solid rgba(255,107,53,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(34,211,238,.10),
    0 0 60px rgba(255,107,53,.22),
    0 24px 60px rgba(0,0,0,.6);
}
#track-hero{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
#track-hero:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.track-fallback{padding:24px;color:var(--body);font-size:14px}

.track-call{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .18s;
  font-size:clamp(26px,4.4vw,46px);font-weight:800;letter-spacing:.04em;
  color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.6);
}
.track-call.show{opacity:1;animation:pop .28s cubic-bezier(.2,.9,.3,1)}
.track-call.go{color:#c9f5d4}
.track-call.foul{color:#ffd7cf;font-size:clamp(18px,2.6vw,30px)}
@keyframes pop{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}

/* 完成成績卡：蓋在跑道上，按「再來」才收 */
.track-finish{
  position:absolute;inset:0;z-index:2;display:none;align-items:center;
  justify-content:center;padding:16px;
  background:rgba(4,7,11,.66);backdrop-filter:blur(3px);
}
.track-finish.show{display:flex;animation:finish-in .22s ease-out}
.finish-card{
  width:min(420px,100%);max-height:100%;overflow:auto;text-align:center;
  padding:22px 24px 24px;border-radius:4px;
  background:var(--white);border:1px solid rgba(255,107,53,.3);
  border-top:2px solid transparent;border-image:var(--neon) 1;
  box-shadow:0 0 60px rgba(255,46,126,.22),0 24px 60px rgba(0,0,0,.65);
  animation:pop .28s cubic-bezier(.2,.9,.3,1);
}
.finish-kicker{
  margin:0;font-size:11px;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);
}
.finish-title{margin:6px 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.finish-time{
  margin:6px 0 14px;font-size:clamp(40px,7vw,60px);font-weight:600;
  line-height:1;letter-spacing:-.03em;color:var(--accent-3);
  text-shadow:0 0 26px rgba(34,211,238,.5);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.finish-time i{font-style:normal;font-size:18px;color:var(--mute);margin-left:4px}
.finish-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px;
}
.finish-stats>div{
  padding:8px 10px;border-radius:3px;background:var(--accent-soft);
  border:1px solid rgba(255,107,53,.22);text-align:left;
}
.finish-stats dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute)}
.finish-stats dd{margin:2px 0 0;font-size:14px;font-weight:800;color:var(--ink);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.finish-splits{
  list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;
}
.finish-splits li{
  display:flex;align-items:baseline;justify-content:space-between;gap:4px;
  padding:4px 7px;border-radius:4px;border:1px solid var(--rule);
  font-size:11px;font-variant-numeric:tabular-nums;
}
.finish-splits b{color:var(--mute);font-weight:600}
.finish-splits span{font-weight:600;color:var(--ink);font-family:var(--mono)}
.finish-note{margin:0 0 14px;font-size:12px;line-height:1.7;color:var(--mute)}
@keyframes finish-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .track-finish,.finish-card{animation:none}
}

.tapbar{display:flex;align-items:center;gap:12px}
.tapbar .rail{
  flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);
  border:1px solid var(--rule);overflow:hidden;
}
.tapbar .fill{
  height:100%;width:0;border-radius:3px;
  background:var(--neon);
  box-shadow:0 0 12px rgba(255,107,53,.6);
  transition:width .06s linear;
}
.tapbar .n{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;
  font-family:var(--mono);min-width:96px;text-align:right}

.track-panel{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.readouts{display:flex;gap:22px;flex-wrap:wrap}
.readouts>div{display:flex;align-items:baseline;gap:5px}
.readouts .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-right:3px;font-family:var(--mono)}
.readouts .v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--accent-3);font-family:var(--mono);
  text-shadow:0 0 14px rgba(34,211,238,.45)}
.readouts .v.p{font-size:15px;color:var(--accent-2);
  text-shadow:0 0 14px rgba(255,46,126,.45)}
.readouts i{font-style:normal;font-size:11px;color:var(--mute)}

.track-acts{display:flex;align-items:center;gap:10px}
.ghost{
  padding:11px 18px;border-radius:3px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:700;color:var(--body);
  background:transparent;border:1px solid var(--rule);
  transition:border-color .16s,color .16s,background .16s;
}
.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.splits{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;
}
.splits li{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:5px 9px;border-radius:4px;background:var(--white);
  border:1px solid var(--rule);font-size:12px;font-variant-numeric:tabular-nums;
}
.splits b{color:var(--mute);font-weight:600}
.splits span{font-weight:600;color:var(--accent-3);font-family:var(--mono)}
.track-note{font-size:12px;color:var(--mute);line-height:1.7}

/* ---------------------------------------------------------------- 區塊 */
section{position:relative;padding:84px 0;border-top:1px solid var(--rule)}
/* 每個區塊上緣一段由左向右淡出的霓虹線 */
section::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:min(420px,42%);
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 55%,transparent 100%);
  box-shadow:0 0 12px rgba(255,107,53,.45);
}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  margin-bottom:44px}
.sec-head h2{margin-bottom:0}

/* 四個階段 */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.phase{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--white) 100%);
  border:1px solid var(--rule);border-radius:4px;
  padding:24px 22px 20px;transition:transform .18s,box-shadow .18s,border-color .18s;
}
/* 卡片頂緣的霓虹線，滑過時整條亮起來 */
.phase::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--neon);opacity:.35;transition:opacity .18s;
}
.phase:hover{transform:translateY(-3px);border-color:rgba(255,107,53,.5);
  box-shadow:0 0 0 1px rgba(255,107,53,.25),0 14px 40px rgba(255,46,126,.16)}
.phase:hover::before{opacity:1}
.phase .m{
  font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--accent-3);
  font-family:var(--mono);font-variant-numeric:tabular-nums;margin-bottom:10px;
}
.phase h3{margin-bottom:10px}
.phase p{font-size:14px;color:var(--body);line-height:1.8}
.phase .cue{
  margin-top:16px;padding-top:12px;border-top:1px dashed var(--rule);
  font-size:11px;letter-spacing:.06em;color:var(--mute);
  font-family:var(--mono);
}

/* ------------------------------------------------------------ 術語表 */
.gloss-bar{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:8px 15px;border-radius:3px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:700;color:var(--body);
  background:var(--panel-2);border:1px solid var(--rule);
  transition:background .16s,color .16s,border-color .16s,box-shadow .16s;
}
.chip b{font-weight:800;color:var(--mute);margin-left:4px;font-size:11px}
.chip:hover{border-color:var(--accent-3);color:var(--accent-3);
  box-shadow:0 0 14px rgba(34,211,238,.22)}
.chip[aria-pressed="true"]{background:linear-gradient(96deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;box-shadow:0 0 18px rgba(255,107,53,.35)}
.chip[aria-pressed="true"] b{color:rgba(255,255,255,.75)}

.gloss-search{display:flex;align-items:center;gap:12px}
.gloss-search input{
  width:220px;padding:9px 14px;border-radius:3px;font:inherit;font-size:13px;
  color:var(--ink);background:var(--bg-1);border:1px solid var(--rule);
}
.gloss-search input:focus{outline:none;border-color:var(--accent-3);
  box-shadow:0 0 0 2px rgba(34,211,238,.28),0 0 18px rgba(34,211,238,.18)}
.gloss-count{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;
  font-family:var(--mono)}

.gloss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.term{background:var(--white);border:1px solid var(--rule);border-radius:4px;
  transition:border-color .16s}
.term:hover{border-color:rgba(34,211,238,.4)}
.term-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:13px 16px;background:none;border:0;cursor:pointer;
  font:inherit;text-align:left;color:inherit;border-radius:4px;
}
.term-btn>span:first-child{display:flex;flex-direction:column;gap:2px}
.t-en{font-size:14px;font-weight:800;letter-spacing:-.005em}
.t-zh{font-size:13px;color:var(--body)}
.term-cat{
  flex:none;font-size:11px;color:var(--accent-3);padding:3px 9px;border-radius:3px;
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.24);
  font-family:var(--mono);
}
.term-btn[aria-expanded="true"]{background:rgba(34,211,238,.08);border-radius:3px 3px 0 0}
.term-note{
  margin:0;padding:12px 16px 14px;font-size:13px;color:var(--body);
  line-height:1.75;border-top:1px dashed var(--rule);
}
.gloss-pager{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;
}
.page-btn{
  min-width:34px;padding:7px 11px;border-radius:3px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--body);
  background:var(--white);border:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
}
.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.page-btn:disabled{opacity:.4;cursor:default}
.page-btn.is-current{background:linear-gradient(96deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff}
.gloss-empty{margin-top:18px;font-size:14px;color:var(--mute)}

/* ------------------------------------------------------------ 系統流程 */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px}
.step{
  position:relative;
  background:linear-gradient(180deg,var(--panel-2) 0%,var(--white) 100%);
  border:1px solid var(--rule);border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--accent),var(--accent-2)) 1;
  border-radius:0;padding:24px 22px;
}
.step .n{
  font-family:var(--mono);
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent-3);
  text-shadow:0 0 12px rgba(34,211,238,.45);margin-bottom:12px;
}
.step h3{margin-bottom:10px}
.step p{font-size:14px;color:var(--body);line-height:1.8}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.cols h3{margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--accent),var(--accent-2),transparent) 1}
.cols p{font-size:14px;color:var(--body);line-height:1.85}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--rule);text-align:left}
.tbl th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-3);
  font-family:var(--mono);background:rgba(34,211,238,.06)}
.tbl td{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 結尾 */
.cta{
  position:relative;
  background:
    radial-gradient(60% 110% at 84% 14%,rgba(255,46,126,.22) 0%,transparent 60%),
    radial-gradient(60% 110% at 10% 90%,rgba(34,211,238,.16) 0%,transparent 62%),
    linear-gradient(155deg,var(--deep-1) 0%,var(--deep-2) 100%);
  color:#fff;
}
.cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--neon);box-shadow:0 0 18px rgba(255,46,126,.5);
}
.cta .wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding-top:76px;padding-bottom:76px;
}
.cta h2{margin-bottom:16px}
.cta p{color:rgba(255,255,255,.72);font-size:15px;line-height:1.85}
.cta .box{
  background:rgba(255,255,255,.05);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 50px rgba(34,211,238,.12);
  border-radius:4px;padding:30px 28px;
}
.cta .box p{margin-bottom:20px;color:rgba(255,255,255,.8);font-size:14px}
.cta .signin{color:#fff}
.cta .signin::before{background:repeating-linear-gradient(100deg,
  transparent 0 13px,rgba(255,255,255,.2) 13px 16px)}
.cta .signin:hover{color:#fff}

footer{
  position:relative;
  background:var(--deep-2);color:rgba(255,255,255,.55);
  padding:26px 0;font-size:13px;
  border-top:1px solid var(--rule);
}
footer .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
footer a{text-decoration:none;transition:color .16s}
footer a:hover{color:var(--accent-3)}

/* ---------------------------------------------------------------- RWD */
@media (max-width:960px){
  .hero .wrap,.cta .wrap,.sec-head{grid-template-columns:1fr;gap:32px}
  .hero .wrap{padding-top:48px;padding-bottom:44px}
  .sec-head{align-items:start}
  .phases,.flow{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr;gap:26px}
  .gloss-grid{grid-template-columns:1fr}
  .top nav{gap:16px}
  .top nav a:not(.signin){display:none}
  section{padding:60px 0}
  .track-stage{height:clamp(280px,60vw,380px)}
  .gloss-search input{width:100%}
  .gloss-search{width:100%}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .phases,.flow{grid-template-columns:1fr}
  .readouts{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ================================================================ 淺色主題
 * 訪客可以在頁首切換。淺色是「白天的維修區資料板」：紙白底、藍灰髮絲線，
 * 霓虹光譜照樣在——只是把輝光收細、青與洋紅壓深一階才夠對比。
 * 跑道畫布、結尾區與頁尾一律維持深色：它們是螢幕，不是紙。
 */
:root[data-theme="light"]{
  color-scheme:light;
  --bg-1:#eef1f7;
  --bg-2:#e8edf5;
  --bg-3:#e1e8f2;
  --paper:#f4f7fb;
  --white:#ffffff;
  --panel-2:#f5f8fc;

  --ink:#0d1524;
  --body:#3d4b60;
  --mute:#6b7b91;
  --rule:#d5dde9;
  --rule2:rgba(0,0,0,.14);

  --accent:#ee5a20;
  --accent-2:#e11d74;
  --accent-3:#0e8fab;
  --accent-ink:#ffffff;
  --accent-soft:rgba(238,90,32,.10);

  --grid-line:rgba(30,80,140,.055);
}
:root[data-theme="light"] body{
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    radial-gradient(80% 60% at 8% -6%,rgba(255,107,53,.13) 0%,transparent 62%),
    radial-gradient(70% 60% at 100% 12%,rgba(255,46,126,.09) 0%,transparent 60%),
    radial-gradient(90% 70% at 88% 96%,rgba(14,143,171,.10) 0%,transparent 62%),
    linear-gradient(168deg,var(--bg-1) 0%,var(--bg-2) 52%,var(--bg-3) 100%);
  background-size:32px 32px,32px 32px,auto,auto,auto,auto;
  background-attachment:fixed;
}
:root[data-theme="light"] .top{background:rgba(255,255,255,.86)}
:root[data-theme="light"] .top nav .signin{color:#fff}
:root[data-theme="light"] .hero{
  background:
    radial-gradient(78% 120% at 14% 4%,rgba(255,107,53,.16) 0%,transparent 60%),
    radial-gradient(60% 100% at 96% 88%,rgba(14,143,171,.14) 0%,transparent 62%),
    linear-gradient(150deg,#ffffff 0%,#eff3f9 55%,#e6ecf5 100%);
}
/* 淺色底要反過來由深到亮；結尾區仍是深底，沿用原本的白→橙漸層 */
:root[data-theme="light"] .hero h1{
  background:linear-gradient(96deg,var(--ink) 0%,#7a2c12 26%,var(--accent) 58%,var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;
}
:root[data-theme="light"] .hero-foot{background:rgba(255,255,255,.72)}
:root[data-theme="light"] .kicker.on-dark{color:var(--mute)}
:root[data-theme="light"] .arrow.on-dark{color:var(--accent)}
:root[data-theme="light"] .phase,
:root[data-theme="light"] .step,
:root[data-theme="light"] .term{box-shadow:0 1px 2px rgba(13,21,36,.05)}
:root[data-theme="light"] .phase:hover{
  box-shadow:0 0 0 1px rgba(238,90,32,.25),0 14px 34px rgba(225,29,116,.12)}
/* 結尾區與頁尾維持深色機艙，字色不跟著淺色主題走 */
:root[data-theme="light"] .cta{color:#fff}
:root[data-theme="light"] .cta .kicker{color:#ff8f5a}
:root[data-theme="light"] .cta p{color:rgba(255,255,255,.72)}

/* ------------------------------------------------------ 主題切換鍵 */
.themebtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  font:inherit;font-size:15px;line-height:1;
  color:var(--body);background:var(--panel-2);
  border:1px solid var(--rule);border-radius:3px;
  transition:color .16s,border-color .16s,box-shadow .16s;
}
.themebtn:hover{color:var(--accent-3);border-color:var(--accent-3);
  box-shadow:0 0 14px rgba(34,211,238,.22)}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root[data-theme="dark"] .light-only{display:none}
:root:not([data-theme="dark"]) .dark-only{display:none}

/* ---------------------------------------------------- 語言切換 */
.langpick{display:inline-flex;align-items:center;margin:0}
.langpick select{
  height:34px;padding:0 6px;cursor:pointer;
  font:inherit;font-size:12px;line-height:1;
  color:var(--body);background:var(--panel-2);
  border:1px solid var(--rule);border-radius:3px;
}
.langpick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}