:root{
  --bg:#0b0c10; --bg2:#0e1117; --card:#151922; --text:#e7e9ee; --muted:#a7adb6;
  --line:rgba(255,255,255,.10); --accent:#7dd3fc; --accent2:#60a5fa;
  --ok:#22c55e; --err:#ef4444;
  --bg-light:#f6f8fb; --text-light:#0b1324; --card-light:#ffffff; --line-light:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial}
.theme-dark{background:radial-gradient(1200px 600px at 20% -10%, rgba(96,165,250,.15), transparent 50%), linear-gradient(0deg, var(--bg2), var(--bg)); color:var(--text)}
.theme-light{background:linear-gradient(180deg,#fff, var(--bg-light)); color:var(--text-light)}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; gap:16px; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(10,12,16,.55);
  min-height:56px;              /* 固定高度，避免切換時抖動 */
}
.theme-light .topbar{background:rgba(255,255,255,.8); border-bottom:1px solid var(--line-light)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.logo{height:22px}
.brand-text{display:flex; align-items:baseline; gap:6px}
.brand-main{font-weight:800; letter-spacing:.2px}
.brand-sub{opacity:.9; font-weight:700}
.dot{opacity:.5}

/* 工具列 */
.toolbar{
  display:flex; gap:12px; align-items:center;
  flex-wrap:nowrap;
}

/* 桌面：膠囊按鈕列 */
.mini-links{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--line); border-radius:12px;
  white-space:nowrap; flex-wrap:nowrap;
}
.mini-links a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; height:36px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line);
  background:transparent; color:inherit; text-decoration:none; line-height:1;
}
.mini-links a:hover{ background:rgba(255,255,255,.06) }

/* 行動端：下拉選單（桌面隱藏、行動顯示） */
.mini-links-mobile{ display:none; max-width:42vw }
.select,.btn-ghost{
  background:transparent; border:1px solid var(--line); color:inherit; border-radius:10px; padding:8px 10px
}
.theme-dark select{background:#0f1116; color:var(--text)}
.theme-dark option{background:#0f1116; color:var(--text)}
.theme-light select{background:#fff; color:var(--text-light)}
.theme-light option{background:#fff; color:var(--text-light)}

/* Hero */
.hero{padding:48px 0 24px}
.hero-inner{padding:0 16px}
.hero-badge{display:inline-flex; gap:8px; align-items:center; border:1px solid rgba(125,211,252,.35); border-radius:999px; padding:6px 10px; background:rgba(13,17,23,.6)}
.hb-dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent2),var(--accent))}
.hb-text{font-size:12px; color:#cfe7ff}
.hero-title{
  margin:10px 0 8px; font-size:28px; line-height:1.25;
  background:linear-gradient(135deg,#eaf2ff,#c7dbff); -webkit-background-clip:text; background-clip:text; color:transparent
}
.theme-light .hero-title{ background:none; color:#0b1324; text-shadow:0 1px 0 rgba(0,0,0,.04); font-weight:700 }
.hero-sub{max-width:760px; color:#b8c2cf}
.theme-light .hero-sub{color:#5a6676}

/* 卡片 / 表單 */
.card{
  margin:24px auto; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.35)
}
.theme-light .card{background:var(--card-light); border:1px solid var(--line-light); box-shadow:0 24px 60px rgba(14,22,35,.12)}
.form-head{margin-bottom:8px}
.form-title{margin:0 0 6px; font-size:18px}
.muted{color:var(--muted); font-size:13px}
.form label{display:block; margin:10px 0 6px}
input,textarea,select{width:100%; max-width:100%; background:transparent; color:inherit; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.theme-light input,.theme-light textarea,.theme-light select{border:1px solid var(--line-light)}
textarea{resize:vertical}
.req{color:#f59e0b}

/* Grid：不溢出 */
.grid-3{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cell{min-width:0}.span-3{grid-column:1/-1}

/* 進階 */
.section{margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:12px}
.section summary{cursor:pointer}

/* 按鈕 */
.actions{display:flex; gap:10px; align-items:center; margin-top:12px}
.btn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg,var(--accent2),var(--accent)); color:#0b0c10
}
.btn.ghost{background:transparent; color:inherit; border:1px solid var(--line)}

/* 結果 */
.err{display:none; margin-top:10px; color:#fecaca; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.35); padding:10px; border-radius:12px}
.result{margin-top:16px}
.summary{background:transparent; border:1px solid rgba(125,211,252,.35); border-radius:12px; padding:12px}
.body{white-space:pre-wrap; line-height:1.7; margin-top:10px}

/* 進度條 */
.progress{margin-top:12px}
.progress .bar{width:100%; height:10px; border-radius:999px; background:rgba(125,211,252,.15); overflow:hidden; border:1px solid rgba(125,211,252,.25)}
.progress .bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg,#60a5fa,#22d3ee)}
.progress .progress-text{margin-top:6px; font-size:12px; color:var(--muted)}

/* Footer */
.site-footer{margin-top:36px; border-top:1px solid var(--line); padding:18px 0}
.theme-light .site-footer{border-top:1px solid var(--line-light)}
.footer-inner{display:flex; align-items:center; justify-content:center}
.f-copy{opacity:.75; font-size:12px; text-align:center}

/* —— 響應式 —— */
@media (max-width:1024px){
  .mini-links-mobile{ display:block }   /* 平板顯示下拉；膠囊保留 */
  .mini-links{ gap:6px }
}
@media (max-width:820px){
  .mini-links{ display:none }           /* 手機只用下拉 */
  .mini-links-mobile{ display:block; max-width:56vw }
  .toolbar{ gap:8px }
  .select{ padding:6px 9px; font-size:13px }
  .btn-ghost{ padding:6px 9px }
  .hero{ padding:28px 0 16px }
  .card{ margin:16px auto; padding:16px }
}
@media (min-width:1200px){ .wrap{max-width:880px} }