:root{
  --ink:#161C22;
  --paper:#F4F2EC;
  --panel:#FFFFFF;
  --line:#DDD8CC;
  --charcoal:#1E2731;
  --amber:#C9862A;
  --amber-deep:#A56A1B;
  --good:#2F6B4F;
  --bad:#A93B2E;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Cairo',sans-serif;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.hidden{display:none !important;}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;
  background:var(--charcoal);
  color:#F4F2EC;
  position:sticky;top:0;z-index:5;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;}
.brand-mark{width:26px;height:26px;border-radius:6px;object-fit:cover;}
.user-chip{display:flex;align-items:center;gap:14px;font-size:.9rem;opacity:.9;}
.link-btn{
  background:none;border:none;color:var(--amber);cursor:pointer;
  font-family:inherit;font-size:.9rem;padding:0;
}
.link-btn.small{font-size:.82rem;margin-top:10px;}
.link-btn:hover{text-decoration:underline;}

/* ---------- Layout ---------- */
main{max-width:920px;margin:0 auto;padding:28px 18px 60px;}
.view{display:block;}

/* ---------- Cards / fields ---------- */
.auth-card,.worker-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  max-width:420px;
  margin:20px auto;
}
.auth-card h1,.worker-card h1{font-size:1.35rem;margin:0 0 6px;}
.muted{color:#6B6255;font-size:.88rem;margin:0 0 18px;}

.field{display:block;margin-bottom:14px;font-size:.88rem;}
.field span{display:block;margin-bottom:6px;color:#4B4438;font-weight:600;}
.field input{
  width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:.95rem;background:#FBFAF7;
}
.field input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.btn{
  border:none;border-radius:8px;padding:12px 18px;font-family:inherit;
  font-weight:700;font-size:.95rem;cursor:pointer;width:100%;
}
.btn.small{width:auto;padding:9px 16px;font-size:.85rem;}
.btn-primary{background:var(--amber);color:#231506;}
.btn-primary:hover{background:var(--amber-deep);}
.btn-primary:disabled{background:#E4D9C4;color:#a99;cursor:not-allowed;}

.error{color:var(--bad);font-size:.85rem;margin-top:10px;}
.note{color:var(--good);font-size:.85rem;margin-top:10px;word-break:break-all;}

/* ---------- Worker punch view ---------- */
.eyebrow{color:var(--amber-deep);font-weight:700;font-size:.85rem;margin:0 0 4px;}
.status-line{font-size:.88rem;color:#6B6255;margin:14px 0 20px;}
.punch-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.punch-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px 10px;border-radius:12px;border:2px solid transparent;
  font-family:inherit;font-weight:800;font-size:1rem;cursor:pointer;
}
.punch-icon{font-size:1.6rem;}
.punch-btn.in{background:#EAF3ED;color:var(--good);border-color:#CFE3D6;}
.punch-btn.in:hover:not(:disabled){background:#DCEDE2;}
.punch-btn.out{background:#F6E9E6;color:var(--bad);border-color:#EBD2CC;}
.punch-btn.out:hover:not(:disabled){background:#F0DAD4;}
.punch-btn:disabled{opacity:.45;cursor:not-allowed;}
.punch-result{margin-top:16px;font-weight:700;text-align:center;min-height:1.2em;}

.ledger{max-width:420px;margin:30px auto 0;}
.ledger h2{font-size:1rem;margin:0 0 10px;}
.log-list{display:flex;flex-direction:column;gap:8px;}
.log-item{
  display:flex;justify-content:space-between;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:.85rem;
}

/* ---------- Admin ---------- */
.admin-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:22px;}
.tab-btn{
  background:none;border:none;font-family:inherit;font-size:.95rem;font-weight:700;
  padding:10px 18px;cursor:pointer;color:#6B6255;border-bottom:3px solid transparent;
  margin-bottom:-2px;
}
.tab-btn.active{color:var(--amber-deep);border-color:var(--amber);}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

.pane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.pane-head h2{margin:0;font-size:1.1rem;}

.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);}
table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:560px;}
thead th{
  text-align:right;padding:12px 14px;color:#6B6255;font-weight:700;
  border-bottom:1px solid var(--line);font-size:.8rem;
}
tbody td{padding:11px 14px;border-bottom:1px solid #EEEAE0;}
tbody tr:last-child td{border-bottom:none;}
.badge{padding:3px 9px;border-radius:20px;font-size:.75rem;font-weight:700;}
.badge.ok{background:#EAF3ED;color:var(--good);}
.badge.bad{background:#F6E9E6;color:var(--bad);}
.row-del{color:var(--bad);background:none;border:none;cursor:pointer;font-family:inherit;font-size:.85rem;}

.worker-form{
  margin-top:20px;padding:20px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);max-width:460px;
}
.worker-form h3{margin:0 0 14px;}
.form-actions{display:flex;gap:14px;align-items:center;margin-top:6px;}
.form-actions .btn{width:auto;}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDEAE2; --paper:#12161B; --panel:#1A2028; --line:#2B323C;
    --charcoal:#0D1116; --amber:#D79A44; --amber-deep:#E7B061;
  }
  :root:not([data-theme="light"]) .field input{background:#12161B;color:var(--ink);}
  :root:not([data-theme="light"]) .muted{color:#9A9284;}
  :root:not([data-theme="light"]) thead th,
  :root:not([data-theme="light"]) tbody td{border-color:#2B323C;}
}