*{box-sizing:border-box}
:root{
  --bg:#f4f7fb;--card:#fff;--text:#101828;--muted:#667085;--line:#e4e7ec;
  --primary:#155eef;--primary-dark:#004eeb;--success:#067647;--success-bg:#ecfdf3;
  --warning:#b54708;--warning-bg:#fffaeb;--danger:#b42318;--danger-bg:#fef3f2;
  --shadow:0 12px 32px rgba(16,24,40,.08);--radius:18px
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{max-width:1280px;margin:auto;padding:24px 18px 56px}
.topbar{background:linear-gradient(135deg,#101828,#1d2939);color:#fff;border-radius:24px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow)}
.topbar h1{margin:2px 0 4px;font-size:clamp(1.7rem,4vw,2.5rem)}
.topbar p{margin:0;color:#d0d5dd}
.eyebrow{font-size:.73rem;font-weight:800;letter-spacing:.14em;color:#84adff}
.tabs{display:flex;gap:8px;margin:18px 0;overflow:auto;padding-bottom:2px}
.tab{border:1px solid var(--line);background:var(--card);padding:10px 16px;border-radius:999px;color:#344054;font-weight:700;white-space:nowrap}
.tab.active{background:var(--text);color:white;border-color:var(--text)}
.view{display:none}.view.active{display:block}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 5px 18px rgba(16,24,40,.04)}
.stat-card span{color:var(--muted);font-size:.87rem}.stat-card strong{display:block;font-size:1.6rem;margin-top:6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 5px 18px rgba(16,24,40,.04);margin-bottom:14px}
.card h2{margin:0 0 4px}.card p{margin:0}.muted{color:var(--muted)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.card-head p{color:var(--muted);font-size:.9rem}
.action-row,.tool-grid{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{border:1px solid var(--line);background:#fff;color:#344054;padding:10px 14px;border-radius:11px;font-weight:750;min-height:42px}
.btn:hover{filter:brightness(.98)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark)}
.btn.ghost{background:transparent;color:#fff;border-color:#475467}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-outline{border-color:#fda29b;color:var(--danger);background:#fff}
.icon-btn{border:0;background:transparent;font-size:2rem;line-height:1;color:#667085}
.filters{display:grid;grid-template-columns:1fr 180px;gap:10px;margin-bottom:14px}
input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:11px;padding:11px 12px;background:#fff;color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:#84adff;box-shadow:0 0 0 4px rgba(21,94,239,.08)}
label{display:grid;gap:7px;font-size:.88rem;font-weight:700;color:#344054}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.78rem;color:#667085;background:#f9fafb;position:sticky;top:0}
td{font-size:.9rem}tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:800}
.badge.paid{color:var(--success);background:var(--success-bg)}
.badge.pending{color:var(--warning);background:var(--warning-bg)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.mini{padding:7px 9px;min-height:34px;font-size:.78rem}
.whatsapp{border-color:#a6f4c5;color:#027a48;background:#f6fef9}
.empty{padding:28px;text-align:center;color:var(--muted)}
.hidden{display:none!important}
.list{display:grid;gap:10px}
.list-item{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.list-item strong{display:block}.list-item small{color:var(--muted)}
.worker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.worker-card{border:1px solid var(--line);border-radius:16px;padding:16px}
.worker-card h3{margin:0 0 5px}.worker-meta{color:var(--muted);font-size:.86rem;margin-bottom:12px;word-break:break-word}
.worker-id{font-size:.75rem;color:#475467;font-weight:800;margin-bottom:8px}
dialog{border:0;padding:0;border-radius:20px;width:min(560px,calc(100% - 24px));box-shadow:0 24px 60px rgba(16,24,40,.22)}
dialog::backdrop{background:rgba(16,24,40,.55);backdrop-filter:blur(2px)}
.modal-card{padding:22px}.modal-card.compact{max-width:460px}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px}
.modal-head h2{margin:3px 0 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid.one{grid-template-columns:1fr}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.file-btn input{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#101828;color:white;padding:11px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:9999;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:850px){.stats-grid{grid-template-columns:repeat(2,1fr)}.worker-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .app-shell{padding:12px 10px 40px}.topbar{padding:20px;border-radius:18px;align-items:flex-start}.topbar p{font-size:.9rem}
  .stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:1.25rem}
  .card{padding:14px}.stack-mobile{align-items:stretch;flex-direction:column}.filters{grid-template-columns:1fr}
  .worker-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}
  .list-item{align-items:flex-start;flex-direction:column}.action-row .btn{flex:1}
}