body.staff main.staffmain { padding:20px; max-width:1500px; margin:0 auto; }
.navlink { color:var(--text-secondary); text-decoration:none; font-size:13px;
           padding:7px 12px; border:1px solid var(--border-strong); border-radius:8px; }
.navlink:hover { color:var(--text-primary); }
.actionbar { display:flex; gap:16px; align-items:stretch; margin-bottom:20px; flex-wrap:wrap; }
.bigbtn { display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:4px; min-width:290px; min-height:104px; border-radius:14px; cursor:pointer;
          border:1px solid var(--series-1); background:var(--series-1); color:#fff; }
.bigbtn .lbl { font-size:22px; font-weight:680; letter-spacing:-.01em; }
.bigbtn .sub { font-size:12.5px; opacity:.9; }
.bigbtn:active { transform:translateY(1px); }
.bigbtn:disabled { opacity:.55; }
.counter { display:flex; flex-direction:column; justify-content:center; padding:14px 22px;
           background:var(--surface-1); border:1px solid var(--border); border-radius:14px; min-width:220px; }
.cnum { font-size:40px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.clabel { font-size:12.5px; color:var(--text-secondary); margin-top:5px; }
.cnote { font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.ustatus { display:flex; align-items:center; font-size:14px; }
.cols { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
@media (max-width:1000px){ .cols { grid-template-columns:1fr; } }
.searchrow { display:flex; gap:8px; margin-bottom:14px; }
.searchrow input { flex:1; font:inherit; font-size:15px; padding:11px 13px; border-radius:10px;
                   border:1px solid var(--border-strong); background:var(--surface-2);
                   color:var(--text-primary); }
.person { border:1px solid var(--border); border-radius:12px; padding:14px;
          margin-bottom:10px; background:var(--surface-1); }
.person .hdr { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.person .nm { font-size:16px; font-weight:640; }
.person .meta { color:var(--text-muted); font-size:12.5px; }
.person .acts { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.pinbox { margin-top:12px; padding:14px; border-radius:10px; text-align:center;
          background:var(--surface-2); border:1px dashed var(--border-strong); }
.pinbox .code { font-size:38px; font-weight:700; letter-spacing:.16em;
                font-variant-numeric:tabular-nums; margin:6px 0; }
.pinbox .warn { font-size:12.5px; color:var(--warn); }
.sellrow { display:flex; align-items:center; justify-content:space-between; gap:10px;
           padding:10px 0; border-bottom:1px solid var(--border); }
.sellrow .nm { font-size:14px; font-weight:560; }
.sellrow .px { font-size:13px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.linkout { margin-top:14px; padding:14px; border-radius:10px; background:var(--surface-2);
           border:1px solid var(--border-strong); }
.linkout a { color:var(--series-1); word-break:break-all; font-size:13px; }
.qr { margin-top:10px; background:#fff; padding:10px; border-radius:8px; display:inline-block; }
.kidpick { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:4px 0 16px; }
.klabel { font-size:15px; font-weight:600; }
.kctl { display:flex; align-items:center; gap:10px; }
.kctl button { width:52px; height:52px; border-radius:12px; font-size:26px; font-weight:700;
               line-height:1; background:var(--surface-2); border:1px solid var(--border-strong);
               color:var(--text-primary); cursor:pointer; }
.kctl button:hover { border-color:var(--series-1); color:var(--series-1); }
.kcount { min-width:64px; text-align:center; font-size:34px; font-weight:700;
          font-variant-numeric:tabular-nums; }
.localtog { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text-secondary); }
.localtog input { width:17px; height:17px; }
.opt { display:flex; align-items:center; justify-content:space-between; gap:14px;
       padding:15px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px;
       background:var(--surface-1); }
.opt .what { font-size:15px; font-weight:620; }
.opt .why { font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.opt .amt { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.opt button { font-size:15px; padding:12px 20px; border-radius:10px; }
.doorstate { display:flex; align-items:center; gap:13px; padding:14px 20px; min-width:250px;
             background:var(--surface-1); border:1px solid var(--border); border-radius:14px; }
.dot { width:18px; height:18px; border-radius:50%; background:var(--text-muted); flex:none;
       box-shadow:0 0 0 4px color-mix(in srgb, var(--text-muted) 22%, transparent); }
.dot.locked   { background:var(--good);     box-shadow:0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); }
.dot.unlocked { background:var(--warn);     box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 26%, transparent);
                animation:pulse 1.1s ease-in-out infinite; }
.dot.stale    { background:var(--critical); box-shadow:0 0 0 4px color-mix(in srgb, var(--critical) 22%, transparent); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.dlabel { font-size:17px; font-weight:660; line-height:1.2; }
.dsub { font-size:12.5px; color:var(--text-muted); margin-top:3px; }

/* Staff-facing status messages. These are read at arm's length while someone
   is waiting at the desk, so they get real size rather than chip-sized text. */
.ustatus .pill { font-size:17px; font-weight:640; padding:9px 16px; line-height:1.3; }
.person .out .pill { font-size:16px; font-weight:620; padding:8px 14px; line-height:1.3; }
.person .out { margin-top:10px; }
#sell-out .pill { font-size:16px; font-weight:620; padding:8px 14px; }
.pinbox .code { font-size:52px; letter-spacing:.2em; }
.pinbox .warn { font-size:14px; line-height:1.45; }

/* The tap countdown is the thing someone watches while holding a fob to the
   reader - it should be legible from a step back. */
.person .out .pill.warn { font-size:20px; font-weight:700; padding:12px 18px; }