:root {
  --bg: #081219;
  --panel: #101f29;
  --panel-2: #132a36;
  --line: #29424f;
  --text: #edf7fb;
  --muted: #9cb3be;
  --cyan: #39d5e9;
  --cyan-dark: #1394a7;
  --green: #55d98b;
  --yellow: #f6c85f;
  --red: #ff6b6b;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top right, #143342 0, var(--bg) 45%); color:var(--text); min-height:100vh; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1440px, 94vw); margin:0 auto; padding:28px 0 50px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.65rem, 4vw, 2.6rem); margin-bottom:0; }
h2 { margin-bottom:0; font-size:1.28rem; }
h3 { font-size:1rem; }
.eyebrow { color:var(--cyan); font-size:.72rem; font-weight:800; letter-spacing:.16em; margin-bottom:7px; }
.clock-wrap { text-align:right; padding:12px 16px; border:1px solid var(--line); background:rgba(16,31,41,.7); border-radius:14px; }
.clock-wrap span { display:block; color:var(--muted); font-size:.82rem; }
.clock-wrap strong { font-size:1.25rem; }
.tabs { display:flex; gap:8px; margin-bottom:18px; overflow:auto; }
.tab { border:1px solid var(--line); background:rgba(16,31,41,.65); color:var(--muted); padding:11px 16px; border-radius:10px; white-space:nowrap; }
.tab.active { background:var(--cyan); color:#042029; border-color:var(--cyan); font-weight:800; }
.view { display:none; }
.active-view { display:block; }
.grid { display:grid; gap:18px; }
.two-col { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); }
.card { background:linear-gradient(180deg, rgba(19,42,54,.96), rgba(14,29,38,.97)); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
.hero-card { min-height:520px; }
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }
label { display:block; color:var(--muted); font-size:.84rem; font-weight:700; margin:15px 0 7px; }
input,select { width:100%; border:1px solid var(--line); background:#091821; color:var(--text); border-radius:10px; padding:12px 13px; outline:none; }
input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(57,213,233,.12); }
button { border:0; border-radius:10px; padding:11px 15px; font-weight:800; }
.primary { background:var(--cyan); color:#05232c; }
.secondary { background:#204657; color:var(--text); }
.warning { background:var(--yellow); color:#382600; }
.danger { background:var(--red); color:#2d0808; }
.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.ghost-danger { color:var(--red); border-color:rgba(255,107,107,.5); }
.full { width:100%; margin-top:20px; }
.helper { color:var(--muted); font-size:.78rem; margin:10px 0 0; }
.hidden { display:none !important; }
.status-pill,.metric-badge { border-radius:999px; padding:7px 11px; font-size:.75rem; font-weight:800; }
.status-pill.neutral { background:#243641; color:var(--muted); }
.status-pill.working { background:rgba(85,217,139,.16); color:var(--green); }
.status-pill.break { background:rgba(246,200,95,.16); color:var(--yellow); }
.metric-badge { background:rgba(57,213,233,.14); color:var(--cyan); }
.shift-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
.shift-summary div { padding:18px; border:1px solid var(--line); background:#0a1922; border-radius:12px; }
.shift-summary span { display:block; color:var(--muted); font-size:.78rem; margin-bottom:5px; }
.shift-summary strong { font-size:1.08rem; }
.action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.category-counts { display:grid; gap:10px; }
.category-row { display:flex; justify-content:space-between; padding:11px 12px; background:#0b1a23; border:1px solid var(--line); border-radius:10px; }
.category-row span:last-child { color:var(--cyan); font-weight:800; }
.divider { height:1px; background:var(--line); margin:18px 0; }
.activity-list,.audit-list { display:grid; gap:10px; }
.activity-item,.audit-item { padding:11px 12px; background:#0b1a23; border-left:3px solid var(--cyan); border-radius:8px; }
.activity-item small,.audit-item small { display:block; color:var(--muted); margin-top:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.stat-card { background:linear-gradient(180deg, #15303e, #10242e); border:1px solid var(--line); border-radius:15px; padding:18px; }
.stat-card span { color:var(--muted); font-size:.82rem; }
.stat-card strong { display:block; font-size:2rem; margin-top:5px; color:var(--cyan); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.86rem; }
th { color:var(--cyan); background:#0b1b24; position:sticky; top:0; }
td { color:#dbeaf0; }
.filters { display:grid; grid-template-columns:1.2fr 1.1fr 1fr 1fr auto; gap:10px; align-items:end; margin-bottom:18px; }
.filters label { margin-top:0; }
.checkbox-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.check-item { display:flex; gap:8px; align-items:center; background:#0b1a23; padding:9px; border-radius:8px; border:1px solid var(--line); }
.check-item input { width:auto; }
.employee-directory { display:grid; gap:10px; max-height:590px; overflow:auto; }
.employee-card { border:1px solid var(--line); border-radius:12px; padding:14px; background:#0b1a23; }
.employee-card-head { display:flex; justify-content:space-between; gap:12px; }
.employee-card p { color:var(--muted); font-size:.82rem; margin:6px 0 0; }
.employee-card .tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag { padding:5px 8px; background:#173543; color:var(--cyan); border-radius:999px; font-size:.7rem; }
.top-space { margin-top:18px; }
dialog { border:0; border-radius:16px; padding:0; background:transparent; color:var(--text); }
dialog::backdrop { background:rgba(0,0,0,.7); }
.dialog-card { width:min(440px,90vw); background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.dialog-card p { color:var(--muted); }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.toast { position:fixed; right:24px; bottom:24px; background:#eafcff; color:#06212b; padding:13px 16px; border-radius:10px; font-weight:800; opacity:0; transform:translateY(10px); pointer-events:none; transition:.22s ease; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translateY(0); }
.empty { color:var(--muted); padding:20px; text-align:center; }
@media (max-width: 950px) { .two-col,.stats-grid,.filters { grid-template-columns:1fr 1fr; } .filters button { grid-column:span 2; } }
@media (max-width: 650px) { .app-shell { width:min(95vw, 680px); padding-top:16px; } .topbar { align-items:flex-start; } .clock-wrap { display:none; } .two-col,.stats-grid,.filters,.shift-summary,.action-grid { grid-template-columns:1fr; } .filters button { grid-column:auto; } .card { padding:16px; } .hero-card { min-height:auto; } }