/* ============ Signify Quiz 设计 token 与基础组件 ============ */
:root {
  /* 品牌色(取自 Signify Logo 渐变) */
  --brand-green: #2fe08a;
  --brand-cyan: #35c8d9;
  --brand-grad: linear-gradient(90deg, var(--brand-green), var(--brand-cyan));

  /* Kahoot 四色选项(play/screen 用) */
  --opt-red: #e23e57;
  --opt-orange: #f5a623;
  --opt-blue: #2d7dd2;
  --opt-green: #2fbf71;

  /* 深色基底 */
  --bg: #0a0f14;
  --bg-2: #10161d;
  --card: #151d26;
  --card-2: #1b242f;
  --line: #26313d;
  --text: #e8edf2;
  --text-dim: #8b98a5;
  --text-faint: #5a6672;

  --ok: var(--brand-green);
  --warn: var(--opt-orange);
  --err: #ff5d73;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}
a { color: var(--brand-cyan); text-decoration: none; }
img { max-width: 100%; }

/* ---- 顶栏 ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar .logo { height: 30px; display: flex; align-items: center; }
.topbar .logo img { height: 30px; border-radius: 6px; }
.topbar .title { font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-dim); font-size: 14px; }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--text);
  font-size: 14px; font-family: var(--font);
  padding: 9px 18px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: filter 0.15s, transform 0.05s, opacity 0.15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--brand-grad); border: none; color: #06231a;
  font-weight: 700;
}
.btn-danger { background: transparent; border-color: var(--err); color: var(--err); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-ghost { background: transparent; }

/* ---- 表单 ---- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font); font-size: 15px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-cyan); }
.textarea { resize: vertical; min-height: 90px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---- 卡片 / 容器 ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

/* ---- 弹层 ---- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 8, 12, 0.72);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.overlay.show { display: flex; }
.modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto;
  padding: 24px;
}
.modal h3 { margin-bottom: 18px; font-size: 17px; }
.modal .modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(20px);
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--text); font-size: 14px;
  padding: 11px 22px; border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200; max-width: 80vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: var(--ok); }
#toast.err { border-color: var(--err); }

/* ---- 杂项 ---- */
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 13px; }
.mono { font-family: Consolas, Menlo, monospace; }
.brand-text {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}