/* =========================================================
   智学空间 全局样式
   主色：#2f6fed（教育蓝）  背景：#eef3fb  文字：#26324a
   ========================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  background:#eef3fb; color:#26324a; line-height:1.6; font-size:15px;
}
a { color:#2f6fed; text-decoration:none; }
a:hover { opacity:.85; }

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ---------- 顶部导航 ---------- */
.topbar { background:#fff; box-shadow:0 1px 8px rgba(30,60,120,.08); position:sticky; top:0; z-index:50; }
.topbar-inner { display:flex; align-items:center; gap:20px; height:60px; }
.brand { display:flex; align-items:center; gap:8px; }
.brand-mark {
  width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#2f6fed,#4f9cf8);
  color:#fff; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center;
}
.brand-name { font-size:19px; font-weight:700; color:#1e3a6e; }
.nav { display:flex; gap:6px; flex:1; }
.nav-link { padding:8px 16px; border-radius:8px; color:#41506b; font-size:15px; }
.nav-link:hover { background:#eef3fb; opacity:1; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; align-items:center; gap:6px; font-size:13px; color:#41506b; }
.role-badge { font-size:11px; padding:2px 8px; border-radius:20px; color:#fff; }
.role-admin { background:#e0564e; }
.role-teacher { background:#2f6fed; }
.role-student { background:#17a26b; }

/* ---------- 按钮 ---------- */
.btn { display:inline-block; padding:10px 20px; border-radius:8px; font-size:15px; border:none; cursor:pointer; text-align:center; }
.btn-sm { padding:6px 13px; font-size:14px; }
.btn-primary { background:#2f6fed; color:#fff; }
.btn-primary:hover { background:#245cd0; opacity:1; }
.btn-success { background:#17a26b; color:#fff; }
.btn-success:hover { background:#128756; opacity:1; }
.btn-danger { background:#e0564e; color:#fff; }
.btn-danger:hover { background:#c7433c; opacity:1; }
.btn-ghost { background:#eef3fb; color:#41506b; }
.btn-ghost:hover { background:#dfe8f7; opacity:1; }
.btn-block { display:block; width:100%; }

/* ---------- 卡片 / 区块 ---------- */
.card { background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(30,60,120,.06); padding:30px; margin-bottom:20px; }
.card h2 { font-size:20px; color:#1e3a6e; margin-bottom:16px; }
.card h3 { font-size:17px; color:#1e3a6e; margin-bottom:10px; }
.page-title { margin:26px 0 18px; font-size:25px; color:#1e3a6e; }
.page-desc { color:#71809b; font-size:15px; margin:-10px 0 20px; }

/* ---------- 排行榜 ---------- */
.rank-list { list-style:none; }
.rank-item {
  display:flex; align-items:center; gap:16px; padding:16px 8px;
  border-bottom:1px solid #eef1f7;
}
.rank-item:last-child { border-bottom:none; }
.rank-no {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:#e8effc; color:#2f6fed; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.rank-item.top1 .rank-no { background:linear-gradient(135deg,#f7c948,#f59e0b); color:#fff; }
.rank-item.top2 .rank-no { background:linear-gradient(135deg,#cfd6e2,#9aa8bf); color:#fff; }
.rank-item.top3 .rank-no { background:linear-gradient(135deg,#e8a87c,#d67a4a); color:#fff; }
.rank-main { flex:1; min-width:0; }
.rank-title { font-size:16px; font-weight:600; color:#26324a; }
.rank-meta { font-size:14px; color:#71809b; margin-top:2px; }
.rank-score { text-align:right; flex-shrink:0; }
.rank-num { font-size:26px; font-weight:700; color:#f59e0b; }
.rank-star { color:#f7b731; font-size:14px; letter-spacing:1px; }
.rank-count { font-size:13px; color:#9aa8bf; }
.empty { text-align:center; color:#9aa8bf; padding:40px 0; font-size:15px; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:14px; color:#41506b; margin-bottom:6px; }
.form-control {
  width:100%; padding:11px 13px; border:1px solid #d4dcec; border-radius:8px;
  font-size:15px; font-family:inherit; outline:none; background:#fff;
}
.form-control:focus { border-color:#2f6fed; box-shadow:0 0 0 3px rgba(47,111,237,.12); }
textarea.form-control { min-height:90px; resize:vertical; }
.form-row { display:flex; gap:14px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:220px; }
.hint { font-size:13px; color:#9aa8bf; margin-top:4px; }
.file-input { border:1px dashed #c3d2ea; background:#f7fafd; border-radius:8px; padding:14px; }
.file-input input[type=file] { font-size:14px; }

/* ---------- 列表（任务 / 作品） ---------- */
.item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.item-card { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(30,60,120,.06); padding:18px; display:flex; flex-direction:column; gap:8px; }
.item-card h3 { font-size:16px; color:#1e3a6e; }
.item-card .meta { font-size:13px; color:#9aa8bf; }
.item-card .desc { font-size:14px; color:#55627b; max-height:56px; overflow:hidden; }
.item-card .actions { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.tag { display:inline-block; font-size:12px; padding:2px 9px; border-radius:20px; background:#e8effc; color:#2f6fed; }
.tag.green { background:#e3f5ec; color:#128756; }
.tag.orange { background:#fdf1e0; color:#b7791f; }
.tag.gray { background:#eef1f7; color:#71809b; }

/* ---------- 作品展示 ---------- */
.work-stage { background:#0f172a; border-radius:12px; padding:16px; display:flex; justify-content:center; }
.work-stage img { max-width:100%; max-height:520px; border-radius:8px; }
.work-stage video { max-width:100%; max-height:520px; border-radius:8px; }
.work-stage canvas { width:480px; height:360px; background:#fff; border-radius:6px; }
.work-info { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.work-actions { display:flex; gap:10px; margin:18px 0; }
.rating-box { background:#f7fafd; border-radius:10px; padding:16px; }
.rating-list { margin-top:14px; }
.rating-item { padding:10px 0; border-bottom:1px dashed #dfe6f2; font-size:14px; }
.rating-item:last-child { border-bottom:none; }
.score-pill { display:inline-block; min-width:34px; text-align:center; background:#fdf1e0; color:#b7791f; border-radius:20px; padding:2px 8px; font-weight:700; margin-right:8px; }

/* ---------- 表格（后台管理） ---------- */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:15px; }
table.data th { background:#f2f6fc; color:#41506b; text-align:left; padding:10px 12px; font-weight:600; white-space:nowrap; }
table.data td { padding:10px 12px; border-bottom:1px solid #eef1f7; }
table.data tr:hover td { background:#f9fbfe; }

/* ---------- 登录页 ---------- */
.login-wrap { min-height:calc(100vh - 140px); display:flex; align-items:center; justify-content:center; padding:30px 16px; }
.login-card { background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(30,60,120,.12); width:100%; max-width:440px; padding:38px; }
.login-card h1 { font-size:24px; color:#1e3a6e; text-align:center; margin-bottom:6px; }
.login-card .sub { text-align:center; color:#9aa8bf; font-size:14px; margin-bottom:24px; }

/* ---------- 提示条 ---------- */
.alert { padding:13px 17px; border-radius:8px; font-size:15px; margin-bottom:16px; }
.alert-success { background:#e8f6ec; color:#1a7f37; border:1px solid #b7e3c4; }
.alert-error { background:#fdecec; color:#b3261e; border:1px solid #f5c2c0; }

/* ---------- 页脚 ---------- */
.footer { margin-top:40px; padding:22px 0; text-align:center; color:#9aa8bf; font-size:14px; }
.main { min-height:60vh; }

/* ---------- 响应式 ---------- */
@media (max-width:760px) {
  .topbar-inner { flex-wrap:wrap; height:auto; padding:10px 0; gap:8px; }
  .nav { order:3; width:100%; }
  .topbar-right { margin-left:auto; }
  .item-grid { grid-template-columns:1fr; }
}