/* 版面骨架。所有顏色／圓角／陰影／字體都從 theme.css 的變數來，
   這裡不寫死任何色碼，換主題才不用動這個檔。 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff);background:var(--bg);color:var(--ink);
  font-size:17px;line-height:1.7;
  overflow-x:hidden;              /* 保險：任何主題都不該有橫向捲動 */
}
.wrap{max-width:640px;margin:0 auto;padding:22px 18px 60px}
.wrap.wide{max-width:1080px}

/* 標頭 */
.top{padding:26px 0 18px;border-bottom:var(--bw) solid var(--line)}
.kicker{font-size:13px;font-weight:900;letter-spacing:.16em;color:var(--yellow);text-transform:uppercase}
h1{font-size:31px;font-weight:900;margin:8px 0 0;line-height:1.32;letter-spacing:-.01em;
  font-family:var(--ff-title);overflow-wrap:anywhere}
.sub{margin-top:7px;color:var(--gray);font-weight:700;font-size:15px}
.intro{margin-top:16px;font-size:17px;font-weight:500;line-height:1.75}

/* 卡片 */
.card{
  background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:20px 18px;margin-top:16px;box-shadow:var(--sh-soft);
}
.q-title{font-size:19px;font-weight:900;line-height:1.5;overflow-wrap:anywhere}
.q-hint{margin-top:6px;font-size:14px;color:var(--gray);font-weight:600;line-height:1.6}
.req{color:var(--red);font-weight:900;margin-left:4px}
.q-num{
  display:inline-block;min-width:26px;height:26px;line-height:22px;text-align:center;
  border:2px solid var(--line);border-radius:9px;background:var(--yellow-pale);
  font-size:13px;font-weight:900;margin-right:9px;vertical-align:2px;
}

/* ── 選項按鈕（NPS／評分／單選共用外觀）── */
.nps button,.rating button,.choice button{
  border:2px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-weight:900;cursor:pointer;
  transition:transform .08s,background .12s,color .12s;
}
.nps button:active,.rating button:active,.choice button:active{transform:scale(.94)}
.nps button.on,.rating button.on,.choice button.on{
  background:var(--sel-bg);color:var(--sel-fg);box-shadow:0 0 0 3px var(--sel-ring);
}

/* NPS 0–10。
   注意：不要用 aspect-ratio 搭 min-height，那會逼出 11×40+gap≈490px 的最小寬度，
   在 390px 手機上格線縮不下去就會整排爆出去（2026-08-19 修）。 */
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;margin-top:15px}
.nps button{min-height:46px;padding:0;border-radius:10px;font-size:15px}
.scale-labels{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  font-size:12.5px;color:var(--gray);font-weight:700}

/* 評分：能換行，7 分制、10 分制在手機上才不會擠成一條 */
.rating{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.rating button{flex:1 1 52px;min-width:52px;min-height:50px;border-radius:12px;font-size:19px}
.na{margin-top:10px}
.na button{
  border:2px dashed var(--gray);background:transparent;color:var(--gray);
  border-radius:10px;padding:8px 14px;font-family:var(--ff);font-size:14px;font-weight:800;cursor:pointer;
}
.na button.on{border-style:solid;border-color:var(--line);background:var(--faint);color:var(--ink)}

/* 單選 */
.choice{display:grid;gap:9px;margin-top:15px}
.choice button{text-align:left;border-radius:12px;font-size:16px;font-weight:700;padding:12px 15px}

/* 文字 */
textarea,input[type=text],input[type=password]{
  width:100%;margin-top:14px;padding:13px 14px;border:2px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);font-family:var(--ff);font-size:16px;line-height:1.65;
  resize:vertical;
}
textarea{min-height:104px}
textarea:focus,input:focus{outline:none;box-shadow:0 0 0 3px var(--sel-ring)}

/* 送出 */
.submit{
  width:100%;margin-top:24px;padding:17px;border:var(--bw) solid var(--line);border-radius:15px;
  background:var(--ink);color:var(--paper);font-family:var(--ff);font-size:19px;font-weight:900;
  cursor:pointer;box-shadow:var(--sh-hard);
}
.submit:active{transform:translate(2px,2px)}
.submit[disabled]{opacity:.5;cursor:default}
.err{margin-top:13px;color:var(--red);font-weight:800;font-size:15px}
.note{margin-top:16px;font-size:13.5px;color:var(--gray);font-weight:600;text-align:center}

/* 狀態頁 */
.state{text-align:center;padding:70px 20px}
.state .big{font-size:52px}
.state h2{font-size:26px;font-weight:900;margin:14px 0 8px;font-family:var(--ff-title)}
.state p{color:var(--gray);font-weight:700}

/* ── 手機 ─────────────────────────────────────────────────────
   NPS 從 11 欄改成 6 欄，11 顆自然折成 6+5 兩排，每顆還有 50px 以上可以點。 */
@media (max-width:600px){
  .wrap{padding:18px 14px 52px}
  h1{font-size:26px}
  .card{padding:17px 15px;margin-top:13px}
  .q-title{font-size:18px}
  .nps{grid-template-columns:repeat(6,1fr);gap:7px}
  .nps button{min-height:52px;font-size:17px;border-radius:11px}
  .scale-labels{font-size:12px}
  .rating button{min-height:52px;font-size:18px}
  .submit{font-size:18px;padding:16px}
}
@media (max-width:360px){
  .nps{grid-template-columns:repeat(4,1fr)}   /* 4+4+3 三排 */
}