: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;
}
/* 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;}

.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;}

.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;}
}

/* ===== 半亩方塘：深夜方塘首页与学科展陈外壳 ===== */
: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{
  max-width:860px;
  min-height:calc(100dvh - 54px);
  padding:0 16px 34px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#page-filter::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:0 0 28px 28px;
  background:
    linear-gradient(180deg, rgba(4,12,23,.14) 0%, rgba(4,12,23,.04) 43%, rgba(4,12,23,.47) 82%, #07111e 100%),
    url("assets/home-observatory.png") center top / cover no-repeat;
  box-shadow:inset 0 -32px 52px rgba(4,12,23,.38);
}
.home-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.starfield{position:absolute;inset:0;overflow:hidden;}
.star{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--size);height:var(--size);
  border-radius:50%;
  background:#fff6d6;
  opacity:.38;
  box-shadow:0 0 calc(var(--size) * 4) rgba(255,242,203,.76);
}

.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;
}

.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%);
}
.home-class-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}
.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;}
#page-filter .classrow:last-child{margin-bottom:0;}
#page-filter .classrow .bigbtn{
  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);
}
#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);
}

.home-water{
  position:absolute;
  left:-8%;right:-8%;bottom:-22px;
  height:30%;
  overflow:hidden;
  pointer-events:auto;
  background:
    linear-gradient(180deg, rgba(18,55,75,.04), rgba(5,17,28,.5) 72%, rgba(4,12,22,.76)),
    radial-gradient(ellipse at 50% 6%, rgba(117,182,201,.2), transparent 50%);
}
.home-water::before{
  content:"";
  position:absolute;
  inset:-14% -8%;
  opacity:.38;
  background:repeating-radial-gradient(ellipse at 50% 0%, transparent 0 22px, rgba(160,221,233,.13) 23px 24px, transparent 25px 45px);
  transform:scaleX(1.45);
}
.home-water::after{
  content:"";
  position:absolute;
  left:12%;right:12%;top:34%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(220,239,236,.36), transparent);
  opacity:.35;
}
.water-ring{
  position:absolute;
  width:54px;height:16px;
  border:1px solid rgba(175,226,232,.43);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
}
.ring-a{left:19%;top:52%;}
.ring-b{left:68%;top:37%;}
.ring-c{left:82%;top:70%;}
.tap-ring{animation:tap-ripple 1.8s ease-out both;}
@keyframes tap-ripple{
  0%{opacity:.74;transform:translate(-50%,-50%) scale(.3);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(5.8);}
}

/* 学科页：边缘素材讲述学科，中央保留给成绩与教案内容。 */
body[data-subject="chinese"]{--subject-bg:url("assets/subjects/chinese.png");--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.png");--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.png");--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.png");--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.png");--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.png");--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.png");--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.png");--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.png");--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.png");--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[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 > h2,
#page-subject.subject-reveal > .btn,
#page-subject.subject-reveal > .tabs .tab,
#page-subject.subject-reveal > .tabpane.active > *{
  animation:subject-content-enter .48s cubic-bezier(.16,1,.3,1) both;
  will-change:transform,opacity;
}
#page-subject.subject-reveal > h2{animation-delay:0s;}
#page-subject.subject-reveal > .btn{animation-delay:.1s;}
#page-subject.subject-reveal > .tabs .tab:nth-child(1){animation-delay:.2s;}
#page-subject.subject-reveal > .tabs .tab:nth-child(2){animation-delay:.26s;}
#page-subject.subject-reveal > .tabs .tab:nth-child(3){animation-delay:.32s;}
#page-subject.subject-reveal > .tabs .tab:nth-child(4){animation-delay:.38s;}
#page-subject.subject-reveal > .tabs .tab:nth-child(5){animation-delay:.44s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(1){animation-delay:.56s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(2){animation-delay:.64s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(3){animation-delay:.72s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(4){animation-delay:.8s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(5){animation-delay:.88s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(6){animation-delay:.96s;}
#page-subject.subject-reveal > .tabpane.active > :nth-child(n+7){animation-delay:1.04s;}
@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){
  .star{animation:star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate;}
  .ring-a{animation:pond-ripple 7s ease-out .4s infinite;}
  .ring-b{animation:pond-ripple 7s ease-out 2.55s infinite;}
  .ring-c{animation:pond-ripple 7s ease-out 4.7s infinite;}
  .home-water::before{animation:water-drift 12s ease-in-out infinite alternate;}
  .home-water::after{animation:water-shine 8s ease-in-out infinite alternate;}
}
@keyframes star-twinkle{
  0%{opacity:.18;transform:scale(.72);}
  58%{opacity:.72;transform:scale(1);}
  100%{opacity:.3;transform:scale(.86);}
}
@keyframes pond-ripple{
  0%{opacity:.58;transform:translate(-50%,-50%) scale(.25);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.9);}
}
@keyframes water-drift{to{transform:translateX(4%) scaleX(1.08);}}
@keyframes water-shine{to{transform:translateX(16%) scaleX(.7);opacity:.12;}}

@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;}
  .home-water{height:28%;}
}

/* 手机端以一屏为单位固定学科背景，内容层在其上方独立滚动。 */
@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[data-subject] .page{
    position:relative;
    z-index:1;
  }
  body[data-subject] .page.active::before{
    content:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .page.active,.star,.water-ring,.home-water::before,.home-water::after{animation:none!important;}
  #page-subject.subject-intro > *{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .star{opacity:.48;}
  .water-ring{opacity:.22;transform:translate(-50%,-50%) scale(1.35);}
}