:root{
  --bg:#070b12;--card:#111827;--card2:#0b1220;--text:#e5e7eb;
  --muted:#94a3b8;--line:#263244;--blue:#38bdf8;--green:#22c55e;
  --red:#ef4444;--amber:#fbbf24
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;
  background:radial-gradient(circle at top left,#172554 0,#070b12 40%,#05070b 100%);
  color:var(--text);
  font-family:"Microsoft JhengHei","Noto Sans TC","Segoe UI",sans-serif
}
a{color:inherit}
.top{
  position:sticky;top:0;z-index:30;
  background:rgba(7,11,18,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.topin{
  max-width:1080px;margin:auto;padding:12px 18px;
  display:flex;align-items:center;gap:12px
}
.brand{font-size:20px;font-weight:950;text-decoration:none}.brand a{color:inherit;text-decoration:none}
.brand span{color:#7dd3fc}
.sub{color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.sp{flex:1}
.btn{
  border:1px solid var(--line);border-radius:12px;padding:9px 14px;
  background:var(--card2);color:var(--text);font-weight:900;
  text-decoration:none;cursor:pointer
}
.btn.primary{background:#2563eb;border-color:#2563eb}
.btn:disabled{opacity:.45;cursor:not-allowed}
main{max-width:1080px;margin:auto;padding:26px 18px 70px}
.hero,.qcard,.card,.unit{
  background:rgba(17,24,39,.94);border:1px solid var(--line);
  border-radius:20px;box-shadow:0 14px 34px rgba(0,0,0,.28)
}
.hero{padding:22px;margin-bottom:15px}
.hero h1{margin:0 0 8px;font-size:clamp(24px,4vw,36px)}
.hero p{margin:0;color:#cbd5e1;line-height:1.75}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.pill{
  border:1px solid #334155;border-radius:999px;padding:5px 10px;
  color:#cbd5e1;font-size:13px;background:#0b1220
}
.progresshead{
  display:flex;justify-content:space-between;color:#cbd5e1;
  font-size:14px;margin:15px 0 7px
}
.progress{
  height:10px;border-radius:99px;background:#0b1220;
  border:1px solid var(--line);overflow:hidden
}
.bar{
  height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#22c55e);
  transition:.2s
}
.qcard{padding:21px;margin-top:15px}
.qmeta{font-size:14px;color:#7dd3fc;font-weight:950}
.qtext{font-size:clamp(20px,3vw,27px);line-height:1.7;margin:12px 0 18px}
.choices{display:grid;gap:10px}
.choice{
  width:100%;display:flex;gap:12px;text-align:left;background:#0b1220;
  color:var(--text);border:1px solid #334155;border-radius:14px;
  padding:13px 15px;font-size:17px;line-height:1.55;cursor:pointer
}
.choice:disabled{cursor:default;opacity:1}
.choice:hover,.choice.sel{border-color:#38bdf8}
.choice.ok{border-color:#22c55e;background:rgba(34,197,94,.12)}
.choice.bad{border-color:#ef4444;background:rgba(239,68,68,.12)}
.key{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#172033;border:1px solid #334155;
  flex:0 0 auto;font-weight:950
}
.feedback{
  margin-top:15px;padding:13px 15px;border:1px solid #334155;
  border-radius:13px;background:#0b1220;line-height:1.75
}
.actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:18px
}
.note{color:var(--muted);font-size:13px;line-height:1.6}
.hidden{display:none!important}
.report{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:15px
}
.card{padding:17px}
.card h3{margin:0 0 10px}
.score{font-size:48px;color:#7dd3fc;font-weight:950}
.row{margin:11px 0}
.rowhead{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.skillbar{
  height:8px;background:#0b1220;border:1px solid #263244;
  border-radius:99px;overflow:hidden
}
.skillfill{height:100%;background:linear-gradient(90deg,#38bdf8,#22c55e)}
.item{
  padding:11px;border:1px solid #263244;border-radius:12px;
  background:#0b1220;margin:8px 0;line-height:1.6
}
.item a{color:#7dd3fc;font-weight:900}
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:14px
}
.unit{display:block;padding:17px;text-decoration:none;transition:.15s}
.unit:hover{transform:translateY(-2px);border-color:#38bdf8}
.unit h2{font-size:18px;margin:0 0 8px}
.unit p{margin:0;color:#cbd5e1;line-height:1.55}
.unit small{display:block;margin-top:10px;color:#fde68a}
@media(max-width:680px){
  .sub{display:none}
  .actions{flex-direction:column;align-items:stretch}
  .actions>*{width:100%}
  .qcard{padding:16px}
  .choice{font-size:16px}
}