:root{
  --bg:#0a0a0c;
  --surface:#141417;
  --surface-2:#1b1b1f;
  --surface-3:#242429;
  --text:#f6f4ea;
  --text-dim:#a7a59a;
  --border:#2b2b30;
  --border-soft:#202024;
  --accent:#ffd400;
  --accent-strong:#ffe14d;
  --accent-deep:#f5b800;
  --accent-soft:rgba(255,212,0,.12);
  --accent-border:rgba(255,212,0,.42);
  --danger:#ff5b5b;
  --ok:#48d68a;
  --warn:#ffb020;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 28px rgba(0,0,0,.5);
  --glow:0 0 22px rgba(255,212,0,.38);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

body{
  margin:0;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* 启动加载页：使用确认后的夜色山水图，底部由真实加载进度覆盖效果图中的静态文字。 */
body.app-booting{overflow:hidden;}
.app-loader{position:fixed;inset:0;z-index:1200;min-height:100dvh;overflow:hidden;background:#03101e url("assets/app-loader-night.webp") center top/cover no-repeat;color:#f3d08a;opacity:1;transition:opacity .36s cubic-bezier(.16,1,.3,1);}
.app-loader::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,10,21,.08),rgba(2,12,25,.12) 45%,rgba(2,13,27,.86) 56%,#03101e 64%);}
.app-loader::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 61%,rgba(213,171,91,.08),transparent 26%);}
.app-loader.is-complete{opacity:0;pointer-events:none;}
.app-loader[hidden]{display:none;}
.app-loader-copy{position:absolute;z-index:1;left:50%;bottom:max(58px,8dvh);width:min(82vw,430px);transform:translateX(-50%);text-align:center;}
.app-loader-seal{display:block;width:10px;height:10px;margin:0 auto 20px;border-radius:50%;background:#efbd68;box-shadow:0 0 16px rgba(239,189,104,.24);}
.app-loader h1{margin:0;color:#f2c779;font-family:"Zhi Mang Xing","STXingkai","华文行楷","KaiTi",cursive;font-size:clamp(43px,12vw,61px);font-weight:400;letter-spacing:.12em;line-height:1.08;}
.app-loader-copy>p{margin:17px 0 39px;color:#d4b77f;font-size:clamp(15px,4.2vw,19px);letter-spacing:.08em;}
.app-loader-progress-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:12px;}
.app-loader-track{height:6px;overflow:hidden;border-radius:999px;background:rgba(151,169,187,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.2);}
.app-loader-track span{display:block;width:0;height:100%;border-radius:inherit;background:#efbd68;transition:width .2s linear;}
.app-loader-progress-row strong{color:#efbd68;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;}
.app-loader-copy>small{display:block;margin-top:20px;color:#ab9d86;font-size:13px;letter-spacing:.06em;}
body.app-booting .auth-gate,body.app-booting .page,body.app-booting #topbar{visibility:hidden!important;}
@media (min-width:821px){.app-loader{background-position:center 35%;}.app-loader::before{background:linear-gradient(90deg,rgba(2,10,21,.22),transparent 25%,transparent 75%,rgba(2,10,21,.22)),linear-gradient(180deg,rgba(2,10,21,.12),rgba(2,13,27,.88) 58%,#03101e 70%);}.app-loader-copy{bottom:max(42px,7vh);}}
@media (prefers-reduced-motion:reduce){.app-loader,.app-loader-track span{transition:none;}}

/* faint tech grid + top glow */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255,212,0,.12), transparent 60%),
    radial-gradient(70% 50% at 100% 0%, rgba(255,212,0,.05), transparent 55%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:auto,auto,42px 42px,42px 42px;
}

#topbar{
  background:rgba(10,10,12,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--text);
  padding:14px 16px;
  font-size:16px;font-weight:700;
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--accent-border);
  letter-spacing:1px;
  display:flex;align-items:center;gap:9px;
}
#topbar #title{display:flex;align-items:center;gap:9px;color:var(--text);}
#topbar #title::before{
  content:"";width:13px;height:13px;border-radius:3px;
  background:var(--accent);box-shadow:var(--glow);
  flex:none;
}

.page{display:none;padding:16px;max-width:720px;margin:0 auto;}
.page.active{display:block;}
h2{font-size:20px;margin:4px 0 16px;color:var(--text);letter-spacing:.5px;}
h3{font-size:16px;margin:0 0 10px;color:var(--text);}

/* ===== HERO (homepage) ===== */
.hero{
  text-align:center;
  padding:46px 10px 30px;
  position:relative;
}
.hero-title{
  font-family:"Zhi Mang Xing","STXingkai","华文行楷","KaiTi","楷体",cursive;
  font-size:clamp(52px,20vw,124px);
  line-height:1;
  margin:0 auto;
  color:var(--accent);
  letter-spacing:0;
  text-shadow:0 0 34px rgba(255,212,0,.38),0 2px 0 rgba(0,0,0,.4);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 16px;
  justify-content:center;
  width:max-content;
  max-width:92vw;
}
.hero-title span{
  display:inline-block;
  animation:charIn .85s cubic-bezier(.16,1,.3,1) both;
}
.hero-title span:nth-child(1){animation-delay:.04s;}
.hero-title span:nth-child(2){animation-delay:.17s;}
.hero-title span:nth-child(3){animation-delay:.30s;}
.hero-title span:nth-child(4){animation-delay:.43s;}
.hero-sub{
  margin:18px 0 0;
  color:var(--text-dim);
  font-size:14px;
  letter-spacing:5px;
  animation:fadeUp .9s ease .5s both;
}
@keyframes charIn{
  from{opacity:0;transform:translateY(30px) rotate(-7deg);filter:blur(7px);}
  to{opacity:1;transform:none;filter:none;}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;margin-bottom:14px;
  box-shadow:var(--shadow);
  transition:border-color .2s, opacity 2s ease, transform 2s cubic-bezier(.16,1,.3,1);
  opacity:0; transform:translateY(16px);   /* 初始隐藏，进入视口后级联淡入 */
}
.card.in-view{opacity:1; transform:none;}
.card:hover{border-color:var(--accent-border);}

.btn{
  background:var(--accent);
  color:#0a0a0c;
  border:0;border-radius:var(--radius-sm);
  padding:10px 14px;font-size:15px;font-weight:700;
  margin:4px 6px 4px 0;cursor:pointer;
  transition:.18s;
}
.btn:hover{filter:brightness(1.08);box-shadow:var(--glow);}
.btn:active{transform:translateY(1px);}

.bigbtn{
  display:block;width:100%;text-align:left;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;font-size:16px;color:var(--text);
  margin-bottom:10px;cursor:pointer;transition:.18s;
}
.bigbtn:hover{border-color:var(--accent-border);box-shadow:0 0 0 1px var(--accent-border) inset;}
.bigbtn:active{background:var(--surface-2);border-color:var(--accent);}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.grid12{grid-template-columns:repeat(3,1fr);}

.navbtn{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 0;font-size:15px;color:var(--text);
  cursor:pointer;text-align:center;transition:.18s;
}
.navbtn:hover{border-color:var(--accent-border);}
.navbtn:active{background:var(--surface-2);border-color:var(--accent);}
.navbtn.special{
  grid-column:1 / -1;
  background:var(--accent);color:#0a0a0c;border-color:var(--accent);
  font-weight:700;box-shadow:var(--glow);
}
.navbtn.special:active{background:var(--accent-deep);}

.subjbtn{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 0;font-size:14px;color:var(--text);cursor:pointer;
  transition:.18s;
}
.subjbtn:hover{border-color:var(--accent-border);}
.subjbtn:active{background:var(--surface-2);}

.tabs{display:flex;gap:8px;margin-bottom:12px;}
.tab{
  flex:1;padding:10px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);
  color:var(--text-dim);font-size:14px;cursor:pointer;transition:.18s;
}
.tab.active{background:var(--accent);color:#0a0a0c;border-color:var(--accent);font-weight:700;}
.tabpane{display:none;}
.tabpane.active{display:block;}

/* Harness 对接报告。DESIGN_VARIANCE:3; MOTION:2; DENSITY:6。 */
.feedback-assignment-card {
  margin: 9px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(150, 193, 218, .32);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(9, 31, 48, .82), rgba(10, 22, 35, .76));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.feedback-assignment-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.feedback-assignment-head h3 { margin: 0; color: #f3f7f9; font-size: 17px; }
.feedback-assignment-head p { margin: 3px 0 0; color: #aac0cb; font-size: 12px; }
.feedback-counts { display: flex; justify-content: flex-end; gap: 10px; color: #b6cbd6; font-size: 12px; white-space: nowrap; text-align: right; }
.feedback-counts b { color: #f3cf78; font-size: 15px; margin-left: 2px; }
.feedback-assignment-actions { display: grid; grid-template-columns: minmax(132px, 1.45fr) minmax(132px, 1.45fr) 74px 74px; gap: 9px; margin: 9px 0 16px; }
.feedback-primary-actions, .feedback-admin-actions { display: contents; }
.feedback-assignment-actions button { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0 9px; font-size: 13px; }
.overview-metrics { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 10px; margin-top: 16px; }
.overview-metrics span { border: 1px solid rgba(155, 196, 221, .22); border-radius: 10px; padding: 10px 12px; background: rgba(4, 17, 29, .38); }
.overview-metrics small { display: block; color: #a9beca; margin-bottom: 5px; }
.overview-metrics b { color: #f4d27f; font-size: 20px; }
.integration-overview-section { margin-top: 16px; padding: 15px 16px; border-radius: 12px; background: rgba(7, 21, 33, .56); border: 1px solid rgba(137, 181, 204, .18); }
.integration-overview-section h3 { margin: 0 0 9px; color: #eff5f8; font-size: 16px; }
.integration-overview-section p { margin: 0; color: #c1d1d9; line-height: 1.7; }
.integration-question-rate-list { display: grid; gap: 7px; }
.integration-question-rate-list > div { display: grid; grid-template-columns: 76px 1fr 58px; align-items: center; gap: 10px; color: #c7d7de; padding: 8px 0; border-bottom: 1px solid rgba(159, 196, 215, .13); }
.integration-question-rate-list > div:last-child { border-bottom: 0; }
.integration-question-rate-list strong { color: #f1ce76; text-align: right; }
.integration-note { display: grid; gap: 7px; margin: 13px 0; color: #aebfc9; font-size: 13px; }
.integration-note textarea { min-height: 64px; resize: vertical; color: #eaf1f4; background: rgba(3, 16, 27, .7); border: 1px solid rgba(148, 191, 215, .34); border-radius: 8px; padding: 8px 10px; font: inherit; }
.integration-note .mini { justify-self: start; }
@media (max-width: 720px) {
  .feedback-assignment-head > :first-child { min-width: 0; max-width: 48%; }
  .feedback-assignment-head h3 { font-size: 16px; line-height: 1.3; }
  .feedback-counts { gap: 7px; font-size: 11px; }
  .feedback-counts b { font-size: 14px; }
  .feedback-assignment-actions { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, .85fr) minmax(0, .85fr); gap: 7px; }
  .feedback-assignment-actions button { height: 44px; min-height: 44px; padding: 0 5px; font-size: 11px; white-space: nowrap; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .integration-question-rate-list > div { grid-template-columns: 64px 1fr 52px; font-size: 13px; }
}
#page-subject .tabs{flex-wrap:wrap;}
#page-subject .tabs .tab{flex:1 1 128px;}
#page-subject .subject-sticky-head{position:sticky;top:0;z-index:20;margin:0 -16px;padding:10px 16px 9px;background:linear-gradient(180deg,rgba(4,16,28,.98),rgba(4,16,28,.92));border-bottom:1px solid rgba(150,193,218,.22);backdrop-filter:blur(10px);}
#page-subject .subject-sticky-head h2{margin:0 0 8px;font-size:19px;}
#page-subject .subject-sticky-head>.btn{padding:7px 13px;font-size:13px;}
#page-subject .subject-sticky-head .tabs{margin:10px 0 0;}
#page-subject .subject-scroll-content{padding-top:8px;}
.integration-report-intro{
  position:relative;overflow:hidden;margin-bottom:12px;padding:18px 18px 16px;
  border:1px solid var(--accent-border);border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent-soft),rgba(20,20,23,.94) 55%);
}
.integration-report-intro::after{content:"";position:absolute;right:-24px;top:-42px;width:120px;height:120px;border:1px solid var(--accent-border);transform:rotate(26deg);opacity:.42;}
.integration-report-intro h3{margin:5px 0 6px;font-size:19px;}
.integration-report-intro p{position:relative;z-index:1;margin:0;max-width:540px;color:var(--text-dim);font-size:13px;line-height:1.65;}
.integration-report-kicker{display:inline-block;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.integration-report-list{display:grid;gap:9px;}
.integration-report-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;width:100%;
  padding:15px 16px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;
}
.integration-report-item:hover{border-color:var(--accent-border);background:var(--surface-2);transform:translateY(-1px);}
.integration-report-item-main,.integration-report-item-meta{display:grid;gap:4px;min-width:0;}
.integration-report-item-main small{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.08em;}
.integration-report-item-main strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap;}
.integration-task-id{overflow:hidden;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;text-overflow:ellipsis;white-space:nowrap;}
.integration-report-item-meta{justify-items:end;color:var(--text-dim);font-size:11px;}
.integration-report-item-meta b{color:var(--text);font-size:13px;}
.integration-report-open{color:var(--accent);font-size:12px;font-weight:800;white-space:nowrap;}
.integration-loading,.integration-empty,.integration-error{min-height:180px;padding:34px 18px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center;}
.integration-loading{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;color:var(--text-dim);}
.integration-loading span{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:integration-pulse 1s ease-in-out infinite;}
.integration-loading span:nth-child(2){animation-delay:.12s;}.integration-loading span:nth-child(3){animation-delay:.24s;}
.integration-loading p{flex-basis:100%;margin:8px 0 0;font-size:13px;}
@keyframes integration-pulse{0%,100%{opacity:.28;transform:translateY(0);}50%{opacity:1;transform:translateY(-4px);}}
.integration-empty span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 13px;border:1px solid var(--accent-border);border-radius:50%;color:var(--accent);font-size:18px;font-weight:800;}
.integration-empty h4,.integration-error h4{margin:0 0 7px;font-size:15px;}.integration-empty p,.integration-error p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.6;}
.integration-error .btn{margin-top:15px;}
.integration-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--accent);font-size:12px;font-weight:800;}
.integration-detail-head{padding:17px;border:1px solid var(--accent-border);border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-soft),var(--surface));}
.integration-detail-head h3{margin:6px 0 14px;font-size:20px;}
.integration-detail-meta{display:grid;grid-template-columns:1.3fr 1fr .55fr;gap:8px;}
.integration-detail-meta>span{min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(10,10,12,.34);font-size:12px;overflow-wrap:anywhere;}
.integration-detail-meta small,.integration-summary-grid small{display:block;margin-bottom:4px;color:var(--text-dim);font-size:10px;font-weight:700;letter-spacing:.06em;}
.integration-student-list{display:grid;gap:8px;margin-top:10px;}
.integration-student{overflow:hidden;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface);}
.integration-student[open]{border-color:var(--accent-border);}
.integration-student summary{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none;}
.integration-student summary::-webkit-details-marker{display:none;}
.integration-student summary>span:first-child{display:flex;align-items:baseline;gap:7px;min-width:0;}
.integration-student summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.integration-student summary small{color:var(--text-dim);font-size:11px;}
.integration-student summary>strong{color:var(--accent);font-size:15px;text-align:right;}
.integration-student-status{padding:4px 7px;border-radius:999px;background:var(--accent-soft);color:var(--text-dim);font-size:11px;white-space:nowrap;}
.integration-student-body{padding:0 14px 14px;border-top:1px solid var(--border-soft);}
.integration-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.integration-summary-grid p{margin:0;padding:10px;border-radius:8px;background:var(--surface-2);font-size:12px;line-height:1.55;}
.integration-question-list{display:grid;gap:6px;}
.integration-question{display:grid;grid-template-columns:64px 42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border-left:3px solid var(--border);border-radius:7px;background:rgba(0,0,0,.18);font-size:12px;}
.integration-question.is-correct{border-left-color:var(--ok);}.integration-question.is-wrong{border-left-color:var(--danger);}
.integration-question>span{font-weight:800;}.integration-question.is-correct>span{color:var(--ok);}.integration-question.is-wrong>span{color:var(--danger);}
.integration-question p{margin:0;}.integration-question small{color:var(--text-dim);text-align:right;}

@media (max-width:620px){
  #page-subject .tabs .tab{flex-basis:calc(33.333% - 6px);font-size:12px;}
  .integration-report-item{grid-template-columns:minmax(0,1fr) auto;gap:10px;}.integration-report-item-meta{grid-column:1/-1;grid-template-columns:auto 1fr;justify-items:start}.integration-report-item-meta span:last-child{display:none;}.integration-report-open{grid-column:2;grid-row:1;}
  .integration-detail-meta{grid-template-columns:1fr 1fr;}.integration-detail-meta>span:first-child{grid-column:1/-1;}
  .integration-summary-grid{grid-template-columns:1fr;}.integration-question{grid-template-columns:58px 38px minmax(0,1fr);}.integration-question small{grid-column:1/-1;text-align:left;}
}
@media (prefers-reduced-motion:reduce){.integration-loading span{animation:none;}.integration-report-item{transition:none;}}

.row{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.classrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.classrow .bigbtn{flex:1;margin-bottom:0;}
.classrow .delbtn{margin:0;flex-shrink:0;}

.form select{
  width:100%;box-sizing:border-box;margin-top:4px;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;
  background:var(--surface-2);color:var(--text);
}
.hint{color:var(--text-dim);font-size:13px;margin:8px 0 0;}
.import-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0;}
.text-input{
  flex:1;min-width:180px;box-sizing:border-box;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;
  background:var(--surface-2);color:var(--text);
}
.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,212,0,.25);}
.text-input::placeholder{color:var(--text-dim);}
.delbtn{
  display:block;width:fit-content;background:var(--accent);color:#0a0a0c;
  border:0;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:700;
  cursor:pointer;margin:6px 0 0;
}
.editbtn{
  display:block;width:fit-content;background:var(--accent);color:#0a0a0c;
  border:0;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:700;
  cursor:pointer;margin:6px 0 0;
}
.absent{color:var(--warn);font-style:italic;font-weight:700;}
.btns{display:flex;align-items:center;gap:56px;margin-top:6px;}
.form{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.form label{font-size:14px;color:var(--text-dim);}
.form input{
  width:100%;box-sizing:border-box;margin-top:4px;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;
  background:var(--surface-2);color:var(--text);
}
.form input:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}

.heat{display:inline-block;padding:4px 8px;border-radius:6px;margin:3px;color:#fff;font-size:13px;background:var(--danger);}
.heatwrap{line-height:2;}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent-border);margin:0 0 12px;}
.btn.ghost:hover{background:var(--accent-soft);}
.mini{font-size:12px;padding:4px 8px;border-radius:6px;background:var(--accent);color:#0a0a0c;border:0;cursor:pointer;margin-left:6px;font-weight:700;}

.bar{background:var(--surface-3);border-radius:6px;height:18px;position:relative;margin:2px 0 10px;overflow:hidden;}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:6px;}

.kp-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-soft);font-size:14px;}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;}
.modal.hidden{display:none;}
.modal-box{
  background:var(--surface);border:1px solid var(--accent-border);
  border-radius:var(--radius);width:100%;max-width:560px;
  max-height:85vh;overflow:auto;padding:14px;box-shadow:var(--shadow);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;color:var(--text);}

.qrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border-soft);font-size:14px;flex-wrap:wrap;}
.qno{width:26px;height:26px;line-height:26px;text-align:center;background:var(--surface-3);border-radius:50%;font-size:13px;flex:none;color:var(--text-dim);}
.mark{width:24px;height:24px;line-height:24px;text-align:center;border-radius:6px;color:#0a0a0c;font-weight:700;flex:none;}
.mark.ok{background:var(--ok);}
.mark.bad{background:var(--danger);}
.qkp{font-weight:500;}
.qerr{color:var(--danger);font-size:13px;margin-left:auto;}
.core{display:inline-block;background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--accent-border);border-radius:10px;padding:2px 8px;font-size:12px;margin:2px;}
.corewrap{display:inline-block;margin-left:6px;vertical-align:middle;}
.kpblock{margin:4px 0;}

.subtabs{display:flex;gap:8px;margin:8px 0 12px;}
.subtab{
  flex:1;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 0;font-size:14px;color:var(--text-dim);cursor:pointer;transition:.18s;
}
.subtab.active{background:var(--accent);color:#0a0a0c;border-color:var(--accent);font-weight:700;}

/* 单科阶段分析：五入口 + 单内容区 */
.phase-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 18px;}
.phase-menu-btn{min-height:48px;padding:9px 10px;border:1px solid rgba(226,186,93,.28);border-radius:10px;background:rgba(8,25,40,.78);color:#dce6ee;font:600 13px/1.35 inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease,transform .15s ease;}
.phase-menu-btn:last-child{grid-column:1/-1;text-align:center;}
.phase-menu-btn.active{border-color:#e0ad58;background:#e0ad58;color:#07111e;box-shadow:0 8px 22px rgba(0,0,0,.2);}
.phase-menu-btn:active,.rank-mode-grid button:active,.trend-switch button:active,.phase-back:active{transform:translateY(1px) scale(.985);}
.phase-section-head{margin:0 0 14px;padding:0 0 11px;border-bottom:1px solid rgba(226,186,93,.2);}
.phase-section-head>span{display:block;margin-bottom:4px;color:#e6bd70;font-size:12px;letter-spacing:.12em;}
.phase-section-head h3{margin:0;color:#f4f5f2;font-size:20px;line-height:1.35;}
.phase-section-head p{margin:6px 0 0;color:#9fb0bf;font-size:12px;line-height:1.55;}
.phase-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.phase-metric{min-height:108px;padding:14px;border:1px solid rgba(151,181,203,.16);border-radius:12px;background:rgba(10,29,45,.86);}
.phase-metric.primary{grid-column:1/-1;background:linear-gradient(135deg,rgba(224,173,88,.2),rgba(10,29,45,.9));border-color:rgba(224,173,88,.42);}
.phase-metric span,.phase-metric small{display:block;color:#9fb0bf;font-size:12px;}
.phase-metric strong{display:block;margin:8px 0 5px;color:#f4d18c;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;}
.phase-metric.primary strong{font-size:40px;}
.phase-table-wrap{max-width:100%;overflow:auto;border:1px solid rgba(151,181,203,.16);border-radius:11px;background:rgba(7,22,35,.78);}
.phase-data-table{width:100%;border-collapse:collapse;color:#e8edf0;font-size:12px;}
.phase-data-table th,.phase-data-table td{padding:10px 9px;border-bottom:1px solid rgba(151,181,203,.12);text-align:center;white-space:nowrap;}
.phase-data-table th{position:sticky;top:0;z-index:2;background:#13283a;color:#d7e0e7;font-weight:700;}
.phase-data-table tbody tr:last-child td{border-bottom:0;}
.phase-data-table small{display:block;margin-top:3px;color:#8fa2b1;font-size:10px;}
.phase-data-table td:first-child{text-align:left;}
.band-cell{min-width:100px;}
.band-cell span{display:block;height:7px;min-width:0;border-radius:5px;background:#e0ad58;box-shadow:0 0 12px rgba(224,173,88,.25);}
.trend-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0 9px;}
.trend-switch button{min-height:40px;border:1px solid rgba(224,173,88,.28);border-radius:9px;background:#0d2639;color:#cbd8e1;font:600 13px inherit;cursor:pointer;}
.trend-switch button.active{background:#e0ad58;color:#07111e;border-color:#e0ad58;}
.trend-chart-shell{padding:8px 8px 2px;border:1px solid rgba(151,181,203,.16);border-radius:11px;background:rgba(7,22,35,.78);}
.trend-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 6px 10px;color:#9fb0bf;font-size:11px;line-height:1.45;}
.trend-caption b{color:#e9bd6c;white-space:nowrap;}
.trend-caption span{text-align:right;}
.rank-mode-grid{display:grid;gap:10px;}
.rank-mode-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:16px;border:1px solid rgba(224,173,88,.28);border-radius:12px;background:rgba(10,29,45,.86);color:#edf2f4;text-align:left;cursor:pointer;}
.rank-mode-grid b{font-size:16px;}
.rank-mode-grid span{color:#9fb0bf;font-size:12px;}
.phase-back{margin:0 0 12px;padding:8px 10px;border:1px solid rgba(224,173,88,.3);border-radius:8px;background:transparent;color:#edc777;font:600 12px inherit;cursor:pointer;}
.rank-stage{margin:0 0 16px;}
.rank-stage h4{display:flex;align-items:center;justify-content:space-between;margin:0;padding:9px 11px;border-radius:9px 9px 0 0;background:rgba(224,173,88,.14);color:#f1d28f;font-size:14px;}
.rank-stage h4 small{color:#aebdca;font-size:11px;font-weight:500;}
.rank-stage .phase-table-wrap{border-radius:0 0 10px 10px;}
.rank-diff{display:inline-block;min-width:38px;padding:3px 7px;border-radius:7px;font-weight:800;font-variant-numeric:tabular-nums;}
.rank-diff.negative{background:rgba(248,113,113,.16);color:#ff9c9c;}
.rank-diff.positive{background:rgba(74,222,128,.14);color:#7fe8a5;}
.rank-diff.zero{background:rgba(151,181,203,.14);color:#d3dee6;}
.rank-diff.missing{background:transparent;color:#7f919f;font-weight:500;}
.history-rank-table .sticky-name{position:sticky;left:0;z-index:3;min-width:92px;background:#0d2639;text-align:left;}
.history-rank-table thead .sticky-name{z-index:4;background:#13283a;}
.phase-loading{display:grid;gap:9px;padding:18px 0;}
.phase-loading span{height:58px;border-radius:10px;background:linear-gradient(90deg,rgba(151,181,203,.07),rgba(151,181,203,.17),rgba(151,181,203,.07));background-size:200% 100%;animation:phase-skeleton 1.2s linear infinite;}
.phase-empty{display:flex;flex-direction:column;gap:6px;padding:28px 18px;border:1px dashed rgba(224,173,88,.28);border-radius:12px;color:#dfe7eb;text-align:center;}
.phase-empty span{color:#91a4b3;font-size:12px;}
@keyframes phase-skeleton{to{background-position:-200% 0;}}
@media(max-width:420px){
  .phase-menu{grid-template-columns:1fr;}
  .phase-menu-btn:last-child{grid-column:auto;text-align:left;}
  .phase-metric-grid{gap:7px;}
  .phase-metric{padding:12px;min-height:101px;}
  .phase-metric strong{font-size:27px;}
  .phase-data-table th,.phase-data-table td{padding:9px 8px;}
}
@media(prefers-reduced-motion:reduce){.phase-loading span{animation:none;}.phase-menu-btn,.rank-mode-grid button,.trend-switch button,.phase-back{transition:none;}}

.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;}
.phasetbl{border-collapse:collapse;font-size:13px;width:100%;color:var(--text);}
.phasetbl th,.phasetbl td{border:1px solid var(--border);padding:5px 7px;text-align:center;white-space:nowrap;}
.phasetbl th{background:var(--surface-3);color:var(--text);}
.phasetbl .sticky-col{position:sticky;left:0;background:var(--surface-2);z-index:2;text-align:left;font-weight:600;}
.phasetbl thead .sticky-col{background:var(--surface-3);z-index:3;}
.phasetbl .sticky-col2{position:sticky;left:62px;width:78px;min-width:78px;background:var(--surface-2);z-index:2;text-align:left;font-weight:600;white-space:nowrap;}
.phasetbl thead .sticky-col2{background:var(--surface-3);z-index:3;}
.phasetbl .sticky-col3{position:sticky;left:140px;width:58px;min-width:58px;background:var(--surface-2);z-index:2;text-align:center;font-weight:600;white-space:nowrap;}
.phasetbl thead .sticky-col3{background:var(--surface-3);z-index:3;}
.phasetbl .col-no{width:62px;min-width:62px;max-width:62px;}

.tablescroll.sticky-head{max-height:72vh;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-sm);}
.tablescroll.sticky-head thead th{position:sticky;top:0;z-index:4;background:var(--surface-3);box-shadow:inset 0 -1px 0 var(--border);}
.tablescroll.sticky-head thead .sticky-col,
.tablescroll.sticky-head thead .sticky-col2,
.tablescroll.sticky-head thead .sticky-col3{background:var(--surface-3);z-index:6;box-shadow:inset -1px -1px 0 var(--border);}

.up{color:var(--ok);font-weight:600;}
.down{color:var(--danger);font-weight:600;}
.hist{display:flex;align-items:flex-end;gap:3px;height:90px;margin:8px 0;}
.histbar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-radius:3px 3px 0 0;min-width:6px;opacity:.9;}
.echart-box{width:100%;height:240px;margin:4px 0 2px;}

.case-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.case-img{width:90px;height:90px;object-fit:cover;border-radius:6px;cursor:zoom-in;flex:none;border:1px solid var(--border);}
.case-img:active{opacity:.85;}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;}
.lightbox.hidden{display:none;}
.lightbox-bar{position:absolute;top:10px;right:10px;}
.lightbox img{max-width:100%;max-height:90%;object-fit:contain;border-radius:4px;}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  .hero-title span,.hero-sub{animation:none!important;}
  *{transition:none!important;}
}

/* ===== 半亩方塘：深夜方塘首页与学科展陈外壳 ===== */
@font-face{
  font-family:"Zhi Mang Xing";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("vendor/zhi-mang-xing-subset.ttf?v=37") format("truetype");
}

:root{
  --bg:#07111e;
  --surface:#0d1a29;
  --surface-2:#122236;
  --surface-3:#1a2c43;
  --text:#eef3ed;
  --text-dim:#aeb9bd;
  --border:rgba(184,206,218,.18);
  --border-soft:rgba(184,206,218,.11);
  --accent:#d5a55c;
  --accent-strong:#edc97d;
  --accent-deep:#ae7831;
  --accent-soft:rgba(213,165,92,.14);
  --accent-border:rgba(213,165,92,.46);
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 18px 46px rgba(1,8,16,.45);
  --glow:0 10px 26px rgba(213,165,92,.18);
}

body{
  min-height:100dvh;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(59,92,129,.22), transparent 60%),
    #07111e;
}
body::before{
  background:
    radial-gradient(90% 62% at 50% -16%, rgba(124,151,173,.1), transparent 58%),
    linear-gradient(rgba(185,210,225,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,210,225,.018) 1px, transparent 1px);
  background-size:auto,48px 48px,48px 48px;
}

#topbar{
  min-height:54px;
  padding:13px 18px;
  background:rgba(5,14,24,.77);
  border-bottom-color:rgba(213,165,92,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.035);
}
#topbar #title{font-weight:650;letter-spacing:2px;}
#topbar #title::before{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff7d2 0 12%, var(--accent) 40%, #a86d2d 100%);
  box-shadow:0 0 16px rgba(232,197,120,.42);
}

.page.active{animation:page-arrive .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes page-arrive{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* 首页只使用新夜景原图。宽屏按原图比例向下延展，确保山脚、村落、池塘和前景完整可见。 */
#page-filter{
  --scene-width:min(100vw,860px);
  --scene-height:calc(var(--scene-width) * 1.7779);
  max-width:860px;
  min-height:max(calc(100dvh - 54px),var(--scene-height));
  padding:0 16px 96px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#page-filter::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:var(--scene-height);
  z-index:-2;
  border-radius:0 0 28px 28px;
  background:
    linear-gradient(180deg,rgba(3,12,24,.06) 0%,rgba(3,12,24,.01) 47%,rgba(3,12,24,.13) 76%,rgba(3,12,24,.3) 100%),
    url("assets/home-pond-night-final.png") center top / 100% auto no-repeat;
  background-color:#07111e;
  box-shadow:inset 0 -26px 44px rgba(4,12,23,.28);
}
.home-atmosphere{position:absolute;top:0;left:0;right:0;height:var(--scene-height);z-index:-1;overflow:hidden;pointer-events:none;}
.scene-image-layer{
  position:absolute;inset:0;
  background:url("assets/home-pond-night-final.png") center top / 100% auto no-repeat;
  opacity:0;
  transform-origin:center center;
  will-change:opacity,transform,filter;
}
/* 星空使用独立星点错峰闪烁，避免整片天空同时明暗变化。 */
.twinkle-field{position:absolute;inset:0 0 50%;overflow:hidden;}
.twinkle-field i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  border-radius:50%;
  background:rgba(238,246,255,.96);
  opacity:.12;
  box-shadow:0 0 calc(var(--s) * 2.4) rgba(208,231,255,.78);
  transform:translate3d(-50%,-50%,0) scale(.65);
  will-change:opacity,transform;
}
.twinkle-field .star-bright::before,.twinkle-field .star-bright::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:99px;background:rgba(222,239,255,.56);transform:translate(-50%,-50%);
}
.twinkle-field .star-bright::before{width:1px;height:calc(var(--s) * 3.6);}
.twinkle-field .star-bright::after{width:calc(var(--s) * 3.6);height:1px;}
/* 两层云雾都取自原图，以不同速度沿山腰移动，保留原画风格。 */
.scene-clouds{
  mix-blend-mode:screen;
  filter:brightness(1.2) blur(1.1px) saturate(.8);
}
.cloud-upper{
  -webkit-mask-image:
    radial-gradient(ellipse 56% 14% at 18% 34%,#000 0 42%,transparent 79%),
    radial-gradient(ellipse 46% 10% at 64% 45%,#000 0 30%,transparent 78%);
  mask-image:
    radial-gradient(ellipse 56% 14% at 18% 34%,#000 0 42%,transparent 79%),
    radial-gradient(ellipse 46% 10% at 64% 45%,#000 0 30%,transparent 78%);
}
.cloud-lower{
  filter:brightness(1.15) blur(1.5px) saturate(.76);
  -webkit-mask-image:
    radial-gradient(ellipse 60% 11% at 24% 46%,#000 0 38%,transparent 80%),
    radial-gradient(ellipse 54% 9% at 79% 51%,#000 0 32%,transparent 78%);
  mask-image:
    radial-gradient(ellipse 60% 11% at 24% 46%,#000 0 38%,transparent 80%),
    radial-gradient(ellipse 54% 9% at 79% 51%,#000 0 32%,transparent 78%);
}
/* 水面保留原图纹理，仅做轻微折射；涟漪限制在池塘局部。 */
.scene-water{
  mix-blend-mode:screen;
  filter:brightness(1.12) saturate(.9);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0 73%,rgba(0,0,0,.22) 78%,#000 86% 98%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0 73%,rgba(0,0,0,.22) 78%,#000 86% 98%,transparent 100%);
  transform-origin:center 88%;
}
.pond-ripples{position:absolute;inset:72% 0 2%;overflow:hidden;}
.pond-ripple{
  position:absolute;
  width:30%;aspect-ratio:4.6/1;
  border:1px solid rgba(191,222,239,.48);
  border-radius:50%;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.18);
  box-shadow:0 0 8px rgba(130,193,224,.13),inset 0 0 8px rgba(130,193,224,.08);
  will-change:opacity,transform;
}
.ripple-one{left:47%;top:43%;--ripple-delay:-1.1s;--ripple-time:7.2s;}
.ripple-two{left:67%;top:61%;width:22%;--ripple-delay:-4.7s;--ripple-time:8.4s;}
.ripple-three{left:31%;top:73%;width:18%;--ripple-delay:-6.2s;--ripple-time:9.1s;}

.home-hero{
  padding:clamp(52px,13vw,96px) 8px 32px;
  text-align:center;
}
.hero-title{
  font-size:clamp(64px,16vw,116px);
  color:#f0c576;
  text-shadow:0 2px 0 rgba(3,10,18,.7),0 0 30px rgba(230,184,98,.18);
  gap:0 22px;
}
.hero-sub{
  margin-top:20px;
  color:rgba(235,242,239,.78);
  font-size:13px;
  letter-spacing:.34em;
  text-indent:.34em;
}
.hero-sub span{display:inline-block;}
.is-authenticated .hero-title span,.is-authenticated .hero-sub{animation:none;}

/* 登录后的首页只播放一次：背景先停留，再依次呈现题名、诗句、班级与备案。 */
#page-filter.home-intro .hero-title span,
#page-filter.home-intro .hero-sub span,
#page-filter.home-intro .home-class-panel,
#page-filter.home-intro .site-records{opacity:0;}
#page-filter.home-intro .hero-title span{animation:home-title-character .72s cubic-bezier(.16,1,.3,1) both;}
#page-filter.home-intro .hero-title span:nth-child(1){animation-delay:.55s;}
#page-filter.home-intro .hero-title span:nth-child(2){animation-delay:.88s;}
#page-filter.home-intro .hero-title span:nth-child(3){animation-delay:1.21s;}
#page-filter.home-intro .hero-title span:nth-child(4){animation-delay:1.54s;}
#page-filter.home-intro .hero-sub span{animation:home-sub-character .42s ease both;}
#page-filter.home-intro .hero-sub span:nth-child(1){animation-delay:2.15s;}
#page-filter.home-intro .hero-sub span:nth-child(2){animation-delay:2.31s;}
#page-filter.home-intro .hero-sub span:nth-child(3){animation-delay:2.47s;}
#page-filter.home-intro .hero-sub span:nth-child(4){animation-delay:2.63s;}
#page-filter.home-intro .hero-sub span:nth-child(5){animation-delay:2.79s;}
#page-filter.home-intro .hero-sub span:nth-child(6){animation-delay:2.95s;}
#page-filter.home-intro .hero-sub span:nth-child(7){animation-delay:3.11s;}
#page-filter.home-intro .hero-sub span:nth-child(8){animation-delay:3.27s;}
#page-filter.home-intro .hero-sub span:nth-child(9){animation-delay:3.43s;}
#page-filter.home-intro .home-class-panel{animation:home-panel-rise .78s cubic-bezier(.16,1,.3,1) 4.18s both;}
#page-filter.home-intro .site-records{animation:home-records-in .72s ease 5.15s both;}
.home-entering #topbar{animation:home-topbar-in .58s ease 4.55s both;}
@keyframes home-title-character{from{opacity:0;transform:translate3d(0,22px,0) scale(.9);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}
@keyframes home-sub-character{from{opacity:0;transform:translateY(8px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@keyframes home-panel-rise{from{opacity:0;transform:translate3d(0,46px,0);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@keyframes home-records-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes home-topbar-in{from{opacity:0;}to{opacity:1;}}

.home-class-panel{
  position:relative;
  z-index:1;
  margin:0 auto;
  max-width:690px;
  padding:16px;
  border:1px solid rgba(222,193,134,.32);
  border-radius:var(--radius);
  background:linear-gradient(145deg, rgba(10,24,40,.87), rgba(7,18,31,.76));
  box-shadow:0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(112%);
  -webkit-backdrop-filter:blur(14px) saturate(112%);
  min-width:0;
}
.home-class-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  min-width:0;
}
.home-class-heading h2{margin:2px 0 0;font-size:21px;letter-spacing:.04em;}
.home-kicker{
  margin:0;
  color:rgba(237,201,125,.82);
  font-size:11px;
  letter-spacing:.16em;
}
.home-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:none;
  min-height:40px;
  margin:0;
  padding:9px 13px;
  white-space:nowrap;
}
.home-add span{font-size:19px;line-height:.8;font-weight:400;}
#page-filter #class-list:empty::before{
  content:"正在整理班级记录";
  display:block;
  padding:15px 4px 5px;
  color:var(--text-dim);
  font-size:13px;
}
#page-filter .classrow{margin-bottom:9px;min-width:0;}
#page-filter .classrow:last-child{margin-bottom:0;}
#page-filter .classrow .bigbtn{
  min-width:0;
  min-height:58px;
  margin:0;
  padding:13px 16px;
  background:rgba(16,35,53,.74);
  border-color:rgba(200,220,228,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.class-main{display:grid;gap:5px;min-width:0;}
.class-main strong{font-size:16px;font-weight:650;letter-spacing:.02em;}
.class-main small{color:#aebdcc;font-size:11px;line-height:1.45;white-space:normal;}
.class-count{flex:none;color:#ead184;font-size:12px;}
.view-all-classes{width:100%;min-height:42px;border:1px solid rgba(222,193,134,.28);border-radius:10px;background:rgba(5,17,30,.48);color:#ead184;font:inherit;font-size:13px;cursor:pointer;}
.view-all-classes:active{transform:translateY(1px) scale(.99);}
.homeroom-access-note{grid-column:1/-1;margin:0 0 5px;padding:7px 10px;border-left:2px solid #e2c172;background:rgba(226,193,114,.08);color:#ead184;font-size:12px;}

/* 全部班级使用底部抽屉，列表独立滚动，避免 8 个以上班级挤满首页。 */
.class-drawer{position:fixed;inset:0;z-index:1200;display:grid;align-items:end;}
.class-drawer.hidden{display:none;}
.class-drawer-backdrop{position:absolute;inset:0;border:0;background:rgba(1,7,14,.7);backdrop-filter:blur(3px);}
.class-drawer-sheet{position:relative;width:min(100%,720px);max-height:min(78dvh,720px);margin:0 auto;padding:9px 16px 18px;border:1px solid rgba(222,193,134,.34);border-bottom:0;border-radius:18px 18px 0 0;background:#091827;box-shadow:0 -22px 70px rgba(0,0,0,.48);animation:drawer-rise .34s cubic-bezier(.16,1,.3,1) both;}
.drawer-handle{width:42px;height:4px;margin:0 auto 14px;border-radius:99px;background:rgba(220,230,235,.28);}
.class-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.class-drawer-head h2{margin:2px 0 0;}
.class-search{display:grid;gap:6px;margin:12px 0;color:#aebdcc;font-size:12px;}
.class-search input{min-height:42px;border:1px solid rgba(143,170,194,.3);border-radius:10px;background:#061421;color:#f1f5f6;padding:0 12px;font:inherit;outline:none;}
.class-search input:focus{border-color:#d7b767;box-shadow:0 0 0 3px rgba(215,183,103,.12);}
.all-class-list{display:grid;gap:8px;max-height:calc(78dvh - 170px);overflow:auto;overscroll-behavior:contain;padding:1px 2px 10px;}
.drawer-class-button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;border:1px solid rgba(153,180,201,.18);border-radius:11px;background:rgba(15,35,52,.82);color:#f3f5f5;padding:11px 13px;text-align:left;font:inherit;cursor:pointer;}
.drawer-empty{color:#9fb0c1;text-align:center;padding:30px 10px;}
.drawer-open{overflow:hidden;}
@keyframes drawer-rise{from{transform:translateY(36px);opacity:.3;}to{transform:none;opacity:1;}}
#page-filter .classrow .bigbtn:hover{
  background:rgba(21,44,64,.91);
  border-color:rgba(237,201,125,.58);
  box-shadow:0 10px 22px rgba(2,9,17,.2), inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(-1px);
}

/* 学科页：边缘素材讲述学科，中央保留给成绩与教案内容。 */
body[data-subject="chinese"]{--subject-bg:url("assets/subjects/chinese.webp");--subject-preview:url("assets/subjects/chinese-preview.webp");--accent:#c88c62;--accent-strong:#edbf96;--accent-deep:#9b5c3c;--accent-soft:rgba(200,140,98,.15);--accent-border:rgba(220,164,116,.48);}
body[data-subject="math"]{--subject-bg:url("assets/subjects/math.webp");--subject-preview:url("assets/subjects/math-preview.webp");--accent:#c8a65d;--accent-strong:#ead084;--accent-deep:#99752f;--accent-soft:rgba(200,166,93,.15);--accent-border:rgba(225,194,117,.48);}
body[data-subject="english"]{--subject-bg:url("assets/subjects/english.webp");--subject-preview:url("assets/subjects/english-preview.webp");--accent:#8da7c6;--accent-strong:#c3d3e5;--accent-deep:#5d789a;--accent-soft:rgba(141,167,198,.15);--accent-border:rgba(169,193,219,.48);}
body[data-subject="politics"]{--subject-bg:url("assets/subjects/politics.webp");--subject-preview:url("assets/subjects/politics-preview.webp");--accent:#bd8163;--accent-strong:#e5b294;--accent-deep:#92563d;--accent-soft:rgba(189,129,99,.15);--accent-border:rgba(220,161,129,.48);}
body[data-subject="history"]{--subject-bg:url("assets/subjects/history.webp");--subject-preview:url("assets/subjects/history-preview.webp");--accent:#b99460;--accent-strong:#dfc18b;--accent-deep:#896836;--accent-soft:rgba(185,148,96,.15);--accent-border:rgba(214,181,127,.48);}
body[data-subject="physics"]{--subject-bg:url("assets/subjects/physics.webp");--subject-preview:url("assets/subjects/physics-preview.webp");--accent:#6eaec6;--accent-strong:#a9d8e6;--accent-deep:#397a93;--accent-soft:rgba(110,174,198,.15);--accent-border:rgba(146,205,222,.48);}
body[data-subject="chemistry"]{--subject-bg:url("assets/subjects/chemistry.webp");--subject-preview:url("assets/subjects/chemistry-preview.webp");--accent:#75ad9d;--accent-strong:#aed4c8;--accent-deep:#447d70;--accent-soft:rgba(117,173,157,.15);--accent-border:rgba(153,204,190,.48);}
body[data-subject="biology"]{--subject-bg:url("assets/subjects/biology.webp");--subject-preview:url("assets/subjects/biology-preview.webp");--accent:#83ad79;--accent-strong:#b8d8ad;--accent-deep:#527c4b;--accent-soft:rgba(131,173,121,.15);--accent-border:rgba(170,205,160,.48);}
body[data-subject="geography"]{--subject-bg:url("assets/subjects/geography.webp");--subject-preview:url("assets/subjects/geography-preview.webp");--accent:#9aa86d;--accent-strong:#cad4a0;--accent-deep:#6b7744;--accent-soft:rgba(154,168,109,.15);--accent-border:rgba(192,204,145,.48);}
body[data-subject="pe"]{--subject-bg:url("assets/subjects/pe.webp");--subject-preview:url("assets/subjects/pe-preview.webp");--accent:#c98765;--accent-strong:#eab79d;--accent-deep:#99583d;--accent-soft:rgba(201,135,101,.15);--accent-border:rgba(224,165,133,.48);}

body[data-subject] .page.active{
  position:relative;
  isolation:isolate;
  padding-top:24px;
}
body[data-subject] .page.active::before{
  content:"";
  position:fixed;
  inset:54px 0 0;
  z-index:-1;
  background-color:#07111e;
  background:
    linear-gradient(90deg, rgba(4,13,23,.87) 0%, rgba(4,13,23,.61) 19%, rgba(4,13,23,.23) 50%, rgba(4,13,23,.61) 81%, rgba(4,13,23,.87) 100%),
    linear-gradient(180deg, rgba(4,13,23,.23), rgba(4,13,23,.74)),
    var(--subject-bg) center / cover no-repeat;
}
body.subject-bg-ready[data-subject] .page.active::before{
  background:
    linear-gradient(90deg, rgba(4,13,23,.87) 0%, rgba(4,13,23,.61) 19%, rgba(4,13,23,.23) 50%, rgba(4,13,23,.61) 81%, rgba(4,13,23,.87) 100%),
    linear-gradient(180deg, rgba(4,13,23,.23), rgba(4,13,23,.74)),
    var(--subject-bg) center / cover no-repeat;
}
.subject-background-status{margin:-4px 0 14px;color:#bdccda;font-size:12px;line-height:1.45;}
body.subject-bg-ready .subject-background-status{display:none;}
body.subject-bg-error .subject-background-status{color:#e8c780;}
body[data-subject] .card,
body[data-subject] .row,
body[data-subject] .bigbtn,
body[data-subject] .navbtn,
body[data-subject] .tab,
body[data-subject] .subtab,
body[data-subject] .modal-box{
  background:rgba(7,18,30,.82);
  border-color:rgba(194,215,223,.17);
  backdrop-filter:blur(10px) saturate(108%);
  -webkit-backdrop-filter:blur(10px) saturate(108%);
}
body[data-subject] .row{box-shadow:0 8px 22px rgba(1,8,16,.2);}
body[data-subject] .bigbtn:hover,
body[data-subject] .navbtn:hover,
body[data-subject] .card:hover{border-color:var(--accent-border);}

/* 学科页签以浅亮的学科色确认当前内容，避免深色背景上出现不可读的黑字。 */
body[data-subject] .tab,
body[data-subject] .subtab{
  transition:
    background .22s cubic-bezier(.16,1,.3,1),
    border-color .22s cubic-bezier(.16,1,.3,1),
    color .18s ease,
    box-shadow .22s cubic-bezier(.16,1,.3,1),
    transform .12s cubic-bezier(.16,1,.3,1);
}
body[data-subject] .tab.active,
body[data-subject] .subtab.active{
  background:linear-gradient(135deg,var(--accent-soft),rgba(7,18,30,.92));
  color:var(--accent-strong);
  border-color:var(--accent-border);
  font-weight:700;
  box-shadow:
    inset 0 0 0 1px var(--accent-border),
    inset 0 1px 0 rgba(255,255,255,.11),
    0 5px 14px rgba(1,8,16,.14);
}
body[data-subject] .tab:active,
body[data-subject] .subtab:active{transform:translateY(1px) scale(.97);}

@media (prefers-reduced-motion: no-preference){
  body[data-subject] .tab.active,
  body[data-subject] .subtab.active{animation:tab-select-arrive .24s cubic-bezier(.16,1,.3,1) both;}
  body[data-subject] .tabpane.active{animation:tab-pane-arrive .22s cubic-bezier(.16,1,.3,1) both;}
}
@keyframes tab-select-arrive{
  from{opacity:.78;transform:translate3d(0,2px,0) scale(.97);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@keyframes tab-pane-arrive{
  from{opacity:0;transform:translate3d(0,6px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

/* 进入学科时，先让教师完整看到一屏学科画面，再按阅读顺序呈现操作内容。 */
#page-subject.page.active{animation:none;}
#page-subject.subject-intro > *{
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,-18px,0);
  pointer-events:none;
}
#page-subject.subject-reveal > .subject-sticky-head,
#page-subject.subject-reveal > .subject-scroll-content > .tabpane.active > *{
  animation:subject-content-enter .48s cubic-bezier(.16,1,.3,1) both;
  will-change:transform,opacity;
}
#page-subject.subject-reveal > .subject-sticky-head{animation-delay:0s;}
#page-subject.subject-reveal > .subject-scroll-content > .tabpane.active > :nth-child(1){animation-delay:.18s;}
#page-subject.subject-reveal > .subject-scroll-content > .tabpane.active > :nth-child(2){animation-delay:.26s;}
#page-subject.subject-reveal > .subject-scroll-content > .tabpane.active > :nth-child(3){animation-delay:.34s;}
#page-subject.subject-reveal > .subject-scroll-content > .tabpane.active > :nth-child(n+4){animation-delay:.42s;}
@keyframes subject-content-enter{
  from{opacity:0;transform:translate3d(0,-18px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

.btn,.bigbtn,.navbtn,.tab,.subtab,.mini,.delbtn,.editbtn{touch-action:manipulation;}
.btn:focus-visible,.bigbtn:focus-visible,.navbtn:focus-visible,.tab:focus-visible,.subtab:focus-visible,.mini:focus-visible,.delbtn:focus-visible,.editbtn:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
}
.btn:active,.bigbtn:active,.navbtn:active,.tab:active,.subtab:active,.mini:active,.delbtn:active,.editbtn:active{transform:translateY(1px) scale(.985);}

@media (prefers-reduced-motion: no-preference){
  .twinkle-field i{animation:scene-star-twinkle var(--t) ease-in-out var(--d) infinite;}
  .cloud-upper{animation:new-scene-clouds-upper 25s cubic-bezier(.45,.05,.55,.95) -8s infinite alternate;}
  .cloud-lower{animation:new-scene-clouds-lower 34s cubic-bezier(.45,.05,.55,.95) -19s infinite alternate;}
  .scene-water{animation:new-scene-water 7.5s ease-in-out -2.2s infinite alternate;}
  .pond-ripple{animation:pond-ripple-expand var(--ripple-time) cubic-bezier(.18,.5,.35,1) var(--ripple-delay) infinite;}
}
@keyframes scene-star-twinkle{
  0%,100%{opacity:.1;transform:translate3d(-50%,-50%,0) scale(.62);}
  38%{opacity:.24;transform:translate3d(-50%,-50%,0) scale(.8);}
  52%{opacity:.96;transform:translate3d(-50%,-50%,0) scale(1.28);}
  68%{opacity:.3;transform:translate3d(-50%,-50%,0) scale(.86);}
}
@keyframes new-scene-clouds-upper{
  from{opacity:.12;transform:translate3d(-3.8%,0,0) scale(1.035);}
  to{opacity:.3;transform:translate3d(3.1%,.18%,0) scale(1.055);}
}
@keyframes new-scene-clouds-lower{
  from{opacity:.08;transform:translate3d(3.2%,.08%,0) scale(1.045);}
  to{opacity:.24;transform:translate3d(-3.6%,-.12%,0) scale(1.06);}
}
@keyframes new-scene-water{
  0%{opacity:.04;transform:translate3d(-.55%,0,0) scaleX(1.018) scaleY(1.002);filter:brightness(1.06) saturate(.88);}
  52%{opacity:.15;transform:translate3d(.3%,.08%,0) scaleX(1.024) scaleY(1.006);filter:brightness(1.16) saturate(.92);}
  100%{opacity:.07;transform:translate3d(.65%,-.05%,0) scaleX(1.018) scaleY(1.003);filter:brightness(1.1) saturate(.89);}
}
@keyframes pond-ripple-expand{
  0%,22%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.18);}
  28%{opacity:.42;}
  72%{opacity:.12;}
  82%,100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.35);}
}

@media (prefers-reduced-motion:reduce){
  .twinkle-field i{opacity:.28;transform:translate3d(-50%,-50%,0) scale(.8);}
  .scene-clouds,.scene-water,.pond-ripple{animation:none!important;}
  .scene-clouds{opacity:.1;transform:none;}
  .scene-water{opacity:.05;transform:none;}
  .pond-ripple{display:none;}
}

@media (max-width:600px){
  #page-filter{padding-left:12px;padding-right:12px;}
  .home-hero{padding-top:58px;padding-bottom:27px;}
  .hero-title{gap:0 15px;}
  .home-class-panel{padding:14px;border-radius:14px;}
  .home-class-heading h2{font-size:20px;}
  .home-add{padding:9px 11px;font-size:14px;}
}

/* 手机端以一屏为单位固定学科背景，内容层在其上方独立滚动。 */
@media (max-width:820px){
  body[data-subject]::after{
    content:"";
    position:fixed;
    inset:54px 0 0;
    z-index:0;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(4,13,23,.08), rgba(4,13,23,.3)),
      var(--subject-bg) center / cover no-repeat;
  }
  body.subject-bg-ready[data-subject]::after{
    background:
      linear-gradient(180deg, rgba(4,13,23,.08), rgba(4,13,23,.3)),
      var(--subject-bg) center / cover no-repeat;
  }
  body[data-subject] .page{
    position:relative;
    z-index:1;
  }
  body[data-subject] .page.active::before{
    content:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .page.active,.scene-image-layer,.class-drawer-sheet{animation:none!important;}
  #page-subject.subject-intro > *{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .scene-image-layer{opacity:0!important;}
}

/* 账号登记：优先保证移动端清晰和操作安全。 DESIGN_VARIANCE: 3; MOTION: 2; DENSITY: 5 */
.auth-pending .page,.auth-pending #topbar{visibility:hidden;}
.auth-gate{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:24px;background:#06111d;overflow:auto;}
.auth-pending .auth-gate{display:grid;}
.auth-gate-atmosphere{position:absolute;inset:0;background:linear-gradient(145deg,rgba(3,13,25,.28),rgba(3,13,25,.82)),url('assets/home-observatory.png') center/cover no-repeat;opacity:.76;}
.auth-gate-atmosphere::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 66% 20%,rgba(191,157,89,.18),transparent 32%),linear-gradient(180deg,transparent,rgba(4,12,21,.7));}
.login-card{position:relative;width:min(100%,420px);padding:32px 28px;border:1px solid rgba(219,190,122,.42);border-radius:20px;background:rgba(7,19,33,.88);box-shadow:0 28px 80px rgba(0,0,0,.42);backdrop-filter:blur(14px);}
.login-kicker{margin:0 0 8px;color:#d9b868;font-size:12px;letter-spacing:.16em;}
.login-card h1{margin:0;color:#f5f0e5;font-family:"Zhi Mang Xing",serif;font-size:42px;font-weight:400;letter-spacing:.18em;}
.login-subtitle{margin:7px 0 24px;color:#aebdcb;font-size:14px;}
.login-card label{display:grid;gap:7px;margin:13px 0;color:#d8e1ea;font-size:14px;}
.login-card input{width:100%;min-height:44px;box-sizing:border-box;border:1px solid rgba(156,180,202,.36);border-radius:10px;background:rgba(2,10,19,.58);color:#f5f7fa;padding:0 12px;font:inherit;outline:none;}
.login-card input:focus{border-color:#d9b868;box-shadow:0 0 0 3px rgba(217,184,104,.13);}
.login-submit{width:100%;margin-top:10px;min-height:44px;}
.login-hint,.form-error{margin:13px 0 0;font-size:12px;line-height:1.6;}
.login-hint{color:#9fb0c1;}.form-error{min-height:19px;color:#ffb6ac;}
.account-tools{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;}
.account-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c3d0dd;font-size:13px;}
.top-action{border:1px solid rgba(201,174,104,.55);border-radius:999px;background:rgba(3,13,24,.38);color:#f0d88c;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer;}
.site-records{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:34px auto 8px;padding:18px 8px 4px;color:#f0d88c;font-size:12px;}
#page-filter .site-records{position:absolute;left:16px;right:16px;bottom:18px;margin:0;padding:16px 8px 4px;text-shadow:0 1px 8px rgba(0,0,0,.86);}
.account-manager{display:grid;gap:18px;}.manager-section{padding:15px;border:1px solid rgba(120,150,179,.23);border-radius:12px;background:rgba(7,18,31,.38);}.manager-section h3{margin:0 0 12px;}.manager-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.manager-form input,.manager-form select,.manager-form textarea{box-sizing:border-box;width:100%;min-height:38px;border:1px solid rgba(138,165,190,.34);border-radius:8px;background:#081625;color:#eef4f8;padding:8px;font:inherit;}.manager-form textarea{grid-column:1/-1;min-height:72px;resize:vertical;}.manager-form .btn{justify-self:start;}.manager-list{display:grid;gap:8px;}.managed-user,.recycle-item{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:11px;border-radius:9px;background:rgba(2,12,22,.44);}.managed-user b,.recycle-item b,.managed-user span,.managed-user small,.recycle-item small{display:block;}.managed-user span{margin-top:3px;color:#d3dce4;font-size:13px;}.managed-user small,.recycle-item small{margin-top:4px;color:#98aabd;white-space:pre-line;font-size:12px;}.manager-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}.manager-actions button{border:1px solid rgba(141,167,192,.38);border-radius:7px;background:transparent;color:#dae5ed;padding:5px 7px;font:inherit;font-size:12px;cursor:pointer;}.manager-actions .danger-text{border-color:rgba(224,117,112,.55);color:#ffb4ad;}
.assignment-editor{grid-column:1/-1;padding:12px;border:1px solid rgba(143,170,194,.24);border-radius:11px;background:rgba(3,13,23,.42);}
.assignment-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.assignment-editor-head b,.assignment-editor-head small{display:block;}.assignment-editor-head small{margin-top:4px;color:#98aabd;font-size:12px;line-height:1.5;}
.assignment-rows{display:grid;gap:8px;}
.assignment-row{display:grid;grid-template-columns:.8fr 1.15fr 1.2fr auto;gap:8px;align-items:end;padding:10px;border-radius:9px;background:rgba(11,29,45,.74);}
.assignment-row label{display:grid;gap:5px;color:#9fb0c1;font-size:11px;}
.assignment-row select{width:100%;min-width:0;min-height:39px;border:1px solid rgba(138,165,190,.34);border-radius:8px;background:#081625;color:#eef4f8;padding:6px;font:inherit;font-size:13px;}
.assignment-add,.assignment-remove{min-height:36px;border:1px solid rgba(215,183,103,.46);border-radius:8px;background:transparent;color:#ead184;padding:6px 10px;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;}
.assignment-remove{border-color:rgba(224,117,112,.42);color:#ffb4ad;}
.assignment-empty{margin:0;color:#aebdcc;font-size:13px;}
.scope-editor-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#cbd7df;font-size:13px;}.scope-editor-intro p{margin:0;}.scope-editor-intro span{flex:none;color:#ead184;font-size:12px;}
.scope-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
@media (max-width:620px){.login-card{padding:27px 20px;border-radius:17px;}.account-name{display:none;}.top-action{padding:5px 8px;}.manager-form{grid-template-columns:1fr;}.managed-user,.recycle-item{align-items:flex-start;flex-direction:column;}.manager-actions{justify-content:flex-start;}.assignment-editor-head,.scope-editor-intro{align-items:flex-start;flex-direction:column;}.assignment-row{grid-template-columns:1fr 1fr;}.assignment-row label:last-of-type{grid-column:1/-1;}.assignment-remove{justify-self:start;}.scope-editor-actions{align-items:stretch;flex-direction:column;}.scope-editor-actions .btn{width:100%;}}

/* 班主任事务：稳重、清晰、适合手机快速录入。DESIGN_VARIANCE:4; MOTION:2; DENSITY:6 */
.hidden{display:none!important;}
.navbtn.homeroom-entry{grid-column:span 2;position:relative;border-color:rgba(219,184,100,.72);color:#f0d486;background:linear-gradient(135deg,rgba(8,25,42,.96),rgba(9,20,34,.8));}
.navbtn.homeroom-entry .entry-badge{position:absolute;right:10px;top:8px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#d9aa52;color:#07111e;font-size:11px;font-weight:800;}
.homeroom-page{max-width:none!important;min-height:calc(100vh - 54px);padding:0!important;isolation:isolate;}
body[data-page="page-homeroom"]::before{display:none;}
.homeroom-scene{position:fixed;inset:54px 0 0;z-index:-2;overflow:hidden;background:#05111f url('assets/homeroom-night.webp') center/cover no-repeat;}
.homeroom-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,12,22,.35),rgba(3,12,22,.58) 45%,rgba(3,12,22,.7));}
.homeroom-scene span{position:absolute;z-index:1;left:-8%;right:-8%;top:13%;height:26%;opacity:.13;background:radial-gradient(ellipse at 50% 50%,rgba(176,201,218,.46),transparent 62%);filter:blur(16px);}
.homeroom-shell{width:min(100% - 28px,760px);margin:0 auto;padding:30px 0 64px;}
.homeroom-kicker{margin:0 0 6px;color:#d8b667;font-size:12px;letter-spacing:.18em;}
.homeroom-shell>h2{margin:0;color:#f6f0e3;font-size:34px;letter-spacing:.08em;}
.homeroom-class-name{margin:8px 0 18px;color:#b9c9d5;}
.homeroom-readonly{margin:14px 0 0;padding:9px 12px;border:1px solid rgba(216,182,103,.28);border-radius:8px;color:#e8cf8b;background:rgba(4,14,24,.58);font-size:12px;}
.homeroom-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:18px 0;}
.homeroom-stat{min-height:72px;padding:13px;border:1px solid rgba(144,169,190,.28);border-radius:12px;background:rgba(6,20,34,.78);backdrop-filter:blur(10px);}
.homeroom-stat span,.homeroom-stat strong,.homeroom-stat small{display:block;}.homeroom-stat span{color:#93a9bb;font-size:11px;}.homeroom-stat strong{margin-top:8px;color:#f3e2ad;font-size:19px;}.homeroom-stat small{margin-top:4px;color:#8fa4b4;font-size:9px;white-space:nowrap;}
.homeroom-menu{display:grid;gap:10px;}
.homeroom-menu-btn{display:grid;grid-template-columns:1fr auto;gap:10px;width:100%;min-height:78px;padding:16px 18px;text-align:left;border:1px solid rgba(138,166,188,.3);border-radius:13px;background:rgba(5,18,31,.82);color:#edf2f5;font:inherit;cursor:pointer;backdrop-filter:blur(10px);}
.homeroom-menu-btn b{font-size:18px;}.homeroom-menu-btn small{grid-column:1;color:#9eb0bf;line-height:1.55;}.homeroom-menu-btn i{grid-row:1/3;grid-column:2;align-self:center;color:#d9b868;font-style:normal;font-size:23px;}
.homeroom-content{margin-top:14px;padding:16px;border:1px solid rgba(136,164,187,.26);border-radius:14px;background:rgba(5,17,29,.91);box-shadow:0 18px 60px rgba(0,0,0,.28);}
.homeroom-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}.homeroom-section-head h3{margin:0;color:#f5eee1;font-size:20px;}.homeroom-section-head .btn{flex:none;}
.affair-list{display:grid;gap:9px;}.affair-item{padding:13px;border:1px solid rgba(129,157,181,.23);border-radius:11px;background:rgba(12,31,48,.72);}.affair-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}.affair-item h4{margin:0;color:#f1f4f6;font-size:15px;}.affair-item p{margin:7px 0 0;color:#b8c6d1;font-size:13px;line-height:1.6;white-space:pre-wrap;}.affair-meta{color:#8fa4b4!important;font-size:11px!important;}.affair-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}.affair-actions button{border:1px solid rgba(216,182,103,.38);border-radius:7px;background:transparent;color:#e7cd86;padding:5px 8px;font:inherit;font-size:11px;}
.status-pill{flex:none;padding:3px 7px;border-radius:999px;background:rgba(216,182,103,.15);color:#ecd28d;font-size:10px;}.status-pill.done{background:rgba(80,164,122,.15);color:#9cd0b3;}
.affair-empty{padding:24px 12px;text-align:center;color:#92a7b8;}.schedule-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:13px;border-radius:10px;background:rgba(216,182,103,.09);}.schedule-card b,.schedule-card span{display:block;}.schedule-card span{margin-top:4px;color:#a9b8c4;font-size:12px;}
.homeroom-form{display:grid;gap:11px;}.homeroom-form label{display:grid;gap:6px;color:#cbd7df;font-size:13px;}.homeroom-form input,.homeroom-form select,.homeroom-form textarea{box-sizing:border-box;width:100%;min-height:42px;border:1px solid rgba(138,165,190,.34);border-radius:9px;background:#071522;color:#f1f4f6;padding:9px 10px;font:inherit;}.homeroom-form textarea{min-height:88px;resize:vertical;}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}.date-shortcut{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;}.shortcut-btn{min-width:58px;border:1px solid rgba(216,182,103,.48);border-radius:8px;background:rgba(216,182,103,.08);color:#ead184;padding:0 10px;font:inherit;font-size:12px;}.student-picker{padding:11px;border:1px solid rgba(138,165,190,.22);border-radius:10px;background:rgba(4,14,25,.42);}.student-picker-title{display:flex;align-items:center;justify-content:space-between;gap:10px;}.student-picker-title .btn{margin:0;min-height:36px;padding:6px 11px;}.student-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}.student-picker-empty{margin:9px 0 0;color:#8297a8;font-size:12px;}.student-chip{border:1px solid rgba(216,182,103,.35);border-radius:999px;background:rgba(216,182,103,.09);color:#e9d18e;padding:5px 9px;font-size:11px;}.student-chip button{margin-left:5px;border:0;background:none;color:inherit;}.quick-inbox input{width:100%;min-height:40px;border:1px solid rgba(138,165,190,.3);border-radius:8px;background:#071522;color:#eef3f6;padding:7px 9px;font:inherit;}.quick-inbox{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:12px;}
.record-pending-block{padding:14px;border:1px solid rgba(129,157,181,.22);border-radius:13px;background:rgba(4,18,31,.45);}.record-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid rgba(129,157,181,.16);}.record-group-head span,.archive-roster-head span{color:#d9b85f;font-size:11px;letter-spacing:.18em;}.record-group-head h4{margin:3px 0 0;color:#eef3f6;font-size:17px;font-weight:600;}.record-group-head b{flex:0 0 auto;border-radius:999px;background:rgba(216,182,103,.12);color:#ead184;padding:6px 10px;font-size:12px;font-weight:500;}.student-archive-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin-top:12px;padding:15px;border:1px solid rgba(216,182,103,.36);border-radius:13px;background:linear-gradient(135deg,rgba(216,182,103,.12),rgba(9,28,43,.7));color:#eef3f6;text-align:left;font:inherit;}.student-archive-entry:active,.archive-student-row:active{transform:translateY(1px);}.student-archive-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#d9ae59;color:#081522;font-size:18px;font-weight:700;}.student-archive-entry strong,.student-archive-entry small{display:block;}.student-archive-entry strong{font-size:16px;}.student-archive-entry small{margin-top:5px;color:#a9bac7;font-size:12px;line-height:1.5;}.student-archive-entry i{color:#e0bc65;font-size:28px;font-style:normal;}.archive-roster-head{display:grid;gap:14px;margin-bottom:16px;}.archive-roster-head h3{margin:4px 0 0;color:#f1f4f6;font-size:22px;}.archive-roster-head p{margin:6px 0 0;color:#9cafbd;font-size:13px;}.archive-roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.archive-student-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:52px;border:1px solid rgba(129,157,181,.24);border-radius:10px;background:rgba(9,27,42,.72);color:#eef3f6;padding:8px 11px;text-align:left;font:inherit;}.archive-seat{color:#d8b35d;font-size:12px;font-variant-numeric:tabular-nums;}.archive-student-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}.archive-student-row small{color:#93a8b8;font-size:11px;}.archive-student-row i{color:#d8b35d;font-size:18px;font-style:normal;}
.student-select-modal{z-index:70;}.student-select-box{max-width:500px;}.student-table-head,.student-check-row{display:grid;grid-template-columns:58px minmax(88px,.8fr) minmax(120px,1.2fr);gap:8px;align-items:center;}.student-table-head{padding:8px 10px;color:#8fa5b7;font-size:11px;border-bottom:1px solid rgba(138,165,190,.24);}.student-check-list{max-height:55vh;overflow:auto;}.student-check-row{min-height:44px;padding:4px 10px;border-bottom:1px solid rgba(138,165,190,.15);color:#dbe5eb;font-size:13px;cursor:pointer;}.student-check-row input{width:20px;height:20px;accent-color:#d9aa52;}.student-check-row strong{font-weight:500;color:#f0f4f6;}.student-select-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px;}.student-select-actions .btn{margin:0;}.app-notice{z-index:90;}.app-notice-box{width:min(86vw,330px);overflow:hidden;border:1px solid rgba(216,182,103,.42);border-radius:14px;background:#071522;box-shadow:0 24px 70px rgba(0,0,0,.48);text-align:center;}.app-notice-box p{margin:0;padding:26px 18px 20px;color:#f4efe5;font-size:20px;}.app-notice-box .btn{width:100%;margin:0;border-radius:0;border-width:1px 0 0;background:transparent;color:#e7c875;min-height:48px;}.protected-account{color:#9aabba;font-size:12px;white-space:nowrap;}
@media (prefers-reduced-motion:no-preference){.homeroom-scene span{animation:homeroom-mist 34s ease-in-out infinite alternate;}}@keyframes homeroom-mist{from{transform:translateX(-3%);opacity:.08}to{transform:translateX(3%);opacity:.16}}
@media (max-width:560px){.homeroom-shell{width:min(100% - 22px,760px);padding-top:22px;}.homeroom-shell>h2{font-size:29px;}.homeroom-summary{gap:6px;}.homeroom-stat{padding:10px;}.homeroom-stat strong{font-size:16px;}.homeroom-content{padding:13px;}.form-row{grid-template-columns:1fr;}.homeroom-section-head{align-items:flex-start;}.quick-inbox,.archive-roster-grid{grid-template-columns:1fr;}.student-table-head,.student-check-row{grid-template-columns:48px minmax(78px,.75fr) minmax(110px,1.25fr);}}
@media (prefers-reduced-motion:reduce){.homeroom-scene span{display:none;}}