:root{
    --ink:#1B1B1A;
    --paper:#FBFAF7;
    --workspace:#15211C;
    --workspace-2:#1d2c25;
    --green:#0F6B4F;
    --green-soft:#e4efe9;
    --rust:#B4451F;
    --rust-soft:#f6e7df;
    --line:#D8D4C8;
    --muted:#6B6B66;
    --field-bg:#ffffff;
    --field-border:#cfd6d1;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--workspace);
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .app{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:0;
    min-height:100vh;
  }

  /* ---------- Controls panel ---------- */
  .controls{
    background:linear-gradient(180deg,var(--workspace) 0%,var(--workspace-2) 100%);
    color:#eaf1ed;
    padding:28px 26px 40px;
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    overflow-y:auto;
  }
  .controls h1{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:19px;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin:0 0 4px;
  }
  .controls .sub{
    font-size:12.5px;
    color:#9db5aa;
    margin:0 0 26px;
    line-height:1.5;
  }
  .group{margin-bottom:18px;}
  .group.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  label{
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#a9c2b6;
    margin-bottom:6px;
  }
  input,select,textarea{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:14px;
    color:var(--ink);
    background:var(--field-bg);
    border:1px solid var(--field-border);
    border-radius:7px;
    padding:9px 11px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
  }
  input:focus,select:focus,textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(15,107,79,.18);
  }
  textarea{resize:vertical;min-height:58px;line-height:1.45;}
  .money-input{position:relative;}
  .money-input input{padding-left:26px;font-family:'IBM Plex Mono',monospace;}
  .money-input::before{
    content:attr(data-symbol);
    position:absolute;
    left:11px;top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
    pointer-events:none;
  }
  .balance-readout{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:11px 13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .balance-readout .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a9c2b6;}
  .balance-readout .val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:15px;}
  .balance-readout.settled .val{color:#7fe0bb;}
  .balance-readout.owing .val{color:#ffb38a;}

  .actions{display:flex;gap:10px;margin-top:26px;}
  .btn{
    flex:1;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:12px 10px;
    border-radius:8px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .08s,filter .15s;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--green);color:#fff;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:transparent;color:#cfe3da;border-color:rgba(255,255,255,.22);}
  .btn-ghost:hover{background:rgba(255,255,255,.07);}
  .hint{font-size:11.5px;color:#8aa79a;margin-top:14px;line-height:1.5;}
  .panel-footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:12px;
  }
  .panel-footer a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#9db5aa;
    text-decoration:none;
    transition:color .15s;
  }
  .panel-footer a:hover{color:#eaf1ed;}
  .panel-footer-sep{color:#6a8578;}
  .footer-icon{flex-shrink:0;}

  /* ---------- Stage ---------- */
  .stage{
    padding:46px 40px 60px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow-y:auto;
  }

  /* ---------- Receipt ---------- */
  .receipt{
    background:var(--paper);
    width:100%;
    max-width:560px;
    padding:46px 48px 40px;
    border-radius:4px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.1);
    position:relative;
    border-top:6px solid var(--green);
  }
  .r-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .r-logo img{
    max-height:48px;
    max-width:160px;
    object-fit:contain;
    display:block;
    margin-bottom:10px;
  }
  .r-issuer .name{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:21px;
    letter-spacing:.01em;
    line-height:1.1;
    color:var(--ink);
    word-break:break-word;
  }
  .r-issuer .contact{
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
    line-height:1.5;
    white-space:pre-line;
  }
  .r-badge{
    text-align:right;
    flex-shrink:0;
  }
  .r-badge .kicker{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--green);
  }
  .r-badge .rno{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    color:var(--ink);
    margin-top:8px;
  }
  .r-badge .rdate{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
  }

  .r-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 26px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .r-meta .cell .k{
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
  }
  .r-meta .cell .v{
    font-size:14.5px;
    font-weight:500;
    color:var(--ink);
    line-height:1.4;
    word-break:break-word;
    white-space:pre-line;
  }
  .r-meta .cell.full{grid-column:1 / -1;}

  .r-amount{
    margin:24px 0 4px;
    background:var(--green-soft);
    border:1px solid #cfe2d8;
    border-radius:10px;
    padding:20px 22px;
    position:relative;
    overflow:hidden;
  }
  .r-amount .k{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--green);
    font-weight:600;
  }
  .r-amount .big{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    font-size:34px;
    color:var(--ink);
    line-height:1.1;
    margin-top:6px;
    letter-spacing:-.01em;
  }
  .r-amount .words{
    font-size:12.5px;
    color:var(--muted);
    margin-top:8px;
    font-style:italic;
    line-height:1.5;
  }

  .r-ledger{
    margin-top:22px;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .r-ledger .lr{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:11px 16px;
    font-size:13.5px;
  }
  .r-ledger .lr:not(:last-child){border-bottom:1px solid var(--line);}
  .r-ledger .lr .k{color:var(--muted);}
  .r-ledger .lr .v{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--ink);}
  .r-ledger .lr.balance{background:#fff;}
  .r-ledger .lr.balance .k{font-weight:600;color:var(--ink);text-transform:uppercase;font-size:11px;letter-spacing:.06em;}
  .r-ledger .lr.balance.owing{background:var(--rust-soft);}
  .r-ledger .lr.balance.owing .v{color:var(--rust);font-weight:600;}
  .r-ledger .lr.balance.settled .v{color:var(--green);font-weight:600;}

  .r-foot{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:34px;
    gap:24px;
  }
  .r-sign{flex:1;}
  .r-sign .line{
    border-bottom:1.4px solid var(--ink);
    height:30px;
    max-width:200px;
  }
  .r-sign .who{
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:7px;
  }
  .r-sign .who b{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;display:block;margin-bottom:2px;}

  .stamp{
    flex-shrink:0;
    border:2.5px solid var(--green);
    color:var(--green);
    border-radius:8px;
    padding:8px 14px;
    text-align:center;
    transform:rotate(-7deg);
    font-family:'Archivo',sans-serif;
  }
  .stamp.owing{border-color:var(--rust);color:var(--rust);}
  .stamp .big{font-weight:800;font-size:18px;letter-spacing:.08em;line-height:1;}
  .stamp .small{font-size:9px;letter-spacing:.14em;margin-top:3px;text-transform:uppercase;}

  .r-note{
    margin-top:30px;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:11.5px;
    color:var(--muted);
    text-align:center;
    line-height:1.5;
  }

  .logo-upload-row{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .btn-logo-choose{
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--ink);
    background:var(--field-bg);
    border:1px solid var(--field-border);
    border-radius:7px;
    padding:9px 12px;
    cursor:pointer;
    transition:border-color .15s,box-shadow .15s;
  }
  .btn-logo-choose:hover{
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(15,107,79,.18);
  }
  .logo-preview{
    max-height:40px;
    max-width:120px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--field-border);
    border-radius:6px;
    padding:4px;
  }
  .logo-upload-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:5px;
  }

  .sig-pad-wrap{
    background:#fff;
    border:1px solid var(--field-border);
    border-radius:7px;
    overflow:hidden;
    position:relative;
  }
  #sigCanvas{
    display:block;
    width:100%;
    height:110px;
    cursor:crosshair;
    touch-action:none;
  }
  .sig-pad-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:5px;
  }
  .sig-clear{
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#9db5aa;
    background:none;
    border:none;
    cursor:pointer;
    padding:2px 0;
  }
  .sig-clear:hover{color:#eaf1ed;}

  /* Receipt signature area */
  .r-sig-row{
    display:flex;
    gap:32px;
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid var(--line);
    align-items:flex-end;
  }
  .r-sig-block{flex:1;}
  .r-sig-block .sig-label{
    font-size:10.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:6px;
  }
  .r-sig-block .sig-img-wrap{
    border-bottom:1.4px solid var(--ink);
    min-height:54px;
    display:flex;
    align-items:flex-end;
    padding-bottom:4px;
  }
  .r-sig-block .sig-img-wrap img{
    max-height:50px;
    max-width:100%;
    display:block;
  }
  .r-sig-block .sig-name{
    font-size:11.5px;
    color:var(--muted);
    margin-top:5px;
  }
  .r-sig-placeholder{
    font-size:12px;
    color:#ccc;
    font-style:italic;
    padding-bottom:6px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:880px){
    .app{grid-template-columns:1fr;}
    .controls{position:static;height:auto;}
    .stage{padding:26px 16px 48px;}
    .receipt{padding:34px 26px 30px;}
  }

  /* ---------- Print ---------- */
  @media print{
    @page{margin:14mm;}
    body{background:#fff;}
    .controls{display:none !important;}
    .app{display:block;}
    .stage{padding:0;display:block;overflow:visible;}
    .receipt{
      box-shadow:none;
      max-width:100%;
      border-radius:0;
      padding:0;
      border-top:5px solid var(--green);
      padding-top:24px;
    }
  }