:root{
  --bg:#f4f6f8; --panel:#ffffff; --line:#e2e6ea; --line2:#cfd6dd;
  --tx:#1f2329; --tx2:#606874; --tx3:#98a1ac;
  --blue:#185fa5; --blue-bg:#e6f1fb;
  --green:#0f6e56; --green-bg:#e1f5ee;
  --red:#a32d2d; --red-bg:#fcebeb;
  --amber:#854f0b; --amber-bg:#faeeda;
  --purple:#534ab7; --purple-bg:#eeedfe;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.app{
  background:var(--bg);color:var(--tx);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:500}
p{margin:.4em 0}
.muted{color:var(--tx2)}
.small{font-size:12px}
.empty{padding:18px;text-align:center;color:var(--tx3)}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  height:52px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-size:15px;font-weight:500;color:var(--tx)}
.brand:hover{text-decoration:none}
.topbar-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{font-size:13px;color:var(--tx2)}
.who .role{margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--blue-bg);color:var(--blue);font-size:12px}
.mini{font-size:13px;padding:4px 10px;border:1px solid var(--line2);border-radius:99px;color:var(--tx2)}
.mini:hover{text-decoration:none;border-color:var(--blue);color:var(--blue)}
.menu-btn{display:none;border:1px solid var(--line2);background:#fff;border-radius:8px;padding:5px 10px;font-size:13px;color:var(--tx2)}

/* 布局 */
.shell{display:flex;min-height:calc(100vh - 52px)}
.side{width:172px;flex:0 0 172px;background:var(--panel);border-right:1px solid var(--line);padding:12px 8px}
.side nav{display:flex;flex-direction:column;gap:2px}
.ni{padding:9px 12px;border-radius:8px;color:var(--tx2);font-size:14px}
.ni:hover{background:var(--bg);text-decoration:none;color:var(--tx)}
.ni.on{background:var(--blue-bg);color:var(--blue);font-weight:500}
.main{flex:1;min-width:0;padding:16px 18px 60px}
.scrim{display:none}

.page-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.page-h h1{font-size:17px}
.page-a{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:14px}
.card-h-r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-b{padding:14px}

.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 表格 */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--tx2);font-weight:500;background:#fafbfc;position:sticky;top:0}
tbody tr:hover{background:#fafbfc}
td .num{font-variant-numeric:tabular-nums}

/* 表单 */
.field{display:block;margin-bottom:12px}
.fl{display:block;font-size:13px;color:var(--tx2);margin-bottom:5px}
.fh{display:block;font-size:12px;color:var(--tx3);margin-top:4px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--line2);border-radius:8px;background:#fff;
  font:inherit;color:var(--tx);font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--tx2);margin:10px 0}
.check input{width:auto;margin-top:3px}
.form-row{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row-3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

.btn{
  display:inline-block;padding:8px 14px;border:1px solid var(--line2);border-radius:8px;
  background:#fff;color:var(--tx);font:inherit;font-size:13px;cursor:pointer;
}
.btn:hover{text-decoration:none;border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#124d87;color:#fff}
.btn.danger{color:var(--red);border-color:#f0b7b7}
.btn.danger:hover{background:var(--red-bg);color:var(--red)}
.btn.big{width:100%;padding:12px;font-size:15px;margin-top:8px}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}

/* 提示 */
.flash{padding:10px 14px;border-radius:10px;margin-bottom:12px;font-size:13px;border:1px solid}
.flash.ok{background:var(--green-bg);border-color:#9fe1cb;color:var(--green)}
.flash.bad{background:var(--red-bg);border-color:#f0b7b7;color:var(--red)}

/* 统计块 */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.sv{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.sv i{font-size:12px;font-style:normal;color:var(--tx3);margin-left:3px}
.sn{font-size:13px;color:var(--tx2);margin-top:2px}

/* 班级条 */
.classbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--tx2)}
.classbar select{width:auto;min-width:150px;padding:6px 8px}
.cb-name{font-size:15px;font-weight:500;color:var(--tx)}
.cb-label{color:var(--tx3)}

/* 标签 */
.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;background:var(--bg);color:var(--tx2);border:1px solid var(--line)}
.tag.blue{background:var(--blue-bg);color:var(--blue);border-color:#b5d4f4}
.tag.green{background:var(--green-bg);color:var(--green);border-color:#9fe1cb}
.tag.red{background:var(--red-bg);color:var(--red);border-color:#f0b7b7}
.tag.amber{background:var(--amber-bg);color:var(--amber);border-color:#fac775}
.tag.purple{background:var(--purple-bg);color:var(--purple);border-color:#cecbf6}

/* 学生卡片 */
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stu{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.stu .sn2{font-size:15px;font-weight:500}
.stu .sm2{font-size:12px;color:var(--tx3);margin-top:2px}
.stu .sv2{font-size:13px;color:var(--blue);margin-top:6px;font-variant-numeric:tabular-nums}
.stu .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.stu.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}
.stu.picked{border-color:var(--amber);background:var(--amber-bg)}

/* 座位 */
.seatmap{display:grid;gap:8px;margin-top:6px}
.seat{border:1px dashed var(--line2);border-radius:8px;min-height:62px;padding:6px;background:#fff;font-size:12px;position:relative}
.seat.filled{border-style:solid;border-color:var(--line);background:#fafbfc}
.seat .sname{font-size:13px;font-weight:500}
.seat .sno{color:var(--tx3);font-size:11px}
.seat.head{border-color:var(--amber);background:var(--amber-bg)}
.seat.empty-seat{background:transparent;border-style:dotted}

/* 抽人 */
.drawbox{text-align:center;padding:26px 10px}
.drawname{font-size:44px;font-weight:500;letter-spacing:3px;color:var(--blue);min-height:60px;line-height:1.2}
.drawmeta{color:var(--tx2);margin-top:6px;font-size:13px}
.rolling{color:var(--tx3)}

/* 题卡 */
.qcard{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff}
.qstem{font-size:20px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.qanswer{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2);font-size:18px;color:var(--green);white-space:pre-wrap;min-height:30px}
.hidden-ans{color:var(--tx3);font-size:14px;letter-spacing:2px}

/* 排行 */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.rank li:last-child{border-bottom:0}
.rank .rk{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--bg);color:var(--tx2);
  display:flex;align-items:center;justify-content:center;font-size:12px}
.rank .rk.t1{background:#faeeda;color:#854f0b}
.rank .rk.t2{background:#eceef0;color:#5f6469}
.rank .rk.t3{background:#f7ece3;color:#8a5a2b}
.rank .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .rv{font-variant-numeric:tabular-nums;color:var(--blue);font-weight:500}

.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue)}

/* 登录 */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.loginbox{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.loginbox h1{font-size:17px;margin-bottom:6px}
.loginbox .field{margin-top:14px}
.loginbox .btn.big{margin-top:16px}
.login-body .flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:70;min-width:260px;text-align:center}

.list-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.list-row:last-child{border-bottom:0}
.list-row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline{display:inline}
.inline form{display:inline}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs a{padding:6px 12px;border-radius:99px;border:1px solid var(--line2);font-size:13px;color:var(--tx2)}
.tabs a.on{background:var(--blue-bg);border-color:#b5d4f4;color:var(--blue)}

/* 手机 */
@media (max-width:760px){
  .menu-btn{display:inline-block}
  .side{position:fixed;top:52px;bottom:0;left:0;z-index:40;transform:translateX(-100%);transition:transform .2s;width:200px;flex-basis:200px;overflow:auto}
  body.nav-open .side{transform:translateX(0)}
  body.nav-open .scrim{display:block;position:fixed;inset:52px 0 0 0;background:rgba(0,0,0,.25);z-index:35}
  .main{padding:12px 12px 60px}
  .cols-2,.cols-3,.cols-4,.form-row,.form-row-3{grid-template-columns:1fr}
  .who{display:none}
  .drawname{font-size:34px}
  th,td{padding:8px 8px;white-space:nowrap}
  .page-h h1{font-size:16px}
}
@media (min-width:761px) and (max-width:1100px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}