* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#F7F3EC; --card:#FFFFFF; --line:#E7DFD2; --line-soft:#EFE8DC;
  --text:#2B2116; --muted:#8A7A63;
  --accent:#C07A1E; --accent-text:#9A6110; --accent-soft:#FBEFD9; --on-accent:#241804;
  --green:#3E7C3A; --green-soft:#E7F0E2;
  --red:#C24E33; --red-soft:#F9E9E3;
  --blue:#27547E; --blue-soft:#E3EDF8;
  --thead:#F1EAE0; --shadow:0 1px 3px rgba(60,42,20,.08), 0 1px 2px rgba(60,42,20,.05);
  --radius:14px;
}
html,body { height:100%; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; overscroll-behavior:none;
}
.hidden { display:none !important; }
.muted { color:var(--muted); }
.error { color:var(--red); margin-top:12px; }
button { font-family:inherit; }

/* Login */
#login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { text-align:center; padding:24px; width:100%; max-width:340px; }
.login-logo {
  width:72px; height:72px; margin:0 auto 16px; border-radius:22px;
  background:linear-gradient(135deg,#E3A24B,var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:700; color:#FFF8EC;
  box-shadow:var(--shadow);
}
.login-box h1 { font-size:21px; margin-bottom:4px; font-family:Georgia,"Times New Roman",serif; }
.pin-dots { display:flex; gap:14px; justify-content:center; margin:22px 0; height:14px; }
.pin-dots span { width:14px; height:14px; border-radius:50%; border:1.5px solid #C9BCA6; }
.pin-dots span.on { background:var(--accent); border-color:var(--accent); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pin-pad button {
  height:64px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:24px; cursor:pointer;
  box-shadow:var(--shadow); transition:background .15s;
}
.pin-pad button:active { background:var(--accent-soft); }

/* Header */
header {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:rgba(247,243,236,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.month-title { flex:1; text-align:center; font-size:19px; font-weight:700; text-transform:capitalize; font-family:Georgia,"Times New Roman",serif; letter-spacing:.2px; }
.nav-btn {
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:22px; cursor:pointer;
  box-shadow:var(--shadow); transition:background .15s;
}
.nav-btn:hover { background:var(--accent-soft); }
.warn {
  margin:10px 14px 0; padding:10px 14px; background:#FFF4DC;
  border:1px solid #E3C98F; border-radius:10px; font-size:13px; color:#7A5A17;
}

/* Totals */
.totals { display:flex; gap:8px; padding:12px 14px; }
.total-card {
  flex:1; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 12px; text-align:center; box-shadow:var(--shadow);
}
.total-card .v { font-size:17px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.total-card .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }

/* Sections */
.section-title { padding:16px 16px 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.emp-card {
  margin:0 14px 8px; padding:12px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; align-items:center; gap:12px; cursor:pointer;
  box-shadow:var(--shadow); transition:border-color .15s, background .15s;
}
.emp-card:hover { border-color:#D8C9AC; }
.emp-card:active { background:var(--accent-soft); }
.emp-info { flex:1; min-width:0; }
.emp-name { font-weight:600; display:flex; align-items:center; gap:6px; }
.auto-badge { font-size:10px; background:var(--accent); color:#FFF8EC; padding:1px 6px; border-radius:6px; font-weight:700; }
.emp-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.emp-money { text-align:right; font-variant-numeric:tabular-nums; }
.emp-salary { font-weight:700; font-size:16px; }
.emp-rest { font-size:13px; margin-top:2px; }
.emp-rest.pos { color:var(--red); }
.emp-rest.zero { color:var(--green); }
.footer-space { height:60px; }
.rate-chip { white-space:nowrap; color:var(--accent-text); font-weight:600; }

/* Sheet */
.sheet-overlay {
  position:fixed; inset:0; background:rgba(43,33,22,.45); z-index:50;
  display:flex; align-items:flex-end;
}
.sheet {
  background:var(--bg); width:100%; max-height:92vh; overflow-y:auto;
  border-radius:20px 20px 0 0; padding:8px 16px calc(env(safe-area-inset-bottom) + 24px);
  border-top:1px solid var(--line);
}
@media (min-width:900px) {
  .sheet-overlay { justify-content:center; }
  .sheet { max-width:620px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
}
.sheet-handle { width:40px; height:4px; background:#D8CDB9; border-radius:2px; margin:8px auto 14px; }
.detail-head { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.detail-head h2 { font-size:23px; font-family:Georgia,"Times New Roman",serif; }
.detail-sub { color:var(--muted); font-size:14px; margin-bottom:14px; }

.summary-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:16px; }
.sum-cell { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; text-align:center; box-shadow:var(--shadow); }
.sum-cell .v { font-weight:700; font-size:15px; }
.sum-cell .l { font-size:10px; color:var(--muted); text-transform:uppercase; }

/* Calendar */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cal .dow { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; }
.cal .day {
  aspect-ratio:1; border-radius:9px; border:1px solid var(--line);
  background:var(--card); display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-size:13px; cursor:pointer; position:relative;
  transition:background .15s;
}
.cal .day:hover { background:var(--accent-soft); }
.cal .day.empty { visibility:hidden; }
.cal .day.has { background:var(--accent-soft); border-color:#E0B87A; }
.cal .day .h { font-size:9px; color:var(--accent-text); font-weight:700; }
.cal .day.today { outline:2px solid var(--accent); }
.cal .day.nosale { border-color:var(--red); }

/* Day editor */
.presets { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.presets button, .btn {
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:14px; cursor:pointer;
  box-shadow:var(--shadow); transition:background .15s;
}
.presets button:hover, .btn:hover { background:var(--accent-soft); }
.presets button.active { background:var(--accent); color:#FFF8EC; border-color:var(--accent); font-weight:700; }
.btn.primary { background:var(--accent); color:#FFF8EC; font-weight:700; border-color:var(--accent); }
.btn.primary:hover { background:#A96A15; }
.btn.danger { color:var(--red); border-color:#E4BFB2; }
.btn.danger:hover { background:var(--red-soft); }
.btn.wide { width:100%; margin-top:8px; }
.custom-time { display:flex; gap:8px; align-items:center; margin:10px 0; }
.custom-time input { flex:1; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:16px; }

/* Fields */
.field-row { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.field-row label { flex:0 0 100px; font-size:14px; color:var(--muted); }
.field-row input, .field-row select {
  flex:1; min-width:0; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:16px;
}
h3.block { margin:18px 0 10px; font-size:15px; font-family:Georgia,"Times New Roman",serif; }

/* Payments */
.pay-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.pay-row .d { color:var(--muted); flex:0 0 52px; }
.pay-row .n { flex:1; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-row .a { font-weight:600; }
.pay-row .x { color:var(--red); background:none; border:none; font-size:18px; cursor:pointer; padding:4px 8px; }
.pay-row .mv { color:var(--muted); background:none; border:none; font-size:16px; cursor:pointer; padding:4px 6px; }

/* Poster day list */
.pd-row { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14px; align-items:center; }
.pd-row .d { flex:0 0 46px; color:var(--muted); }
.pd-row .info { flex:1; font-size:12px; color:var(--muted); }
.pd-row .a { font-weight:600; }

/* Payment tags & segmented control */
.tag { font-size:10px; padding:2px 6px; border-radius:6px; background:var(--line-soft); color:var(--muted); white-space:nowrap; font-weight:600; }
.tag.cash { background:var(--green-soft); color:var(--green); }
.tag.bank { background:var(--blue-soft); color:var(--blue); }
.tag.src { background:var(--accent-soft); color:var(--accent-text); }
.seg { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:0 0 auto; background:var(--card); }
.seg button { padding:11px 14px; background:var(--card); color:var(--muted); border:none; font-size:14px; cursor:pointer; }
.seg button.on { background:var(--accent); color:#FFF8EC; font-weight:700; }

/* Desktop table */
.table-wrap { overflow:auto; margin:0 14px; border:1px solid var(--line); border-radius:var(--radius); max-height:calc(100vh - 190px); background:var(--card); box-shadow:var(--shadow); }
table.vt { border-collapse:separate; border-spacing:0; font-size:13px; min-width:100%; font-variant-numeric:tabular-nums; }
table.vt th, table.vt td { padding:5px 7px; border-bottom:1px solid var(--line-soft); border-right:1px solid #F4EEE4; white-space:nowrap; text-align:center; }
table.vt thead th { position:sticky; top:0; background:var(--thead); z-index:3; font-weight:600; color:var(--muted); }
table.vt .name-col { text-align:left; min-width:170px; font-weight:600; }
table.vt .sticky { position:sticky; left:0; background:var(--card); z-index:2; }
table.vt thead .sticky { z-index:4; background:var(--thead); }
table.vt .pos { display:block; font-size:11px; color:var(--muted); font-weight:400; }
table.vt .emp-link { cursor:pointer; }
table.vt .emp-link:hover { color:var(--accent-text); }
table.vt tbody tr:hover td { background:#FCF8F0; }
table.vt tbody tr:hover td.sticky { background:#FCF8F0; }
table.vt .day-col { min-width:26px; padding:5px 3px; font-size:12px; }
table.vt .day-col.wknd { background:#F5F0E7; }
table.vt .day-col.tdy { box-shadow:inset 0 0 0 1px var(--accent); }
table.vt .day-col.has { background:var(--accent-soft); color:var(--accent-text); font-weight:700; }
table.vt .day-col.clickable { cursor:pointer; }
table.vt .day-col.clickable:hover { background:#F3DFBD; }
table.vt .num { text-align:right; }
table.vt .b { font-weight:700; }
table.vt .grn { color:var(--green); }
table.vt .rd { color:var(--red); }
table.vt .sec-row td { background:var(--thead); color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.5px; padding:7px; text-align:left; font-weight:600; }
table.vt .total-row td { background:#EDE3D2; font-weight:700; position:sticky; bottom:0; }
table.vt .total-row .sticky { z-index:2; background:#EDE3D2; }

/* Admin */
.adm-rate { color:var(--accent-text); font-weight:600; font-size:14px; white-space:nowrap; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.adm-row { display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.adm-row .nm { flex:1; }
.adm-row .inactive { opacity:.45; }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}