:root{
  --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --ink:#1d2430; --meta:#6b7480;
  --accent:#2d7ff9; --warn:#b7791f; --warnbg:#fff8e6;
  --block:#c0392b; --blockbg:#fdecea; --ok:#1e8e5a;
  --radius:10px;
}
*{box-sizing:border-box}
/* HTML 的 hidden 属性只等价于 display:none，任何显式 display 都会盖掉它。
   .loginwrap 的 display:grid 就这么让「已隐藏」的登录框继续挡在排班表上面。
   全局钉死一次，省得每加一个 display 就踩一遍。 */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 Archivo,-apple-system,'Segoe UI',system-ui,sans-serif;
}
.main{max-width:1500px;margin:0 auto;padding:18px 16px 60px}
h1{font-size:22px;margin:0}
.meta{color:var(--meta);font-size:13px}
.spacer{flex:1}

button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:var(--card);padding:7px 13px}
button:hover{border-color:#c8ccd2}
.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.primary:hover{filter:brightness(.94)}
.ghost{background:transparent}
.danger{background:var(--blockbg);color:var(--block);border-color:#f3c9c4}

/* ---------- 登录 ---------- */
.loginwrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:28px;width:min(360px,100%);box-shadow:0 2px 14px rgba(0,0,0,.05)}
.loginbox h1{margin-bottom:2px}
.loginbox .sub{color:var(--meta);margin:0 0 20px;font-size:14px}
.loginbox label{display:block;margin-bottom:14px;font-size:13px;color:var(--meta)}
.loginbox input{display:block;width:100%;margin-top:5px;padding:9px 11px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
.loginbox button{width:100%;background:var(--accent);color:#fff;border-color:var(--accent);
  padding:10px}
.err{margin-top:12px;color:var(--block);background:var(--blockbg);
  border:1px solid #f3c9c4;border-radius:8px;padding:8px 10px;font-size:13px}

/* ---------- 顶栏 ---------- */
.topline{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--meta);font-size:13px}

.weekbar{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
.weeklabel{display:flex;flex-direction:column;line-height:1.25;min-width:190px}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;background:#eef1f4;color:var(--meta)}
.pill.on{background:#e6f6ee;color:var(--ok)}

/* ---------- 告警 ---------- */
.alerts{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.alert{border-radius:8px;padding:9px 12px;font-size:13.5px;border:1px solid}
.alert.warn{background:var(--warnbg);border-color:#f0dcae;color:var(--warn)}
.alert.block{background:var(--blockbg);border-color:#f3c9c4;color:var(--block)}
.alert b{font-weight:600}

/* ---------- 排班表 ---------- */
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius)}
.roster{border-collapse:collapse;width:100%;min-width:1000px;font-size:13.5px}
.roster th,.roster td{border:1px solid var(--line);padding:6px 8px;vertical-align:top}
.roster thead th{background:#fafbfc;position:sticky;top:0;z-index:2;text-align:left;
  font-weight:600;white-space:nowrap}
.roster thead th .dsum{display:block;font-weight:400;color:var(--meta);font-size:12px;margin-top:2px}
.roster th.slotcol{width:190px;min-width:190px;background:#fafbfc;position:sticky;left:0;z-index:1;
  font-weight:500;text-align:left}
.roster tr.depline td{background:#f2f4f7;font-weight:600;padding:7px 10px}
.roster td.closed{background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 6px,#f2f4f7 6px,#f2f4f7 12px)}
.cell{min-height:30px;cursor:pointer;border-radius:6px;padding:2px}
.cell:hover{background:#f0f6ff;outline:1px dashed #b9d4fb}
.chip{background:#eef4ff;border:1px solid #d3e3fd;border-radius:6px;padding:4px 6px;
  margin-bottom:3px;line-height:1.3}
.chip .nm{font-weight:600;display:block}
.chip .tm{color:var(--meta);font-size:12px}
.chip.open{background:#fff4f4;border-color:#f6d2d2}
.chip.flag{border-color:#e6b800;box-shadow:inset 2px 0 0 #e6b800}
.chip .age{font-size:11px;color:var(--meta);margin-left:4px}

/* ---------- 底部汇总 ---------- */
.summary{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;min-width:150px}
.card .k{color:var(--meta);font-size:12px}
.card .v{font-size:19px;font-weight:600;margin-top:2px}
.card.risk{border-color:#f0dcae;background:var(--warnbg)}
.card.risk .v{color:var(--warn)}

/* ---------- 弹窗 ---------- */
dialog{border:none;border-radius:14px;padding:0;max-width:440px;width:calc(100% - 32px);
  box-shadow:0 10px 40px rgba(0,0,0,.18)}
dialog::backdrop{background:rgba(20,26,34,.35)}
#entryform{padding:20px}
#entryform h3{margin:0 0 4px}
.dlg-meta{color:var(--meta);font-size:13px;margin-bottom:16px}
#entryform label{display:block;margin-bottom:12px;font-size:13px;color:var(--meta)}
#entryform input,#entryform select{display:block;width:100%;margin-top:5px;padding:8px 10px;
  font:inherit;border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
#entryform .row{display:flex;gap:10px}
#entryform .row label{flex:1}
.warnbox{border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:12px;
  background:var(--warnbg);border:1px solid #f0dcae;color:var(--warn)}
.warnbox div+div{margin-top:5px}
#entryform menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:4px 0 0}

@media (max-width:640px){
  .main{padding:12px 10px 40px}
  .weekbar{flex-wrap:wrap}
  .weeklabel{min-width:auto}
}

/* ---------- 页签 / 分段切换 ---------- */
.tabs,.segs{display:flex;gap:4px}
.tabs button,.segs button{background:transparent;border:1px solid transparent;
  padding:7px 14px;border-radius:8px;color:var(--meta)}
.tabs button[aria-current],.segs button[aria-current]{
  background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}
.tabs button{font-size:15px;white-space:nowrap}
.segs button{font-size:13.5px;padding:6px 12px}

.sechead{font-size:14px;color:var(--meta);font-weight:600;margin:20px 0 8px}

/* ---------- 通用列表表格 ---------- */
.list{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
.list th,.list td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
.list thead th{background:#fafbfc;position:sticky;top:0;z-index:1;font-weight:600;
  white-space:nowrap;color:var(--meta)}
.list tbody tr{cursor:pointer}
.list tbody tr:hover{background:#f0f6ff}
/* 表头也要跟着数字右对齐，否则看着像串列了 */
.list th.num,.list td.num{text-align:right;font-variant-numeric:tabular-nums}
/* 标签全局可用：员工端的卡片不在 .list 表格里，原先限定在 .list 下就套不上样式 */
.tag{font-size:11.5px;padding:2px 7px;border-radius:999px;background:#eef1f4;color:var(--meta);
  white-space:nowrap}
.tag.vast{background:#e8f0fe;color:#1a56b5}
.tag.minor{background:#fff6e0;color:var(--warn)}
.tag.review{background:var(--warnbg);color:var(--warn);border:1px solid #f0dcae}
.tag.ok{background:#e6f6ee;color:var(--ok)}
.tag.no{background:var(--blockbg);color:var(--block)}
.list .empty{color:var(--meta);padding:22px 10px;text-align:center}

/* ---------- 弹窗补充 ---------- */
#empform,#hourform{padding:20px;max-height:82vh;overflow:auto}
#empdlg{max-width:620px}
#hourdlg{max-width:520px}
#empform label,#hourform label{display:block;margin-bottom:12px;font-size:13px;color:var(--meta)}
#empform input,#empform select,#hourform input,#hourform select{
  display:block;width:100%;margin-top:5px;padding:8px 10px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
#empform .row,#hourform .row{display:flex;gap:10px}
#empform .row label,#hourform .row label{flex:1}
#empform menu,#hourform menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:8px 0 0}
#empform details{margin:6px 0 14px;border:1px solid var(--line);border-radius:8px;
  background:#fbfcfd}
#empform summary{cursor:pointer;padding:10px 12px;font-size:13px;color:var(--meta)}
.sensbox{padding:0 12px 4px;border-top:1px solid var(--line)}
.chk{display:flex!important;align-items:center;gap:8px;margin-top:4px}
.chk input{width:auto!important;margin:0!important}
.hintbox{background:#eef4ff;border:1px solid #d3e3fd;border-radius:8px;
  padding:8px 11px;font-size:13px;margin-bottom:12px;color:#1a56b5}
.hintbox.warn{background:var(--warnbg);border-color:#f0dcae;color:var(--warn)}

/* ---------- 小费页 ---------- */
.inl{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--meta)}
.inl input,.inl select{font:inherit;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfd;width:auto}
.inl input[type=number]{width:110px}
.tp-settings{flex-wrap:wrap}
.list.tp tbody tr{cursor:default}
.list.tp tbody tr.off td{color:#aab0b8}
.list.tp input[type=number]{width:90px;font:inherit;padding:4px 6px;text-align:right;
  border:1px solid var(--line);border-radius:6px;background:#fbfcfd}
.list.tp input[type=number]:not(:placeholder-shown){border-color:#e6b800;background:#fffbea}
.list.tp tfoot td{font-weight:600;background:#fafbfc;border-top:2px solid var(--line)}
.card.good .v{color:var(--ok)}

/* ---------- 设置页 ---------- */
.setcard{max-width:720px;padding:18px 20px}
.setcard h3{margin:0 0 6px;font-size:16px}
.blk{display:block;margin:12px 0 8px;font-size:13px;color:var(--meta)}
.blk input,.blk textarea{display:block;width:100%;margin-top:5px;padding:8px 10px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
.row3{display:flex;gap:10px;flex-wrap:wrap}
.row3 .blk{flex:1;min-width:150px}

/* ---------- 打卡台（全屏，店里那台设备）---------- */
.kiosk{min-height:100dvh;padding:18px 20px 70px;background:#f2f4f7}
.k-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.k-shop{font-size:22px;font-weight:700}
.k-date{color:var(--meta);font-size:15px}
.k-clock{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.k-hint{color:var(--meta);margin:14px 0 10px;font-size:15px}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.k-emp{text-align:left;padding:16px 16px 14px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);min-height:104px;display:flex;flex-direction:column;gap:4px}
.k-emp .n{font-size:20px;font-weight:700;line-height:1.2}
.k-emp .s{font-size:13.5px;color:var(--meta)}
.k-emp .st{font-size:14px;font-weight:600;margin-top:auto}
.k-emp.working{border-color:#8fd3ae;background:#effaf4}
.k-emp.working .st{color:var(--ok)}
.k-emp.break{border-color:#f0dcae;background:var(--warnbg)}
.k-emp.break .st{color:var(--warn)}
.k-emp:active{transform:scale(.98)}
.k-others-btn{margin:20px 0 10px;background:transparent;color:var(--meta)}
.k-others .k-emp{min-height:70px}
.k-others .k-emp .n{font-size:17px}
.k-exit{position:fixed;right:14px;bottom:12px;font-size:12px;color:var(--meta);
  background:transparent;border-color:transparent}
.k-toast{position:fixed;left:50%;top:26%;transform:translateX(-50%);z-index:50;
  background:#1e8e5a;color:#fff;font-size:26px;font-weight:700;padding:22px 30px;
  border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;max-width:90vw}
.k-toast.err{background:var(--block)}
.kdlg{max-width:440px;padding:26px 22px;text-align:center}
.kd-name{font-size:28px;font-weight:700}
.kd-state{margin:4px 0 18px;font-size:15px}
.kd-btns{display:flex;flex-direction:column;gap:12px}
.kd-btns button{font-size:21px;font-weight:700;padding:18px;border-radius:12px}
.kd-btns .in{background:var(--ok);border-color:var(--ok);color:#fff}
.kd-btns .out{background:var(--block);border-color:var(--block);color:#fff}
.kd-btns .brk{background:var(--warnbg);border-color:#f0dcae;color:var(--warn)}
.kd-cancel{margin-top:16px;width:100%;padding:12px}
.kexit{padding:20px}
.kexit h3{margin:0 0 4px}
.kexit label{display:block;margin:12px 0;font-size:13px;color:var(--meta)}
.kexit input{display:block;width:100%;margin-top:5px;padding:8px 10px;font:inherit;
  border:1px solid var(--line);border-radius:8px}
.kexit menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:8px 0 0}

/* ---------- 员工端：班表 / 工时列表 ---------- */
.dayblock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:10px}
.dayblock h4{margin:0 0 6px;font-size:14px}
.dayblock.closed{opacity:.55}
.dayrow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-top:1px solid #f0f2f5;font-size:14px}
.dayrow:first-of-type{border-top:none}
.dayrow.mine{font-weight:600;color:var(--accent)}
.dayrow .r{color:var(--meta);white-space:nowrap}
.dayrow.mine .r{color:var(--accent)}
.hrow{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.hrow .main{flex:1}
.hrow .flag{font-size:12.5px;color:var(--warn);margin-top:3px}
.hrow button{font-size:13px;padding:5px 10px;white-space:nowrap}

#corrform{padding:20px}
#corrform label{display:block;margin-bottom:12px;font-size:13px;color:var(--meta)}
#corrform input{display:block;width:100%;margin-top:5px;padding:8px 10px;font:inherit;
  border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
#corrform .row{display:flex;gap:10px}
#corrform .row label{flex:1}
#corrform menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:4px 0 0}

@media (max-width:640px){
  .topline{flex-wrap:wrap}
  .tabs{overflow-x:auto;max-width:100%}
  .who{margin-left:0}
  #empform .row,#hourform .row{flex-wrap:wrap}
}