*{box-sizing:border-box;margin:0;padding:0}
:root{--line:#e5e9f0;--muted:#7b8794;--blue:#2563eb;--green:#16a34a;--red:#dc2626}
body{font-family:-apple-system,"Microsoft YaHei",sans-serif;background:#f1f5f9;color:#0f172a;min-height:100vh;-webkit-font-smoothing:antialiased}
body.health-issue{padding-top:52px}

/* ---- 健康告警横幅（不变） ---- */
.health-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:500;
  background:#dc2626;color:#fff;padding:12px 20px;
  font-size:14px;font-weight:700;align-items:center;gap:12px;
  box-shadow:0 6px 24px -6px rgba(220,38,38,.75);
  animation:blinkRed 1.4s infinite;
}
.health-banner.show{display:flex}
.health-banner .h-icon{font-size:18px}
.health-banner .h-msg{flex:1;line-height:1.4}
.health-banner .h-retry{
  background:#fff;color:#dc2626;border:none;border-radius:8px;
  padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}
.health-banner .h-retry:hover{background:#fee2e2}
@keyframes blinkRed{0%,100%{background:#dc2626}50%{background:#991b1b}}

/* ---- 顶栏 ---- */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 18px;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.brand{font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.brand .logo{height:32px;width:auto;display:block;object-fit:contain}
.clock{
  font-size:16px;
  font-weight:700;
  color:#334155;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
  white-space:nowrap;
}
.spacer{flex:1}
.btn{border:1px solid var(--line);background:#fff;color:#334155;padding:7px 12px;border-radius:9px;
  font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;font-family:inherit}
.btn:hover{background:#f8fafc;border-color:#cbd5e1}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.danger{color:var(--red);border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.btn.tiny{padding:3px 9px;font-size:11.5px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.subbar{display:flex;gap:14px;flex-wrap:wrap;padding:8px 20px;font-size:13px;color:var(--muted)}
.subbar b{color:#0f172a}
.hint{margin-left:auto;font-size:12px}

/* ============ 主区域：行 → 分组 → 卡片 ============ */
main{padding:0 18px 60px}
#groups{display:flex;flex-direction:column;gap:10px}

/* 一行，最多 3 个小组并排，或 1 个大组独占 */
.row{display:flex;gap:10px;align-items:flex-start}
.row > .group-section{flex:1 1 0;min-width:0}

/* 分组标题（不可点击） */
.group-section{}
.group-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 11px;
  margin-bottom:7px;

  background:linear-gradient(135deg,#ffffff,#f8fafc);
  border:1px solid #cbd5e1;
  border-left:4px solid var(--blue);
  border-radius:9px;

  box-shadow:0 3px 8px rgba(15,23,42,.08);
  user-select:none;
}

.group-header .gname{
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  letter-spacing:.3px;
}

.group-header .gcount{
  font-size:11px;
  font-weight:700;
  color:#334155;
  background:#e2e8f0;
  padding:1px 8px;
  border-radius:20px;
  font-variant-numeric:tabular-nums;
}
.group-header .gflag{font-size:10px;color:#c2410c;background:#ffedd5;padding:1px 6px;border-radius:20px;display:none}
body.night .group-header .gflag,
body.has-multiplier .group-header .gflag{display:inline-block}

/* 卡片网格：固定上限宽度，左侧堆叠，避免宽容器里被拉伸 */
.grid{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(100px, 140px));
  justify-content:start}

/* 卡片 */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:14px 8px 10px;text-align:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
  box-shadow:0 1px 2px rgba(15,23,42,.05);overflow:hidden}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(15,23,42,.25);border-color:#cbd5e1}
.card:active{transform:translateY(0) scale(.985)}
.card .name{font-size:14.5px;font-weight:700;letter-spacing:.3px;word-break:break-all;line-height:1.25}
.card .stat{font-size:10.5px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.card .sub{font-size:10px;color:#94a3b8;margin-top:2px}
.card .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:#cbd5e1}
.card .badge{position:absolute;top:5px;left:5px;font-size:9px;font-weight:800;
  background:#f97316;color:#fff;padding:1px 4px;border-radius:7px;display:none;letter-spacing:.2px}

/* 白天签到：整块淡绿 */
.card.on{background:linear-gradient(160deg,#a7f3d0,#6ee7b7);border-color:#10b981;
  box-shadow:0 8px 20px -8px rgba(16,185,129,.55)}
.card.on .name{color:#064e3b}
.card.on .stat{color:#065f46;font-weight:600}
.card.on .sub{color:#047857}
.card.on .dot{background:#059669;animation:pulse 2s infinite}

/* 夜间签到：整块淡橙 */
.card.on.night{background:linear-gradient(160deg,#fed7aa,#fdba74);border-color:#f97316;
  box-shadow:0 8px 20px -8px rgba(249,115,22,.55)}
.card.on.night .name{color:#7c2d12}
.card.on.night .stat{color:#9a3412;font-weight:600}
.card.on.night .sub{color:#c2410c}
.card.on.night .dot{background:#ea580c;animation:pulse 2s infinite}

/* 上午签到：绿 + 琥珀徽章 */
.card.on.morning{background:linear-gradient(160deg,#bbf7d0,#86efac);border-color:#22c55e;
  box-shadow:0 8px 20px -8px rgba(34,197,94,.5)}
.card.on.morning .name{color:#14532d}
.card.on.morning .stat{color:#166534;font-weight:600}
.card.on.morning .sub{color:#15803d}
.card.on.morning .dot{background:#16a34a;animation:pulse 2s infinite}

.card.on.night .badge,
.card.on.morning .badge,
.card.on.has-multiplier .badge{display:block}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.card.busy{opacity:.55;pointer-events:none}
.empty{text-align:center;color:#94a3b8;padding:60px 0;font-size:14px}

/* ---- 弹窗 ---- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:18px;width:min(640px,100%);max-height:84vh;display:flex;flex-direction:column;
  box-shadow:0 24px 60px -12px rgba(15,23,42,.4);animation:pop .18s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px;flex:1}
.close{border:none;background:none;font-size:24px;line-height:1;color:#94a3b8;cursor:pointer;padding:0 4px}
.close:hover{color:#0f172a}
.modal-body{padding:18px 20px;overflow:auto}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12.5px;position:sticky;top:0;background:#fff}
td.num{font-variant-numeric:tabular-nums;text-align:right}
tr.on-duty td:first-child::before{content:'● ';color:var(--green)}
.gtag{font-size:11.5px;padding:1px 8px;border-radius:20px;background:#eef2ff;color:#4338ca}

#toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:8px;align-items:center;z-index:200;pointer-events:none}
.toast{background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);animation:up .25s ease;max-width:80vw}
.toast.ok{background:#059669}
.toast.err{background:#dc2626}
.toast.warn{background:#b45309}
.empty-cell{text-align:center;color:#94a3b8;padding:24px}
th.num{text-align:right}
.subbar .paused{color:var(--red);font-weight:700}
body.offline .card.on .stat::after{content:' · 已暂停'}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 窄屏：并排的组自动改为竖排，避免太挤 */
@media(max-width:720px){
  .row{flex-direction:column;gap:10px}
  .row > .group-section{flex:none;width:100%}
}
@media(max-width:600px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
  .card{padding:11px 6px 8px;border-radius:10px}
  .card .name{font-size:13px}
  .card .stat{font-size:9.5px}
  .card .sub{font-size:9px}
  .hint{display:none}
  header{padding:9px 12px;gap:7px}
  .brand{font-size:14.5px}
  .brand .logo{height:28px}
  .btn{padding:6px 10px;font-size:12.5px}
  main{padding:0 12px 60px}
}

/* ---- 配对页 ---- */
.pair-wrap{max-width:520px;margin:12vh auto 0;padding:0 18px;text-align:center}
.pair-wrap h1{font-size:20px;margin:14px 0 10px}
.pair-wrap p{color:var(--muted);font-size:14px;line-height:1.7;margin:8px 0}
.pair-wrap .logo{height:48px;width:auto}
.pair-code{font-size:56px;font-weight:800;letter-spacing:10px;font-variant-numeric:tabular-nums;margin:22px 0;color:#0f172a}
.pair-msg{min-height:22px;font-size:14px}
.pair-msg.err{color:var(--red)}
.pair-wrap .btn{padding:10px 22px;font-size:15px}
[hidden]{display:none !important}
.subbar .sync-note{color:#64748b;font-weight:600}