:root {
  --primary: #6c8dff;
  --primary-deep: #4a6bd6;
  --primary-soft: #eef1ff;
  --pink: #ff9fb2;
  --pink-soft: #ffeef1;
  --mint: #58c99b;
  --mint-soft: #e6f8f0;
  --banana: #ffd66b;
  --ink: #4b4453;
  --muted: #8d86a0;
  --line: #e8e2f0;
  --bg: #fff8f0;
  --card: #ffffff;
  --bad: #ff7a6b;
  --good: #3fb984;
  --warn: #f5a623;
  --radius: 18px;
  --shadow: 0 4px 0 rgba(75, 68, 83, .12);
  --outline: 2px solid rgba(75, 68, 83, .82);
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
       margin: 0; background: var(--bg); color: var(--ink);
       -webkit-font-smoothing: antialiased;
       background-image:
         radial-gradient(circle at 8% 12%, rgba(255, 159, 178, .12) 0 140px, transparent 160px),
         radial-gradient(circle at 92% 20%, rgba(108, 141, 255, .10) 0 160px, transparent 190px),
         radial-gradient(circle at 85% 90%, rgba(255, 214, 107, .16) 0 150px, transparent 180px);
       background-attachment: fixed; }

/* ---- 顶栏 ---- */
header { background: linear-gradient(115deg, #6c8dff 0%, #8fa4ff 45%, #ffb3c2 100%);
         padding: 0 22px; height: 58px; display: flex; align-items: center;
         border-bottom: var(--outline); position: sticky; top: 0; z-index: 20; }
header::after { content: "✦"; position: absolute; right: 46%; top: 8px;
                color: rgba(255, 255, 255, .75); font-size: 12px; animation: twinkle 2.4s infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 17px;
         letter-spacing: .5px; text-shadow: 0 2px 0 rgba(74, 107, 214, .35);
         display: inline-block; transition: transform .2s; }
.brand:hover { transform: rotate(-3deg) scale(1.06); }
.user-box { margin-left: auto; color: #fff; font-size: 14px;
            display: flex; align-items: center; gap: 4px; }
.user-box a { color: #fff; text-decoration: none; padding: 5px 11px; border-radius: 999px;
              background: rgba(255, 255, 255, .22); transition: all .15s; }
.user-box a:hover { background: rgba(255, 255, 255, .4); transform: translateY(-1px); }

main { max-width: 1100px; margin: 26px auto; padding: 0 18px; }
h1 { font-size: 22px; margin: 6px 0 18px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--primary-deep); }

/* ---- 卡片：贴纸感 ---- */
.card { background: var(--card); border-radius: var(--radius); padding: 18px 22px;
        margin-bottom: 16px; border: var(--outline); box-shadow: var(--shadow); }

/* ---- 按钮：糖果按键 ---- */
button, .btn { display: inline-block; padding: 8px 18px; border: 2px solid var(--ink);
       border-radius: 999px; color: var(--ink); background: #fff; text-decoration: none;
       cursor: pointer; font-size: 14px; font-weight: 600;
       box-shadow: 0 3px 0 rgba(75, 68, 83, .85); transition: all .12s ease; }
button:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(75, 68, 83, .85); }
button:active, .btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(75, 68, 83, .85); }
.btn.primary, button.primary { background: var(--primary); color: #fff; }
.btn.primary:hover, button.primary:hover { background: #7d9bff; }
.btn.danger, button.danger { background: var(--bad); color: #fff; }
.btn.danger:hover, button.danger:hover { background: #ff8f81; }
button.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none;
                                       box-shadow: 0 3px 0 rgba(75, 68, 83, .4); }

#new-class, form.inline { display: flex; gap: 8px; margin: 8px 0; }
input, textarea, select { padding: 9px 13px; border: 2px solid var(--line);
                          border-radius: 12px; font-size: 14px; background: #fff;
                          color: var(--ink); font-family: inherit;
                          transition: border .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none;
     border-color: var(--primary); box-shadow: 0 0 0 4px rgba(108, 141, 255, .22); }

/* ---- 徽章 / 姓名条 ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--primary-soft); color: var(--primary-deep); border-radius: 999px;
        padding: 4px 13px; font-size: 14px; border: 1.5px solid rgba(108, 141, 255, .35); }
.chip-good { background: var(--mint-soft); color: var(--good); border-color: rgba(63, 185, 132, .4); }
.chip-bad { background: var(--pink-soft); color: #e8554a; border-color: rgba(255, 122, 107, .4); }
.chip-x { cursor: pointer; color: #e8554a; font-weight: 700; margin-left: 4px; }
.chip-x:hover { text-shadow: 0 0 3px rgba(232, 85, 74, .5); }
.chip-edit { cursor: pointer; color: var(--muted); margin-left: 6px; font-size: 12px; }
.chip-edit:hover { color: var(--primary-deep); }
.gen-code { font-family: ui-monospace, Consolas, monospace; background: var(--mint-soft);
            color: var(--good); }

/* ---- 弹窗 / 提示卡 ---- */
.modal-mask { position: fixed; inset: 0; background: rgba(75, 68, 83, .4); z-index: 50;
              display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-card { width: 100%; max-width: 360px; border-radius: 20px;
              animation: pop .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-card input { display: block; width: 100%; margin: 10px 0; }
.tips-card { background: linear-gradient(120deg, #fff4d6, #ffeeee); }
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 6px 14px; margin-top: 8px; font-size: 14px; }

/* ---- 首页 ---- */
.exam-list { list-style: none; padding: 0; margin: 10px 0 0; }
.exam-list li { padding: 10px 4px; border-bottom: 2px dashed var(--line); font-size: 14px; }
.exam-list li:last-child { border-bottom: none; }
.exam-list a { color: var(--primary-deep); text-decoration: none; font-weight: 600; }
.exam-list a:hover { text-decoration: underline; text-decoration-style: wavy; }
.exam-month summary { cursor: pointer; padding: 6px 8px; font-weight: 700;
                      color: var(--primary-deep); user-select: none; border-radius: 10px; }
.exam-month summary:hover { background: var(--primary-soft); }

/* ---- 上传 ---- */
.dropzone { border: 3px dashed var(--primary); border-radius: 22px; padding: 46px 20px;
            text-align: center; background: #fff; color: var(--muted); font-size: 15px;
            transition: all .18s ease; }
.dropzone:hover { transform: scale(1.01); }
.dropzone.dragover { border-color: var(--pink); background: var(--pink-soft);
                     transform: scale(1.02); }
#upload-list { list-style: none; padding: 0; }
#upload-list li { padding: 5px 0; font-size: 14px; }

/* ---- 表格 ---- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
         border-radius: 16px; overflow: hidden; border: var(--outline);
         box-shadow: var(--shadow); }
.table th { background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; }
.table th, .table td { padding: 10px 14px; border-bottom: 2px solid #f4f0f8;
                       text-align: left; font-size: 14px; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #fbfaff; }

/* ---- 确认分组 ---- */
.confirm-layout { display: grid; grid-template-columns: 1fr 330px; gap: 16px; }
.paper-group { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 14px;
               display: flex; gap: 12px; align-items: flex-start;
               border: var(--outline); box-shadow: var(--shadow); }
.paper-group.dragover { outline: 3px solid var(--pink); background: var(--pink-soft);
                        transform: scale(1.01); }
.paper-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.paper-thumbs img { width: 110px; height: 147px; object-fit: cover; border-radius: 10px;
                    border: 2px solid var(--line); }
.paper-thumbs a:hover img { outline: 2.5px solid var(--primary); }
.page-card { background: #fff; border-radius: 14px; padding: 10px; margin-bottom: 10px;
             text-align: center; border: var(--outline); box-shadow: var(--shadow); }
.page-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; }
.page-card a:hover img { outline: 2.5px solid var(--primary); }
.finalize-bar { position: sticky; bottom: 14px; background: #fff; padding: 13px 18px;
                border-radius: 18px; border: var(--outline); box-shadow: 0 5px 0 rgba(75, 68, 83, .15);
                display: flex; gap: 12px; align-items: center; }
.q-ov-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px;
            align-items: center; font-size: 13px; }
.q-ov:hover { outline: 2.5px solid var(--banana); transform: rotate(-2deg); }

/* ---- 学号+姓名搜索选择框 ---- */
.combo { position: relative; display: inline-block; min-width: 220px; }
.combo-input { width: 100%; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
              background: #fff; border: 2px solid var(--ink); border-radius: 12px;
              max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-lift); }
.combo-sec { font-size: 12px; color: var(--muted); padding: 7px 12px 3px;
             border-top: 2px dashed var(--line); }
.combo-sec:first-child { border-top: none; }
.combo-opt { padding: 9px 14px; cursor: pointer; font-size: 14px; }
.combo-opt:hover { background: var(--primary-soft); }
.cand-btn { padding: 4px 12px; font-size: 13px; background: var(--mint-soft);
            color: var(--good); border-color: rgba(63, 185, 132, .5);
            box-shadow: 0 2px 0 rgba(75, 68, 83, .5); margin: 2px 2px 2px 0; }

/* ---- 报告 ---- */
.report-toolbar { display: flex; justify-content: space-between;
                  align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.tabs { display: inline-flex; background: #fff; border: 2px solid var(--ink);
        border-radius: 999px; padding: 4px; box-shadow: 0 3px 0 rgba(75, 68, 83, .8); }
.tabs button { padding: 6px 18px; border: none; background: transparent; cursor: pointer;
               font-size: 14px; font-weight: 600; color: var(--muted); border-radius: 999px;
               box-shadow: none; }
.tabs button.active { background: var(--primary); color: #fff;
                      box-shadow: none; transform: none; }
.tabs button:hover { transform: none; box-shadow: none; color: var(--primary-deep); }
.tabs button.active:hover { color: #fff; }
.report-layout { display: grid; grid-template-columns: 330px 1fr; gap: 16px; align-items: start; }
.q-item { background: #fff; padding: 10px 14px; border-radius: 14px; margin-bottom: 8px;
          cursor: pointer; display: flex; justify-content: space-between; font-size: 14px;
          border: 2px solid transparent; box-shadow: var(--shadow); transition: all .14s; }
.q-item:hover { border-color: var(--primary); transform: translateX(3px); }
.q-item.active { border-color: var(--ink); background: var(--primary-soft); }
.q-bar { height: 8px; background: #f0ecf6; border-radius: 999px; overflow: hidden;
         width: 100%; margin-top: 5px; }
.q-bar > div { height: 8px; border-radius: 999px; transition: width .3s; }
.detail-card { background: #fff; border-radius: 18px; padding: 18px 22px;
               border: var(--outline); box-shadow: var(--shadow);
               position: sticky; top: 74px; }
.detail-card h2 { font-size: 18px; margin: 2px 0 8px; }
.detail-card h3 { margin: 16px 0 6px; font-size: 14px; color: var(--muted); }
.acc-good { color: var(--good); } .acc-mid { color: var(--warn); } .acc-bad { color: #e8554a; }
.trend-up { color: var(--good); } .trend-down { color: #e8554a; }

/* ---- 趋势与概览 ---- */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 12px; margin-bottom: 14px; }
.ov-card { text-align: center; padding: 14px; }
.ov-card > div:first-child { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.ov-card .ov-num { font-size: 34px !important; color: var(--primary-deep); }
.ov-card > div:last-child { color: var(--muted); font-size: 13px; }
.ov-bars { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.ov-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ov-bar-row > span { width: 48px; color: var(--muted); }
.ov-bar-row > b { width: 20px; }
.ov-bar { flex: 1; height: 12px; background: var(--primary-soft); border-radius: 999px;
          overflow: hidden; }
.ov-bar > div { height: 12px; border-radius: 999px;
                background: linear-gradient(90deg, var(--banana), var(--pink)); }

/* ---- 家长反馈单与打印 ---- */
.parent-sheet { background: #fff; border-radius: 16px; padding: 26px 30px;
                margin-bottom: 14px; border: var(--outline); box-shadow: var(--shadow);
                break-inside: avoid; }
.parent-sheet h2 { margin: 0 0 8px; border-bottom: 3px solid var(--banana); padding-bottom: 6px; }
.ps-comment { background: var(--banana); border-radius: 10px; padding: 10px 14px; }
.ps-sign { margin-top: 18px; }
@media print {
  header, .report-toolbar, .no-print, .user-box { display: none !important; }
  body { background: #fff; background-image: none; }
  main { max-width: 100%; margin: 0; padding: 0; }
  .detail-card { position: static; box-shadow: none; border: none; }
  .card, .parent-sheet, .table { box-shadow: none; border-color: #ccc; }
  body.print-parent #tab-questions, body.print-parent #tab-students,
  body.print-parent #tab-trend, body.print-parent #report-summary { display: none !important; }
  .parent-sheet { page-break-after: always; box-shadow: none; }
}

/* ---- 登录 / 注册 ---- */
body[data-page="login"], body[data-page="register"] {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 159, 178, .35) 0 90px, transparent 120px),
    radial-gradient(circle at 85% 25%, rgba(255, 214, 107, .4) 0 80px, transparent 110px),
    radial-gradient(circle at 80% 85%, rgba(108, 141, 255, .3) 0 110px, transparent 140px),
    linear-gradient(160deg, #fff3e6 0%, #ffeef3 50%, #eef3ff 100%);
  min-height: 100vh;
}
.auth-main { max-width: 400px; margin: 8vh auto; padding: 0 18px; }
.auth-card { border-radius: 24px; padding: 30px 30px 24px; text-align: left;
             animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.auth-card h1 { text-align: center; }
.auth-logo { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 20px;
             background: linear-gradient(135deg, #6c8dff, #ffb3c2);
             border: var(--outline); box-shadow: 0 4px 0 rgba(75, 68, 83, .3);
             display: flex; align-items: center; justify-content: center;
             font-size: 32px; animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.auth-card input { display: block; width: 100%; margin: 12px 0; padding: 11px 14px; }
.auth-card a { color: var(--primary-deep); font-weight: 600; }

/* ---- 错题本 ---- */
.mistake-card h2 { display: flex; align-items: center; gap: 10px; }
@media print {
  #mistakes-hot .chips { display: flex; }
  #tab-mistakes .report-toolbar { display: none !important; }
}

/* ---- 使用说明页 ---- */
.help-main { max-width: 780px; }
.help-hero { text-align: left; }
.help-ol, .help-ul { margin: 6px 0; padding-left: 22px; line-height: 1.9; }
.help-ul ul { margin: 4px 0; }
.help-faq dt { font-weight: 700; margin-top: 14px; color: var(--primary-deep); }
.help-faq dd { margin: 4px 0 0; padding: 0 0 0 0; line-height: 1.8; }

/* ---- 移动端 ---- */
@media (max-width: 800px) {
  .confirm-layout, .report-layout { grid-template-columns: 1fr; }
  .detail-card { position: static; }
  header { padding: 0 12px; }
  main { margin: 16px auto; }
  .table { font-size: 12.5px; }
  .table th, .table td { padding: 8px 8px; }
  .user-box span { display: none; }
  .user-box a { padding: 4px 8px; }
}