:root{
  --ink:#1F2733; --ink-soft:#3A4555;
  --kraft:#C68642; --kraft-dark:#8B5A2B; --kraft-darker:#6E4621; --kraft-light:#F4E9D8;
  --paper:#FBF8F2; --paper-2:#F2ECE0;
  --success:#4F7942; --success-bg:#E7EFE3;
  --alert:#B5482F; --alert-bg:#F6E6E1;
  --amber:#C9852E; --amber-bg:#F8EDDA;
  --line:#DCD0B8; --line-soft:#EAE2CD;
  --shadow: 0 1px 2px rgba(31,39,51,0.06), 0 4px 12px rgba(31,39,51,0.05);
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.mono{ font-family:'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
#app{ max-width:1240px; margin:0 auto; padding:0 0 48px; }

header.topbar{
  background: linear-gradient(180deg, var(--ink) 0%, #232E3C 100%);
  color:#F4EFE3; padding:22px 28px 18px; border-radius: 0 0 10px 10px;
  display:flex; align-items:center; gap:16px;
}
header.topbar .titles{ flex:1; min-width:0; }
header.topbar h1{ font-family:'Bitter',serif; font-weight:700; font-size:21px; margin:0 0 2px; letter-spacing:0.2px; }
header.topbar p{ margin:0; font-size:12.5px; color:#C9BFA9; letter-spacing:0.3px; }
header.topbar .stamp{ font-family:'Bitter',serif; font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--kraft); border:1px solid var(--kraft-dark); padding:5px 10px; border-radius:3px; white-space:nowrap; text-decoration:none; }

nav.tabs{ display:flex; gap:4px; padding:0 20px; margin-top:-1px; overflow-x:auto; }
nav.tabs a{
  font-family:'Bitter',serif; font-size:13.5px; font-weight:600; color:#8A7656; background:var(--paper-2);
  border:none; padding:11px 22px 10px; cursor:pointer; text-decoration:none; display:inline-block;
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%); margin-top:6px; transition: all .15s ease; white-space:nowrap;
}
nav.tabs a:hover{ background:var(--kraft-light); color:var(--kraft-darker); }
nav.tabs a.active{ background:var(--kraft-light); color:var(--kraft-darker); margin-top:0; padding-top:17px; box-shadow: var(--shadow); }

main{ background:#fff; border:1px solid var(--line); border-radius:0 8px 8px 8px; padding:24px 26px 30px; box-shadow: var(--shadow); }

h2.section-title{ font-family:'Bitter',serif; font-size:17px; margin:0 0 4px; color:var(--ink); }
p.section-sub{ margin:0 0 18px; font-size:13px; color:#6B7280; }

label{ font-size:12px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px; }
input, select{ font-family:'Inter',sans-serif; font-size:13.5px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); width:100%; }
input.mono, td input{ font-family:'JetBrains Mono',monospace; }
input:focus, select:focus{ outline:2px solid var(--kraft); outline-offset:1px; border-color:var(--kraft); }
.field{ margin-bottom:14px; }
.row{ display:flex; gap:14px; flex-wrap:wrap; }
.row > .field{ flex:1; min-width:140px; }

button.btn, a.btn{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:9px 16px; border-radius:6px;
  border:1px solid var(--kraft-dark); background:var(--kraft); color:#fff; cursor:pointer; transition: filter .12s ease;
  text-decoration:none; display:inline-block;
}
button.btn:hover, a.btn:hover{ filter:brightness(0.94); }
button.btn.secondary, a.btn.secondary{ background:#fff; color:var(--ink-soft); border-color:var(--line); }
button.btn.secondary:hover, a.btn.secondary:hover{ background:var(--paper-2); }
button.btn.danger{ background:var(--alert); border-color:#8E3A26; }
button.btn.small, a.btn.small{ padding:5px 10px; font-size:12px; border-radius:5px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:#8A7656; background:var(--kraft-light); padding:9px 10px; border-bottom:2px solid var(--line); white-space:nowrap; }
table.data-table td{ padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.data-table tbody tr:hover{ background:#FBF6EC; }
table.data-table tfoot td{ font-weight:700; background:var(--paper-2); border-top:2px solid var(--line); border-bottom:none; }
td input[type=time], td input[type=number], td input[type=text]{ padding:5px 7px; font-size:12.5px; }
td select{ padding:5px 7px; font-size:12.5px; }

.pill{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; }
.pill.present{ background:var(--success-bg); color:var(--success); }
.pill.half{ background:var(--amber-bg); color:var(--amber); }
.pill.absent{ background:var(--alert-bg); color:var(--alert); }

.empty-state{ text-align:center; padding:48px 20px; color:#8A8478; border:1.5px dashed var(--line); border-radius:8px; }
.empty-state .big{ font-family:'Bitter',serif; font-size:15px; color:var(--ink-soft); margin-bottom:6px; }

.totals-strip{ display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.totals-strip .card{ flex:1; min-width:160px; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.totals-strip .card .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:#8A7656; margin-bottom:4px; }
.totals-strip .card .value{ font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:600; color:var(--ink); }
.totals-strip .card.accent .value{ color:var(--kraft-darker); }

.helper-note{ font-size:12px; color:#8A7656; background:var(--kraft-light); border:1px solid var(--line); border-radius:6px; padding:9px 12px; margin-bottom:16px; }
.flash{ font-size:13px; padding:10px 14px; border-radius:6px; margin-bottom:16px; }
.flash.success{ background:var(--success-bg); color:var(--success); border:1px solid #BFD6B6; }
.flash.error{ background:var(--alert-bg); color:var(--alert); border:1px solid #E2B7AB; }

.action-icon-btn{ background:none; border:none; cursor:pointer; color:#8A7656; font-size:13px; padding:2px 5px; text-decoration:none; }
.action-icon-btn:hover{ color:var(--alert); }

.login-wrap{ max-width:380px; margin:80px auto; }
.login-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; box-shadow:var(--shadow); }
.login-card h1{ font-family:'Bitter',serif; font-size:19px; margin:0 0 4px; }
.login-card p{ font-size:13px; color:#6B7280; margin:0 0 20px; }