:root { --bg:#f4f5f7; --card:#fff; --text:#1c2430; --muted:#5f6b7a; --line:#d9dee5; --accent:#1f4e8c; --accent-text:#fff; --err:#a12626; --err-bg:#fbeaea; --ok:#1d6b3a; --ok-bg:#e6f4ec; --warn-bg:#fff6dc; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161c; --card:#1b212a; --text:#e6eaf0; --muted:#9aa6b5; --line:#2e3744; --accent:#6ea3e6; --accent-text:#0d1b2e; --err:#f0a0a0; --err-bg:#3a1f1f; --ok:#8fd3a8; --ok-bg:#1c3325; --warn-bg:#3a3319; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 16px; padding-bottom: 48px; }
.top { background: var(--card); border-bottom: 1px solid var(--line); }
.bar { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; min-height:56px; }
.brand { font-weight:600; color:var(--text); text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; }
nav a, button.link { color:var(--accent); text-decoration:none; background:none; border:0; padding:4px 0; font:inherit; cursor:pointer; }
nav a:hover, button.link:hover { text-decoration:underline; }
h1 { font-size:1.5rem; margin:8px 0 12px; }
h2 { font-size:1.15rem; margin:0 0 8px; }
h3 { font-size:1rem; margin:16px 0 8px; }
a { color: var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 16px; }
.card.narrow { max-width:460px; margin:48px auto; }
.muted { color:var(--muted); font-size:.92rem; }
.meta { color:var(--muted); margin:-4px 0 12px; }
.right { text-align:right; }
label { display:block; font-size:.92rem; color:var(--muted); margin:0 0 12px; }
label.check { display:flex; gap:8px; align-items:center; color:var(--text); font-size:1rem; }
input[type=text], input[type=email], input[type=date], input[type=time], input[type=number], select, textarea, input:not([type]) {
  display:block; width:100%; margin-top:4px; padding:9px 10px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:6px; min-height:42px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
input[type=checkbox] { width:18px; height:18px; }
fieldset { border:1px solid var(--line); border-radius:6px; margin:0 0 12px; padding:8px 12px; }
legend { color:var(--muted); font-size:.92rem; padding:0 4px; }
.btn { display:inline-block; padding:9px 16px; font:inherit; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); text-decoration:none; cursor:pointer; min-height:42px; }
.btn.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
.btn.small { padding:4px 10px; min-height:32px; font-size:.9rem; }
.btn:hover { filter:brightness(.96); }
.inline { display:inline; margin:0; }
.stack > * { max-width:520px; }
.row-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:12px; }
.row-form label { margin:0; }
.gen { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.gen label { margin:0; }
.flash { padding:10px 14px; border-radius:8px; margin:0 0 16px; border:1px solid var(--line); }
.flash.ok { background:var(--ok-bg); color:var(--ok); }
.flash.err { background:var(--err-bg); color:var(--err); }
.flash ul { margin:6px 0 0; padding-left:20px; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:.85rem; color:var(--muted); font-weight:600; }
table.entries { min-width:760px; }
table.entries td { padding:4px 3px; }
table.entries input { margin:0; padding:6px 7px; min-height:38px; }
table.entries td:nth-child(1) { width:150px; }
table.entries td:nth-child(2), table.entries td:nth-child(3) { width:105px; }
table.entries td:nth-child(5) { width:95px; }
table.entries td.hrs { width:50px; text-align:center; font-weight:600; }
tr.warn td { background:var(--warn-bg); }
tr.inactive td { color:var(--muted); }
.badge { display:inline-block; padding:2px 8px; border-radius:99px; font-size:.82rem; border:1px solid var(--line); background:var(--bg); }
.badge.s-submitted, .badge.s-checked { border-color:var(--accent); color:var(--accent); }
.badge.s-sent { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.badge.s-approved { background:var(--err-bg); color:var(--err); border-color:transparent; }
.sigpad canvas { display:block; width:100%; max-width:600px; aspect-ratio:3/1; background:#fff; border:1px dashed var(--muted); border-radius:6px; touch-action:none; cursor:crosshair; }
.sig-actions { display:flex; justify-content:space-between; align-items:center; max-width:600px; margin-top:6px; }
.sig-existing img, img.sigpreview { display:block; background:#fff; border:1px solid var(--line); border-radius:6px; max-width:300px; padding:4px; margin:4px 0 8px; }
.history { margin:0; padding-left:18px; }
[hidden] { display:none !important; }
@media (max-width:600px) { h1 { font-size:1.3rem; } .card { padding:12px; } }