*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --b9:#0a1628;--b8:#0d2045;--b7:#1a3a6e;--b6:#1d4ed8;--b5:#2563eb;--b4:#3b82f6;
  --b3:#93c5fd;--b1:#dbeafe;--b0:#eff6ff;
  --g9:#111827;--g7:#374151;--g5:#6b7280;--g3:#d1d5db;--g2:#e5e7eb;--g1:#f3f4f6;--g0:#f9fafb;
  --w:#fff;--acc:#f59e0b;--gr:#059669;
  --r:6px;--rs:4px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shm:0 4px 12px rgba(0,0,0,.12);
}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  background:var(--g1);color:var(--g9);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--b6);text-decoration:none}
a:hover{color:var(--b5);text-decoration:underline}
mark{background:#fef9c3;color:#854d0e;padding:0 2px;border-radius:2px}

/* ─── HEADER ─── */
.hd{background:linear-gradient(135deg,var(--b9) 0%,var(--b8) 55%,var(--b7) 100%);
  position:sticky;top:0;z-index:300;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.hd-in{max-width:1300px;margin:0 auto;padding:0 16px;height:54px;
  display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}
.logo-ic{width:30px;height:30px;background:var(--b5);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.logo-n{font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.logo-s{font-size:10px;color:var(--b3)}
.hd-sf{flex:1;max-width:460px;display:flex;position:relative}
.hd-si{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);font-size:14px;pointer-events:none}
.hd-sf input{width:100%;padding:7px 12px 7px 32px;border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r) 0 0 var(--r);background:rgba(255,255,255,.12);
  color:#fff;font-size:13px;outline:none;transition:all .2s}
.hd-sf input::placeholder{color:rgba(255,255,255,.45)}
.hd-sf input:focus{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.hd-sf button{padding:7px 14px;background:var(--b5);border:1.5px solid var(--b5);
  border-radius:0 var(--r) var(--r) 0;color:#fff;font-size:13px;cursor:pointer;
  white-space:nowrap;transition:background .15s}
.hd-sf button:hover{background:var(--b4)}
.mob-btn{display:none;background:rgba(255,255,255,.12);border:none;color:#fff;
  padding:6px 9px;border-radius:var(--rs);cursor:pointer;font-size:17px;margin-left:auto;
  line-height:1}

/* ─── BREADCRUMB ─── */
.bc{background:var(--w);border-bottom:1px solid var(--g2)}
.bc-in{max-width:1300px;margin:0 auto;padding:7px 16px;
  display:flex;align-items:center;flex-wrap:wrap;gap:3px;font-size:12px;color:var(--g5)}
.bc-in a{color:var(--b6)}.bc-sep{color:var(--g3);margin:0 1px}.bc-cur{color:var(--g7);font-weight:500}

/* ─── LAYOUT ─── */
.wrap{max-width:1300px;margin:0 auto;padding:14px 16px;flex:1;
  display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:start}

/* ─── SIDEBAR ─── */
.sb{background:var(--w);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;position:sticky;top:66px;max-height:calc(100vh - 74px);overflow-y:auto}
.sb::-webkit-scrollbar{width:4px}
.sb::-webkit-scrollbar-thumb{background:var(--g3);border-radius:2px}
.sb-hd{background:var(--b8);color:#fff;padding:9px 13px;font-size:12px;
  font-weight:600;letter-spacing:.4px;position:sticky;top:0;z-index:1}
.sb-a{display:flex;align-items:center;gap:6px;padding:5px 13px;
  font-size:12px;color:var(--g7);border-left:3px solid transparent;
  transition:all .12s;white-space:nowrap}
.sb-a:hover{background:var(--b0);color:var(--b6);border-left-color:var(--b4);text-decoration:none}
.sb-a.on{background:var(--b0);color:var(--b7);font-weight:600;border-left-color:var(--b6)}
.sb-dot{width:20px;height:20px;border-radius:3px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.sb-dot.g{background:var(--b1);color:var(--b7)}.sb-dot.s{background:#d1fae5;color:#065f46}
.sb-nm{flex:1;overflow:hidden;text-overflow:ellipsis}

/* ─── MAIN ─── */
.main{min-width:0}
.card{background:var(--w);border-radius:var(--r);box-shadow:var(--sh);
  border:1px solid var(--g2);padding:14px 16px;margin-bottom:12px}
.page-ttl{font-size:16px;font-weight:700;color:var(--g9);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.badge{background:var(--b6);color:#fff;padding:2px 9px;border-radius:12px;
  font-size:12px;font-weight:600;flex-shrink:0}
.desc{font-size:13px;color:var(--g5);line-height:1.7}

/* ─── HERO ─── */
.hero{background:linear-gradient(135deg,var(--b9),var(--b8) 50%,var(--b7));
  color:#fff;padding:36px 16px;text-align:center}
.hero-in{max-width:620px;margin:0 auto}
.hero h1{font-size:clamp(18px,3.5vw,32px);font-weight:800;margin-bottom:6px}
.hero h1 span{color:var(--b3)}
.hero-sub{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:18px}
.hero-sf{display:flex;max-width:500px;margin:0 auto;border-radius:var(--r);
  overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.hero-sf input{flex:1;padding:11px 14px;border:none;font-size:14px;outline:none}
.hero-sf button{padding:11px 18px;background:var(--b5);border:none;color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap}
.hero-sf button:hover{background:var(--b4)}
.hero-tip{margin-top:9px;font-size:11px;color:rgba(255,255,255,.4)}

/* ─── CLASS GRID (9 per row desktop, 3 per row mobile) ─── */
.home-wrap{max-width:1300px;margin:0 auto;padding:14px 16px}
.notice{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r);
  padding:9px 13px;font-size:12px;color:#92400e;margin-bottom:12px}

/* The grid used BOTH on homepage AND inside pages (sidebar pages use .cls-nav-grid) */
.cls-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:7px}
.cls-nav-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;
  background:var(--w);border-radius:var(--r);padding:12px;box-shadow:var(--sh);
  border:1px solid var(--g2);margin-bottom:12px}

.cls-card{background:var(--w);border-radius:var(--r);padding:9px 5px 8px;
  box-shadow:var(--sh);border:1px solid var(--g2);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:all .15s;color:inherit;text-decoration:none;min-height:64px;
  justify-content:center}
.cls-card:hover{box-shadow:var(--shm);transform:translateY(-2px);
  border-color:var(--b3);text-decoration:none}
.cls-card.on{border-color:var(--b6);background:var(--b0);box-shadow:var(--shm)}
.cls-num{width:28px;height:28px;border-radius:var(--rs);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;margin-bottom:5px;flex-shrink:0}
.ng{background:var(--b1);color:var(--b7)}.ns{background:#d1fae5;color:#065f46}
.cls-sn{font-size:10px;font-weight:600;color:var(--g9);line-height:1.3;
  word-break:break-all}

/* ─── GROUP LIST ─── */
.grp-list{display:grid;gap:8px}
.grp-card{background:var(--w);border-radius:var(--r);border:1px solid var(--g2);
  box-shadow:var(--sh);overflow:hidden}
.grp-hd{display:flex;align-items:center;gap:8px;
  padding:9px 13px;background:var(--g0);border-bottom:1px solid var(--g2)}
.grp-code{font-family:'Courier New',monospace;font-size:11px;font-weight:700;
  color:var(--w);background:var(--b7);padding:2px 6px;border-radius:3px;flex-shrink:0}
.grp-nm{font-size:13px;font-weight:600;color:var(--g9);flex:1}
.grp-nm a{color:inherit}.grp-nm a:hover{color:var(--b6)}
.grp-cnt{font-size:11px;color:var(--g5);background:var(--g2);
  padding:1px 7px;border-radius:8px;flex-shrink:0}
.grp-pre{padding:7px 13px;font-size:12px;color:var(--g5);line-height:1.8}

/* ─── TABLE ─── */
.tbl{width:100%;border-collapse:collapse;background:var(--w);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh)}
.tbl th{background:var(--b8);color:#fff;padding:9px 12px;text-align:left;
  font-size:12px;font-weight:600;white-space:nowrap}
.tbl td{padding:8px 12px;font-size:12px;border-bottom:1px solid var(--g1);color:var(--g7)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--b0)}
.ic{font-family:'Courier New',monospace;color:var(--b7);font-weight:600;
  white-space:nowrap;font-size:11px}
.in{color:var(--g9)}

/* ─── RESULTS PANEL ─── */
.rp{background:var(--w);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.rp-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;
  padding:9px 13px;background:var(--g0);border-bottom:1px solid var(--g2)}
.rc{font-size:13px;font-weight:600;color:var(--g7)}.rc em{color:var(--b6);font-style:normal}

/* ─── SEARCH FORM ─── */
.sf{background:var(--w);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;
  box-shadow:var(--sh);border:1px solid var(--g2)}
.sf-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sf-row input[type=text]{flex:1;min-width:140px;padding:7px 11px;
  border:1.5px solid var(--g3);border-radius:var(--r);font-size:13px;outline:none;
  transition:border-color .2s}
.sf-row input:focus{border-color:var(--b5)}
.sf-row select{padding:7px 10px;border:1.5px solid var(--g3);border-radius:var(--r);
  font-size:13px;background:var(--w);outline:none;cursor:pointer;color:var(--g7)}
.btn{padding:7px 14px;border-radius:var(--r);font-size:13px;font-weight:500;
  cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap}
.btn-p{background:var(--b6);color:#fff}
.btn-p:hover{background:var(--b5);color:#fff;text-decoration:none}
.btn-s{background:var(--g1);color:var(--g7);border:1px solid var(--g3)}
.btn-s:hover{background:var(--g2);text-decoration:none}

/* ─── PAGINATION ─── */
.pg{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:10px 12px;border-top:1px solid var(--g2);background:var(--g0)}
.pg-i{font-size:12px;color:var(--g5)}
.pg-b{display:flex;gap:3px;flex-wrap:wrap}
.pb{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--g3);
  border-radius:var(--rs);font-size:12px;color:var(--g7);background:var(--w);
  transition:all .12s;text-decoration:none}
.pb:hover{background:var(--b0);border-color:var(--b4);color:var(--b6);text-decoration:none}
.pb.on{background:var(--b6);border-color:var(--b6);color:#fff}
.pe{padding:4px 3px;color:var(--g5)}

/* ─── EMPTY STATE ─── */
.empty{text-align:center;padding:48px 16px;color:var(--g5)}
.ei{font-size:38px;margin-bottom:10px}
.et{font-size:15px;font-weight:600;color:var(--g7);margin-bottom:6px}

/* ─── BACK TOP ─── */
#btt{display:none;position:fixed;bottom:20px;right:20px;width:36px;height:36px;
  border-radius:50%;background:var(--b6);border:none;color:#fff;font-size:16px;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:999;
  align-items:center;justify-content:center}

/* ─── FOOTER ─── */
.ft{background:var(--b9);color:rgba(255,255,255,.45);text-align:center;
  padding:14px;font-size:11px;margin-top:auto}
.ft a{color:rgba(255,255,255,.6)}

/* ─── RESPONSIVE ─── */
/* Tablet: 5 cols */
@media(max-width:1100px){
  .cls-grid,.cls-nav-grid{grid-template-columns:repeat(5,1fr)}
}
/* Mobile: sidebar collapses, 3 cols for class grid */
@media(max-width:700px){
  .wrap{grid-template-columns:1fr;padding:10px 12px}
  .sb{position:static;top:auto;max-height:none}
  .sb-body{display:none}
  .sb.open .sb-body{display:block}
  .mob-btn{display:flex;align-items:center;justify-content:center}
  .logo-s{display:none}
  .hd-in{height:48px;gap:8px}
  .hd-sf{max-width:100%}
  .hero{padding:24px 12px}
  .home-wrap,.wrap{padding:10px 12px}
  .cls-grid,.cls-nav-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .cls-card{padding:8px 4px;min-height:58px}
  .cls-num{width:26px;height:26px;font-size:11px;margin-bottom:4px}
  .cls-sn{font-size:10px}
  .sf-row{gap:5px}
  .sf-row input[type=text]{min-width:100px}
  .tbl th,.tbl td{padding:7px 9px;font-size:11px}
  .page-ttl{font-size:14px}
}
/* Small mobile: still 3 cols, tighter */
@media(max-width:380px){
  .cls-sn{font-size:9px}
  .cls-card{padding:6px 2px;min-height:52px}
  .cls-num{width:22px;height:22px;font-size:10px}
}