/* 课堂互动台 · 统一样式。学员手机页浅色（教室灯光下看得清），大屏与讲师后台深色金色（和课件一致） */
:root {
  --bg: #f6f1e7; --bg2: #efe7d6; --card: #fffdf8; --ink: #1f1a12; --ink2: #5d5446; --ink3: #8f8571;
  --line: #e4d9c3; --gold: #b07f22; --gold2: #d9a441; --gold-wash: #f6e7c4; --ok: #2f8f5b; --bad: #c7483a; --blue: #2f6db5;
  --shadow: 0 1px 2px rgba(60, 40, 10, .06), 0 6px 20px rgba(60, 40, 10, .07);
  --r: 16px; --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.dark {
  --bg: #0b0a08; --bg2: #14120e; --card: #17140f; --ink: #f3eee3; --ink2: #c9bfab; --ink3: #8a8070;
  --line: #3a3224; --gold: #e8c672; --gold2: #f3d58e; --gold-wash: rgba(232, 198, 114, .12); --ok: #6fd39a; --bad: #ff8473; --blue: #7fb3ff;
  --shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); }
body { min-height: 100vh; font-size: 16px; line-height: 1.55; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
.hide { display: none !important; }
.muted { color: var(--ink3); } .gold { color: var(--gold); } .ok { color: var(--ok); } .bad { color: var(--bad); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 16px; background: var(--ink); color: var(--bg); transition: transform .12s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn.gold { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #1b1305; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; background: var(--gold-wash); color: var(--gold); font-weight: 600; }
.chip.gray { background: var(--bg2); color: var(--ink2); }
.chip.ok { background: rgba(47, 143, 91, .12); color: var(--ok); }
.chip.bad { background: rgba(199, 72, 58, .1); color: var(--bad); }

/* 卡片与表单 */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--ink2); font-weight: 600; }
.input, textarea.input, select.input { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); outline: none; font-size: 16px; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.6; }

#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 15px; opacity: 0; pointer-events: none; transition: .25s; z-index: 99; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--bad); color: #fff; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }