:root{--blue:#1f4e79;--bg:#f2f5f9;--card:#fff;--text:#22303c;--green:#1e7e34;--red:#b02a37;--amber:#9a6700}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif;margin:0}.wrap{display:flex;flex-direction:column;gap:16px;margin:0 auto;max-width:860px;min-height:100vh;padding:16px}.clockbar{padding:8px 0;text-align:center}.clock{color:var(--blue);font-size:64px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:2px}.date{color:#5a6b7b;font-size:18px;text-transform:capitalize}.card{background:var(--card);border-radius:14px;box-shadow:0 2px 10px #1f4e7914;padding:24px}.center,.center-text{text-align:center}h1{margin:0 0 8px}h1,h2{color:var(--blue)}h2{font-size:17px;margin:0 0 10px}.muted{color:#6b7a89}.small{font-size:13px}.error{color:var(--red);font-weight:600}.userbar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:14px}.timer{color:var(--blue);font-variant-numeric:tabular-nums;font-weight:700}.timer.warning{animation:blink 1s step-end infinite;color:var(--red)}@keyframes blink{50%{opacity:.35}}.cols{display:grid;gap:18px;grid-template-columns:1fr 1fr}@media(max-width:640px){.cols{grid-template-columns:1fr}.clock{font-size:48px}}.list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.list li{align-items:center;background:#f6f9fc;border-radius:8px;display:flex;gap:10px;padding:8px 10px}.time{font-variant-numeric:tabular-nums;font-weight:700}.tag{border-radius:999px;font-size:12px;font-weight:700;padding:2px 8px}.tag.in{background:#e2f3e6;color:var(--green)}.tag.out{background:#fbe3e6;color:var(--red)}.tag.pending{background:#fff2cc;color:var(--amber)}.banner{border-radius:10px;font-weight:600;margin:14px 0;padding:12px 14px}.banner.ok{background:#e2f3e6;color:var(--green)}.banner.warn{background:#fff2cc;color:var(--amber)}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}.btn{border:0;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;padding:12px 22px;transition:transform .05s,opacity .2s}.btn:active{transform:scale(.98)}.btn:disabled{cursor:not-allowed;opacity:.45}.btn.big{flex:1;font-size:20px;min-width:160px;padding:18px 30px}.btn.primary{background:var(--blue);color:#fff}.btn.in{background:var(--green);color:#fff}.btn.out{background:var(--red);color:#fff}.btn.neutral{background:#e4e9ee;color:var(--text)}footer{margin-top:auto;padding:8px 0 14px}