:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one narrow column, phone-first; the agreement is a receipt-like card, the only object on the page. */
:root{
  --bg:#F5F7FA; --fg:#0F0E47; --muted:#5B6480; --line:#D6DCE8; --surface:#FFFFFF; --paste-bg:#FFFFFF; --paste-line:#8E98B4;
  --accent:#1F7A4D; --accent-ink:#FFFFFF; --accent-soft:#E2F1E9;
  --warn:#8F4D08; --warn-soft:#FBEBD6; --bad:#B3362B; --bad-soft:#F8E1DE;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0930; --fg:#E8EAF5; --muted:#9EA3C4; --line:#272657; --surface:#14134A; --paste-bg:#1C1B5E; --paste-line:#4F4E91;
  --accent:#4ABF7C; --accent-ink:#06210F; --accent-soft:#163A2B;
  --warn:#E8A452; --warn-soft:#3A2A14; --bad:#F08A80; --bad-soft:#3E1F1C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0930; --fg:#E8EAF5; --muted:#9EA3C4; --line:#272657; --surface:#14134A; --paste-bg:#1C1B5E; --paste-line:#4F4E91;
  --accent:#4ABF7C; --accent-ink:#06210F; --accent-soft:#163A2B;
  --warn:#E8A452; --warn-soft:#3A2A14; --bad:#F08A80; --bad-soft:#3E1F1C; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;margin:0;padding-inline:16px;padding-block:0 48px}
.wrap{max-width:520px;margin:0 auto}
header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:20px 8px}
header a{color:inherit;text-decoration:none}
.brand{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--accent);margin-left:4px}
.tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;text-wrap:balance;margin:16px 0 8px}
h2{font-family:var(--display);font-weight:700;font-size:18px;margin:28px 0 10px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:13px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
textarea,input,select{width:100%;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-width:0}
textarea{min-height:120px;resize:vertical}
textarea:focus,input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 140px;min-width:0}
button{font:inherit;font-weight:600;cursor:pointer;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:10px 14px}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.link{border:0;background:none;padding:4px 0;color:var(--accent);font-weight:500;text-decoration:underline}
button[disabled]{opacity:.55;cursor:default}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions button{flex:1 1 auto}
.note{font-size:13px;color:var(--muted);margin-top:8px}
.err{color:var(--bad);font-size:14px;margin-top:8px}

/* the receipt */
.receipt{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:20px 18px 22px;position:relative;margin-top:16px}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;background:
  radial-gradient(circle at 6px 8px,var(--bg) 5px,transparent 5.5px) repeat-x;background-size:14px 8px}
.r-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.r-title{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;margin:0}
.r-id{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;padding-top:6px}
.terms{list-style:none;padding:0;margin:14px 0 0;border-top:1px dashed var(--line)}
.terms li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px}
.terms li span:first-child{color:var(--muted);flex:0 0 auto}
.terms li span:last-child{text-align:right;min-width:0}
.amount{font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.conds{margin:12px 0 0;padding-left:18px;font-size:14px}
.conds li{margin-bottom:4px}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.party{border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-width:0}
.party b{display:block;font-weight:600;overflow-wrap:anywhere}
.party .st{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.party.ok{border-color:var(--accent);background:var(--accent-soft)}
.party.ok .st{color:var(--accent)}
.party.wait .st{color:var(--warn)}
.stamp{position:absolute;right:14px;top:14px;transform:rotate(-8deg);font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;border-radius:4px;padding:3px 8px;opacity:.9}
.stamp.agreed{color:var(--accent)}
.stamp.done{color:var(--accent)}
.stamp.cancelled{color:var(--bad)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.due{margin-top:12px;font-size:14px}
.cal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.cal .btnlink{display:inline-block;padding:8px 14px;font-size:14px}
.cal .link{font-size:13px}
.history{list-style:none;padding:0;margin:8px 0 0;font-size:13px;color:var(--muted)}
.history li{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.history time{font-family:var(--mono);font-size:12px;flex:0 0 auto}

/* lists */
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.list a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:inherit;text-decoration:none}
.list a:hover{border-color:var(--accent)}
.list .t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .a{font-family:var(--mono);font-size:14px;flex:0 0 auto}
.empty{border:1px dashed var(--line);border-radius:6px;padding:16px;color:var(--muted);font-size:14px}
.example{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.share{background:var(--accent-soft);border-radius:6px;padding:12px 14px;margin-top:16px}
.tell{background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:12px 14px;margin-top:16px}
.share code{display:block;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;margin:6px 0 10px;color:var(--fg)}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.how{display:grid;gap:6px;margin:0;padding-left:20px;font-size:14px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
.foot{font-size:12px;color:var(--muted);margin-top:40px;border-top:1px solid var(--line);padding-top:12px}
.btnlink{display:block;text-align:center;font-weight:600;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:10px 14px;text-decoration:none}
.btnlink:hover{opacity:.92}
.r-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px}
a{color:var(--accent)}
.banner{background:var(--warn-soft);color:var(--fg);border-radius:6px;padding:10px 12px;font-size:14px;margin-top:12px}
.banner .link{display:inline;padding:0}
.mine{margin-top:16px;font-size:14px}
.mine summary{cursor:pointer;color:var(--muted)}
.mine code{display:block;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;margin:6px 0 8px}
/* The paste box must be the obvious thing on the page, in both themes. */
.pastebox{position:relative}
.pastebox textarea{min-height:150px;padding-right:84px;background:var(--paste-bg);border:2px solid var(--paste-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.pastebox textarea:focus{border-color:var(--accent);outline:none}
.pastebox textarea::placeholder{color:var(--muted);opacity:1;font-size:16px}
.pastebtn{position:absolute;right:10px;top:10px;padding:6px 12px;font-size:14px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:480px){header{flex-wrap:wrap;gap:2px 12px}header .tag{flex-basis:100%;font-size:11px}}
/* invoice */
.invcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-top:14px}
.invcard .actions{margin-top:10px}.invcard .actions .btnlink{flex:1 1 auto}
.inv-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inv-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.inv-meta{text-align:right;font-size:14px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.inv-parties>div{min-width:0;overflow-wrap:anywhere}
.inv-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.inv-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.inv-table td{padding:10px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.inv-table .num{text-align:right;font-family:var(--mono);white-space:nowrap}
.inv-table .total td{border-bottom:0;font-weight:600;font-size:18px;padding-top:12px}
.inv-pay{margin-top:16px;padding:12px 14px;background:var(--accent-soft);border-radius:6px;font-size:14px}
@media print{body{background:#fff;color:#000}.noprint,header .tag,.foot,.toast{display:none!important}.receipt{border:1px solid #999;box-shadow:none}.receipt::after{display:none}.inv-pay{background:#eee}}
.receipt.invoice .stamp{top:12px;right:12px}
.receipt.invoice .inv-head{padding-top:30px}
.theme{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;width:34px;height:34px;padding:0;font-size:16px;line-height:1;flex:0 0 auto}
.theme:hover{border-color:var(--accent)}
@media (max-width:480px){header{align-items:center}header .brand{flex:1 1 auto}header .theme{order:2}header .tag{order:3}}
.pastehint{margin:8px 0 0;padding:10px 12px;border-radius:6px;background:var(--warn-soft);font-size:14px}
.shots{margin-top:8px}
.shots .link{font-size:14px}
.shotlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:flex-start}
.shotlist p{flex-basis:100%;margin:0}
.shot{position:relative;display:inline-block}
.shot img{width:72px;height:128px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:6px;display:block;background:var(--surface)}
.shot button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:14px;line-height:20px;cursor:pointer}