:root{
  --blue:#7F6548;
  --accent:#B8956A;
  --accent2:#DCC7A1;
  --accent-ink:#4E4338;
  --blue2:#9A7D5D;
  --blue-soft:#F1E7D9;
  --ink:#4E4338;
  --muted:#7A6C5E;
  --line:#D8CCBC;
  --bg:#F6F1E8;
  --white:#FCFAF6;
  --radius:20px;
  --shadow:0 12px 32px rgba(27,61,85,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:linear-gradient(180deg,#FBF8F2 0%,var(--bg) 100%);
  color:var(--ink)
}
button,a{font:inherit}
.site-shell{max-width:1180px;margin:0 auto;padding:0 24px 30px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 0 14px;
}
.identity{display:flex;align-items:center;gap:14px;min-width:0}
.logo-box{
  width:62px;height:62px;flex:0 0 62px;border-radius:14px;overflow:hidden;
  background:#fffafd;display:grid;place-items:center;
  border:1px solid var(--line);
}
.logo-box img{
  width:88%;height:88%;object-fit:contain;
  mix-blend-mode:normal;
}
.identity-text{line-height:1.28}
.school{font-size:13px;font-weight:850;color:#7F6548;letter-spacing:.035em}
.department{font-size:15px;font-weight:760;margin-top:4px}
.system-name{
  color:#7F6548;font-size:14px;font-weight:900;letter-spacing:.04em;
  border:1px solid #cfdce5;border-radius:999px;padding:9px 14px;background:#FCFAF6;
  white-space:nowrap
}
.main-nav{
  display:flex;align-items:center;gap:6px;
  background:#FCFAF6;border:1px solid var(--line);border-radius:15px;
  padding:6px;margin-bottom:22px;box-shadow:0 6px 18px rgba(37,70,92,.04)
}
.nav-btn{
  border:0;background:#F1E7D9;color:#9A7D5D
  border-radius:10px;font-weight:750;cursor:pointer
}
.nav-btn:hover{background:#EFE4D4;color:#6F573E}
.nav-btn.active{background:linear-gradient(135deg,#DCC7A1,#C8AA80);color:#4E4338;border:1px solid #BFA27B}
.view{display:none}
.view.active{display:block}
.page-heading{
  min-height:150px;border-radius:25px;padding:35px 38px;
  background:linear-gradient(135deg,#DCC7A1,#C9AE87);
  color:#4E4338;display:flex;align-items:center;margin-bottom:20px;
  box-shadow:var(--shadow)
}
.page-heading.compact{min-height:130px}
.page-heading h1{margin:0 0 8px;font-size:35px;letter-spacing:-.02em}
.page-heading p{margin:0;color:#6B5B4B;font-size:16px}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.subject-card{
  background:#FCFAF6;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);min-height:255px;
  display:flex;flex-direction:column
}
.subject-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.subject-head h2{font-size:22px;margin:0}
.subject-icon{
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;background:#EAF8FD;color:#1296c4
}
.subject-icon svg{width:32px;height:32px;fill:currentColor}
.actions{margin-top:auto;display:grid;gap:10px}
.actions.three{grid-template-columns:1fr}
.actions.two{grid-template-columns:1fr}
.actions a,.teacher-card>a,.mini-actions a{
  text-decoration:none;text-align:center;border:1px solid #cad9e3;color:#7F6548;
  background:#F8F3EB;padding:12px 10px;border-radius:12px;font-weight:780;
  transition:.16s ease
}
.actions a:hover,.teacher-card>a:hover,.mini-actions a:hover{
  background:var(--blue);color:#fff;border-color:#7F6548;transform:translateY(-1px)
}
.teacher-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.teacher-card{
  background:#FCFAF6;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:0 8px 24px rgba(26,60,83,.06)
}
.teacher-card h3{margin:0 0 16px;font-size:19px}
.teacher-card>a{display:inline-block;min-width:180px}
.install-card{grid-column:1/-1}
.mini-actions{display:flex;gap:10px;flex-wrap:wrap}
.mini-actions a{min-width:155px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide-card{
  text-decoration:none;color:var(--ink);background:#FCFAF6;border:1px solid var(--line);
  border-radius:18px;padding:28px 22px;box-shadow:0 8px 24px rgba(26,60,83,.06);
  display:flex;align-items:center;gap:14px;transition:.16s ease
}
.guide-card:hover{border-color:#a9c5d7;transform:translateY(-2px)}
.guide-icon{font-size:27px}
footer{
  margin-top:28px;padding:18px 2px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;color:#73818d;font-size:12.5px
}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  background:#17232d;color:#fff;border-radius:11px;padding:10px 14px;
  opacity:0;pointer-events:none;transition:.18s ease;box-shadow:0 8px 26px rgba(0,0,0,.2);
  font-size:13px;z-index:50
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .subject-grid{grid-template-columns:1fr}
  .subject-card{min-height:auto}
  .actions.three{grid-template-columns:repeat(3,1fr)}
  .actions.two{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .site-shell{padding:0 14px 24px}
  .system-name{display:none}
  .topbar{align-items:flex-start}
  .logo-box{width:52px;height:52px;flex-basis:52px}
  .school{font-size:11px}
  .department{font-size:13px}
  .main-nav{overflow-x:auto}
  .nav-btn{white-space:nowrap}
  .page-heading{min-height:125px;padding:27px 22px}
  .page-heading h1{font-size:27px}
  .teacher-grid,.guide-grid{grid-template-columns:1fr}
  .install-card{grid-column:auto}
  footer{flex-direction:column}
}
@media(max-width:520px){
  .actions.three,.actions.two{grid-template-columns:1fr}
  .page-heading p{font-size:14px}
}