@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root { --ink:#20233d; --muted:#71778d; --purple:#6957e8; --purple-dark:#5544cb; --lavender:#f5f3ff; --mint:#ddf8ed; --line:#e9e9f2; }
html { font-size:15px; min-height:100%; }
body { min-height:100vh; margin:0; display:flex; flex-direction:column; color:var(--ink); background:#fafaff; font-family:'Noto Sans SC','Nunito',sans-serif; }
.navbar { min-height:76px; background:rgba(255,255,255,.94)!important; border:0!important; box-shadow:0 1px 0 rgba(32,35,61,.06), 0 4px 18px rgba(32,35,61,.04); backdrop-filter:blur(12px); }
.navbar-brand { margin:0; padding:0; text-decoration:none; }
.navbar-logo { width:44px; height:44px; object-fit:contain; border-radius:12px; box-shadow:0 2px 8px rgba(32,35,61,.16); transition:transform .2s ease; }
.navbar-brand:hover .navbar-logo { transform:rotate(-6deg) scale(1.04); }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-title { color:var(--purple)!important; font-weight:800; font-size:1.06rem; letter-spacing:-.5px; }
.brand-sub { color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.nav-link { color:var(--muted)!important; font-weight:600; padding:.5rem .9rem!important; border-radius:11px; transition:.18s ease; }
.nav-link:hover { color:var(--purple)!important; background:var(--lavender); }
.nav-link.active { color:var(--purple)!important; background:var(--lavender); box-shadow:inset 0 0 0 1px #e4dffc; }
.user-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .7rem .3rem .35rem; border-radius:99px; background:var(--lavender); }
.user-avatar { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--purple); color:#fff; font-size:.72rem; font-weight:800; }
.user-name { color:var(--ink); font-size:.82rem; font-weight:700; }
@media (max-width:575px) { .navbar-logo { width:38px; height:38px; } }
.container { max-width:1180px; } main { flex:1 0 auto; padding:2rem 0 4rem; }
.page-hero { margin-bottom:1.75rem; padding:1.8rem 2rem; border-radius:22px; color:white; background:linear-gradient(120deg,#5b49d7,#856ef1 60%,#a395ff); box-shadow:0 12px 30px rgba(92,73,215,.19); }.page-hero h1 { margin:.2rem 0 .35rem; font-weight:800; letter-spacing:-1px; }.page-hero p { margin:0; opacity:.85; }.eyebrow { display:block; color:inherit; opacity:.8; font-size:.73rem; font-weight:800; letter-spacing:1.3px; }.page-hero .btn-primary { background:white; color:var(--purple); border-color:white; }
.card { border-radius:18px; border-color:var(--line); overflow:hidden; }.card-body { padding:1.5rem; }.btn { border-radius:10px; font-weight:700; padding:.55rem 1rem; transition:.2s ease; }.btn-primary { border-color:var(--purple); background:var(--purple); box-shadow:0 4px 10px rgba(105,87,232,.2); }.btn-primary:hover { border-color:var(--purple-dark); background:var(--purple-dark); transform:translateY(-1px); }.btn-outline-primary { color:var(--purple); border-color:#c9c2ff; }.btn-outline-primary:hover { background:var(--purple); border-color:var(--purple); }
.form-control,.form-select { min-height:44px; border-radius:10px; border-color:#dedeea; padding:.65rem .8rem; } textarea.form-control { min-height:auto; }.form-control:focus,.form-select:focus { border-color:#9c90f5; box-shadow:0 0 0 .22rem rgba(105,87,232,.12); }.form-label { font-weight:700; color:#454963; }
.assignment-card { display:flex; flex-direction:column; padding:1.35rem; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 20px rgba(37,39,74,.045); transition:transform .2s,box-shadow .2s; }.assignment-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(55,48,120,.1); }.assignment-card.is-expired { opacity:.76; }.card-top,.assignment-meta,.assignment-actions { display:flex; align-items:center; justify-content:space-between; gap:.65rem; }.assignment-card h3 { margin:1rem 0 .55rem; font-size:1.1rem; font-weight:800; }.assignment-content { flex:1; color:var(--muted); font-size:.92rem; line-height:1.65; white-space:pre-line; }.assignment-meta { padding:.9rem 0; margin-top:.5rem; border-top:1px solid var(--line); color:#666d84; font-size:.78rem; flex-wrap:wrap; }.assignment-actions { min-height:39px; margin-top:.3rem; }.assignment-actions form { margin:0; }
.status-pill,.submitted-label { display:inline-block; padding:.28rem .62rem; border-radius:99px; font-size:.76rem; font-weight:700; }.status-pill.open,.submitted-label { color:#16835c; background:var(--mint); }.status-pill.expired { color:#7d8190; background:#eff0f4; }.date-label { color:var(--muted); font-size:.76rem; }.btn-link { color:var(--purple); font-size:.84rem; font-weight:700; padding:.25rem .45rem; text-decoration:none; }
.empty-state { padding:4rem 2rem; text-align:center; border:1px dashed #d8d4f2; border-radius:20px; color:var(--muted); background:#fff; }.empty-icon { margin:0 auto 1rem; width:48px; height:48px; display:grid; place-items:center; border-radius:15px; font-size:1.5rem; color:var(--purple); background:var(--lavender); }.table thead th { border-bottom:0; background:#f6f5ff; color:#62677e; font-size:.79rem; font-weight:700; }.table > :not(caption) > * > * { padding:1rem; border-bottom-color:var(--line); }.badge.text-bg-primary { background:var(--purple)!important; }.footer { position:static!important; flex-shrink:0; padding:1.5rem 0; border-color:var(--line)!important; background:#fff; }
@media (max-width:575px) { main { padding-top:1.2rem; }.page-hero { padding:1.4rem; }.page-hero.d-flex { align-items:flex-start!important; gap:1rem; flex-direction:column; } }

/* ===== 图片预览（缩略图 + lightbox） ===== */
.img-thumb { width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid var(--line); box-shadow:0 2px 8px rgba(37,39,74,.08); cursor:zoom-in; transition:transform .15s ease; }
.img-thumb:hover { transform:scale(1.06); }
.image-preview-dialog { max-width:min(92vw,960px); }
.image-preview-img { max-width:100%; max-height:74vh; border-radius:14px; }
.image-preview-caption { margin-top:.7rem; color:var(--muted); font-size:.84rem; }
/* ===== 学生端作业类型标签 ===== */
.type-pill { display:inline-block; padding:.28rem .62rem; border-radius:99px; font-size:.76rem; font-weight:700; }
.type-pill.type-class { color:#0e7490; background:#e0f7fb; }
.type-pill.type-home { color:#5b4bc4; background:#eceafb; }

/* ===== 富文本编辑器 ===== */
.rich-editor { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
.rich-editor:focus-within { border-color:var(--purple); box-shadow:0 0 0 .2rem rgba(91,75,196,.12); }
.rich-editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; padding:.45rem .55rem; border-bottom:1px solid var(--line); background:#f7f7fb; }
.rich-editor-btn { min-width:30px; height:30px; padding:0 .45rem; margin:0; border:none; border-radius:8px; background:transparent; color:#25274a; font-size:.86rem; line-height:1; cursor:pointer; }
.rich-editor-btn:hover { background:#e8e8f2; }
.rich-editor-sep { width:1px; height:18px; margin:0 .3rem; background:var(--line); }
.rich-editor-area { min-height:220px; max-height:60vh; overflow-y:auto; border:none; border-radius:0; box-shadow:none; padding:1rem 1.1rem; font-size:.95rem; line-height:1.75; outline:none; }
.rich-editor-area:empty::before { content:attr(data-placeholder); color:var(--muted); }
.rich-editor-area p { margin:0 0 .5rem; }
.rich-editor-area h3 { font-size:1.05rem; font-weight:800; margin:.9rem 0 .45rem; color:var(--ink); }
.rich-editor-area blockquote { margin:.6rem 0; padding:.35rem .9rem; border-left:4px solid var(--purple); background:#f5f4fd; border-radius:0 8px 8px 0; color:#55576f; }
.rich-editor-area ul, .rich-editor-area ol { padding-left:1.5rem; margin:.4rem 0; }
.assignment-content ul, .assignment-content ol { padding-left:1.4rem; margin:.3rem 0; }
.assignment-content h3 { font-size:1rem; font-weight:800; margin:.6rem 0 .3rem; }
.assignment-content blockquote { margin:.5rem 0; padding:.3rem .8rem; border-left:4px solid var(--purple); background:#f5f4fd; border-radius:0 8px 8px 0; color:#55576f; }

/* ===== 富文本作答查看弹窗 ===== */
.rich-view-body { font-size:.95rem; line-height:1.8; }
.rich-view-body p { margin:0 0 .6rem; }
.rich-view-body h3 { font-size:1.05rem; font-weight:800; margin:.9rem 0 .45rem; }
.rich-view-body ul, .rich-view-body ol { padding-left:1.5rem; margin:.4rem 0; }
.rich-view-body blockquote { margin:.6rem 0; padding:.4rem .9rem; border-left:4px solid var(--purple); background:#f5f4fd; border-radius:0 8px 8px 0; color:#55576f; }

/* ===== 作业内容预览折叠（箭头在卡片头部右侧） ===== */
.preview-toggle { color:var(--ink); font-size:1.05rem; line-height:1; padding:.15rem .35rem; }
.preview-toggle:hover { color:var(--purple); }
.preview-toggle .chev { display:inline-block; transition:transform .15s ease; }
.preview-toggle[aria-expanded="true"] .chev { transform:rotate(0deg); }    /* ▾ 向下 = 已展开 */
.preview-toggle[aria-expanded="false"] .chev { transform:rotate(-90deg); } /* ▸ 向右 = 已折叠 */

/* ===== 教师打分（作业详情：学生提交列表） ===== */
.score-input { width:5.2rem; min-height:0; height:34px; padding:.25rem .5rem; text-align:center; font-weight:700; }
.score-badge { font-size:.85rem; }
.grade-form { margin:0; flex-wrap:nowrap; }
.grade-form .btn { padding:.32rem .7rem; font-size:.82rem; }

/* Bootstrap 5.1 没有 text-bg-* 工具类，补齐徽章底色（否则是白字透明底，看不清） */
.badge.text-bg-primary { background:var(--purple)!important; color:#fff!important; }
.badge.text-bg-info { background:#0e7490!important; color:#fff!important; }
.badge.text-bg-success { background:#16835c!important; color:#fff!important; }
.badge.text-bg-secondary { background:#8288a0!important; color:#fff!important; }
.badge.text-bg-warning { background:#b8860b!important; color:#fff!important; }
.badge.text-bg-danger { background:#c0392b!important; color:#fff!important; }

/* 分页控件：与主题紫色保持一致（Bootstrap 5.1 没有分页 CSS 变量，直接覆盖样式） */
.pagination { gap:4px; }
.pagination .page-item .page-link { margin-left:0; padding:.35rem .7rem; border:1px solid #e4dffc; border-radius:9px; color:var(--purple); font-weight:700; }
.pagination .page-link:hover { color:var(--purple-dark); background:var(--lavender); border-color:#d5cdfb; }
.pagination .page-link:focus { box-shadow:0 0 0 .2rem rgba(105,87,232,.16); }
.pagination .page-item.active .page-link { color:#fff; background:var(--purple); border-color:var(--purple); box-shadow:0 4px 10px rgba(105,87,232,.24); }
.pagination .page-item.disabled .page-link { color:#a9adbe; background:#fff; border-color:var(--line); }