:root{
    --paper:#FFFFFF;
    --paper-2:#FFFFFF;
    --ink:#111111;
    --ink-soft:#555555;
    --ledger:#000000;
    --ledger-dark:#000000;
    --brass:#000000;
    --brass-light:#CCCCCC;
    --stamp:#000000;
    --line:#DDDDDD;
    --page-bg:#F4F4F4;
    --danger:#000000;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--page-bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    min-height:100vh;
  }
  .topbar{
    background:#000000;
    color:#FFFFFF;
    padding:22px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    border-bottom:1px solid #000000;
  }
  .topbar h1{
    font-family:'Zilla Slab', serif;
    font-weight:600;
    font-size:22px;
    margin:0;
    letter-spacing:0.3px;
  }
  .topbar span{
    font-size:13px;
    color:#BBBBBB;
    letter-spacing:0.5px;
    text-transform:uppercase;
  }
  .layout{
    display:grid;
    grid-template-columns: minmax(320px, 460px) 1fr;
    gap:32px;
    max-width:1180px;
    margin:0 auto;
    padding:32px 28px 80px;
    align-items:start;
  }
  @media (max-width: 880px){
    .layout{grid-template-columns:1fr; padding:20px 16px 60px;}
  }
  /* Grid items default to min-width:auto, which lets the fixed-width A5
     receipt preview (148mm) force its grid column — and the whole
     .layout grid — wider than the actual viewport. That horizontal
     overflow is what exposes page-bg gray past the topbar on zoom-out.
     min-width:0 lets the column shrink to the real available width so
     .receipt-scale-wrap's own overflow:hidden/scaling can do its job. */
  .layout > *{
    min-width:0;
  }

  /* ---------- FORM ---------- */
  .form-card{
    background:var(--paper-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:24px 24px 8px;
  }
  fieldset{
    border:none;
    padding:0;
    margin:0 0 22px;
  }
  legend{
    font-family:'Zilla Slab', serif;
    font-weight:600;
    font-size:14px;
    color:var(--ledger);
    text-transform:uppercase;
    letter-spacing:1px;
    padding:0 0 8px;
    border-bottom:2px solid var(--brass-light);
    width:100%;
    margin-bottom:14px;
  }
  .field{
    margin-bottom:14px;
  }
  .field label{
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--ink-soft);
    margin-bottom:5px;
    letter-spacing:0.2px;
  }
  .field input, .field textarea{
    width:100%;
    font-family:'IBM Plex Sans', sans-serif;
    font-size:14px;
    padding:9px 11px;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    color:var(--ink);
  }
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:var(--ledger);
    box-shadow:0 0 0 3px rgba(0,0,0,0.12);
  }
  .field .hint{
    font-size:11px;
    color:var(--ink-soft);
    opacity:0.75;
    margin-top:4px;
  }
  .row2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .field.readonly input{
    background:#F1EDE1;
    color:var(--ink-soft);
    font-family:'IBM Plex Mono', monospace;
  }

  .actions{
    position:sticky;
    bottom:0;
    background:var(--paper-2);
    padding:14px 0 22px;
    display:flex;
    gap:10px;
  }
  button{
    font-family:'IBM Plex Sans', sans-serif;
    font-weight:500;
    font-size:14px;
    border-radius:6px;
    padding:11px 16px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform 0.08s ease;
  }
  button:active{transform:scale(0.98);}
  .btn-primary{
    background:var(--ledger);
    color:#fff;
    flex:1;
  }
  .btn-primary:hover{background:#222222;}
  .btn-secondary{
    background:transparent;
    color:var(--ledger);
    border:1px solid var(--ledger);
  }
  .btn-secondary:hover{background:rgba(0,0,0,0.06);}
  #pdf-status{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:8px;
    min-height:14px;
  }

  /* ---------- RECEIPT PREVIEW ---------- */
  .preview-wrap{
    position:sticky;
    top:24px;
  }
  /* Clips/centers the fixed-size A5 receipt when it's wider than the
     available screen width, and is given an explicit (scaled) height
     via JS so it doesn't leave blank space below on narrow screens. */
  .receipt-scale-wrap{
    width:100%;
    overflow:hidden;
    display:flex;
    justify-content:center;
    /* Without this, the flex default (align-items:stretch) forces
       .receipt-frame's height to match this wrapper's own (JS-set)
       height on every layout pass. That corrupts the *next* JS
       measurement of the frame's natural height (it stops reflecting
       real content height), so once the receipt's content grows taller
       than a previous measurement it silently overflows this
       overflow:hidden box instead of being remeasured and rescaled —
       i.e. the receipt gets clipped instead of shrinking to fit.
       flex-start keeps the frame at its true auto/content height so
       JS always measures it correctly. */
    align-items:flex-start;
  }
  .receipt-frame{
    background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.03) 6px 7px);
    padding-top:14px;
    border-radius:2px;
    /* Fixed to true A5 width so the on-screen preview always matches
       the physical size of the exported PDF, on any device. Narrower
       viewports scale it down uniformly (see JS) rather than
       stretching/reflowing it. */
    width:148mm;
    flex:none;
    transform-origin: top center;
    transform: scale(var(--r-scale, 1));
  }
  .tear-edge{
    height:14px;
    background:
      radial-gradient(circle at 10px 0, transparent 6px, var(--paper) 7px) top left / 20px 14px repeat-x;
    margin-bottom:-1px;
  }
  #receipt{
    background:var(--paper);
    padding:38px 40px 34px;
    position:relative;
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.35);
    overflow:hidden;
  }
  .r-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    border-bottom:2px solid var(--ledger);
    padding-bottom:16px;
    margin-bottom:22px;
  }
  .r-brand-name{
    font-family:'Zilla Slab', serif;
    font-weight:700;
    font-size:24px;
    color:var(--ledger);
    margin:0 0 4px;
    line-height:1.15;
  }
  .r-brand-meta{
    font-size:12px;
    color:var(--ink-soft);
    line-height:1.6;
  }
  .r-status{
    text-align:right;
  }
  .r-status .label{
    font-family:'Zilla Slab', serif;
    font-size:13px;
    letter-spacing:2px;
    color:var(--brass);
    text-transform:uppercase;
    font-weight:600;
  }
  .r-status .invoice{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink);
    margin-top:6px;
  }
  .r-status .invoice b{color:var(--ledger);}

  .r-billto{
    margin-bottom:24px;
  }
  .r-block .eyebrow{
    font-family:'Zilla Slab', serif;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--brass);
    font-weight:600;
    margin-bottom:6px;
  }
  .r-block .name{
    font-weight:600;
    font-size:15px;
    color:var(--ink);
  }
  .r-block .sub{
    font-size:12.5px;
    color:var(--ink-soft);
    line-height:1.6;
    margin-top:2px;
  }

  table.r-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:6px;
  }
  table.r-table thead th{
    text-align:left;
    font-family:'Zilla Slab', serif;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff;
    background:var(--ledger);
    padding:9px 12px;
  }
  table.r-table thead th:last-child{text-align:right;}
  table.r-table td{
    padding:10px 12px;
    font-size:13.5px;
    border-bottom:1px solid var(--line);
  }
  table.r-table td.amt{
    text-align:right;
    font-family:'IBM Plex Mono', monospace;
  }
  table.r-table tr.total-row td{
    border-top:2px solid var(--ledger);
    border-bottom:none;
    font-weight:600;
    font-size:15px;
    padding-top:12px;
  }
  table.r-table tr.total-row td.amt{
    color:var(--ledger);
    font-family:'IBM Plex Mono', monospace;
  }
  tr.balance-row td{
    font-weight:600;
  }
  tr.balance-row.settled td.amt{color:var(--ink);}
  tr.balance-row.owing td.amt{color:var(--ink);}

  .r-footer{
    margin-top:26px;
    padding-top:14px;
    border-top:1px dashed var(--line);
    font-size:11.5px;
    color:var(--ink-soft);
    text-align:center;
  }

  .r-billto{
    position:relative;
  }
  .stamp{
    position:absolute;
    top:-22px;    /* exactly fills r-head's margin-bottom, i.e. down to the divider line */
    bottom:-24px; /* exactly fills r-billto's margin-bottom, i.e. up to the table header */
    right:44px;
    width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.9;
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .stamp img{
    width:100%;
    max-height:100%;
    display:block;
  }
  .stamp svg{
    width:100%;
    height:100%;
    display:block;
    transform:rotate(-9deg);
  }
  .stamp.hidden{display:none;}

  @media (max-width: 880px){
    .preview-wrap{position:static;}
    /* #receipt keeps its full A5-proportioned padding/size; .receipt-frame
       is scaled down as a whole (see JS) so it still matches the PDF
       exactly, just smaller on screen. */
  }