* { box-sizing: border-box; }
:root {
  --primary: #4f46e5; /* indigo-600 */
  --primary-2: #22d3ee; /* cyan-400 */
  --primary-3: #3b82f6; /* blue-500 */
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #64748b;
  --ring: rgba(79, 70, 229, 0.35);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif; margin: 0; background: var(--bg); color: var(--text); }
header { background: linear-gradient(135deg, var(--primary), #1d4ed8 40%, var(--primary-2)); color: #fff; padding: 20px 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
header h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: 0.2px; }
header p { margin: 0; opacity: 0.92; }
.tabs { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.tab { background: #ffffff20; border: 1px solid #ffffff33; color: #fff; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all 160ms ease; backdrop-filter: saturate(140%) blur(2px); }
.tab:hover { background: #ffffff30; transform: translateY(-1px); }
.tab.active { background: #fff; color: var(--primary); box-shadow: 0 6px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.tabs .tab::before { display: inline-block; margin-right: 6px; }
.tabs .tab[data-view="admin"]::before { content: "🧭"; }
.tabs .tab[data-view="overview"]::before { content: "🏆"; }
.tabs .tab[data-view="random"]::before { content: "🎯"; }
.tabs .tab[data-view="detail"]::before { content: "👤"; }
.tabs .tab[data-view="gomoku"]::before { content: "♟️"; }

.container { max-width: 980px; margin: 26px auto; padding: 0 16px; }
section { background: var(--surface); border: 1px solid #eaeaea; border-radius: 14px; padding: 18px; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); transition: box-shadow 180ms ease, transform 180ms ease; }
section:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.06); transform: translateY(-1px); }
section h2 { margin-top: 0; font-size: 18px; }
.view { }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
input, select, button { height: 36px; padding: 6px 10px; border: 1px solid #d9d9d9; border-radius: 10px; }
button { background: linear-gradient(135deg, var(--primary), var(--primary-3)); color: #fff; border: none; cursor: pointer; border-radius: 999px; box-shadow: 0 6px 14px rgba(59,130,246,0.25); transition: transform 140ms ease, box-shadow 140ms ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(59,130,246,0.28); }
button:active { transform: translateY(0); }
button[type="secondary"], .secondary { background: #f1f5f9; color: #111; box-shadow: none; border: 1px solid #e2e8f0; }
.danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 6px 14px rgba(239,68,68,0.25); }
.danger:hover { box-shadow: 0 10px 20px rgba(239,68,68,0.3); }
/* 灰色文本操作样式（替代删除按钮） */
.action-text { color: #8c8c8c; margin-left: 8px; cursor: pointer; font-size: 14px; }

/* 宫格抽奖 - 物品展示 */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 10px; }
.item-tile { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.item-tile .item-name { font-weight: 600; margin-bottom: 6px; }
.item-tile .item-qty { color: #666; }
.item-tile.disabled { opacity: 0.45; }
.item-tile.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); transform: scale(1.03); }
.item-tile.selected { border-color: #faad14; box-shadow: 0 0 0 2px rgba(250,173,20,0.35); transform: scale(1.04); }
.action-text:hover { color: #595959; text-decoration: underline; }
.action-text.disabled { color: #bfbfbf; cursor: not-allowed; text-decoration: none; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px; border-bottom: 1px dashed #eee; transition: background-color 140ms ease; }
.list li:last-child { border-bottom: none; }
.list li:hover { background: #f9fafb; }
.list li .name-link { color: var(--primary); cursor: pointer; text-decoration: underline; }

.hint { color: var(--muted); font-size: 13px; }
footer { padding: 16px; text-align: center; color: #666; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.badge.pending { background: #fffbe6; border: 1px solid #ffe58f; }
.badge.approved { background: #e6fffb; border: 1px solid #87e8de; }
.badge.rejected { background: #fff2e8; border: 1px solid #ffbb96; }
.badge.delete { background: #fff1f0; border: 1px solid #ffa39e; }

.delta.plus { color: #16a34a; }
.delta.minus { color: #dc2626; }
.delta.del { color: #8c8c8c; }

.detail-info { padding: 10px; border: 1px dashed #eee; border-radius: 10px; margin-bottom: 10px; color: #555; }

/* —— 表格样式（学生管理） —— */
.table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; background: #fff; border: 1px solid #eaeaea; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px dashed #f0f0f0; }
.table thead th { background: linear-gradient(180deg, #f8fafc, #f1f5f9); color: #475569; font-weight: 700; }
.table tbody tr:hover { background: #f9fafb; }
.table tbody tr:last-child td { border-bottom: none; }
.table .name-link { color: var(--primary); cursor: pointer; text-decoration: underline; }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pager-info { color: #667085; }
/* 可排序表头与箭头样式 */
.table thead th.sortable { cursor: pointer; user-select: none; }
.sort-arrow { margin-left: 6px; font-size: 12px; color: #64748b; }

/* —— 随机点名页面样式 —— */
.chk { display: inline-flex; align-items: center; gap: 6px; color: #444; }
.random-stage { margin-top: 8px; border: 1px dashed #e6e6e6; border-radius: 14px; background: #fafafa; padding: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.rolling-display { display: none; }
.turntable-canvas { width: 300px; height: 300px; }
.turntable-pointer { position: absolute; top: 6px; left: 50%; transform: translateX(-50%) rotate(180deg); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 18px solid #cf1322; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }
.turntable-pointer.glow { border-bottom-color: #faad14; filter: drop-shadow(0 0 6px rgba(250,173,20,0.85)); }
.result-card { margin-top: 10px; padding: 16px; border: 1px solid #eaeaea; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.06); font-size: 18px; color: #222; }
.result-card .big-name { font-size: 28px; color: #2f54eb; font-weight: 700; }

/* 动画效果 */
@keyframes pop-in {
  0% { transform: scale(0.92); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes flash-bg {
  0% { background-color: #fff; }
  50% { background-color: #fffbe6; }
  100% { background-color: #fff; }
}
.animate-pop { animation: pop-in 420ms ease-out; }
.animate-flash { animation: flash-bg 600ms ease-out; }
/* —— 五子棋样式 —— */
.gomoku-status { font-weight: 600; color: #444; }
.gomoku-board { width: 480px; height: 480px; background: #fdf7e3; border: 1px solid #e0c68f; box-shadow: inset 0 0 8px rgba(0,0,0,0.06); display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); position: relative; border-radius: 12px; }
.gomoku-board::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#d7b47f 1px, transparent 1px), linear-gradient(90deg, #d7b47f 1px, transparent 1px); background-size: calc(480px / 15) calc(480px / 15), calc(480px / 15) calc(480px / 15); background-position: center; opacity: 0.7; pointer-events: none; }
.gomoku-cell { position: relative; display: flex; align-items: center; justify-content: center; }
.gomoku-cell::after { content: ''; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transform: scale(0); transition: transform 120ms ease; }
.gomoku-cell.black::after { background: radial-gradient(circle at 30% 30%, #555, #000); transform: scale(1); }
.gomoku-cell.white::after { background: radial-gradient(circle at 30% 30%, #fff, #ddd); transform: scale(1); }
.gomoku-cell.win::after { box-shadow: 0 0 0 3px #faad14, 0 1px 2px rgba(0,0,0,0.2); }
.gomoku-board.disabled { pointer-events: none; opacity: 0.7; }
.gomoku-legend { color: #666; font-size: 12px; }

/* —— 首页互动样式 —— */
.home-stage {
  margin-top: 8px;
  border: 1px dashed #e6e6e6;
  border-radius: 14px;
  background: #fafafa;
  padding: 12px;
  position: relative;
  min-height: 220px;
  overflow: hidden;
}
.home-tip { color: #667085; font-size: 14px; text-align: center; padding: 24px 0; }
.emoji { position: absolute; font-size: 22px; pointer-events: none; opacity: 0; animation: pop-in .18s ease forwards, emoji-fall 2.8s ease forwards; }
@keyframes emoji-fall {
  0% { transform: translateY(-40px) rotate(0deg); opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { transform: translateY(260px) rotate(360deg); opacity: 0; }
}

/* —— 成绩榜单切换 —— */
.seg { display: inline-flex; gap: 8px; align-items: center; }
.range-btn { height: 34px; padding: 6px 12px; }
.range-btn.active { background: #fff; color: var(--primary); border: 1px solid #e2e8f0; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }

/* —— 排名徽章 —— */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #9ca3af; /* 默认灰 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.rank-badge.top-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1f2937;
}
.rank-badge.top-2 {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #1f2937;
}
.rank-badge.top-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1f2937;
}