/* 数量关系研究所 —— 公共样式（简洁明快，适合小学课堂） */
:root {
  --blue: #2f7ce0;
  --blue-deep: #1f4e79;
  --green: #2fae7d;
  --orange: #f59e2d;
  --red: #e2604f;
  --ink: #2b3a4a;
  --muted: #6b7a8c;
  --bg: #f2f7fc;
  --card: #ffffff;
  --line: #e3ecf5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 16px;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.topbar {
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 8px rgba(31,78,121,.18); position: sticky; top: 0; z-index: 10;
}
.topbar .logo { font-size: 24px; }
.topbar .title { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 14px; opacity: .92; }
.btn-ghost {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5);
  color: #fff; border-radius: 8px; padding: 5px 14px; font-size: 14px;
}
.btn-ghost:hover { background: rgba(255,255,255,.28); }

.container { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; }

.card {
  background: var(--card); border-radius: 16px; padding: 22px;
  box-shadow: 0 4px 16px rgba(31,78,121,.08); margin-bottom: 18px;
}
.card h3 { font-size: 18px; margin-bottom: 12px; color: var(--blue-deep); }

.btn {
  border: none; border-radius: 10px; padding: 10px 22px; font-size: 16px;
  color: #fff; background: var(--blue); transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { background: #b8c6d6; cursor: not-allowed; }
.btn.green { background: var(--green); }
.btn.orange { background: var(--orange); }

.tag {
  display: inline-block; font-size: 12px; border-radius: 999px; padding: 2px 10px; vertical-align: middle;
}
.tag.demo { background: #fff3e0; color: #b26a00; border: 1px solid #f0c78a; }
.tag.mode { background: #e8f1fd; color: var(--blue-deep); border: 1px solid #b9d4f5; }
.tag.ok { background: #e5f6ee; color: #1d7a53; border: 1px solid #a8dcc3; }
.tag.no { background: #fdeceb; color: #b23c30; border: 1px solid #f2b8b1; }

.hidden { display: none !important; }