/* EVStudio 共用樣式 —— 品牌 token 單一來源。
   設計稿落地時只改此檔的 token，不要在各頁散寫色值。 */

:root{
  /* --- 品牌固定色：logo 專用，不隨主題變 --- */
  --brand-green:#30d158;
  --brand-amber:#ffb020;
  --brand-red:#f43f5e;
  --brand-white:#f2f4f8;
  --brand-gray:#515358;

  /* --- 主題感知色：UI 元素一律用這組 ---
     淺底直接用品牌原色會過不了 WCAG AA（#FFB020 on white 僅約 1.9:1），
     故淺色主題整組加深。設計稿同一處理。 */
  --gk:#146c36;   /* 綠 on white ≈ 6.4:1 */
  --ak:#8a5b00;   /* 琥珀 on white ≈ 5.9:1 */
  --rk:#be123c;   /* 紅 on white ≈ 6.2:1 */
  --gsoft:rgba(20,108,54,.10);
  --asoft:rgba(138,91,0,.10);
  --rsoft:rgba(190,18,60,.08);

  /* --- 淺色主題 --- */
  --bg:#ffffff;
  --bg2:#f5f6f9;
  --bg3:#eceef3;
  --surface:var(--bg2);
  --ink:#141821;
  --ink-2:#5b6270;
  --ink-3:#6a7180;   /* 設計稿淺色為 #858C9B，實測 on white 僅 3.38:1，加深至 ≈4.9:1 過 AA */
  --line:rgba(16,21,31,.13);
  --line-2:rgba(16,21,31,.07);
  --cardsh:0 20px 44px -30px rgba(16,21,31,.20);
  --link:var(--gk);
  --focus:var(--gk);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gk:#30d158;
    --ak:#ffb020;
    --rk:#f43f5e;
    --gsoft:rgba(48,209,88,.13);
    --asoft:rgba(255,176,32,.13);
    --rsoft:rgba(244,63,94,.12);
    --bg:#0d0f13;
    --bg2:#12151c;
    --bg3:#191d27;
    --surface:var(--bg2);
    --ink:#e9ecf2;
    --ink-2:#9aa2b0;
    --ink-3:#6c7382;
    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.06);
    --cardsh:0 24px 60px -32px rgba(0,0,0,.6);
    --link:var(--gk);
    --focus:var(--gk);
  }
}

:root[data-theme="dark"]{
  --gk:#30d158;
  --ak:#ffb020;
  --rk:#f43f5e;
  --gsoft:rgba(48,209,88,.13);
  --asoft:rgba(255,176,32,.13);
  --rsoft:rgba(244,63,94,.12);
  --bg:#0d0f13;
  --bg2:#12151c;
  --bg3:#191d27;
  --surface:var(--bg2);
  --ink:#e9ecf2;
  --ink-2:#9aa2b0;
  --ink-3:#6c7382;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --cardsh:0 24px 60px -32px rgba(0,0,0,.6);
  --link:var(--gk);
  --focus:var(--gk);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:3px}

/* ---------- 版面 ---------- */
.page{max-width:760px; margin:0 auto; padding:0 24px 96px}

.skip{position:absolute; left:-9999px}
.skip:focus{
  left:24px; top:16px; z-index:10; position:fixed;
  background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:10px; border:1px solid var(--line);
}

/* ---------- 頁首 ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
  padding:26px 0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.lockup{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit}
.lockup img{width:38px; height:38px; display:block}
.lockup .name{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:700; font-size:23px; letter-spacing:-.02em; line-height:1.1;
}
.lockup .tag{
  font-size:10.5px; font-weight:700; letter-spacing:.42em;
  color:var(--ink-2); margin-top:3px;
}
.masthead nav{display:flex; gap:16px; font-size:13px}
.masthead nav a{color:var(--ink-2); text-decoration:none}
.masthead nav a:hover{color:var(--ink); text-decoration:underline}

/* ---------- 內文 ---------- */
h1{
  font-size:clamp(25px,5vw,32px); font-weight:700; line-height:1.4;
  margin:0 0 10px; letter-spacing:-.01em;
}
.updated{margin:0 0 30px; font-size:13.5px; color:var(--ink-3)}

h2{
  font-size:clamp(18px,3.4vw,20px); font-weight:700; line-height:1.5;
  margin:52px 0 14px; padding-top:14px; border-top:1px solid var(--line);
  scroll-margin-top:20px;
}

p{margin:0 0 18px}

ul{margin:0 0 18px; padding-left:0; list-style:none}
ul li{
  position:relative; margin-bottom:16px; padding-left:20px;
}
ul li::before{
  content:""; position:absolute; left:2px; top:.85em;
  width:6px; height:6px; border-radius:50%; background:var(--gk);
}
ul li strong{color:var(--ink)}

.lede{
  color:var(--ink-2); font-size:15px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px 22px; margin:0 0 26px;
}

/* ---------- 回報表單（support / support-en） ---------- */
.fb-form{
  display:grid; gap:14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; margin:0 0 26px;
}
.fb-form label{display:grid; gap:6px; font-size:14px; font-weight:500; color:var(--ink)}
.fb-form input,.fb-form select,.fb-form textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  width:100%; box-sizing:border-box;
}
.fb-form textarea{resize:vertical; min-height:140px; line-height:1.6}
.fb-form input:focus-visible,.fb-form select:focus-visible,.fb-form textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
.fb-hint{font-size:12.5px; color:var(--ink-3); font-weight:400; margin:0}
.fb-hint a{color:var(--link)}
.fb-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fb-submit{
  justify-self:start; font:inherit; font-weight:700; font-size:15px;
  color:var(--bg); background:var(--gk);
  border:0; border-radius:10px; padding:11px 20px; cursor:pointer;
}
.fb-submit:disabled{opacity:.6; cursor:default}
.fb-submit:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.fb-status{margin:0; font-size:14px; color:var(--ink-2); min-height:1.4em}

/* ---------- 目錄 ---------- */
.toc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:20px 24px; margin:0 0 40px;
}
.toc h2{
  font-size:12px; letter-spacing:.2em; color:var(--ink-3);
  margin:0 0 12px; padding:0; border:0; font-weight:700;
}
.toc ol{margin:0; padding-left:20px; font-size:14.2px; line-height:1.95}
.toc li{margin:0}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--link); text-decoration:underline}

/* ---------- FAQ ---------- */
details{
  border:1px solid var(--line); border-radius:12px;
  padding:0 20px; margin-bottom:12px; background:var(--surface);
}
details[open]{padding-bottom:6px}
summary{
  cursor:pointer; padding:16px 0; font-weight:500; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+"; color:var(--ink-3); font-size:19px; flex:none; line-height:1;
}
details[open] summary::after{content:"−"}
summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px}
details p:last-child{margin-bottom:16px}

/* ---------- 頁尾 ---------- */
.foot{
  margin-top:64px; padding-top:24px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.foot nav{display:flex; gap:14px; flex-wrap:wrap}
.foot a{color:var(--ink-3)}
.foot a:hover{color:var(--ink-2)}

@media (max-width:600px){
  body{font-size:15.5px}
  .page{padding:0 18px 72px}
  .masthead{margin-bottom:34px}
  h2{margin-top:42px}
}