/* ===== 码上到 · RollSnap 全局样式 ===== */
/* 从原 RollSnap.html 提取，保留完整色彩体系 */

:root{
  --paper:#F6F1E7; --paper2:#EFE8D9; --card:#FFFDF7;
  --ink:#26221B; --ink2:#6E675A; --line:#DCD3C0; --line2:#C9BFA9;
  --seal:#BC3A28; --seal-d:#9E2E1F; --green:#2E6B4E; --green-bg:#E6EEE5;
  --blue:#3A6B9E; --blue-bg:#E0EAF2;
  --red-bg:#F4E2DD; --shadow:3px 3px 0 rgba(38,34,27,.09);
  --serif:'Noto Serif SC',serif; --sans:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:var(--seal);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line2);border-radius:4px;padding:8px 10px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--seal)}
/* ===== 下拉选择框（自定义箭头） ===== */
select.sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  padding-right:32px}
select.sel:hover{border-color:var(--ink)}
select.sel:disabled{opacity:.55;cursor:not-allowed;background-color:var(--paper2)}
.ic{vertical-align:-3px}

/* ===== 布局 ===== */
.layout{display:flex;min-height:100vh}
.side{width:212px;flex-shrink:0;background:#211D17;color:#CFC6B4;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo{padding:26px 20px 20px;display:flex;gap:12px;align-items:center;border-bottom:1px solid #3A342A}
.logo-seal{width:44px;height:44px;background:var(--seal);color:#FFF6EC;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.1;text-align:center;box-shadow:inset 0 0 0 2px rgba(255,246,236,.35), 2px 2px 0 rgba(0,0,0,.3);transform:rotate(-3deg)}
.side-logo b{font-family:var(--serif);font-size:17px;color:#F4EDDD;display:block;letter-spacing:2px}
.side-logo small{font-size:10px;letter-spacing:1px;color:#8B8371}
.nav{padding:14px 0;flex:1}
.nav-i{display:flex;align-items:center;gap:11px;padding:11px 22px;color:#B7AE99;font-size:14px;letter-spacing:1px;border-left:3px solid transparent;transition:.15s}
.nav-i:hover{color:#F0E9D8;background:rgba(255,255,255,.03)}
.nav-i.on{color:#FFF6EC;border-left-color:var(--seal);background:rgba(188,58,40,.14)}
.nav-i .ic{opacity:.85}
.side-foot{padding:16px 20px;border-top:1px solid #3A342A;font-size:11px;color:#7A7362;line-height:1.7}
.side-foot .lnk{color:#B7AE99;cursor:pointer;display:flex;gap:8px;align-items:center;padding:4px 0}
.side-foot .lnk:hover{color:#F0E9D8}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;padding:34px 40px 0;min-width:0;max-width:1280px}

/* ===== 页面标题 ===== */
.h-page{font-family:var(--serif);font-weight:900;font-size:27px;letter-spacing:2px;margin-bottom:6px}
.h-page::after{content:'';display:block;width:34px;height:4px;background:var(--seal);margin-top:8px}
.h-sub{color:var(--ink2);margin:10px 0 26px;font-size:13px}
.h-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* 总览页：欢迎语与「快速发起签到」同行，按钮靠右（与统计卡片右侧对齐） */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--ink2);font-size:13px;margin:10px 0 26px}

/* ===== 卡片 ===== */
.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;padding:20px}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#F6F1E7;border:1px solid var(--ink);
  padding:5px 12px;border-radius:4px;font-size:12.5px;letter-spacing:1px;transition:.15s;font-weight:500}
.btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 rgba(38,34,27,.25)}
.btn:active{transform:none;box-shadow:none}
.btn.accent{background:var(--seal);border-color:var(--seal)}
.btn.accent:hover{background:var(--seal-d)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper2)}
.btn.sm{padding:5px 12px;font-size:12.5px}
.btn.xs{padding:5px 12px;font-size:12.5px}
.btn.link{background:none;border:1px solid transparent;color:var(--ink2);padding:5px 6px}
.btn.link:hover{color:var(--seal);transform:none;box-shadow:none}
.btn:disabled{opacity:.45;pointer-events:none}
/* 登录/注册页卡片内按钮：文字水平居中 */
.welcome .card .btn{justify-content:center}

/* ===== 徽章 ===== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 11px;border-radius:99px;border:1px solid;letter-spacing:1px}
.badge.live{color:var(--green);border-color:var(--green);background:var(--green-bg)}
.badge.end{color:var(--ink2);border-color:var(--line2);background:var(--paper2)}
.badge.wait{color:var(--blue);border-color:var(--blue);background:var(--blue-bg)}
.badge.hot{color:var(--seal);border-color:var(--seal);background:var(--red-bg)}

/* ===== 表格 ===== */
.tbl{width:100%;border-collapse:collapse;background:var(--card)}
.tbl th{font-size:12px;color:var(--ink2);font-weight:500;letter-spacing:1.5px;text-align:left;
  padding:9px 12px;border-bottom:2px solid var(--ink);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#FBF7EC}
.num{font-variant-numeric:tabular-nums}

/* ===== 统计卡片 ===== */
.stat-grid{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.stat{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;padding:16px 20px}
.stat .k{font-size:12px;color:var(--ink2);letter-spacing:2px}
.stat .v{font-family:var(--serif);font-weight:900;font-size:34px;line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:14px;font-weight:600;color:var(--ink2);margin-left:2px}
.stat .v.seal{color:var(--seal)}
.stat .v.green{color:var(--green)}

/* ===== 空状态 ===== */
.empty{text-align:center;padding:60px 20px;color:var(--ink2)}
.empty .big{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px;letter-spacing:2px}

/* ===== 弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(30,26,20,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .18s}
.modal{background:var(--card);border-radius:8px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;
  border:1px solid var(--line);box-shadow:6px 6px 0 rgba(38,34,27,.18);animation:pop .22s cubic-bezier(.2,1.4,.4,1)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-h b{font-family:var(--serif);font-size:17px;letter-spacing:2px}
.modal-b{padding:20px 22px;overflow:auto}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.f-row{margin-bottom:14px}
.f-row label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:5px;letter-spacing:1px}
.f-row input,.f-row select,.f-row textarea{width:100%}
.f-tip{font-size:12px;color:var(--ink2);line-height:1.7;margin-top:6px}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{from{transform:scale(.94);opacity:0}}

/* ===== Toast 提示 ===== */
.toast-wrap{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--ink);color:#F6F1E7;padding:11px 18px;border-radius:5px;font-size:13.5px;letter-spacing:.5px;
  box-shadow:4px 4px 0 rgba(38,34,27,.2);display:flex;gap:9px;align-items:center;animation:toastIn .3s cubic-bezier(.2,1.4,.4,1);max-width:340px}
.toast::before{content:'';width:8px;height:8px;border-radius:50%;background:#8BC4A5;flex-shrink:0}
.toast.warn::before{background:#E8B04B}
.toast.err::before{background:#E0705B}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}}
.toast.out{transition:.3s;opacity:0;transform:translateX(30px)}

/* ===== 印章 ===== */
.seal{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--seal);color:var(--seal);
  border-radius:50%;font-family:var(--serif);font-weight:900;transform:rotate(-8deg);
  box-shadow:inset 0 0 0 1.5px rgba(188,58,40,.35);background:rgba(188,58,40,.04);user-select:none}
.seal.stamp{animation:stamp .5s cubic-bezier(.25,1.5,.35,1) both}
@keyframes stamp{
  0%{transform:scale(2.6) rotate(-24deg);opacity:0}
  55%{transform:scale(.9) rotate(-6deg);opacity:1}
  75%{transform:scale(1.06) rotate(-9deg)}
  100%{transform:scale(1) rotate(-8deg);opacity:1}}
.seal-lg{width:150px;height:150px;font-size:30px;letter-spacing:3px;flex-direction:column;line-height:1.25;border-width:4px}
.seal-lg small{font-size:12px;font-weight:600;letter-spacing:2px;margin-top:2px}
.seal-sm{width:24px;height:24px;font-size:12px;border-width:2px;flex-shrink:0}

/* ===== 课程管理 ===== */
.mg{display:grid;grid-template-columns:290px 1fr;gap:22px;align-items:start}
.course-item{padding:13px 15px;border:1px solid var(--line);border-radius:6px;background:var(--card);margin-bottom:10px;cursor:pointer;position:relative;transition:.15s}
.course-item:hover{border-color:var(--ink2)}
.course-item.on{border-color:var(--seal);box-shadow:2px 2px 0 rgba(188,58,40,.18)}
.course-item b{font-family:var(--serif);font-size:15px;letter-spacing:1px;display:block}
.course-item .meta{font-size:12px;color:var(--ink2);margin-top:3px}
.course-item .ops{position:absolute;top:10px;right:8px;display:flex;opacity:0;transition:.15s}
.course-item:hover .ops{opacity:1}
.cls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.cls-card{padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.cls-card:hover{transform:translate(-1px,-1px)}
.cls-card.on{border-color:var(--seal);outline:2px solid rgba(188,58,40,.25)}
.cls-card b{font-family:var(--serif);font-size:15px}
.cls-card .meta{font-size:12px;color:var(--ink2);margin-top:4px}
.dashed{border:1.5px dashed var(--line2);background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--ink2);min-height:76px;letter-spacing:1px}
.dashed:hover{border-color:var(--seal);color:var(--seal);transform:none}

/* ===== 发起签到步骤 ===== */
.step{margin-bottom:26px}
.step-t{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step-n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:14px;flex-shrink:0}
.step-t b{font-family:var(--serif);font-size:16px;letter-spacing:2px}
.dur-custom{display:flex;align-items:center;gap:8px}
.dur-custom input{width:70px;text-align:center}

/* ===== 发起签到：全宽两列步骤布局 ===== */
.create-card{max-width:none;padding:26px 30px}
.create-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px 36px;align-items:start}
.create-col{min-width:0}
.create-col .step{margin-bottom:26px}
.create-col .step:last-child{margin-bottom:0}

/* 课程 / 班级选择项：等宽网格铺满宽列，排列整齐 */
.course-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.pick{padding:11px 14px;border:1px solid var(--line2);border-radius:6px;background:var(--card);
  font-size:14px;letter-spacing:1px;text-align:center;cursor:pointer;user-select:none;transition:.12s}
.pick:hover{border-color:var(--ink);transform:translateY(-1px)}
.pick.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.pick.on.red{background:var(--seal);border-color:var(--seal)}

/* 右列占位提示（未选班级时） */
.param-hint{border:1.5px dashed var(--line2);border-radius:8px;background:var(--paper2);
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--ink2);text-align:center;padding:16px}
.param-hint .ph-ic{display:flex;width:42px;height:42px;border-radius:50%;background:var(--card);
  border:1px solid var(--line);align-items:center;justify-content:center;color:var(--seal)}
.param-hint p{font-size:12.5px;line-height:1.8;letter-spacing:1px;margin:0}

/* 右列参数面板（步骤 4/5） */
.param-panel{display:flex;flex-direction:column;gap:24px;padding:22px 20px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper2);
  animation:panelIn .28s ease}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}}
.param-panel .opt-grid{margin-top:14px}

/* 选项网格：等宽按钮 */
.opt-grid{display:grid;gap:8px}
.opt-grid.c6{grid-template-columns:repeat(6,1fr)}
.opt-grid.c4{grid-template-columns:repeat(4,1fr)}
.opt-grid.c3{grid-template-columns:repeat(3,1fr)}
.opt-grid.c2{grid-template-columns:repeat(2,1fr)}
.opt{padding:12px 3px;border:1px solid var(--line2);border-radius:6px;background:var(--card);
  font-size:13px;text-align:center;letter-spacing:1px;cursor:pointer;user-select:none;
  transition:transform .14s, border-color .14s, background .14s, color .14s}
.opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}

/* 自定义输入行：选项下方居中，虚线分隔 */
.opt-custom{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2);
  font-size:12px;color:var(--ink2);letter-spacing:1px}
.opt-custom input{width:64px;text-align:center;border:1px solid var(--line2);border-radius:4px;
  background:var(--card);padding:6px 4px;font-size:13px;color:var(--ink);letter-spacing:0}
.opt-custom input:focus{outline:none;border-color:var(--ink)}
.opt-custom input[type=number]{-moz-appearance:textfield}
.opt-custom input::-webkit-outer-spin-button,.opt-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* 底部操作条：左侧已选汇总 + 右侧开始签到 */
.create-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:24px;padding:13px 18px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper2)}
.create-sum{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.create-sum .sum-key{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:1px}
.create-sum .sum-div{color:var(--ink2);display:flex;align-items:center;font-style:normal;font-weight:900}
.create-sum .sum-title{font-size:13px;color:var(--ink2);max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.create-sum .sum-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;letter-spacing:1px;
  color:var(--seal);border:1px solid rgba(188,58,40,.35);background:rgba(188,58,40,.06);
  border-radius:99px;padding:4px 11px;font-variant-numeric:tabular-nums}
.create-sum .sum-tag .ic{flex-shrink:0}
.create-sum .sum-dim{font-size:12.5px;color:var(--ink2);letter-spacing:1px}
.create-bar .btn{flex-shrink:0;padding:12px 30px;font-size:15px;letter-spacing:3px}

/* 响应式：中屏时选项收紧为 3/2 列；窄屏折叠为单列 */
@media (max-width:1120px){
  .opt-grid.c6{grid-template-columns:repeat(3,1fr)}
  .opt-grid.c4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .create-grid{grid-template-columns:1fr}
  .create-bar{flex-direction:column;align-items:stretch}
  .create-bar .btn{width:100%}
  .param-hint{min-height:150px}
}

/* ===== 签到现场 ===== */
.live-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.live-head .tt{font-family:var(--serif);font-weight:900;font-size:23px;letter-spacing:1px}
.live-head .sub{font-size:12.5px;color:var(--ink2)}
.live-body{display:grid;gap:20px;align-items:start}
.live-top{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(0,1.35fr);gap:20px;align-items:stretch}
.live-top .card{display:flex;flex-direction:column;justify-content:center}
.live-side{display:flex;flex-direction:column;gap:16px}
.live-side .card{flex:1}
.receipt-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:8px}
.receipt-grid .btn{justify-self:stretch}
.timer-card{text-align:center;padding:26px 20px}
.timer-wrap{position:relative;width:190px;margin:0 auto}
.timer-wrap svg{width:190px;height:190px;display:block}
.ring-bg{fill:none;stroke:var(--paper2);stroke-width:7}
.ring-fg{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .5s linear,stroke .3s}
.ring-fg.warn{stroke:var(--seal)}
.t-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.t-num b{font-family:var(--serif);font-weight:900;font-size:40px;font-variant-numeric:tabular-nums;letter-spacing:2px}
.t-num.warn b{color:var(--seal)}
.t-num span{font-size:11px;color:var(--ink2);letter-spacing:3px;margin-top:2px}
.timer-card .t-label{margin-top:12px;font-size:12px;color:var(--ink2);letter-spacing:1px}
.qr-card{text-align:center}
.qr-box{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;width:min(250px,100%);max-width:300px;margin:0 auto}
.qr-box svg{width:100%;height:auto;display:block}
.code-line{margin-top:14px;font-size:13px;color:var(--ink2)}
.code-line b{font-family:var(--serif);font-size:26px;letter-spacing:7px;color:var(--seal);margin-left:8px;font-weight:900}
.qr-hint{font-size:11.5px;color:var(--ink2);margin-top:8px;line-height:1.7}
.tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.tool{flex:1;min-width:190px}
.tool label{display:block;font-size:11.5px;color:var(--ink2);letter-spacing:1.5px;margin-bottom:5px}
.tool .in-row{display:flex;gap:8px}
.tool input{width:100%;flex:1}
.q-cand{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--line2);border-radius:5px;z-index:50;box-shadow:4px 4px 0 rgba(38,34,27,.12);overflow:hidden}
.q-cand div{padding:8px 13px;cursor:pointer;display:flex;justify-content:space-between;font-size:13.5px}
.q-cand div:hover{background:var(--paper2)}

/* ===== 名单 ===== */
.roster{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rcol{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:640px}
.rcol-h{padding:12px 16px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
.rcol-h b{font-family:var(--serif);font-size:15px;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.rcol-h .cnt{font-family:var(--serif);font-size:18px;font-weight:900}
.rcol.in .cnt{color:var(--green)}
.rcol.out .cnt{color:var(--seal)}
.rcol ul{list-style:none;overflow-y:auto;flex:1}
.rcol li{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px dashed var(--line);animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(-10px);opacity:0}}
.rcol li .nm{font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcol li .no{font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rcol li .tm{font-size:11.5px;color:var(--green);font-variant-numeric:tabular-nums}
.rcol.out li .nm{color:var(--ink2)}
.m-src{font-size:10.5px;color:var(--ink2);border:1px solid var(--line2);border-radius:3px;padding:0 4px}
.end-stat{display:flex;justify-content:space-around;padding:8px 0 2px}
.end-stat div{text-align:center}
.end-stat .v{font-family:var(--serif);font-weight:900;font-size:30px}
.end-stat .k{font-size:11px;color:var(--ink2);letter-spacing:2px}
.rate-bar{height:5px;background:var(--paper2);border-radius:99px;overflow:hidden;margin-top:14px}
.rate-bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .4s}
.rate-bar.low i{background:var(--seal)}

/* ===== 学生端 ===== */
body.stu-mode{background:var(--paper2)}
.stu-wrap{width:100%;max-width:440px;margin:0 auto;min-height:100vh;padding:24px 18px 40px;display:flex;flex-direction:column;overflow-x:hidden}
.stu-head{text-align:center;margin-bottom:18px}
.stu-head .logo-seal{width:52px;height:52px;font-size:17px;margin:0 auto 12px}
.stu-head h1{font-family:var(--serif);font-size:21px;letter-spacing:3px}
.stu-head .sub{font-size:12.5px;color:var(--ink2);margin-top:4px}
.stu-card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:22px}
.stu-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stu-time{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--paper);border:1px dashed var(--line2);border-radius:6px;margin-bottom:16px}
.stu-time b{font-family:var(--serif);font-size:22px;font-variant-numeric:tabular-nums}
.stu-time b.warn{color:var(--seal)}
.stu-search{position:relative;margin-bottom:14px}
.stu-search input{width:100%;padding-left:36px}
.stu-search .ic{position:absolute;left:11px;top:10px;color:var(--ink2)}
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px;max-height:46vh;overflow-y:auto;padding:2px}
.stu-cell{border:1px solid var(--line2);background:var(--card);border-radius:6px;padding:9px 6px;text-align:center;transition:.12s}
.stu-cell b{display:block;font-size:14.5px}
.stu-cell span{font-size:10.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.stu-cell:hover{border-color:var(--seal);transform:translateY(-1px);box-shadow:2px 2px 0 rgba(188,58,40,.15)}
.stu-cell.done{opacity:.45;pointer-events:none;background:var(--green-bg);border-color:var(--green)}
.stu-cell.done b{color:var(--green)}
.stu-confirm{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--ink);color:var(--paper);padding:16px 20px;
  display:flex;align-items:center;gap:14px;box-shadow:0 -4px 20px rgba(0,0,0,.2);animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(100%)}}
.stu-confirm .who{flex:1}
.stu-confirm .who b{font-family:var(--serif);font-size:17px;display:block}
.stu-confirm .who span{font-size:11.5px;color:#B7AE99;font-variant-numeric:tabular-nums}
.stu-done{text-align:center;padding:16px 0 8px}
.stu-done .name{font-family:var(--serif);font-size:24px;font-weight:900;margin:18px 0 2px;letter-spacing:2px}
.stu-done .tm{color:var(--ink2);font-size:13px;margin-bottom:20px}
.rcpt{background:var(--paper);border:1.5px dashed var(--line2);border-radius:8px;padding:14px;margin-top:6px}
.rcpt .k{font-size:11.5px;color:var(--ink2);letter-spacing:2px}
.rcpt .v{font-family:var(--serif);font-size:38px;font-weight:900;letter-spacing:10px;color:var(--ink);margin:4px 0 8px;font-variant-numeric:tabular-nums}
.rcpt p{font-size:11.5px;color:var(--ink2);line-height:1.7}
.center{text-align:center}

/* ===== 工具类 ===== */
.w-full{width:100%}
.btn.w-full{justify-content:center}
/* 右对齐按钮：推至卡片右侧，右边缘距卡片边框与左对齐时的左侧间距一致（card padding 左右相同） */
.btn-right{display:flex;width:fit-content;margin-left:auto}
.max-w-600{max-width:600px}
.max-w-560{max-width:560px}

/* ===== 页面底部版权信息 ===== */
/* 位于 .main 之外、固定在页面最底部；margin-top 与 main-wrap 的 padding-bottom 对称（各 28px），内部 padding 上下对称 */
.site-foot{margin-top:28px;padding:24px 40px 24px;border-top:1px solid var(--line2);text-align:center;font-size:12px;color:var(--ink2);letter-spacing:1px;line-height:1.7}
/* 学生端保持原有行为：仍吸附在 .stu-wrap 底部 */
.stu-mode .site-foot{margin-top:auto;padding:24px 0 4px}
.mb-22{margin-bottom:22px}
.mb-20{margin-bottom:20px}
.mb-16{margin-bottom:16px}
.mb-14{margin-bottom:14px}
.mb-12{margin-bottom:12px}
.mt-12{margin-top:12px}
.mt-10{margin-top:10px}
.mt-6{margin-top:6px}
.pos-rel{position:relative}
.flex-1{flex:1}
.gap-8{gap:8px}
.gap-12{gap:12px}
.gap-10{gap:10px}
.gap-4{gap:4px}
.p-30-10{padding:30px 10px}
.p-60-20{padding:60px 20px}

/* ===== 筛选器 ===== */
.filt{display:flex;gap:12px;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap}
.filt .tool{min-width:170px;flex:none}
.rate-cell{display:flex;align-items:center;gap:8px}
.rate-cell .bar{width:80px;height:6px;background:var(--paper2);border-radius:99px;overflow:hidden;flex-shrink:0}
.rate-cell .bar i{display:block;height:100%;background:var(--green)}
.rate-cell .bar.low i{background:var(--seal)}

/* ===== 欢迎页 ===== */
.welcome{max-width:560px;margin:8vh auto;text-align:center}
.welcome .logo-seal{width:84px;height:84px;font-size:26px;margin:0 auto 22px;border-radius:10px;transform:rotate(-4deg)}
.welcome h1{font-family:var(--serif);font-size:32px;letter-spacing:4px;margin-bottom:10px}
.welcome p{color:var(--ink2);margin-bottom:30px;line-height:1.9}
.welcome .ops{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.welcome .feat{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.welcome .feat span{font-size:12px;color:var(--ink2);border:1px solid var(--line2);border-radius:99px;padding:4px 14px;letter-spacing:1px}

/* ===== 设置与备份页 ===== */
/* 学生签到入口与数据备份并排 */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}

/* ===== 示例数据提示 ===== */
.demo-bar{background:#FBF3E4;border:1px solid #E3C98F;border-left:4px solid #C9932B;border-radius:6px;padding:12px 16px;margin-bottom:22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#7A5E1E}

/* ===== 翻页器 ===== */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:14px 0 4px}
.pager .pg{min-width:30px;height:30px;padding:0 9px;border:1px solid var(--line2);background:var(--card);
  border-radius:4px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:.12s;font-family:inherit;cursor:pointer}
.pager .pg:hover{border-color:var(--ink)}
.pager .pg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .pg:disabled{opacity:.4;pointer-events:none}
.pager .pg-dots{color:var(--ink2);padding:0 2px}
.pager .pg-info{font-size:12px;color:var(--ink2);margin-left:8px;letter-spacing:1px}
.rcol .pager{padding:8px 4px}
.stu-card .pager{padding:10px 0 0}

/* ===== 课堂抽人 ===== */
/* 一二三四步骤 2x2 网格 */
.pick-steps{display:grid;grid-template-columns:1fr 1fr;column-gap:34px;align-items:start}
.cand-wrap{display:flex;flex-wrap:wrap;gap:8px}
.cand-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1.5px solid var(--line2);border-radius:99px;background:var(--card);cursor:pointer;font-size:13.5px;transition:.12s;user-select:none}
.cand-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.cand-chip .cc-cnt{font-size:11px;color:var(--ink2);border:1px solid var(--line2);border-radius:99px;padding:0 7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cand-chip.off{opacity:.5;background:var(--paper2);text-decoration:line-through}
.cand-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cand-chip.on .cc-cnt{color:var(--paper);border-color:rgba(246,241,231,.45)}
.roll-mask{position:fixed;inset:0;background:rgba(30,26,20,.74);z-index:1500;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.roll-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:8px 8px 0 rgba(38,34,27,.28);padding:36px 44px;text-align:center;max-width:92vw}
.roll-title{font-family:var(--serif);font-size:21px;letter-spacing:4px;font-weight:900}
.roll-sub{font-size:12px;color:var(--ink2);margin:6px 0 24px;letter-spacing:1px}
.roll-slots{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.roll-slot{min-width:118px;padding:20px 16px;border:2px dashed var(--line2);border-radius:10px;background:var(--paper)}
.roll-slot b{display:block;font-family:var(--serif);font-size:26px;letter-spacing:2px;color:var(--ink2);white-space:nowrap}
.roll-slot.settle{border:3px solid var(--seal);background:#FBEDE9;animation:stampIn .45s cubic-bezier(.25,1.5,.35,1)}
.roll-slot.settle b{color:var(--seal)}
.roll-tip{margin-top:22px;font-size:11.5px;color:var(--ink2);letter-spacing:1px}
@keyframes stampIn{from{transform:scale(2.1);opacity:0}}
.stu-duty{display:flex;align-items:center;gap:12px;background:#FBEDE9;border:1.5px solid var(--seal);border-radius:10px;padding:13px 16px;margin-bottom:14px;animation:pop .3s}
.stu-duty b{font-family:var(--serif);font-size:15px;color:var(--seal-d);letter-spacing:1px}

/* ===== 响应式 ===== */
@media(max-width:1200px){
  .main{padding:28px 28px 0}
  .site-foot{padding:22px 28px 22px}
  .live-top{grid-template-columns:230px minmax(0,1fr) minmax(0,1.25fr)}
}
@media(max-width:960px){
  .layout{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;flex-wrap:wrap}
  .side-logo{border:none;padding:14px 16px}
  .nav{display:flex;padding:0;flex:1}
  .nav-i{border-left:none;border-bottom:3px solid transparent;padding:14px 14px}
  .nav-i.on{border-bottom-color:var(--seal)}
  .side-foot{display:none}
  .main{padding:22px 16px 0}
  .site-foot{padding:18px 16px 18px}
  .live-body{grid-template-columns:1fr}
  .live-top{grid-template-columns:1fr 1fr}
  .live-side{grid-column:1/-1}
  .roster{grid-template-columns:1fr}
  .mg{grid-template-columns:1fr}
  .pick-steps{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .stat-grid{gap:10px}
  .stat{min-width:120px;padding:12px 14px}
  .stat .v{font-size:28px}
  .h-page{font-size:22px}
  .tools{flex-direction:column}
  .tool{min-width:unset}
  .cls-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .live-head .tt{font-size:19px}
  .live-top{grid-template-columns:1fr}
  .live-side{grid-column:auto}
  .receipt-grid{grid-template-columns:1fr}
}

/* ===== 学生端窄屏适配 ===== */
.stu-card{min-width:0}
.stu-grid{min-width:0}
.stu-search input{width:100%;min-width:0}
.rcpt{max-width:100%}
.rcpt .v{font-size:clamp(26px,9vw,38px);letter-spacing:clamp(4px,2vw,10px);overflow:hidden;text-overflow:ellipsis}
.stu-meta{max-width:100%}
.stu-meta .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:360px){
  .stu-head h1{font-size:18px}
  .rcpt .v{font-size:24px;letter-spacing:4px}
  .stu-cell{min-width:0}
  .stu-cell span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}