:root {
  --ink: #1e2927;
  --muted: #66736f;
  --line: #dfe6e3;
  --surface: #ffffff;
  --canvas: #f4f7f5;
  --green: #176b5b;
  --green-2: #238873;
  --green-soft: #e7f3ef;
  --amber: #b86610;
  --amber-soft: #fff1dc;
  --red: #b63c44;
  --red-soft: #fdebed;
  --blue: #356ea8;
  --blue-soft: #eaf2fb;
  --shadow: 0 10px 28px rgba(25, 58, 49, .08);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.55 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.mobile-only { display: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.lock-screen { position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:20px; background:#123e37; }
.lock-card { width:min(380px,100%); display:grid; gap:13px; justify-items:center; padding:32px; border-radius:9px; background:white; box-shadow:0 25px 80px rgba(0,0,0,.35); text-align:center; }
.lock-card h1 { margin:4px 0 0; font-size:22px; }
.lock-card p,.lock-card small { margin:0; color:var(--muted); }
.lock-card .field { width:100%; text-align:center; font-size:22px; letter-spacing:.28em; }
.locked .app-shell { visibility:hidden; }
.display-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.display-tabs button { padding:8px 14px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:white; }
.display-tabs button.active { color:white; background:var(--green); border-color:var(--green); }
.class-display { min-height:650px; padding:30px; overflow:hidden; color:#ecfaf5; background:#123e37; border-radius:8px; }
.class-display > header { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.18); }
.class-display > header span { color:#9ac6ba; letter-spacing:.14em; }
.class-display > header h1 { margin:3px 0 0; font-size:28px; }
.class-display > header time { color:#b9ddd4; font-size:17px; }
.display-panel { padding:28px 0; }
.display-panel > h2 { margin:0 0 25px; text-align:center; font-size:32px; }
.display-panel > p { color:#9ac6ba; text-align:center; }
.display-ranking { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.display-ranking article { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.07); }
.display-ranking article > span { color:#9ac6ba; font-size:18px; }
.display-ranking .avatar { margin:0; }
.display-ranking strong { color:#aee4d4; font-size:26px; }
.display-ranking .rank-1 { background:#8a6722; }
.display-ranking .rank-2 { background:#526e69; }
.display-ranking .rank-3 { background:#765239; }
.display-praise { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.display-praise article { min-height:140px; display:flex; flex-direction:column; justify-content:space-between; padding:18px; color:var(--ink); background:#e8f4f0; border-radius:8px; }
.display-praise p { font-size:17px; }
.display-praise footer { color:var(--green); text-align:right; }
.display-duty { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:850px; margin:auto; }
.display-duty article { display:flex; justify-content:space-between; padding:22px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.07); font-size:19px; }
.display-schedule { display:grid; gap:14px; max-width:850px; margin:auto; }
.display-schedule article { display:grid; grid-template-columns:110px 1fr; align-items:center; padding:20px; border-radius:8px; background:rgba(255,255,255,.08); }
.display-schedule time { color:#aee4d4; font-size:26px; font-weight:800; }
.display-schedule h3 { margin:0; font-size:22px; }
.class-display:fullscreen { border-radius:0; padding:4vw; }
.class-display:fullscreen .display-panel > h2 { font-size:4vw; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: #edf8f4;
  background: #123e37;
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand { display: flex; gap: 11px; align-items: center; padding: 22px 18px 16px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 8px; color: #123e37; background: #b9e1d4;
  font-size: 19px; font-weight: 800;
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand span { color: #a8c8bf; font-size: 11px; }
#mainNav { padding: 5px 10px 16px; overflow-y: auto; }
.nav-group-title {
  margin: 15px 9px 6px; color: #7fa79d; font-size: 11px;
  font-weight: 700; letter-spacing: .12em;
}
.nav-item {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 2px 0; border: 0; border-radius: 6px;
  color: #cce0da; background: transparent; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: #217462; box-shadow: inset 3px 0 #aee0d1; }
.nav-icon { width: 21px; text-align: center; font-size: 16px; }
.sidebar-foot { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.privacy-note { margin-bottom: 10px; color: #a8c8bf; font-size: 12px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #61d09d; }

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10; min-height: 78px;
  display: flex; align-items: center; gap: 18px; padding: 13px 28px;
  background: rgba(244,247,245,.93); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title p { margin: 0; color: var(--muted); font-size: 12px; }
.topbar-title h1 { margin: 1px 0 0; font-size: 23px; line-height: 1.25; }
.topbar-actions { display: flex; flex-shrink: 0; gap: 10px; align-items: center; }
.global-search {
  width: 220px; display: flex; gap: 7px; align-items: center; padding: 8px 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; }
.content { padding: 24px 28px 46px; max-width: 1500px; margin: 0 auto; }

.primary-button, .secondary-button, .ghost-button, .danger-button, .icon-button {
  border: 1px solid transparent; border-radius: 6px; transition: .16s ease;
}
.primary-button { padding: 9px 14px; color: white; background: var(--green); }
.primary-button:hover { background: var(--green-2); }
.secondary-button { padding: 8px 12px; color: var(--green); background: var(--green-soft); border-color: #c8e0d9; }
.ghost-button { padding: 8px 12px; color: inherit; background: transparent; border-color: currentColor; opacity: .88; }
.danger-button { padding: 8px 12px; color: var(--red); background: var(--red-soft); border-color: #f4cbd0; }
.icon-button { width: 34px; height: 34px; color: var(--ink); background: var(--surface); border-color: var(--line); }
.full { width: 100%; }

.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 18px; }
.page-head h2 { margin: 0; font-size: 20px; }
.page-head p { margin: 3px 0 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card, .panel, .student-card, .feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 0 rgba(10,40,32,.02);
}
.stat-card { padding: 16px; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); }
.stat-value { margin: 8px 0 0; font-size: 28px; font-weight: 800; line-height: 1; }
.stat-foot { margin-top: 8px; color: var(--muted); font-size: 12px; }
.positive { color: var(--green); }
.warning { color: var(--amber); }
.danger { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.panel { padding: 18px; min-width: 0; }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.panel-head h3 { margin: 0; font-size: 16px; }
.panel-head small { color: var(--muted); }
.collapsible-panel .panel-head { align-items: flex-start; }
.compact-summary {
  padding: 14px 16px;
  color: var(--muted);
  background: #f8faf9;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.subtle { color: var(--muted); }
.empty-state { padding: 34px 18px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 6px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.quick-action {
  min-width: 0;
  min-height: 78px; padding: 10px; border: 1px solid var(--line); border-radius: 6px;
  background: #fbfcfb; color: var(--ink); text-align: left;
}
.quick-action:hover { border-color: #9bc8bc; background: var(--green-soft); transform: translateY(-1px); }
.quick-action b, .quick-action span { display: block; }
.quick-action b { margin-bottom: 4px; font-size: 15px; }
.quick-action span { color: var(--muted); font-size: 11px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 14px 21px; border-left: 1px solid var(--line); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); }
.timeline p { margin: 0; }
.timeline time { color: var(--muted); font-size: 11px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px;
}
.audit-toolbar { margin-bottom: 12px; }
.audit-detail { max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
.conflict-notice > p:first-child { margin-top: 0; padding: 12px; color: var(--red); background: var(--red-soft); border-left: 4px solid var(--red); }
.onboarding-active .modal-head .icon-button { display: none; }
.personal-setup { display: grid; gap: 18px; }
.setup-intro { display: flex; align-items: center; gap: 14px; }
.setup-intro h3, .setup-intro p { margin: 0; }
.setup-intro p { margin-top: 4px; color: var(--muted); }
.setup-choice { display: grid; gap: 9px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.setup-choice legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.setup-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.setup-choice label:has(input:checked) { border-color: var(--green-2); background: var(--green-soft); }
.setup-choice input { margin-top: 3px; }
.setup-choice b, .setup-choice small { display: block; }
.setup-choice small { margin-top: 3px; color: var(--muted); }
.setup-actions { justify-content: flex-end; }
.field, .toolbar input, .toolbar select {
  min-height: 38px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink); background: white; outline: none;
}
.field:focus, .toolbar input:focus, .toolbar select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px var(--green-soft); }
textarea.field { width: 100%; min-height: 100px; resize: vertical; }
.field-label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.field-label .field { color: var(--ink); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.form-grid .wide { grid-column: 1 / -1; }
.student-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:7px; padding:10px; border:1px solid var(--line); border-radius:6px; background:#fafcfb; }
.student-check-grid label { display:flex; gap:6px; align-items:center; color:var(--ink); font-size:13px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); background: #f8faf9; font-size: 12px; font-weight: 700; }
tbody tr:hover { background: #f8fbfa; }
.avatar {
  width: 32px; height: 32px; display: inline-grid; place-items: center; margin-right: 8px;
  border-radius: 50%; color: #174c40; background: #d7eee7; font-weight: 800; vertical-align: middle;
}
.tag, .status-pill {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px;
  border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px;
}
.tag-delete {
  border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1; padding: 0 0 0 2px;
}
.tag-delete:hover { color: var(--red); }
.tag.amber, .status-pill.amber { color: var(--amber); background: var(--amber-soft); }
.tag.red, .status-pill.red { color: var(--red); background: var(--red-soft); }
.tag.blue, .status-pill.blue { color: var(--blue); background: var(--blue-soft); }
.ai-mode-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
  max-width: 230px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--amber-soft);
  color: var(--amber);
  line-height: 1.25;
}
.ai-mode-badge.blue { color: var(--blue); background: var(--blue-soft); }
.ai-mode-badge b, .ai-mode-badge small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mode-badge small { max-width: 100%; opacity: .9; font-size: 10px; }
.inline-actions { display: flex; gap: 5px; }
.compact-list { display: grid; gap: 6px; margin-top: 12px; }
.compact-list .record-row { padding: 8px 0; }
.mini-button { min-width: 29px; height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: white; }
.mini-button:hover { border-color: var(--green-2); color: var(--green); }
.data-center-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.data-center-stats .stat-card { padding: 12px 14px; }
.data-center-stats .stat-card h3 { margin-bottom: 3px; font-size: 13px; }
.data-center-stats .stat-value { margin-top: 5px; font-size: 21px; }
.data-center-stats .stat-foot { margin-top: 4px; font-size: 12px; }
.backup-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  border-left: 5px solid var(--green);
}
.backup-hero h3 { margin: 8px 0 4px; font-size: 20px; }
.backup-hero p { margin: 0 0 5px; color: var(--muted); }
.backup-hero small { color: var(--muted); }
.ai-status-panel { align-self: start; }
.system-status-grid.compact-system-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.global-search-results { margin-bottom: 16px; border-left: 5px solid var(--blue); }
.global-search-results .record-row b { display: block; margin-top: 4px; }
.batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8faf9;
}
.pagination-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}
.compact-toolbar { margin-top: 12px; margin-bottom: 0; }
.compact-toolbar input { min-width: 220px; }
.template-grid, .score-tier-grid, .report-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.template-card, .tier-card, .report-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}
.template-card p, .tier-card p, .report-card p, .report-card li { overflow-wrap: anywhere; line-height: 1.7; }
.report-list .empty-state { grid-column: 1 / -1; }
.batch-report-item { break-after: page; page-break-after: always; }
.mobile-quick-record {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: var(--green);
  box-shadow: var(--shadow);
  font-size: 26px;
}

.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.student-card { padding: 14px; }
.student-card-top { display: flex; justify-content: space-between; gap: 10px; }
.student-card h3 { margin: 0; font-size: 16px; }
.score { font-size: 22px; font-weight: 800; color: var(--green); }
.score-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.score-actions button { min-height: 36px; }

.attendance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 9px; }
.attendance-card {
  min-height: 78px; padding: 11px; border: 1px solid var(--line); border-radius: 7px;
  background: white; text-align: left;
}
.attendance-card b, .attendance-card span { display: block; }
.attendance-card span { margin-top: 6px; font-size: 12px; }
.attendance-card.present { border-color: #9dd4c5; background: var(--green-soft); }
.attendance-card.late { border-color: #edc890; background: var(--amber-soft); }
.attendance-card.leave { border-color: #a9c8e7; background: var(--blue-soft); }
.attendance-card.absent { border-color: #edabb1; background: var(--red-soft); }

.bar-row { display: grid; grid-template-columns: 70px 1fr 44px; gap: 10px; align-items: center; margin: 10px 0; }
.bar-track { height: 10px; overflow: hidden; border-radius: 99px; background: #e9eeec; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--green-2); }
.bar-fill.bar-danger { background: var(--red); }
.bar-fill.bar-amber { background: #d88930; }
.mood-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mood-box { padding: 15px; border-radius: 7px; text-align: center; }
.mood-box strong { display: block; font-size: 25px; }
.mood-happy { background: var(--green-soft); }
.mood-normal { background: var(--amber-soft); }
.mood-sad { background: var(--red-soft); }
.mood-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mood-button { min-height: 96px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 16px; }
.mood-button span { display: block; font-size: 35px; }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-card { padding: 16px; }
.feature-card h3 { margin: 0 0 6px; }
.feature-card p { min-height: 45px; margin: 0 0 13px; color: var(--muted); }
.duty-board { display: grid; gap: 10px; }
.duty-slot {
  display: grid; grid-template-columns: 44px minmax(130px, .7fr) minmax(180px, 1fr);
  gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 7px; background: #fbfcfb;
}
.duty-slot h3, .duty-slot small { margin: 0; }
.duty-slot small { color: var(--muted); }
.duty-index {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px;
  color: var(--green); background: var(--green-soft); font-weight: 800;
}
.record-row, .review-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.record-row:last-child, .review-row:last-child { border-bottom: 0; }
.record-row p, .review-row p { margin: 3px 0; color: var(--muted); }
.record-row > div:last-child { display: flex; gap: 8px; align-items: center; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.product-card {
  position: relative; min-height: 156px; padding: 18px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: white;
}
.product-card h3 { max-width: 70%; margin: 0 0 7px; font-size: 16px; }
.product-card p { color: var(--muted); }
.product-cost {
  position: absolute; top: 15px; right: 15px; padding: 5px 8px; border-radius: 5px;
  color: var(--amber); background: var(--amber-soft); font-weight: 800;
}
.seating-panel { overflow-x: auto; }
.blackboard {
  width: min(560px, 80%); margin: 0 auto 26px; padding: 9px; border-radius: 4px;
  color: #d9eee8; background: #28554a; text-align: center; letter-spacing: .16em;
}
.seating-grid {
  min-width: 520px; display: grid; grid-template-columns: repeat(var(--seat-cols), minmax(92px, 1fr));
  gap: 12px; max-width: 900px; margin: 0 auto;
}
.seat {
  min-height: 72px; padding: 10px; border: 2px solid transparent; border-radius: 7px;
  color: var(--ink); background: white; text-align: center;
}
.seat small, .seat b { display: block; }
.seat small { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.seat b { font-size: 15px; }
.seat-male { background: var(--blue-soft); border-color: #b9d2e9; }
.seat-female { background: #f8ecf2; border-color: #e6c4d4; }
.seat-empty { border-style: dashed; border-color: var(--line); color: var(--muted); }
.seat.selected { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.seat-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 18px; }
.seat-legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.male { background: #9fc5e7; }
.legend-dot.female { background: #dfadc5; }
.legend-dot.empty { background: #dce3e0; }
.info-sheet { display: grid; gap: 12px; }
.info-line { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.info-line span:first-child { color: var(--muted); }
.student-profile { display: grid; gap: 16px; }
.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}
.profile-hero > div:first-child { min-width: 0; }
.profile-hero h3 { display: inline-block; margin: 0 0 0 8px; font-size: 22px; vertical-align: middle; }
.profile-hero p { margin: 6px 0 8px; color: var(--muted); }
.profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.profile-trend { height: 90px; }
.privacy-banner { padding: 10px 12px; border-radius: 6px; color: var(--amber); background: var(--amber-soft); font-size: 12px; }
.schedule-list { display: grid; gap: 7px; }
.schedule-row {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row time { color: var(--green); font-size: 17px; font-weight: 800; }
.schedule-row time small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.schedule-row h3 { margin: 4px 0 0; font-size: 14px; }
.schedule-row.done { opacity: .52; }
.schedule-row.done h3 { text-decoration: line-through; }
.progress-line { height: 7px; margin: 10px 0; overflow: hidden; border-radius: 99px; background: #e8eeeb; }
.progress-line div { height: 100%; border-radius: inherit; background: var(--green-2); }
.volunteer-card p { min-height: auto; }
.critical-row {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.critical-row:last-child { border-bottom: 0; }
.critical-main p { margin: 5px 0; color: var(--muted); }
.critical-main .status-pill { margin-left: 8px; }
.score-trend { height: 54px; display: flex; gap: 5px; align-items: flex-end; margin-top: 8px; }
.score-trend span { position: relative; width: 25px; height: 100%; display: flex; justify-content: center; align-items: flex-end; background: #f0f4f2; border-radius: 3px; overflow: hidden; }
.score-trend i { width: 100%; background: #9bcfc0; }
.score-trend .latest i { background: var(--red); }
.score-trend small { position: absolute; bottom: 2px; color: #173f37; font-size: 9px; font-weight: 700; }
.program-list { display: grid; gap: 8px; }
.program-row {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb;
}
.program-row p { margin: 2px 0 0; color: var(--muted); }
.program-order { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }
.evaluation-note { padding: 13px 0; border-bottom: 1px solid var(--line); }
.evaluation-note:last-child { border-bottom: 0; }
.evaluation-note > div { display: flex; justify-content: space-between; gap: 10px; }
.evaluation-note time { color: var(--muted); font-size: 11px; }
.evaluation-note p { margin: 6px 0 9px; }
.evaluation-note footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-list { display: grid; gap: 11px; }
.qa-item { padding: 15px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfb; }
.qa-item header { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: start; }
.qa-item header small { display: block; margin-top: 3px; color: var(--muted); }
.qa-mark, .qa-answer > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: white; background: var(--green); font-weight: 800; }
.qa-answer { display: grid; grid-template-columns: 32px 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.qa-answer > span { color: var(--green); background: var(--green-soft); }
.qa-answer p { margin: 3px 0; }
.resource-card blockquote { margin: 10px 0; padding: 10px; color: var(--green); background: var(--green-soft); border-left: 3px solid var(--green); }
.resource-card footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.question-list { display: grid; gap: 11px; }
.question-item { padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.question-item header, .question-item footer { display: flex; justify-content: space-between; gap: 9px; align-items: center; }
.question-item h3 { margin: 13px 0; font-size: 15px; }
.question-item details { padding: 9px 11px; margin-bottom: 12px; border-radius: 5px; background: #f7faf8; }
.question-item summary { cursor: pointer; color: var(--green); font-weight: 700; }
.question-item footer { justify-content: flex-end; }
.certificate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.certificate { padding: 12px; color: #5d411e; background: #fffaf0; border: 1px solid #e7d3a3; }
.certificate-border { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; border: 5px double #b78935; text-align: center; }
.certificate-star { color: #c18a26; font-size: 30px; }
.certificate h2 { margin: 8px 0; font-size: 30px; letter-spacing: .14em; }
.certificate h3 { margin: 5px 0 15px; font-weight: 500; }
.certificate blockquote { max-width: 520px; margin: 0; line-height: 1.8; }
.certificate footer { width: 100%; display: flex; justify-content: space-between; margin-top: 28px; }
.certificate.warm { color: #714a4a; background: #fff7f7; border-color: #e5bdbd; }
.certificate.fresh { color: #245b50; background: #f4fbf8; border-color: #add4ca; }
.album-section { margin-bottom: 22px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; }
.album-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; }
.album-card img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #e9efec; }
.album-card > div { padding: 12px; }
.album-card time { color: var(--muted); font-size: 11px; }
.album-card h3 { margin: 4px 0; }
.album-card p { color: var(--muted); }
.heatmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.heat-cell { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding: 13px; border-radius: 7px; }
.heat-cell strong { font-size: 25px; }
.heat-cell span { font-size: 12px; }
.heat-low { color: #8c252d; background: #f8d8dc; }
.heat-mid { color: #8a5011; background: #ffe8bf; }
.heat-high { color: #17604f; background: #d9efe8; }
.learning-path { border-left: 4px solid var(--green); }
.path-steps { display: grid; gap: 0; }
.path-steps article { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 7px 0 17px; }
.path-steps article:not(:last-child)::after { content:""; position:absolute; left:17px; top:40px; bottom:0; width:2px; background:var(--line); }
.path-steps article > span { width: 36px; height: 36px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-weight:800; }
.path-steps p { margin: 3px 0; color: var(--muted); }
.path-steps small { color: var(--blue); }
.debate-side ol { padding-left: 22px; }
.debate-side li { margin: 10px 0; }
.debate-side.affirmative { border-top: 4px solid var(--green); }
.debate-side.negative { border-top: 4px solid var(--red); }
.debate-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 18px; }
.debate-flow div { display: flex; gap: 9px; padding: 11px; border-radius: 6px; background: #f5f8f7; }
.debate-flow span { flex: 0 0 25px; height: 25px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-weight:700; }
.debate-flow p { margin: 2px 0; }
.auction-card { text-align:center; }
.auction-card > span { color:var(--muted); }
.auction-card h2 { margin:5px 0; }
.auction-price { display:grid; gap:2px; margin:18px auto; padding:14px; border-radius:7px; background:var(--amber-soft); }
.auction-price strong { color:var(--amber); font-size:30px; }
.mood-history { height:150px; display:flex; gap:9px; align-items:flex-end; padding:15px 5px 0; border-bottom:1px solid var(--line); }
.mood-history > div { flex:1; min-width:24px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.mood-history i { width:100%; max-width:34px; border-radius:5px 5px 0 0; background:var(--amber); transition:.3s; }
.mood-history i.happy { background:var(--green-2); }
.mood-history i.sad { background:var(--red); }
.mood-history small { color:var(--muted); font-size:9px; }
.breathing-stage { display:grid; place-items:center; min-height:330px; text-align:center; }
.breathing-circle { width:120px; height:120px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--green); font-size:18px; font-weight:800; animation:breathe 12s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(.72);background:#3d8d7b} 33%{transform:scale(1.35);background:#176b5b} 50%{transform:scale(1.35)} 83%{transform:scale(.72);background:#5ba997} }
.emotion-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.emotion-card { min-height:110px; padding:12px; border:1px solid var(--line); border-radius:7px; background:white; }
.emotion-card b,.emotion-card span { display:block; }
.emotion-card b { font-size:28px; }
.slip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; }
.parent-slip { padding:22px; border:1px solid #c9ded7; border-top:6px solid var(--green); background:white; box-shadow:var(--shadow); }
.parent-slip header { display:flex; flex-direction:column; gap:4px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.parent-slip header span { color:var(--muted); font-size:11px; }
.parent-slip header b { font-size:18px; }
.parent-slip h3 { margin:14px 0 4px; color:var(--green); font-size:13px; }
.parent-slip p { margin:0; }
.parent-slip footer { margin-top:20px; color:var(--muted); text-align:right; font-size:11px; display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; }
.emergency-row { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.emergency-row:last-child { border-bottom:0; }
.emergency-row h3 { margin:5px 0; }
.emergency-row p,.emergency-row small { color:var(--muted); }
.emergency-row > div:last-child { display:grid; gap:8px; text-align:right; }
.comparison-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.comparison-grid article { padding:13px; border:1px solid var(--line); border-radius:7px; }
.comparison-grid h4 { margin:0 0 10px; }
.compare-bars { display:grid; gap:7px; }
.compare-bars span { position:relative; height:27px; display:flex; align-items:center; padding:0 7px; overflow:hidden; border-radius:4px; background:#edf2f0; }
.compare-bars i { position:absolute; inset:0 auto 0 0; background:#a9d5c9; }
.compare-bars span:nth-child(2) i { background:#c5d7ea; }
.compare-bars b { position:relative; z-index:1; font-size:11px; }
.weekly-paper { padding:28px; border:1px solid var(--line); background:white; box-shadow:var(--shadow); }
.weekly-paper header { text-align:center; }
.weekly-paper header h2 { margin:0; font-size:24px; }
.weekly-paper table { margin-top:18px; border:1px solid var(--line); }
.weekly-paper th,.weekly-paper td { border:1px solid var(--line); white-space:normal; }
.weekly-paper tbody th { width:100px; color:var(--green); text-align:center; }
.weekly-paper ol { margin:0; padding-left:20px; }
.weekly-paper footer { display:flex; justify-content:center; gap:9px; margin-top:18px; }
.visit-record { padding:15px 0; border-bottom:1px solid var(--line); }
.visit-record:last-child { border-bottom:0; }
.visit-record header,.visit-record footer { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.visit-record header > div { display:flex; gap:7px; align-items:center; }
.visit-record time { color:var(--muted); }
.visit-record blockquote { margin:10px 0; padding:10px 12px; color:var(--green); background:var(--green-soft); border-left:3px solid var(--green); }
.sports-card p { min-height:auto; }
.export-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.export-grid button { min-height:85px; padding:12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fbfcfb; text-align:left; }
.export-grid button:hover { border-color:var(--green); background:var(--green-soft); }
.export-grid b,.export-grid span { display:block; }
.export-grid span { margin-top:4px; color:var(--muted); font-size:11px; }
.praise-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.praise-note { min-height: 150px; padding: 18px; border-radius: 7px; box-shadow: var(--shadow); }
.praise-note > span { font: 700 34px/1 Georgia, serif; opacity: .35; }
.praise-note p { margin: -5px 0 17px; font-size: 15px; }
.praise-note footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.note-0 { background: #e8f4f0; }
.note-1 { background: #fff1dc; }
.note-2 { background: #eaf2fb; }
.note-3 { background: #f5edf8; }
.notice-hero {
  display: flex; justify-content: space-between; gap: 24px; align-items: center;
  margin-bottom: 16px; padding: 22px; border: 1px solid #c8e0d9; border-left: 5px solid var(--green);
  border-radius: 8px; background: white;
}
.notice-hero h2 { margin: 8px 0 4px; }
.notice-hero p { max-width: 760px; color: var(--muted); }
.notice-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--green); font-weight: 700; }
.report-paper { padding: 24px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.report-paper h2 { text-align: center; }
.report-paper blockquote { margin: 15px 0; padding: 12px 15px; background: var(--green-soft); border-left: 4px solid var(--green); }
.signature-line { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; color: var(--muted); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px;
  background: rgba(13, 31, 27, .48);
}
.modal { width: min(620px, 100%); max-height: min(86vh, 760px); overflow: auto; background: white; border-radius: 9px; box-shadow: 0 20px 70px rgba(0,0,0,.22); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; background: white; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 18px; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: grid; gap: 8px; }
.toast { min-width: 250px; max-width: 380px; padding: 11px 14px; color: white; background: #173f37; border-radius: 7px; box-shadow: var(--shadow); animation: toast-in .2s ease; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

.login-page {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 28px;
  background: #edf4f1;
}
.login-shell {
  width: min(960px, 100%); display: grid; grid-template-columns: 1.15fr .85fr;
  overflow: hidden; border: 1px solid #cbded8; border-radius: 8px; background: #fff; box-shadow: 0 22px 65px rgba(21, 68, 57, .14);
}
.login-copy { padding: 52px; color: #fff; background: #176b5b; }
.login-copy .brand-mark { color: var(--green); background: #fff; }
.login-copy > p { margin: 25px 0 8px; color: #cde5df; font-weight: 700; }
.login-copy h1 { max-width: 540px; margin: 0; font-size: 34px; line-height: 1.35; }
.login-copy ul { display: grid; gap: 10px; margin: 34px 0 0; padding-left: 20px; color: #e4f1ed; }
.login-card { align-self: center; padding: 45px; }
.login-card h2 { margin: 0 0 8px; font-size: 25px; }
.login-card > p { margin: 0 0 24px; color: var(--muted); }
.login-card .field-label { margin-bottom: 15px; }
.login-card .danger { min-height: 22px; margin-top: 13px; font-size: 13px; }
.password-shell {
  width: min(460px, 100%); padding: 38px; border: 1px solid #cbded8; border-radius: 8px;
  background: #fff; box-shadow: 0 22px 65px rgba(21, 68, 57, .14);
}
.password-shell h1 { margin: 20px 0 8px; font-size: 26px; }
.password-shell > p { margin: 0 0 24px; color: var(--muted); line-height: 1.7; }
.password-shell .field-label { margin-bottom: 14px; }
.password-shell button { margin-top: 9px; }
.password-shell .danger { min-height: 22px; margin-top: 12px; }

.portal-page { min-height: 100vh; margin: 0; background: var(--surface); }
.portal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(20px, calc((100vw - 920px) / 2)); background: #fff; border-bottom: 1px solid var(--line);
}
.portal-header .brand { padding: 0; }
.portal-header .brand strong, .portal-header .brand span { color: var(--ink); }
.portal-main { width: min(920px, calc(100% - 32px)); margin: 28px auto; }
.portal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.portal-summary > div { padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.portal-summary span, .portal-summary strong { display: block; }
.portal-summary span { color: var(--muted); font-size: 12px; }
.portal-summary strong { margin-top: 8px; color: var(--green); font-size: 23px; }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .split-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .login-page { padding: 14px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-copy { padding: 28px 24px; }
  .login-copy h1 { font-size: 24px; }
  .login-copy ul { display: none; }
  .login-card { padding: 28px 24px; }
  .portal-header { padding: 11px 16px; }
  .portal-header .brand span { display: none; }
  .portal-summary { grid-template-columns: 1fr; }
  .mobile-only { display: inline-grid; place-items: center; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: -250px; z-index: 40; width: 236px; transition: left .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .topbar { flex-wrap: wrap; padding: 10px 14px; min-height: 68px; }
  .topbar-actions { width: 100%; gap: 8px; }
  .topbar-actions .global-search { display: flex; flex: 1; width: auto; }
  .topbar-actions .primary-button {
    width: 38px; min-width: 38px; padding: 8px 0; overflow: hidden;
    color: transparent; font-size: 0;
  }
  .topbar-actions .primary-button::after {
    content: "＋"; color: white; font-size: 17px;
  }
  .topbar-title h1 { font-size: 19px; }
  .content { padding: 17px 14px 38px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .stats-grid, .feature-grid { grid-template-columns: 1fr; }
  .data-center-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backup-hero, .profile-hero { align-items: flex-start; flex-direction: column; }
  .profile-stats, .compact-system-grid { grid-template-columns: 1fr; }
  .ai-mode-badge { width: 100%; max-width: none; }
  .template-grid, .score-tier-grid, .report-list { grid-template-columns: 1fr; }
  .compact-toolbar input { min-width: 0; width: 100%; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .mood-buttons { grid-template-columns: 1fr; }
  .duty-slot { grid-template-columns: 38px 1fr; }
  .duty-slot .field-label { grid-column: 1 / -1; }
  .record-row, .review-row, .notice-hero { align-items: flex-start; flex-direction: column; }
  .info-line { grid-template-columns: 1fr; gap: 2px; }
  .critical-row { grid-template-columns: 42px 1fr; }
  .critical-row > button { grid-column: 1 / -1; }
  .qa-item header { grid-template-columns: 32px 1fr; }
  .qa-item header .status-pill { grid-column: 2; justify-self: start; }
  .resource-card footer { align-items: flex-start; flex-direction: column; }
  .certificate-grid { grid-template-columns: 1fr; }
  .certificate h2 { font-size: 23px; }
  .emotion-card-grid { grid-template-columns:1fr; }
  .emergency-row { align-items:flex-start; flex-direction:column; }
  .emergency-row > div:last-child { text-align:left; }
  .weekly-paper { padding:15px; }
  .visit-record header,.visit-record footer { align-items:flex-start; flex-direction:column; }
  .class-display { min-height:620px; padding:18px; }
  .class-display > header h1 { font-size:20px; }
  .class-display > header time { font-size:12px; }
  .display-panel > h2 { font-size:24px; }
  .display-ranking { grid-template-columns:repeat(2,1fr); }
  .display-praise,.display-duty { grid-template-columns:1fr; }
  .export-grid { grid-template-columns:1fr; }
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}
.section-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.system-status-grid > div {
  min-height: 98px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfb;
}
.system-status-grid span,
.system-status-grid b,
.system-status-grid small { display: block; }
.system-status-grid span,
.system-status-grid small { color: var(--muted); }
.system-status-grid b { margin: 8px 0 4px; }
.deploy-check-list .record-row:last-child { border-bottom: 0; }
.ai-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
  margin: 13px 0 5px;
  padding: 9px 11px;
  border-left: 3px solid var(--blue);
  color: var(--muted);
  background: #f4f8fb;
  font-size: 11px;
}
.ai-provenance > span { color: var(--blue); font-weight: 800; }
.ai-provenance > b { color: var(--ink); }
.ai-provenance details { flex-basis: 100%; }
.ai-provenance details a { display: block; margin-top: 5px; color: var(--blue); }
.checkbox-line { display: flex; gap: 9px; align-items: center; }
.checkbox-line input { width: 17px; height: 17px; }
.album-placeholder {
  min-height: 155px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--muted);
  background: #edf2f0;
  text-align: center;
}
@media (max-width: 640px) {
  .search-toolbar { grid-template-columns: 1fr; }
  .system-status-grid { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar, .page-head, .no-print, .toast-region, .mobile-quick-record { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; }
  .panel, .report-paper { border: 0; box-shadow: none; }
}