:root{--ink:#2b2118;--muted:#7f6958;--line:#ead8c7;--paper:#fffaf3;--soft:#f8ead7;--brand:#ad2f16;--brand-dark:#8e260f;--green:#4f9c72;--blue:#4f82b6;--gold:#d59738}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--ink);background:linear-gradient(115deg,#fffaf3,#f6e5cf 55%,#fff9ef);min-width:1180px}button,a,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.topbar{height:86px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid var(--line);background:rgba(255,250,243,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--ink);min-width:250px}.brand-mark{font-size:56px;color:var(--brand);line-height:1}.brand strong{display:block;font-size:30px;letter-spacing:4px}.brand small{display:block;font-size:16px;letter-spacing:1px}.nav{display:flex;gap:34px;align-items:center;flex:1;justify-content:center}.nav button,.nav a{border:0;background:transparent;padding:28px 0 18px;font-weight:700;position:relative}.nav .active{color:var(--brand)}.nav .active:after{content:"";height:3px;width:34px;background:var(--brand);position:absolute;left:50%;bottom:8px;transform:translateX(-50%);border-radius:3px}.top-actions{display:flex;align-items:center;gap:18px}.solid,.login-btn{background:linear-gradient(135deg,#c43f20,#98270f);color:#fff;border:0;border-radius:8px;padding:12px 24px;box-shadow:0 10px 24px rgba(155,47,20,.18)}.solid.small{padding:8px 15px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#22160e;color:#fff}.bell{position:relative;font-size:28px;color:#8c5434}.bell b{position:absolute;right:-10px;top:-10px;background:var(--brand);color:#fff;border-radius:50%;font-size:12px;padding:2px 6px}.view{display:none}.view.active{display:block}.login-view{min-height:calc(100vh - 134px);position:relative;overflow:hidden;padding:70px 90px;display:none;grid-template-columns:1.1fr 520px;gap:80px;align-items:center}.login-view.active{display:grid}.login-view:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,243,.82),rgba(255,245,232,.52)),url("assets/login-reference.png") center/cover no-repeat;opacity:.32}.login-view>*{position:relative}.hero-copy h1{font-size:70px;letter-spacing:8px;margin:0 0 22px;font-family:Georgia,"Microsoft YaHei",serif}.hero-copy h1 span{color:var(--brand);margin-left:18px}.lead{font-size:25px;letter-spacing:3px}.desc{font-size:18px;line-height:2;max-width:620px}.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:42px;max-width:700px}.feature-row div{text-align:center}.feature-row i{width:70px;height:70px;display:grid;place-items:center;margin:auto;border:1px solid #d7bca4;border-radius:50%;font-size:34px;color:#a95f31;background:rgba(255,250,243,.6)}.feature-row strong,.feature-row small{display:block}.feature-row strong{margin:16px 0 6px}.feature-row small{color:var(--muted);font-size:13px}.login-card{background:rgba(255,252,247,.88);border:1px solid rgba(226,207,190,.9);border-radius:24px;padding:42px;box-shadow:0 20px 70px rgba(88,54,28,.18);backdrop-filter:blur(12px)}.login-card h2{text-align:center;font-size:34px;margin:0 0 8px}.login-card>p{text-align:center;color:var(--muted);margin-bottom:28px}.login-card label,.field-title{display:block;font-weight:700;margin:18px 0 10px}.login-card input{width:100%;height:54px;border:1px solid #dcc9b8;border-radius:8px;background:rgba(255,255,255,.65);padding:0 18px}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.role-card{height:116px;text-align:left;background:#fffaf5;border:1px solid var(--line);border-radius:12px;padding:18px;position:relative}.role-card.selected{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}.role-card span{float:left;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f0d3bd;color:var(--brand);margin-right:12px}.role-card strong{font-size:20px}.role-card small{display:block;color:var(--muted);margin-top:10px}.login-btn{width:100%;height:60px;font-size:22px;font-weight:900;margin-top:28px}.login-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin:18px 0;border-bottom:1px solid var(--line);padding-bottom:20px}.guest{display:block;margin:auto;border:0;background:transparent;color:var(--brand);font-weight:800}.page-view{padding:28px 48px 76px}.page-hero{height:170px;border-bottom:1px solid var(--line);display:flex;align-items:center;background:linear-gradient(90deg,rgba(255,250,243,.92),rgba(255,250,243,.35)),url("assets/classroom-reference.png") right center/auto 100% no-repeat}.page-hero h1,.student-title h1{font-size:52px;margin:0 0 12px;font-family:Georgia,"Microsoft YaHei",serif}.page-hero p{font-size:22px;margin:0}.tabs,.recent-panel,.student-shell,.student-bottom section,.right-rail section,.side{border:1px solid var(--line);background:rgba(255,252,247,.78);border-radius:12px}.tabs{display:flex;align-items:center;gap:18px;padding:12px 18px;margin:22px 0}.tabs button{border:0;background:transparent;padding:10px 28px;border-radius:22px}.tabs button.active{background:var(--brand);color:#fff}.tabs span{margin-left:auto;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tool-card{min-height:190px;border:1px solid var(--line);border-radius:12px;background:rgba(255,252,247,.78);padding:22px;display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}.tool-card.wide{grid-column:span 2}.tool-art{height:116px;border-radius:10px;background:linear-gradient(145deg,#fff7e9,#e8c89f);display:grid;place-items:center;font-size:54px;color:#9b4b1e}.tool-card h3{font-size:26px;margin:0}.tool-card p{color:var(--muted);line-height:1.7}.tool-card a{display:inline-block;border:1px solid #d7bca4;border-radius:7px;padding:10px 22px;color:var(--brand);font-weight:800}.recent-panel{display:grid;grid-template-columns:260px repeat(4,1fr);gap:24px;align-items:center;margin-top:18px;padding:20px 28px}.recent-panel a{border:1px solid var(--line);border-radius:8px;padding:18px 22px;background:#fffaf5}.recent-panel .outline{text-align:center;color:var(--brand);border-color:#c9876e}#students.active{display:grid;grid-template-columns:220px 1fr 300px;gap:18px;padding:0 22px 54px;background:linear-gradient(90deg,#fff7ec,#fffaf4)}.side{min-height:calc(100vh - 134px);border-radius:0 12px 12px 0;padding:24px 16px}.side h2{margin:0;font-size:24px}.side small{display:block;color:var(--muted);margin:4px 0 24px}.side button,.side-link{display:block;width:100%;border:0;background:transparent;text-align:left;padding:13px 16px;border-radius:8px;margin:4px 0}.side-active,.side button:hover,.side-link{background:#f3e2ce!important;color:var(--brand);font-weight:800}.student-main{padding:24px 0}.student-title{display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(90deg,#fffaf4,#f9e8d5);border:1px solid var(--line);border-radius:12px;padding:24px 28px;margin-bottom:16px}.student-title h1 span{font-size:16px;background:var(--brand);color:#fff;border-radius:18px;padding:7px 14px;vertical-align:middle}.student-title p{color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.stat{background:#fffaf4;border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;gap:16px;align-items:center}.stat i{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:#f3e1c9;font-size:28px;color:var(--brand)}.stat b{font-size:30px}.stat small{display:block;color:var(--muted)}.student-shell{padding:16px;overflow:hidden}.student-toolbar{display:flex;gap:10px;margin-bottom:14px}.student-toolbar input{flex:1}.student-toolbar input,.student-toolbar select{height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 12px}.student-toolbar a{border:1px solid var(--line);padding:8px 14px;border-radius:6px;color:var(--brand)}table{width:100%;border-collapse:collapse;background:#fffaf5;border-radius:8px;overflow:hidden}th,td{padding:12px 10px;border-bottom:1px solid #f0dfcd;text-align:left;font-size:14px}th{background:#fbf1e5;color:#7d5a43}.pic{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#e6c7a3;display:grid;place-items:center;color:#fff;font-weight:900}.tag{display:inline-block;border:1px solid #ead5be;border-radius:6px;padding:3px 8px;margin:2px;background:#fff8ee;color:#8b5a2d;font-size:12px}.tag.green{background:#eaf7ef;color:#23854f;border-color:#cce8d6}.tag.blue{background:#edf6ff;color:#286ea6;border-color:#d1e7f7}.student-bottom{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-top:16px}.student-bottom section,.right-rail section{padding:18px}.focus-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.focus-card{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fffaf5}.focus-card b{display:block;margin:8px 0}.right-rail{padding:24px 0}.right-rail section{margin-bottom:16px}.right-rail b{float:right;background:var(--brand);color:#fff;border-radius:12px;padding:2px 8px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid a{padding:18px 10px;text-align:center;border-radius:8px;background:#f8ead7;color:#8a4b25}.donut{width:150px;height:150px;border-radius:50%;margin:10px auto;background:conic-gradient(var(--brand) 0 34%,var(--blue) 34% 62%,var(--gold) 62% 81%,var(--green) 81%);display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;background:#fffaf5}.donut b,.donut small{position:relative;z-index:1}.donut b{font-size:30px}.donut small{margin-top:48px;color:var(--muted)}footer{height:48px;background:linear-gradient(90deg,#4b2b16,#6b3d1f,#4b2b16);color:#f5dcc3;display:grid;place-items:center;position:fixed;left:0;right:0;bottom:0}

/* ── 电子课本书架 ── */
.book-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;padding:8px 0 24px}
.book-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fffaf4;text-decoration:none;color:var(--ink);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;cursor:pointer;transform-origin:center bottom}
.book-card:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:0 16px 36px rgba(88,54,28,.2);border-color:#c9876e}
.book-card:active{animation:bookOpen .36s ease both}
@keyframes bookOpen{0%{transform:translateY(-6px) scale(1)}45%{transform:translateY(-10px) scale(1.04) rotateY(-8deg)}100%{transform:translateY(-3px) scale(.99)}}
.book-cover{height:220px;display:flex;align-items:center;justify-content:center;font-size:3.8rem;border-radius:0}
.book-cover.add{background:linear-gradient(145deg,#f3e8dd,#e8d5c0)!important;font-size:2.4rem;color:#9b7054}
.book-meta{padding:12px 14px}
.book-meta strong{display:block;font-size:0.96rem;margin-bottom:4px}
.book-meta small{color:var(--muted);font-size:0.8rem}
.book-tip{background:rgba(255,252,247,.9);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-top:4px}
.book-tip strong{display:block;margin-bottom:10px;color:var(--brand)}
.book-tip ul{padding-left:18px;line-height:2;color:var(--muted);font-size:0.9rem}
.book-tip code{background:#f3e6d9;border-radius:4px;padding:1px 6px;font-size:0.85rem;color:#7a3d1a}

.music-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;padding:8px 0 24px}
.music-group-card,.music-empty{border:1px solid var(--line);border-radius:12px;background:rgba(255,252,247,.86);padding:16px}
.music-group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.music-group-head strong{display:block;font-size:1.08rem;color:var(--brand)}
.music-group-head small,.music-empty small{display:block;color:var(--muted);margin-top:4px}
.music-group-head a{border:1px solid #d7bca4;border-radius:7px;padding:8px 12px;color:var(--brand);font-weight:800;background:#fffaf5;white-space:nowrap}
.music-track-list{display:grid;gap:8px}
.music-track{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #f0dfcd;border-radius:8px;background:#fffaf5;padding:10px 12px}
.music-track span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-track small{color:var(--muted);font-weight:800}
.music-empty{grid-column:1/-1;text-align:center;padding:34px}
.music-empty code{background:#f3e6d9;border-radius:4px;padding:1px 6px}

/* Inline music playback and compact dropdown lists */
.music-group-card{max-height:430px;display:flex;flex-direction:column}
.music-group-actions{display:flex;align-items:center;gap:8px}
.music-group-actions a,
.music-toggle{
  border:1px solid #d7bca4;
  border-radius:7px;
  padding:8px 12px;
  color:var(--brand);
  font-weight:800;
  background:#fffaf5;
  white-space:nowrap;
}
.music-toggle:after{content:"⌄";margin-left:6px}
.music-group-card.collapsed .music-toggle:after{content:"›"}
.music-track-list{
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#b33a1f #f4dec4;
}
.music-track-list[hidden]{display:none!important}
.music-track-list::-webkit-scrollbar{width:10px}
.music-track-list::-webkit-scrollbar-track{
  background:linear-gradient(#f7e7d3,#fff6e8);
  border-radius:999px;
}
.music-track-list::-webkit-scrollbar-thumb{
  border:2px solid #f7e7d3;
  border-radius:999px;
  background:linear-gradient(180deg,#c71f1f 0 48%,#f2c14e 48% 58%,#b3211a 58% 100%);
}
.music-track-item{display:grid;gap:6px}
.music-track{
  width:100%;
  border:1px solid #f0dfcd;
  cursor:pointer;
  font:inherit;
}
.music-track.playing{
  border-color:#b33a1f;
  background:#fff0e7;
  color:#8f2c17;
}
.inline-player{
  padding:6px 8px 10px;
  border:1px solid #f0dfcd;
  border-radius:8px;
  background:#fffaf5;
}
.inline-player audio{
  display:block;
  width:100%;
  height:34px;
}

/* Compact classroom tool cards */
.tool-grid{gap:12px}
.tool-card{
  min-height:148px;
  padding:16px 18px;
  grid-template-columns:100px 1fr;
  gap:16px;
}
.tool-art{
  height:92px;
  font-size:42px;
}
.tool-card h3{
  font-size:23px;
  line-height:1.22;
}
.tool-card p{
  margin:8px 0 10px;
  line-height:1.55;
  font-size:15px;
}
.tool-card a{
  padding:8px 18px;
  line-height:1.2;
}

/* Pixel-matched login landing based on assets/login-reference.png */
body:not(.authenticated){background:#f7ead9;min-width:0}
body:not(.authenticated) .topbar,
body:not(.authenticated) footer{display:none}
body:not(.authenticated) main{min-height:100vh;display:grid;place-items:start center;background:#f6eadc}
body:not(.authenticated) .login-view{
  --login-aspect:1.77778;
  min-height:0;
  width:min(100vw,calc(100vh * var(--login-aspect)));
  height:min(100vh,calc(100vw / var(--login-aspect)));
  padding:0;
  display:none;
  grid-template-columns:1fr;
  align-items:stretch;
  overflow:hidden;
  background:#f7ead9 url("assets/login-reference.png") center center/100% 100% no-repeat;
}
body:not(.authenticated) .login-view.active{display:grid}
body:not(.authenticated) .login-view:before{display:none}
body:not(.authenticated) .hero-copy{display:none}
body:not(.authenticated) .login-motion{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
body:not(.authenticated) .float-note{
  position:absolute;
  color:rgba(181,99,42,.46);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  text-shadow:0 8px 18px rgba(122,67,30,.14);
  animation:noteDrift var(--note-duration,9s) ease-in-out infinite;
}
body:not(.authenticated) .note-1{left:22.5%;top:60%;font-size:25px;--note-duration:8.5s;animation-delay:-1.2s}
body:not(.authenticated) .note-2{left:29%;top:58%;font-size:18px;--note-duration:10s;animation-delay:-3.6s}
body:not(.authenticated) .note-3{left:36%;top:61%;font-size:21px;--note-duration:9.2s;animation-delay:-5.1s}
body:not(.authenticated) .note-4{left:50%;top:42%;font-size:42px;color:rgba(190,124,66,.32);--note-duration:11s;animation-delay:-2.4s}
body:not(.authenticated) .note-5{left:57%;top:36%;font-size:26px;color:rgba(190,124,66,.25);--note-duration:12s;animation-delay:-6.5s}
body:not(.authenticated) .note-6{left:9.5%;top:94%;font-size:22px;color:rgba(230,184,122,.5);--note-duration:7.8s;animation-delay:-4.4s}
body:not(.authenticated) .book-breeze{
  position:absolute;
  left:35.5%;
  top:82.3%;
  width:10.5%;
  height:4.8%;
  border-radius:50% 12% 45% 12%;
  background:linear-gradient(110deg,rgba(255,252,238,.62),rgba(217,179,126,.2));
  border:1px solid rgba(142,91,46,.12);
  box-shadow:0 10px 22px rgba(88,54,28,.13);
  transform-origin:6% 92%;
  mix-blend-mode:screen;
  animation:pageFlutter 5.8s ease-in-out infinite;
}
body:not(.authenticated) .page-2{
  left:41.2%;
  top:82%;
  width:9.4%;
  height:4.5%;
  animation-delay:-2.1s;
  opacity:.72;
}
body:not(.authenticated) .page-3{
  left:31.7%;
  top:81.5%;
  width:8.2%;
  height:3.8%;
  animation-delay:-3.8s;
  opacity:.55;
}
@keyframes noteDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(-5deg);opacity:.34}
  35%{transform:translate3d(16px,-24px,0) rotate(8deg);opacity:.66}
  70%{transform:translate3d(-10px,-48px,0) rotate(-12deg);opacity:.18}
}
@keyframes pageFlutter{
  0%,100%{transform:rotateX(0deg) rotateZ(-1deg) translateY(0);opacity:.35}
  28%{transform:rotateX(34deg) rotateZ(4deg) translateY(-5px);opacity:.74}
  55%{transform:rotateX(12deg) rotateZ(-3deg) translateY(-2px);opacity:.45}
  76%{transform:rotateX(42deg) rotateZ(5deg) translateY(-7px);opacity:.66}
}
body:not(.authenticated) .login-card{
  position:absolute;
  left:55.25%;
  top:14.45%;
  width:37.1%;
  max-width:540px;
  min-width:0;
  height:71.55%;
  min-height:0;
  padding:0;
  border:0;
  border-radius:24px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  z-index:2;
}
body:not(.authenticated) .login-card h2,
body:not(.authenticated) .login-card>p,
body:not(.authenticated) .login-card label,
body:not(.authenticated) .field-title,
body:not(.authenticated) .role-card strong,
body:not(.authenticated) .role-card small,
body:not(.authenticated) .login-meta a,
body:not(.authenticated) .guest{color:transparent}
body:not(.authenticated) .login-card label{
  position:absolute;
  left:7%;
  width:86%;
  margin:0;
  height:8.8%;
}
body:not(.authenticated) .login-card label:nth-of-type(1){top:19.9%}
body:not(.authenticated) .login-card label:nth-of-type(2){top:34.2%}
body:not(.authenticated) .login-card input{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:70%;
  border:0;
  border-radius:10px;
  background:rgba(255,250,243,.9);
  color:#2f241c;
  padding:0 54px;
  font-size:16px;
  outline:0;
}
body:not(.authenticated) .login-card input{color:#2f241c;font-weight:700}
body:not(.authenticated) .login-card input:focus{background:rgba(255,250,243,.72)}
body:not(.authenticated) .login-card input::placeholder{color:transparent}
body:not(.authenticated) .field-title{position:absolute;left:7%;top:48.8%;margin:0}
body:not(.authenticated) .role-grid{
  position:absolute;
  left:6.2%;
  top:52.2%;
  width:87.8%;
  height:17.4%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.1%;
}
body:not(.authenticated) .role-card{
  height:100%;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
}
body:not(.authenticated) .role-card:not(.selected):after{
  content:"";
  position:absolute;
  right:-2px;
  top:-10px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fffaf3;
  border:1px solid rgba(221,199,178,.5);
  box-shadow:0 0 0 7px rgba(255,250,243,.9);
}
body:not(.authenticated) .role-card.selected{
  border:1px solid #ad3c20;
  box-shadow:inset 0 0 0 1px rgba(173,60,32,.25);
}
body:not(.authenticated) .role-card.selected:after{
  content:"✓";
  position:absolute;
  right:2px;
  top:2px;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#a63c21;
  color:#fff;
  font-size:16px;
  font-weight:900;
}
body:not(.authenticated) .role-card span{display:none}
body:not(.authenticated) .login-btn{
  position:absolute;
  left:6.2%;
  top:73.7%;
  width:87.8%;
  height:7.6%;
  margin:0;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  color:transparent;
}
body:not(.authenticated) .login-meta{
  position:absolute;
  left:6.8%;
  top:84.2%;
  width:86.5%;
  height:8%;
  margin:0;
  padding:0;
  border:0;
}
body:not(.authenticated) .login-meta label{
  position:static;
  width:auto;
  height:auto;
  color:transparent;
}
body:not(.authenticated) .login-meta input{
  width:20px;
  height:20px;
  opacity:0;
}
body:not(.authenticated) .login-bottom-actions{
  position:absolute;
  top:92.4%;
  left:27%;
  width:46%;
  height:5%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}
body:not(.authenticated) .guest{
  padding:0;
  margin:0;
  width:auto;
  height:100%;
}
body:not(.authenticated) .register-trigger{
  border:0;
  background:transparent;
  color:#ad3c20;
  font-weight:900;
  padding:0;
  height:100%;
}
body:not(.authenticated) .register-modal{
  position:absolute;
  inset:0;
  z-index:25;
  display:grid;
  place-items:center;
}
body:not(.authenticated) .register-modal[hidden]{display:none}
body:not(.authenticated) .register-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(42,28,18,.34);
  backdrop-filter:blur(4px);
}
body:not(.authenticated) .register-card{
  position:relative;
  z-index:1;
  width:min(430px,86%);
  padding:30px 34px 32px;
  border:1px solid rgba(226,207,190,.95);
  border-radius:20px;
  background:rgba(255,250,243,.96);
  box-shadow:0 24px 70px rgba(55,30,17,.28);
}
body:not(.authenticated) .register-card h2{
  margin:0 0 6px;
  text-align:center;
  color:#9f321b;
  font-size:28px;
}
body:not(.authenticated) .register-card p{
  margin:0 0 18px;
  text-align:center;
  color:#7f6958;
}
body:not(.authenticated) .register-card label,
body:not(.authenticated) .register-role-title{
  display:block;
  margin:12px 0 7px;
  font-weight:800;
}
body:not(.authenticated) .register-card input{
  width:100%;
  height:44px;
  border:1px solid #dcc9b8;
  border-radius:8px;
  background:#fff;
  padding:0 12px;
}
body:not(.authenticated) .register-role-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
body:not(.authenticated) .register-role{
  height:42px;
  border:1px solid #dcc9b8;
  border-radius:8px;
  background:#fffaf5;
  color:#5f3b25;
  font-weight:900;
}
body:not(.authenticated) .register-role.selected{
  border-color:#ad3c20;
  background:#fff2e8;
  color:#ad3c20;
}
body:not(.authenticated) .register-submit{
  width:100%;
  height:48px;
  margin-top:14px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,#c43f20,#98270f);
  color:#fff;
  font-weight:900;
}
body:not(.authenticated) .register-error{
  min-height:20px;
  margin-top:10px;
  color:#ad2f16;
  font-weight:700;
  text-align:center;
}
body:not(.authenticated) .register-close{
  position:absolute;
  right:12px;
  top:10px;
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#f3dfcd;
  color:#8e260f;
  font-size:22px;
  line-height:1;
}
body:not(.authenticated) .login-error{
  position:absolute;
  left:7%;
  top:70.2%;
  color:#ad2f16;
  font-weight:700;
}
body:not(.authenticated) .login-contact-trigger{
  position:absolute;
  right:3.75%;
  top:2.75%;
  width:9.35%;
  min-width:112px;
  height:4.15%;
  min-height:38px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:transparent;
  z-index:3;
}
body:not(.authenticated) .login-contact-panel{
  position:absolute;
  right:3.75%;
  top:7.05%;
  z-index:4;
  display:grid;
  gap:8px;
  min-width:220px;
  padding:15px 18px;
  border:1px solid rgba(173,47,22,.28);
  border-radius:12px;
  background:rgba(255,250,243,.96);
  box-shadow:0 14px 35px rgba(88,54,28,.18);
  color:#2b2118;
}
body:not(.authenticated) .login-contact-panel[hidden]{display:none}
body:not(.authenticated) .login-contact-panel strong{color:#ad2f16;font-size:16px}
body:not(.authenticated) .login-contact-panel a{color:#5f3b25;font-weight:700}
body:not(.authenticated) .login-product-trigger{
  position:absolute;
  right:26.3%;
  top:2.75%;
  width:7.2%;
  min-width:84px;
  height:4.15%;
  min-height:38px;
  border:0;
  background:transparent;
  color:transparent;
  z-index:3;
}
body:not(.authenticated) .login-help-trigger{
  position:absolute;
  right:16.8%;
  top:2.75%;
  width:7.2%;
  min-width:84px;
  height:4.15%;
  min-height:38px;
  border:0;
  background:transparent;
  color:transparent;
  z-index:3;
}
body:not(.authenticated) .login-help-panel{
  position:absolute;
  right:15.6%;
  top:7.05%;
  z-index:4;
  display:grid;
  gap:8px;
  min-width:150px;
  padding:15px 18px;
  border:1px solid rgba(173,47,22,.28);
  border-radius:12px;
  background:rgba(255,250,243,.96);
  box-shadow:0 14px 35px rgba(88,54,28,.18);
  color:#2b2118;
}
body:not(.authenticated) .login-help-panel[hidden]{display:none}
body:not(.authenticated) .login-help-panel strong{color:#ad2f16;font-size:16px}
body:not(.authenticated) .login-help-panel span{color:#5f3b25;font-weight:700}
body:not(.authenticated) .product-modal{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:4.5% 5%;
}
body:not(.authenticated) .product-modal[hidden]{display:none}
body:not(.authenticated) .product-modal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(42,28,18,.38);
  backdrop-filter:blur(5px);
}
body:not(.authenticated) .product-envelope{
  position:relative;
  width:min(720px,62vw,88%);
  aspect-ratio:1.38;
  max-height:78%;
  border-radius:18px;
  background:linear-gradient(145deg,#d8a77a,#a85b35 54%,#7d351d);
  box-shadow:0 28px 80px rgba(55,30,17,.35);
  overflow:hidden;
  animation:envelopeRise .42s ease both;
}
body:not(.authenticated) .product-envelope:before,
body:not(.authenticated) .product-envelope:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:52%;
  background:linear-gradient(145deg,#f1c79d,#b8693c);
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
  z-index:1;
  pointer-events:none;
}
body:not(.authenticated) .product-envelope:after{
  height:45%;
  background:linear-gradient(155deg,rgba(125,53,29,.52),rgba(255,227,190,.28));
  clip-path:polygon(0 100%,50% 20%,100% 100%);
}
body:not(.authenticated) .envelope-flap{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42%;
  background:linear-gradient(180deg,#f6d1aa,#bd6e43);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  animation:flapOpen .7s .14s ease both;
  z-index:3;
}
body:not(.authenticated) .product-letter{
  position:absolute;
  left:6.5%;
  right:6.5%;
  top:7%;
  bottom:7%;
  z-index:2;
  overflow:auto;
  padding:32px 42px 38px;
  border:1px solid #ead6bd;
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(173,47,22,.08) 0 2px,transparent 2px) 30px 0/100% 100% no-repeat,
    repeating-linear-gradient(180deg,#fffaf1 0 31px,#f3dfc8 32px),
    #fffaf1;
  color:#342418;
  box-shadow:0 14px 34px rgba(69,37,18,.22);
  animation:letterSlide .72s .18s ease both;
}
body:not(.authenticated) .product-letter h2{
  margin:0;
  font-size:34px;
  color:#9f321b;
  letter-spacing:1px;
  text-align:center;
}
body:not(.authenticated) .product-subtitle{
  margin:8px 0 22px;
  text-align:center;
  font-weight:800;
  color:#6a4028;
}
body:not(.authenticated) .product-letter h3{
  margin:26px 0 10px;
  color:#9f321b;
  font-size:20px;
}
body:not(.authenticated) .product-letter h4{
  margin:18px 0 8px;
  color:#6d4228;
  font-size:17px;
}
body:not(.authenticated) .product-letter p,
body:not(.authenticated) .product-letter li{
  font-size:15px;
  line-height:1.9;
}
body:not(.authenticated) .product-letter ul{padding-left:20px;margin:8px 0}
body:not(.authenticated) .product-poem{
  color:#8e4428;
  font-weight:700;
  text-align:center;
}
body:not(.authenticated) .product-copyright{
  margin-top:22px;
  text-align:center;
  color:#8b654e;
}
body:not(.authenticated) .product-close{
  position:absolute;
  right:14px;
  top:12px;
  z-index:5;
  width:34px;
  height:34px;
  border:1px solid rgba(255,240,220,.75);
  border-radius:50%;
  background:rgba(86,42,24,.32);
  color:#fff8ed;
  font-size:24px;
  line-height:1;
}
@keyframes envelopeRise{
  from{transform:translateY(18px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes flapOpen{
  0%{transform:rotateX(0deg);z-index:4}
  100%{transform:rotateX(178deg);z-index:0}
}
@keyframes letterSlide{
  from{transform:translateY(34%);opacity:.72}
  to{transform:translateY(0);opacity:1}
}

.teacher-profile{
  display:flex;
  align-items:center;
  gap:9px;
  max-width:170px;
}
.teacher-profile img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
}
.teacher-profile strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#downloadDataButton:disabled{
  opacity:.68;
  cursor:wait;
}