/* ============================================================
   晚点名系统 · 共用样式（纯黑白 · 无框 · 唯一例外：未提交的正红）
   ------------------------------------------------------------
   用户 2026-10-06 定稿的风格：
     · **只有黑 #000 和白 #fff** —— 页底纯白，方块纯黑
     · **一个框都不要** —— 全站没有一处描边（border）：
         · 输入框 → 只剩**一条底线**（不是框，是「这里能填」的唯一提示）
         · 次按钮 / 小按钮 → **无底无框**，就是加粗黑字
         · 徽标 → 无框（要么纯文字，要么实心黑方块）
         · 卡片 / 凹槽 / 灰底块 → 早就全取消
     · **圆角改方一点** —— 有背景的方块才带 --r:6px；没有框的元素谈不上圆角
     · **方块 = 纯黑** —— 主按钮、统计块、选中态、页签滑块 = 实心纯黑反白
     · **页头分左右两栏** —— 左：寝室号 + 请在 21:30 之前填报；右：系统名 + 日期 + 未提交/已提交
   ------------------------------------------------------------
   ⚠️ 五条铁律（动手前先看）：
     1. **只有黑和白** —— 连「中间灰」也不许；字色只有「纯黑」和「纯黑的半透明」。
        ★ 唯一例外 = `--danger` 那一支正红（#d40000），只代表一件事：
          **还有寝室没交（未提交）**。全站别处仍然不许出现任何彩色。
     2. **全站不许出现 `border` 描边** —— 唯一允许的线是「分隔线」和「输入框底线」。
        也不许 box-shadow / gradient / backdrop-filter。
     3. **圆角只允许 var(--r) 一个值** —— 且只用在**有实心底色**的元素上
        （用户点名要求过「所有圆角必须一样」，连姓名 chip 的胶囊圆角都被驳回过）。
     4. **能不加框就不加框**；实在要标识「可填 / 可点」，
        只允许用「一条底线」或「实心黑底色」这两种手段。
     5. **别把减法做成加法** —— 他一路做减法（去灰、去框、去修饰）；
        他问「可以吗？」＝他已经想好了，直接照做，不要反过来提议别的方案。
   全套色板在下面的 :root，改颜色只动这一处。
   ============================================================ */
:root{
  --r:6px;                               /* ★ 全局唯一圆角（只给有底色的方块用） */

  /* ========== 唯一色板：只有黑、白，和黑的两个透明度 ========== */
  --bg:#ffffff;                          /* 页底：纯白 */
  --card:#ffffff;                        /* 卡片面：也是纯白（卡片已经不是一个"框"了） */
  --ink:#000000;                         /* ★ 纯黑：方块底 / 主操作 / 要盯的 */
  --txt:#000000;                         /* 正文：纯黑 */
  --sub:rgba(0,0,0,.55);                 /* 次要文字 = 纯黑的淡版（不是另一个灰色） */
  --dim:rgba(0,0,0,.34);                 /* 最弱的文字 / placeholder */
  --line:rgba(0,0,0,.14);                /* 细分隔线（表格行、列表项） */
  --under:rgba(0,0,0,.35);               /* 输入框底线（未聚焦） */
  --hover:rgba(0,0,0,.05);               /* 悬停铺底 */

  /* ========== 唯一的一处例外色：警示正红 ==========
     用户 2026-10-06 明确开口要的红色（此前是"全站只有黑白"）：
       「把未提交的那些提示，在我管理后台给我改成正红色」
       「今晚还没提交点名也弄成红色，他提交之后改成黑色」
     ★ 用法只有一条规则：**红 = 还有寝室没交 / 这条是"没交"的提示；一切正常就回纯黑。**
     除了下面这一处红，页面上其它任何东西仍然只有黑和白。 */
  --danger:#d40000;                      /* ★ 警示正红（未提交专用） */
  --danger-soft:rgba(212,0,0,.05);       /* 正红的极淡铺底（备用） */

  /* ========== 兼容别名 ==========
     后台页（admin.html）内联样式、以及历史遗留写法还在引用下面这些变量名。
     这里全部指回黑/白，保证「没有一个名字悬空」。 */
  --edge:rgba(0,0,0,.35);    /* 旧名：控件描边（现在只当输入框底线用） */
  --ink-hover:#000000;       --ink-soft:#ffffff;      --ink-soft-2:var(--hover);
  --ink-mid:#ffffff;
  --field:#ffffff;           --field-line:var(--under);
  --field-hover:#ffffff;     --field-active:#ffffff;
  --accent:#ffffff;          --accent-rgb:255,255,255;
  --accent-soft:#ffffff;     --accent-line:var(--under);
  --accent-ink:#000000;      --accent-glow:rgba(0,0,0,.10);
  --focus-ring:none;
  --brand:#ffffff;           --brand2:#ffffff;
  --brand-rgb:255,255,255;   --brand2-rgb:255,255,255;
  --ok:#000000;     --ok-tint:#ffffff;     --ok-ink:#000000;
  --warn:#000000;   --warn-tint:#ffffff;   --warn-ink:#000000;
  /* ⚠️ 上面这条色板里的 --danger 就是警示正红，兼容别名这里 **不要再写一次 --danger**，
     否则会把它盖回黑色。下面两个名字只是留给历史写法，值都指回那一个红。 */
  --danger-tint:var(--danger-soft); --danger-ink:#ffffff;
  --life:#000000;
  --jelly-top:#ffffff; --jelly-bot:#ffffff; --jelly-line:var(--line);
  --jelly-inner:none;  --jelly-out:none;    --jelly-spring:ease;
  --glass:#ffffff; --glass2:#ffffff; --glass-line:var(--line);
  --blur:none; --blur-sm:none;
  --shadow:none; --shadow-sm:none; --shadow-lg:none;
  --tint-rgb:255,255,255; --accent2-rgb:255,255,255;
  --ink-deep:#000000;                    /* 提示气泡底 */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
html,body{margin:0;padding:0}

/* ---------- 铺底：一层纯白，没有任何光晕 ---------- */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  background-color:var(--bg);
}
body{
  background:transparent;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",Roboto,sans-serif;
  line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:26px 16px 64px}
.hidden{display:none !important}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums}

/* ---------- 页头：纯文字 + 一条 1px 黑线 ---------- */
.hd{padding:0 0 16px;margin-bottom:28px;border-bottom:1px solid var(--ink)}
.hd h1{margin:0 0 5px;font-size:20px;font-weight:700;letter-spacing:-.2px;color:var(--txt)}
.hd p{margin:0;font-size:13px;color:var(--sub);line-height:1.7}
.hd p:empty{display:none}

/* 品牌名：**字体必须和页面其它字一模一样** ——
   之前为了当「眉标」加了 letter-spacing:.14em，中文被拉散，看着像另一种字体（用户提了）。
   现在：不吃字距、不做等宽、字重与标题对齐，只是小一号。 */
.hd .brand{font-size:13px;font-weight:700;letter-spacing:0;
  color:var(--txt);margin:0 0 6px;line-height:1.45}

/* 日期 / 状态：取消灰底胶囊，就是两段字 */
.hd .kv{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.hd .kv span{font-size:12.5px;color:var(--txt);font-weight:600;
  padding:0;background:none;border:none;border-radius:0}
/* ★ 状态色：未提交 = 正红；已提交 = 纯黑；当天没记录 = 淡黑 */
.hd .kv span.st-no{color:var(--danger);font-weight:700}
.hd .kv span.st-ok{color:var(--txt);font-weight:600}
.hd .kv span.st-dim{color:var(--dim);font-weight:600}

/* ---------- 页头 · 左右两栏（只给填报页用：.hd.split）----------
   用户 2026-10-06 点名要的构局：
     左栏（寝室视角）：「寝室号」+「请在 21:30 之前填报」
     右栏（系统视角）：「材控2班晚点名系统」+「10月6日 星期二」+「未提交 / 已提交」
   —— 未提交那几个字标红，提交之后自动回黑。
   注意：写成 .hd.split，是为了**不动后台页**（后台页头是单列，没有 .split）。 */
.hd.split{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.hd.split .hd-l{flex:1 1 auto;min-width:0}
.hd.split .hd-r{flex:0 0 auto;text-align:right;padding-top:1px}
.hd.split .kv{margin-top:0;justify-content:flex-end}
/* 极窄屏（<360px）：两栏挤不下才堆叠，右栏整块换行 */
@media (max-width:359px){
  .hd.split{flex-wrap:wrap;gap:12px}
  .hd.split .hd-r{flex:1 1 100%;text-align:left}
  .hd.split .kv{justify-content:flex-start}
}

/* ---------- 卡片：**不是一个框** ----------
   取消掉一切：无底色、无边框、无圆角、无投影、无留白框。
   分区只靠「一块黑标题 + 34px 空档」来实现。 */
.card{background:transparent;border:none;border-radius:0;
  padding:0;margin-bottom:34px;box-shadow:none}
.card > h2{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--txt);
  display:flex;align-items:center;gap:8px}
/* 老版留的序号小圆片：一并去修饰 */
.card > h2 i{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:auto;height:auto;border-radius:0;background:none;border:none;box-shadow:none;
  color:var(--txt);font-size:inherit;font-style:normal;font-weight:700;padding:0}
.card > h2 i:empty{display:none}
.hint{margin:0 0 10px;font-size:12.5px;color:var(--sub);line-height:1.7}
.sect-t{font-size:15px;font-weight:700;margin:0 0 12px}
.sect-t em{font-style:normal;font-size:12px;font-weight:500;color:var(--sub);margin-left:6px}

/* ---------- 表单 ---------- */
.f{display:block;margin-bottom:16px}
.f > span{display:block;font-size:13px;color:var(--txt);font-weight:600;margin-bottom:6px}
.f > span em{font-style:normal;color:var(--ink);font-weight:700;margin-left:2px}
/* 输入框：**没有框** —— 只留一条底线（这是"这里能填"的唯一提示）
   ⚠️ 这条底线不要删：删了就完全看不出输入区在哪，页面会"消失"。 */
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--txt);background:transparent;
  border:none;border-bottom:1px solid var(--under);border-radius:0;
  padding:10px 2px;outline:none;
  transition:border-color .15s}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,
input[type=date]:hover,select:hover,textarea:hover{border-bottom-color:rgba(0,0,0,.6)}
/* 聚焦：底线变纯黑（唯一的反馈，不加光圈、不加影子） */
input:focus,select:focus,textarea:focus{border-bottom-color:var(--ink)}
textarea{min-height:80px;resize:vertical;font-size:15px;line-height:1.7}
input[type=number]{font-variant-numeric:tabular-nums}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}

/* ---------- 按钮 ---------- */
/* 次按钮：**无底无框**，就是一行加粗黑字（点击面积靠 padding 撑住） */
.btn{font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  background:none;border:none;border-radius:0;
  color:var(--ink);padding:12px 18px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:opacity .15s}
.btn:hover{opacity:.55}
.btn:active{opacity:.4}
/* 主按钮：**实心纯黑方块**（页面上唯一"重"的东西，也是唯一的圆角来源） */
.btn.pri{background:var(--ink);color:#ffffff;font-weight:700;border-radius:var(--r)}
.btn.pri:hover{opacity:.86}
.btn.pri:active{opacity:.75}
.btn.ghost{background:none;color:var(--ink)}
.btn.danger{background:none;color:var(--ink)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-row .btn{width:auto;flex:1;min-width:110px}

/* 小按钮：同一套，只是小一号 */
.mini{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  background:none;border:none;border-radius:0;
  color:var(--ink);padding:6px 10px;white-space:nowrap;
  transition:opacity .15s}
.mini:hover{opacity:.55}
.mini:active{opacity:.4}
.mini.pri{background:var(--ink);color:#ffffff;font-weight:700;border-radius:var(--r);
  padding:6px 12px}
.mini.pri:hover{opacity:.86}
.mini.danger{background:none;color:var(--ink)}
.toolrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}

/* ---------- 状态徽标 ----------
   只有两种形态：① 纯黑文字（没有框）② 实心黑方块反白（要盯的） */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:0;border-radius:0;white-space:nowrap;
  background:none;border:none;color:var(--sub)}
.pill.ok{color:var(--txt)}
.pill.warn{color:var(--txt);font-weight:700}
/* 实心黑方块：用于「N 人 / 已停用 / 全部知情」这类计数徽标 */
.pill.no{background:var(--ink);color:#ffffff;padding:3px 8px;
  border-radius:var(--r);font-weight:700}
/* ★ 正红方块：**只给「未提交」用**（用户要求未提交标红）。
   注意别拿它当通用警示色使 —— 全站的红只代表一件事：还有寝室没交。 */
.pill.miss{background:var(--danger);color:#ffffff;padding:3px 8px;
  border-radius:var(--r);font-weight:700}
.pill.gray{color:var(--dim)}
.pill.brand{background:var(--ink);color:#ffffff;padding:3px 8px;
  border-radius:var(--r);font-weight:700}

/* ---------- 统计块：**方块 = 纯黑** ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:26px}
.stat{background:var(--ink);border:none;border-radius:var(--r);
  padding:14px 10px;text-align:center;box-shadow:none}
.stat b{display:block;font-size:22px;font-weight:700;line-height:1.25;
  font-variant-numeric:tabular-nums;color:#ffffff}
.stat span{display:block;font-size:11.5px;color:rgba(255,255,255,.75);margin-top:3px}
/* 全是黑方块；只有「有情况要处理」的那一格变正红（用户要求的警示红）。
   已交满 / 无未到 / 无不知情 → 黑；反之 → 红。由 admin.js 决定挂哪个 class。 */
.stat.ok,.stat.warn{background:var(--ink)}
.stat.err{background:var(--danger)}
.stat.err b,.stat.warn b,.stat.ok b{color:#ffffff}
.stat.err span,.stat.warn span,.stat.ok span{color:rgba(255,255,255,.75)}

/* ---------- 表格 ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:none;background:transparent}
table.tbl{width:100%;border-collapse:collapse;font-size:13.2px;min-width:520px}
table.tbl th,table.tbl td{padding:10px 10px;text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
/* 表头：一条纯黑底线，没有任何底色 */
table.tbl th{color:var(--txt);font-weight:700;font-size:12px;position:sticky;top:0;z-index:1;
  background:#ffffff;border-bottom:1px solid var(--ink)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.wrapcell{white-space:normal;min-width:150px;font-size:12.6px;color:var(--sub)}

/* ---------- 未到人员明细：**取消方框**，只留一条细分隔线 ---------- */
.absent-list{margin-top:4px}
.absent-item{background:transparent;border:none;border-top:1px solid var(--line);
  border-radius:0;padding:14px 0 2px;margin-bottom:0;box-shadow:none}
.absent-item:first-child{border-top:none;padding-top:2px}
.absent-item .ai-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* 序号：小黑方块 */
.absent-item .ai-no{flex:none;width:20px;height:20px;border-radius:var(--r);
  background:var(--ink);border:none;box-shadow:none;
  color:#ffffff;font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.absent-item .ai-hd .mini{margin-left:auto}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt);
  cursor:pointer;user-select:none;padding:6px 0}
.chk input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer;flex:none}
.chk.warnline{color:var(--txt);font-weight:600}

/* ---------- 空状态 / 提示条：**取消方框**，只留一条竖线 ----------
   竖线颜色按语义走：要盯的（未提交 / 填错 / 异常）= 正红；正常的 = 纯黑；中性说明 = 淡黑。 */
.empty{color:var(--sub);font-size:13px;text-align:center;padding:22px 10px}
.tip{background:transparent;border:none;border-left:3px solid var(--ink);
  border-radius:0;padding:2px 0 2px 12px;
  font-size:12.8px;line-height:1.7;margin-bottom:24px;color:var(--txt)}
/* ★ 正红：只有「未提交 / 填错了」用红 —— 用户明确要求的那两处 */
.tip.err{color:var(--danger);border-left-color:var(--danger);font-weight:600}
.tip.warn{color:var(--danger);border-left-color:var(--danger);font-weight:600}
/* 纯黑：正常 / 中性（已提交、全员到齐、差 N 人未到）—— 「他提交之后改成黑色」 */
.tip.ok{color:var(--txt);border-left-color:var(--ink);font-weight:400}
/* 差 N 人未到：只是个中间状态，不是"未提交"，所以保持纯黑（别染红） */
.tip.gap{color:var(--txt);border-left-color:var(--ink);font-weight:600}
/* 中性说明：淡黑，不抢眼 */
.tip.info{color:var(--sub);border-left-color:var(--dim);border-left-width:2px}
.tip b{font-weight:700}

/* ---------- 列表 ---------- */
.list-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.list-item .li-main{flex:1;min-width:0}
.list-item .li-t{font-size:13.6px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.list-item .li-s{font-size:12px;color:var(--sub);margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.list-item .li-act{display:flex;gap:6px;flex:none}

/* ---------- 成员名快捷点选 ----------
   未选中 = 淡黑文字（没有框）；选中 = 实心黑方块反白 */
.mem-chips{display:flex;flex-wrap:wrap;gap:14px;margin:-2px 0 12px}
.mem-chips:empty{display:none}
.chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  background:none;border:none;border-radius:0;
  color:var(--sub);padding:2px 0;
  transition:opacity .15s,color .15s;
  -webkit-tap-highlight-color:transparent}
.chip:hover{opacity:.6}
.chip:active{opacity:.4}
.chip.on{background:var(--ink);color:#ffffff;font-weight:700;
  border-radius:var(--r);padding:3px 10px}
.chip.on:hover{opacity:.86}

/* ---------- 登录页 ---------- */
.login-wrap{max-width:380px;margin:0 auto;padding:11vh 20px 48px}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo h1{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.3px;color:var(--txt)}
.login-logo p{margin:0;font-size:13px;color:var(--sub);line-height:1.7}

/* ---------- 提示气泡 ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);
  background:var(--ink-deep);color:#ffffff;font-size:13.5px;font-weight:700;padding:12px 20px;
  border-radius:var(--r);border:none;opacity:0;pointer-events:none;
  transition:.25s;z-index:99;max-width:88vw;text-align:center;line-height:1.6}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--ink-deep);color:#ffffff}
#toast.ok{background:var(--ink-deep);color:#ffffff}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:16px}
.topbar .tb-name{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- 小屏适配 ---------- */
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .row3{grid-template-columns:1fr 1fr}
  .stat b{font-size:20px}
  .wrap{padding:22px 14px 56px}
}
@media (max-width:380px){
  .row2{grid-template-columns:1fr}
}