:root{
    --paper:#F7F3E9;
    --paper-2:#FDFBF5;
    --ink:#221F1A;
    --ink-soft:#5B5648;
    --navy:#233B53;
    --navy-2:#33526F;
    --brass:#AD8A4E;
    --brass-light:#E8D9BA;
    --rule:#DCD3BC;
    --danger:#A24632;
    --radius:6px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#EDE7D8;
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  html, body{overflow-x:hidden;}
  .app{
    display:grid;
    grid-template-columns:minmax(340px,460px) 1fr;
    min-height:calc(100vh - 52px);
  }
  .app > *{min-width:0;}
  @media (max-width:900px){
    .app{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .preview-wrap{padding:32px 20px;}
    .ledger{padding:28px 20px 44px;}
  }

  .topbar{
    height:52px;
    background:var(--ink);
    color:#EAE3D2;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 24px;
    border-bottom:1px solid rgba(234,227,210,0.12);
  }
  .topbar .mark{
    width:22px;height:22px;border-radius:50%;
    background:var(--brass);
    flex-shrink:0;
  }
  .topbar .name{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:15px;
    letter-spacing:0.2px;
  }
  .topbar .tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:rgba(234,227,210,0.45);
    margin-left:2px;
  }
  @media print{
    .topbar{display:none;}
  }

  /* ---------- LEFT: LEDGER FORM ---------- */
  .ledger{
    background:var(--navy);
    color:#EAE3D2;
    padding:36px 34px 60px;
    background-image:repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 34px,
      rgba(255,255,255,0.045) 34px, rgba(255,255,255,0.045) 35px
    );
  }
  .ledger-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:26px;
    border-bottom:1px solid rgba(234,227,210,0.25);
    padding-bottom:16px;
  }
  .ledger-header h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:26px;
    margin:0;
    letter-spacing:0.2px;
  }
  .ledger-header span{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--brass-light);
    text-transform:uppercase;
    letter-spacing:1.5px;
  }
  .section{margin-bottom:28px;}
  .section-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--brass-light);
    margin:0 0 12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .section-label::after{
    content:'';
    flex:1;
    height:1px;
    background:rgba(234,227,210,0.2);
  }
  .field-row{display:flex;gap:10px;margin-bottom:10px;}
  .field{flex:1;display:flex;flex-direction:column;gap:5px;}
  .field label{
    font-size:11px;
    color:rgba(234,227,210,0.65);
    font-weight:500;
  }
  input, textarea, select{
    font-family:'IBM Plex Sans', sans-serif;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(234,227,210,0.22);
    border-radius:4px;
    color:#F5F1E6;
    padding:8px 10px;
    font-size:13.5px;
    width:100%;
  }
  input::placeholder, textarea::placeholder{color:rgba(234,227,210,0.35);}
  input:focus, textarea:focus, select:focus{
    outline:none;
    border-color:var(--brass);
    background:rgba(255,255,255,0.1);
  }
  select{appearance:none;cursor:pointer;color-scheme:dark;}
  select option{background:#233B53;color:#F5F1E6;}
  textarea{resize:vertical;min-height:56px;line-height:1.5;}

  .logo-row{display:flex;gap:10px;align-items:flex-end;}
  .swatches{display:flex;gap:6px;}
  .swatch{
    width:22px;height:22px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.15);
    cursor:pointer;
  }
  .swatch.active{border-color:#fff;}

  .items-block{
    background:rgba(0,0,0,0.15);
    border-radius:6px;
    padding:14px;
  }
  .item-row{
    display:grid;
    grid-template-columns:1fr 52px 74px 24px;
    gap:8px;
    margin-bottom:8px;
    align-items:center;
  }
  .item-row input{padding:7px 8px;font-size:13px;}
  .rm-btn{
    background:none;border:none;color:rgba(234,227,210,0.45);
    cursor:pointer;font-size:16px;line-height:1;padding:4px;
  }
  .rm-btn:hover{color:var(--danger);}
  .add-item{
    background:none;
    border:1px dashed rgba(234,227,210,0.35);
    color:var(--brass-light);
    border-radius:4px;
    padding:8px;
    width:100%;
    font-size:12.5px;
    cursor:pointer;
    margin-top:4px;
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.5px;
  }
  .add-item:hover{border-color:var(--brass);background:rgba(255,255,255,0.05);}

  .actions{
    position:sticky;
    bottom:0;
    margin-top:32px;
    display:flex;
    gap:10px;
  }
  .btn-primary{
    flex:1;
    background:var(--brass);
    color:#221F1A;
    border:none;
    border-radius:5px;
    padding:13px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    font-family:'IBM Plex Sans', sans-serif;
    letter-spacing:0.2px;
  }
  .btn-primary:hover{background:#C4A468;}

  /* ---------- RIGHT: INVOICE PREVIEW ---------- */
  .preview-wrap{
    background:#EDE7D8;
    padding:56px 48px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .invoice{
    background:var(--paper-2);
    width:100%;
    max-width:680px;
    padding:52px 52px 44px;
    box-shadow:0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(34,31,26,0.14);
    position:relative;
  }
  .stamp{
    position:absolute;
    top:44px;
    right:52px;
    width:104px;
    height:104px;
    border:2.5px solid var(--brass);
    border-radius:50%;
    transform:rotate(-8deg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--brass);
  }
  .stamp .amt{
    font-family:'IBM Plex Mono', monospace;
    font-size:15px;
    font-weight:500;
    line-height:1.1;
  }
  .stamp .lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size:8px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-top:3px;
  }

  .inv-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:36px;
    padding-right:120px;
  }
  .brand-mark{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .logo-circle{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces', serif;font-weight:600;font-size:16px;
    color:#fff;flex-shrink:0;
  }
  .biz-name{font-family:'Fraunces', serif;font-size:19px;font-weight:600;color:var(--ink);}
  .biz-detail{font-size:12px;color:var(--ink-soft);line-height:1.6;white-space:pre-line;}

  h1.title{
    font-family:'Fraunces', serif;
    font-size:34px;
    font-weight:500;
    letter-spacing:0.5px;
    color:var(--navy);
    margin:0 0 30px;
  }

  .meta-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    padding:16px 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    margin-bottom:30px;
  }
  .meta-item .k{
    font-family:'IBM Plex Mono', monospace;
    font-size:9.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:4px;
  }
  .meta-item .v{
    font-size:13.5px;
    font-weight:500;
    color:var(--ink);
  }

  .bill-to{margin-bottom:34px;}
  .bill-to .k{
    font-family:'IBM Plex Mono', monospace;
    font-size:9.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .bill-to .name{font-size:15px;font-weight:600;color:var(--ink);}
  .bill-to .detail{font-size:12.5px;color:var(--ink-soft);line-height:1.6;white-space:pre-line;}

  table.items{width:100%;border-collapse:collapse;margin-bottom:8px;}
  table.items thead th{
    text-align:left;
    font-family:'IBM Plex Mono', monospace;
    font-size:9.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--ink-soft);
    padding:0 0 10px;
    border-bottom:1.5px solid var(--navy);
  }
  table.items thead th.num{text-align:right;}
  table.items tbody td{
    padding:12px 0;
    border-bottom:1px solid var(--rule);
    font-size:13.5px;
    vertical-align:top;
  }
  table.items tbody td.num{text-align:right;font-family:'IBM Plex Mono', monospace;}
  table.items tbody tr:last-child td{border-bottom:1px solid var(--rule);}

  .totals{
    margin-left:auto;
    width:280px;
    margin-top:18px;
  }
  .totals-row{
    display:flex;
    justify-content:space-between;
    padding:7px 0;
    font-size:13px;
    color:var(--ink-soft);
  }
  .totals-row.grand{
    border-top:1.5px solid var(--navy);
    margin-top:6px;
    padding-top:12px;
    font-size:17px;
    font-weight:600;
    color:var(--navy);
    font-family:'IBM Plex Mono', monospace;
  }

  .footer-block{
    margin-top:44px;
    padding-top:20px;
    border-top:1px solid var(--rule);
  }
  .footer-block .k{
    font-family:'IBM Plex Mono', monospace;
    font-size:9.5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .footer-block .v{
    font-size:12.5px;
    color:var(--ink-soft);
    line-height:1.6;
    white-space:pre-line;
  }

  @media print{
    body{background:#fff;}
    .ledger, .preview-wrap{padding:0;background:#fff;}
    .app{display:block;}
    .ledger{display:none;}
    .invoice{box-shadow:none;max-width:100%;padding:0;}
  }