@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/Spectral-Italic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat.ttf") format("truetype"); font-display: swap; }

:root { --ivory: #f6f1ea; --ink: #2d2d2d; --crimson: #b01e2d; --line: #ddd3c6; --muted: #7a7168; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: "Spectral", Georgia, serif; font-size: 17px; line-height: 1.6; }
header.site { text-align: center; padding: 24px 16px 8px; }
header.site .brand { width: 180px; max-width: 50vw; mix-blend-mode: multiply; }
.topnav { margin-top: 8px; display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.topnav a, .link { color: var(--crimson); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
main { max-width: 860px; margin: 0 auto; padding: 8px 16px 40px; }
body.admin main { max-width: 1100px; }
footer.site { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 16px 40px; }
.card { background: #fffdf9; border: 1px solid var(--line); border-radius: 6px; padding: 28px 32px; margin: 18px 0; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card.narrow { max-width: 420px; margin: 40px auto; }
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 12px; }
h2 { font-size: 1.3rem; color: var(--crimson); margin-top: 0; }
.contract-title { text-align: center; letter-spacing: .18em; font-size: 1.5rem; }
.contract-ref { text-align: center; color: var(--muted); font-size: .9rem; margin-top: -8px; }
.contract h3 { font-size: 1rem; letter-spacing: .04em; margin: 20px 0 4px; }
.contract .divider { text-align: center; color: var(--crimson); letter-spacing: .5em; }
.contract .clauses li { margin-bottom: 12px; text-align: justify; }
.contract .package-name { color: var(--crimson); }
.small, .muted { color: var(--muted); font-size: .9rem; }
.agree { font-style: italic; }
label { display: block; margin: 12px 0; font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input:not([type]), textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 4px; }
input:focus, textarea:focus { outline: 2px solid rgba(176,30,45,.35); border-color: var(--crimson); }
input[readonly] { background: var(--ivory); }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 3px; accent-color: var(--crimson); }
.btn { display: inline-block; background: var(--crimson); color: #fff; border: 1px solid var(--crimson); border-radius: 4px; padding: 11px 22px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--crimson); }
.btn.danger { background: #fff; color: #7d1420; border-color: #7d1420; }
form.inline { display: inline; }
.inline-check { display: inline-flex; margin: 0 8px; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.grid .wide { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: 4px; padding: 8px 16px; margin: 8px 0; }
legend { color: var(--crimson); font-weight: 600; padding: 0 6px; }
.flash { padding: 12px 16px; border-radius: 4px; margin: 12px 0; background: #eef6ee; border: 1px solid #b9d8b9; }
.flash.err { background: #fbecec; border-color: #e3b5b9; color: #7d1420; }
.flash input.copy { font-family: monospace; font-size: .85rem; }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
table.audit td { font-size: .82rem; }
table.audit td.ua { max-width: 340px; word-break: break-word; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; border: 1px solid var(--line); background: var(--ivory); }
.s-sent { border-color: #c9a227; } .s-client_signed { border-color: #3d7ab8; } .s-countersigned { background: #e5f2e5; border-color: #5a9a5a; } .s-void { color: #888; text-decoration: line-through; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 8px 0; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; }
.hash { font-family: monospace; font-size: .8rem; word-break: break-all; }
.chain.ok::before { content: "\2713  "; color: #3d7a3d; } .chain.bad { color: var(--crimson); font-weight: 600; }
.sigpad .tabs { display: flex; gap: 20px; }
.sigpad .tabs label { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 6px 0; }
.draw-area { position: relative; }
.draw-area canvas { width: 100%; height: auto; aspect-ratio: 900 / 260; background: #fff; border: 1px dashed #b9ada0; border-radius: 4px; touch-action: none; display: block; cursor: crosshair; }
.draw-area .clear { position: absolute; right: 10px; top: 6px; font-size: .9rem; }
.typed-preview { font-family: "Caveat", cursive; font-size: 2.6rem; color: #1a2350; min-height: 3.4rem; margin: 6px 0; border-bottom: 1px solid var(--line); }
.hint { font-size: .85rem; color: var(--muted); }
.sig-thumb { max-height: 60px; max-width: 220px; background: #fff; }
.privacy { font-size: .82rem; color: var(--muted); margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.signatures .sig-img { max-height: 70px; }
ul.links { padding-left: 18px; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .card { padding: 18px 16px; }
  .grid { grid-template-columns: 1fr; }
  .contract .clauses { padding-left: 22px; }
  .contract .clauses li { text-align: left; }
  .btn { width: 100%; text-align: center; padding: 14px; }
  form.inline { display: block; width: 100%; }
}
.flag { color: var(--crimson); font-weight: 600; }
select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-weight: 400; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.clause-form fieldset { margin: 14px 0; }
.clause-form textarea { font-size: .95rem; line-height: 1.5; }
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-opt { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin: 6px 0; background: #fff; }
.type-opt:has(input:checked) { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson) inset; }
.type { display: inline-block; font-size: .8rem; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--line); white-space: nowrap; }
.type.t-classic { background: #f3e7e8; border-color: #d9aeb3; color: #7d1420; }
.type.t-online { background: #eef2f7; border-color: #b9c8da; color: #24476b; }
.row-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.row-form label { flex: 1 1 280px; }
.row-form .btn { margin-bottom: 12px; }
input[type=file] { display: block; margin-top: 6px; font: inherit; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .type-row { grid-template-columns: 1fr; } }
.contract table.addons, .contract table.summary { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.contract table.addons td, .contract table.summary td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.contract td.amt { text-align: right; white-space: nowrap; }
.contract table.summary tr.total td { font-weight: 600; border-top: 2px solid var(--ink); }
.addon-opt { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: #fff; }
.addon-opt .price { color: var(--crimson); font-weight: 600; }
.totals-box { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; max-width: 420px; margin: 10px 0; font-size: .95rem; }
.totals-box .t { font-weight: 600; border-top: 1px solid var(--ink); padding-top: 4px; }
.choice{border:1px solid #d9cfc2;border-radius:6px;padding:12px 14px;margin:14px 0}
.choice-opt{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid #e5dccf;border-radius:6px;margin:8px 0;cursor:pointer;background:#fffdf9}
.choice-opt.on{border-color:#b01e2d;box-shadow:0 0 0 1px #b01e2d}
.choice-opt input{margin-top:4px}
.choice-body{display:flex;flex-direction:column;gap:3px;flex:1}
.choice-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.choice-opt .adj{color:#b01e2d;font-size:.9em}
.choice-opt .incl{font-size:.88em;color:#555}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px;margin:8px 0}