:root{
  --ink:#1c1b19; --paper:#faf8f4; --surface:#ffffff; --surface-2:#f4f0e9;
  --line:#e4ddd0; --line-strong:#cfc5b2;
  --accent:#a3273c; --accent-ink:#ffffff; --accent-tint:#f7e7e8;
  --muted:#746b5c; --muted-2:#8f8672;
  --status-sent-bg:#f2e6cf; --status-sent-fg:#8a5a10;
  --status-opened-bg:#dce9f5; --status-opened-fg:#25578a;
  --status-done-bg:#dcefdf; --status-done-fg:#1f6b3a;
  --shadow: 0 1px 2px rgba(28,27,25,.06), 0 6px 20px -8px rgba(28,27,25,.14);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#efe9de; --paper:#161310; --surface:#1e1a15; --surface-2:#26211a;
    --line:#3a3226; --line-strong:#4d4433;
    --accent:#e2637a; --accent-ink:#241014; --accent-tint:#3a1c22;
    --muted:#b6ab97; --muted-2:#9a9080;
    --status-sent-bg:#3a2f16; --status-sent-fg:#e3b158;
    --status-opened-bg:#182b3c; --status-opened-fg:#8bbbe6;
    --status-done-bg:#153524; --status-done-fg:#7fd6a0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --ink:#efe9de; --paper:#161310; --surface:#1e1a15; --surface-2:#26211a;
  --line:#3a3226; --line-strong:#4d4433;
  --accent:#e2637a; --accent-ink:#241014; --accent-tint:#3a1c22;
  --muted:#b6ab97; --muted-2:#9a9080;
  --status-sent-bg:#3a2f16; --status-sent-fg:#e3b158;
  --status-opened-bg:#182b3c; --status-opened-fg:#8bbbe6;
  --status-done-bg:#153524; --status-done-fg:#7fd6a0;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  margin:0; padding-inline:20px; padding-block:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Source Serif 4', Georgia, serif; font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0;}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
a{ color:var(--accent); }
button{ font-family:inherit; }
::selection{ background:var(--accent-tint); }

#app{ max-width:1180px; margin:0 auto; }
header.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:22px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .mark{ font-family:'Source Serif 4',serif; font-weight:700; font-size:22px; color:var(--accent); letter-spacing:-.02em; }
.brand .sub{ font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.top-tag{ font-size:12px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:5px 10px; border-radius:999px; }
.top-actions{ display:flex; align-items:center; gap:10px; }
.top-actions button{ background:none; border:1px solid var(--line-strong); color:var(--muted); font-size:12.5px; padding:6px 12px; border-radius:7px; cursor:pointer; }

.admin-grid{ display:grid; grid-template-columns: 340px 1fr; gap:28px; padding-block:28px 60px; align-items:start; }
@media (max-width:860px){ .admin-grid{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.composer{ padding:22px; position:sticky; top:20px; }
.composer h2{ font-size:19px; margin-bottom:4px; }
.composer .hint{ font-size:13px; color:var(--muted); margin:4px 0 18px; line-height:1.45; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date]{
  width:100%; padding:9px 11px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--paper); color:var(--ink); font-size:14.5px;
}
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
fieldset{ border:1px solid var(--line); border-radius:8px; padding:10px 12px 12px; margin:0 0 14px; }
fieldset legend{ font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:0 4px; }
.taxgrid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
.taxgrid label{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink); text-transform:none; font-weight:400; }
.btn{
  appearance:none; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:14.5px; padding:10px 16px; border-radius:8px; cursor:pointer; width:100%;
}
.btn:hover{ filter:brightness(1.06); }
.btn.ghost{ background:transparent; color:var(--accent); }
.btn.small{ width:auto; padding:7px 12px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.error-msg{ font-size:13px; color:var(--accent); margin-top:8px; }

.link-box{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line-strong); }
.link-box .lbl{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.link-row{ display:flex; gap:6px; }
.link-row input{ flex:1; font-size:12.5px; padding:8px 9px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-2); color:var(--muted); }
.link-row .btn{ width:auto; }
.link-open{ display:inline-block; margin-top:10px; font-size:13px; }

.sends-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.sends-head h2{ font-size:19px; }
.sends-head .count{ font-size:13px; color:var(--muted); }
.send-row{
  display:grid; grid-template-columns: 1fr auto auto auto; gap:14px; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.send-row:last-child{ border-bottom:none; }
.send-row .who{ min-width:0; }
.send-row .who .name{ font-weight:600; font-size:14.5px; }
.send-row .who .mail{ font-size:12.5px; color:var(--muted); }
.pill{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; letter-spacing:.02em; }
.pill.sent{ background:var(--status-sent-bg); color:var(--status-sent-fg); }
.pill.opened{ background:var(--status-opened-bg); color:var(--status-opened-fg); }
.pill.completed{ background:var(--status-done-bg); color:var(--status-done-fg); }
.send-row .when{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.empty{ padding:54px 20px; text-align:center; color:var(--muted); }
.empty .glyph{ font-size:28px; margin-bottom:10px; opacity:.7; }
.empty .t{ font-size:15px; color:var(--ink); font-weight:600; margin-bottom:4px; }
.empty .s{ font-size:13.5px; max-width:340px; margin:0 auto; line-height:1.5; }

.veil{ position:fixed; inset:0; background:rgba(20,17,12,.5); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow:auto; z-index:50; }
.detail{ background:var(--surface); border-radius:14px; width:min(760px,100%); box-shadow:var(--shadow); }
.detail .dhead{ display:flex; justify-content:space-between; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); gap:12px; }
.detail .dhead h3{ font-size:18px; }
.detail .dhead .meta{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.detail .close{ background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; }
.detail .dbody{ padding:20px 22px; }
.detail .pages{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.detail .pages img{ width:100%; border:1px solid var(--line); border-radius:6px; display:block; }
.detail .actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }

.login-wrap{ max-width:380px; margin:80px auto; }
.login-wrap h1{ font-size:24px; margin-bottom:6px; }
.login-wrap .sub{ color:var(--muted); font-size:14px; margin-bottom:22px; }

#view-client{ padding-block:26px 80px; }
.steps{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.step{ font-size:12.5px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--surface); }
.step.active{ border-color:var(--accent); color:var(--accent); font-weight:600; }
.intro{ margin-bottom:22px; max-width:640px; }
.intro p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:8px; }
.doc-section{ margin-bottom:36px; }
.doc-section .sec-title{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.doc-section .sec-title .num{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc-section .sec-title h3{ font-size:16.5px; }
.page-wrap{ position:relative; width:100%; max-width:700px; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.page-wrap img{ display:block; width:100%; height:auto; }
.ov{ position:absolute; }
.ov input, .ov textarea{
  position:absolute; inset:0; width:100%; height:100%; border:1.5px solid transparent; background:rgba(163,39,60,.05);
  border-radius:3px; font-family:'Public Sans',sans-serif; color:#16233a; padding:2px 4px; resize:none;
}
.ov input:focus, .ov textarea:focus{ outline:none; border-color:var(--accent); background:rgba(163,39,60,.09); }
.ov input.readonly, .ov textarea.readonly{ background:transparent; color:#1c1b19; pointer-events:none; }
.ov textarea{ line-height:1.15; overflow:hidden; }
.ov.check{ display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ov.check .mark{ font-size:120%; font-weight:700; color:#16233a; opacity:0; }
.ov.check.on .mark{ opacity:1; }
.ov.check.readonly{ cursor:default; }
.ov.sigimg{ display:flex; align-items:flex-end; justify-content:flex-start; padding-bottom:2%; }
.ov.sigimg img{ max-width:100%; max-height:100%; object-fit:contain; object-position:left bottom; }

.field-note{ font-size:12px; color:var(--muted); margin-top:4px; }
.row2{ display:flex; gap:14px; flex-wrap:wrap; }
.row2 > div{ flex:1; min-width:200px; }

.sigpad-wrap{ border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:14px; max-width:520px; }
.sigtabs{ display:flex; gap:6px; margin-bottom:10px; }
.sigtabs button{ font-size:12.5px; padding:6px 11px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer; }
.sigtabs button.on{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint); font-weight:600; }
canvas#sigcanvas{ width:100%; height:120px; border:1.5px dashed var(--line-strong); border-radius:6px; touch-action:none; cursor:crosshair; background:var(--paper); }
.sig-type input{ width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:6px; font-family:'Caveat',cursive; font-size:28px; background:var(--paper); color:var(--ink); }
.sigpad-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.sigpad-actions .clear{ font-size:12.5px; color:var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline; }
.sig-applied{ font-size:12.5px; color:var(--status-done-fg); margin-top:6px; }

.submit-bar{ position:sticky; bottom:16px; margin-top:10px; display:flex; justify-content:center; }
.submit-bar .inner{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:14px; max-width:640px; width:100%; }
.submit-bar .txt{ font-size:13px; color:var(--muted); flex:1; }
.submit-bar .btn{ width:auto; padding:11px 22px; }

.center-msg{ text-align:center; padding:100px 20px; max-width:440px; margin:0 auto; }
.center-msg .glyph{ font-size:34px; margin-bottom:14px; }
.center-msg h2{ font-size:21px; margin-bottom:10px; }
.center-msg p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.success .glyph{ color:var(--status-done-fg); }

[hidden]{ display:none !important; }
@media (max-width:480px){ .send-row{ grid-template-columns:1fr; row-gap:6px; } .send-row .pill{ justify-self:start; } }