:root {
  --primary: #6d4ae8;
  --primary-deep: #5533c9;
  --primary-soft: #ede9fe;
  --accent: #f5a623;
  --accent-soft: #fff3d9;
  --bg: #f2f0fa;
  --card: #ffffff;
  --text: #2b2440;
  --muted: #8d86a6;
  --ok: #0ea472;
  --ok-soft: #e3f8f0;
  --warn: #d97706;
  --warn-soft: #fef3e2;
  --danger: #e04545;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(43, 36, 64, .05), 0 8px 24px rgba(109, 74, 232, .08);
  --shadow-hover: 0 4px 8px rgba(43, 36, 64, .06), 0 16px 40px rgba(109, 74, 232, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(245, 166, 35, .12), transparent 60%),
    radial-gradient(1000px 600px at -10% 0%, rgba(109, 74, 232, .14), transparent 55%),
    var(--bg);
  min-height: 100vh;
}
.shell { max-width: 980px; margin: 0 auto; padding: 16px 20px; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px; flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(242, 240, 250, .8);
}
.brand { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brand-logo {
  font-size: 20px; width: 42px; height: 42px; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b6cf0, var(--primary-deep));
  border-radius: 14px; box-shadow: 0 4px 12px rgba(109, 74, 232, .35);
}
.brand-text em { font-style: normal; font-size: 10px; color: var(--muted); letter-spacing: 3px; display: block; font-weight: 600; }
.topnav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.topnav a { color: var(--primary); text-decoration: none; font-weight: 500; }
.topnav a:hover { text-decoration: underline; }
.role-badge {
  background: linear-gradient(135deg, #8b6cf0, var(--primary-deep));
  color: #fff; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(109, 74, 232, .3);
}
.username { font-weight: 700; }

main { display: flex; flex-direction: column; gap: 18px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius); padding: 24px 26px;
  box-shadow: var(--shadow); border: 1px solid rgba(109, 74, 232, .06);
  transition: box-shadow .25s ease;
}
.eyebrow {
  font-size: 11px; letter-spacing: 2.5px; color: var(--primary);
  margin: 0 0 6px; font-weight: 700; text-transform: uppercase;
}
h1 { margin: 4px 0 10px; font-size: 28px; letter-spacing: -.5px; }
h2 { margin: 16px 0 10px; font-size: 20px; letter-spacing: -.3px; }
h3 { margin: 10px 0 4px; font-size: 16px; }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--primary); }
code { background: var(--primary-soft); padding: 2px 8px; border-radius: 8px; font-weight: 600; color: var(--primary-deep); }

/* ---------- Hero ---------- */
.hero {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center;
  background: linear-gradient(120deg, #7c5cf0 0%, #5b3fd4 55%, #432ba8 100%);
  color: #fff; border: none; position: relative; overflow: hidden;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before { width: 260px; height: 260px; right: -70px; top: -90px; background: rgba(255,255,255,.08); }
.hero::after { width: 160px; height: 160px; right: 120px; bottom: -80px; background: rgba(245,166,35,.25); }
.hero .eyebrow { color: rgba(255,255,255,.75); }
.hero .muted { color: rgba(255,255,255,.8); }
.hero h1 { color: #fff; }
.hero-stats { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.stat {
  text-align: center; min-width: 108px; padding: 14px 16px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; backdrop-filter: blur(6px);
}
.stat b { font-size: 28px; display: block; line-height: 1.2; }
.stat small { color: rgba(255,255,255,.78); font-size: 12px; display: block; margin-top: 2px; }
.stat-icon { font-size: 24px; }

/* ---------- 表单 ---------- */
.stack-form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.stack-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.stack-form .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
input, select, textarea {
  font: inherit; padding: 11px 14px; border: 1.5px solid #e2dcf5;
  border-radius: 12px; background: #faf9ff; color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: #c9bdf0; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); background: #fff;
  box-shadow: 0 0 0 4px rgba(109, 74, 232, .12);
}
button, .btn {
  font: inherit; font-weight: 600; padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid #d9d0f2; background: #fff; color: var(--primary);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(109, 74, 232, .15); }
button:active, .btn:active { transform: translateY(0); }
.primary {
  background: linear-gradient(135deg, #8b6cf0, var(--primary-deep));
  color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(109, 74, 232, .35);
}
.primary:hover { box-shadow: 0 8px 22px rgba(109, 74, 232, .45); }
.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.full { width: 100%; }
.small { padding: 7px 14px; font-size: 13px; }
.danger { color: var(--danger); border-color: #f3c2c2; }
.danger:hover { box-shadow: 0 6px 16px rgba(224, 69, 69, .18); }

/* ---------- 提示条 ---------- */
.flashes { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.flash {
  padding: 12px 18px; border-radius: 14px; font-weight: 500; font-size: 14px;
  animation: flash-in .35s ease;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
.flash.success { background: var(--ok-soft); color: #06734f; border: 1px solid #b9ecdc; }
.flash.error { background: #fdecec; color: #b42323; border: 1px solid #f5caca; }

/* ---------- 逾期 ---------- */
.overdue-banner, .overdue-panel {
  background: linear-gradient(120deg, #fff8ec, #ffefd6);
  border: 1.5px solid #f3d9a8; border-radius: var(--radius); padding: 18px 24px;
  box-shadow: var(--shadow);
}
.overdue-banner b { color: var(--warn); }
.overdue-banner ul { margin: 10px 0; padding-left: 20px; }

/* ---------- 碎片/标签 ---------- */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.chip {
  background: var(--primary-soft); color: var(--primary-deep);
  padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- 作业卡 ---------- */
.task {
  border: 1.5px solid #eee9fb; border-radius: 18px; padding: 18px 22px; margin: 14px 0;
  background: #fff; transition: box-shadow .2s ease, transform .2s ease, border-color .2s;
}
.task:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: #ddd2f7; }
.task.is-overdue { border-color: #f3d9a8; background: linear-gradient(180deg, #fffdf7, #fff); }
.task-head { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.subject { font-weight: 700; color: var(--primary-deep); }
.tag-overdue {
  color: var(--warn); font-weight: 700; background: var(--warn-soft);
  padding: 2px 10px; border-radius: 999px; font-size: 12px;
}

/* ---------- 心情选择 ---------- */
.mood-row { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.mood input { display: none; }
.mood span {
  font-size: 28px; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 18px; cursor: pointer; background: #f6f4fd;
  border: 2px solid transparent; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
}
.mood span:hover { transform: scale(1.12); background: var(--primary-soft); }
.mood input:checked + span {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 4px 14px rgba(109, 74, 232, .25); transform: scale(1.12);
}
.photo-btn { display: inline-block; margin: 8px 0; cursor: pointer; color: var(--primary); font-weight: 600; }
.confirm-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- 列表 ---------- */
.plain-list { list-style: none; padding: 0; margin: 12px 0; }
.plain-list li { padding: 10px 2px; border-bottom: 1px dashed #e8e2f8; }
.plain-list li:last-child { border-bottom: none; }

/* ---------- 进度条 ---------- */
.progress {
  background: #ece7f9; border-radius: 999px; height: 14px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(43, 36, 64, .08);
}
.progress-inner {
  background: linear-gradient(90deg, var(--accent), #8b6cf0);
  height: 100%; border-radius: 999px; position: relative;
  transition: width .6s ease;
}
.progress-inner::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, transparent 10px 20px);
  animation: stripes 1.2s linear infinite;
}
@keyframes stripes { to { transform: translateX(28px); } }

/* ---------- 徽章 ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 10px; }
.badge {
  border: 1.5px solid #eee9fb; border-radius: 18px; padding: 18px 14px; text-align: center;
  background: linear-gradient(180deg, #fbfaff, #f6f3fe);
  transition: transform .15s ease, box-shadow .2s ease;
}
.badge:hover { transform: translateY(-2px); }
.badge span { font-size: 32px; display: block; }
.badge b { display: block; margin: 6px 0 2px; }
.badge small { color: var(--muted); font-size: 12px; display: block; line-height: 1.5; }
.badge.earned {
  border-color: #ecd9a0;
  background: linear-gradient(180deg, #fffaf0, #fff4de);
  box-shadow: 0 4px 14px rgba(245, 166, 35, .18);
}
.badge.locked { opacity: .45; filter: grayscale(1); }

/* ---------- 学生区块 / 周热力 ---------- */
.student-block { border-top: 1px solid #f0ebfb; padding-top: 14px; margin-top: 14px; }
.student-block:first-of-type { border-top: none; }
.week-strip { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.week-strip .day {
  font-size: 11px; font-weight: 600; padding: 6px 9px; border-radius: 10px;
  background: #f4f2fb; color: var(--muted);
}
.week-strip .day.hit {
  background: linear-gradient(135deg, #37c68f, var(--ok)); color: #fff;
  box-shadow: 0 3px 8px rgba(14, 164, 114, .3);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
.checkin-photo { max-width: 100%; max-height: 380px; border-radius: 16px; box-shadow: var(--shadow); }

/* ---------- 登录页 ---------- */
.login-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-top: 12px; }
@media (max-width: 720px) { .login-layout { grid-template-columns: 1fr; } .login-art { display: none; } }
.login-card { padding: 36px 34px; }
.login-card h1 { font-size: 32px; background: linear-gradient(120deg, #8b6cf0, var(--primary-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-art {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px;
  background: linear-gradient(180deg, #ffd9a0 0%, #ffb3c2 52%, #9d84f0 100%);
  box-shadow: var(--shadow);
}
.login-art .sun {
  position: absolute; top: 46px; left: 56px; width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8, #ffd35c);
  box-shadow: 0 0 40px 12px rgba(255, 211, 92, .55);
  animation: sun-float 6s ease-in-out infinite;
}
@keyframes sun-float { 50% { transform: translateY(10px); } }
.login-art .cloud { position: absolute; background: rgba(255,255,255,.85); border-radius: 999px; height: 26px; animation: cloud-drift 9s ease-in-out infinite; }
.cloud-a { top: 76px; right: 64px; width: 116px; }
.cloud-b { top: 130px; left: 44px; width: 84px; animation-delay: -4s; }
@keyframes cloud-drift { 50% { transform: translateX(14px); } }
.login-art .hill { position: absolute; bottom: -46px; border-radius: 50%; }
.hill-a { left: -70px; width: 300px; height: 150px; background: linear-gradient(180deg, #8fdcb1, #6cc795); }
.hill-b { right: -70px; width: 320px; height: 170px; background: linear-gradient(180deg, #64c48d, #4aad77); }
.art-title {
  position: absolute; right: 30px; bottom: 46px; font-size: 34px; line-height: 1.3;
  color: #fff; text-shadow: 0 2px 12px rgba(90, 40, 140, .35); font-weight: 300;
}
.art-title b { font-weight: 800; }
.spark { position: absolute; color: #fff; font-size: 22px; animation: spark-twinkle 2.6s ease-in-out infinite; }
.spark-a { top: 44px; right: 44px; }
.spark-b { bottom: 170px; left: 64px; animation-delay: -1.3s; }
@keyframes spark-twinkle { 50% { opacity: .35; transform: scale(.8) rotate(20deg); } }

footer { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 0 14px; }

/* ---------- 撒花 ---------- */
.celebration { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.confetti {
  position: absolute; top: -16px; width: 10px; height: 16px;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }