/* -------------------------
       Variables / Topology (keeps your original look)
       ------------------------- */
    :root{
      --primary: #0f4ce6;
      --accent: #059669;
      --card: #ffffff;
      --text: #0f1724;
      --soft: #6b7280;
      --muted: #f6f8fb;
      --border: rgba(15,23,42,0.06);
      --shadow: 0 6px 18px rgba(15,23,42,0.04);
      --ring: rgba(23,70,199,0.12);
      --max-amount-width: 140px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 14px;
    }

    html,body{height:100%;margin:0;background:#f3f5f8;color:var(--text)}
    main.container{max-width:1200px;margin:1.6rem auto;padding:0 16px}
    .page{margin:0 auto}
    header{display:flex;flex-direction:column;gap:6px;padding:18px 6px}
    header h1{margin:0;font-size:1.6rem;font-weight:800;color:var(--primary)}
    header p{margin:0;color:var(--soft);font-size:0.95rem}
    .card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}

    /* toolbar */
    .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid rgba(15,23,42,0.03);border-bottom:1px solid rgba(15,23,42,0.03);background:linear-gradient(180deg,transparent, rgba(250,250,252,0.6))}
    .toolbar .left, .toolbar .right{display:flex;align-items:center;gap:10px}
    .btn{background:var(--primary);color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:700;display:inline-flex;gap:8px;align-items:center;transition:transform .12s ease}
    .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);padding:6px 10px}
    .btn.success{background:var(--accent)}
    .btn:active{transform:translateY(1px)}
    .btn:disabled{background:var(--muted);cursor:not-allowed;transform:none}

    /* steps */
    .step-nav{display:flex;gap:8px;padding:12px 18px;align-items:center;border-bottom:1px dashed var(--border);flex-wrap:wrap}
    .step-btn{flex:1;text-align:center;padding:8px 10px;border-radius:8px;background:transparent;font-weight:700;color:var(--soft);cursor:pointer;border:1px solid transparent}
    .step-btn.active{color:var(--primary);border-color:rgba(23,70,199,0.12);background:linear-gradient(180deg,#fff,#fbfdff)}
    .step-btn:hover{transform:translateY(-1px)}

    /* main split */
    .split{display:grid;grid-template-columns:1fr 460px;gap:18px;padding:18px}
    .panel{padding:6px}
    .form-group-head{font-size:0.95rem;font-weight:800;margin-top:16px;margin-bottom:10px;color:var(--soft);border-bottom:1px solid var(--border);padding-bottom:8px}

    /* forms */
    .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .form-row{display:flex;flex-direction:column}
    label{font-size:11px;font-weight:800;color:var(--soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.6px}
    input[type='text'], input[type='email'], input[type='number'], input[type='date'], select, textarea{
      padding:10px 12px;border-radius:8px;border:1px solid var(--border);font-size:14px;background:#fff;transition:border-color .12s ease;box-sizing:border-box;width:100%;
    }
    textarea{min-height:72px;resize:vertical;font-family:inherit}
    .full{grid-column:1/-1}
    input:required:invalid, textarea:required:invalid { border-color: #e11d48; }

    /* -------------------------
       Items table (editor)
       ------------------------- */
    .items{margin-top:12px;border-radius:8px;border:1px solid var(--border);overflow:hidden;background:#fff}
    .items table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
    .items thead th{background:transparent;padding:12px 10px;text-align:left;font-size:12px;color:var(--soft);border-bottom:1px solid rgba(15,23,42,0.03)}
    .items thead th:nth-child(1){width:36px}
    .items thead th:nth-child(2){width:76px}
    .items thead th:nth-child(3){width:auto}
    .items thead th:nth-child(4){width:120px}
    .items thead th:nth-child(5){width:var(--max-amount-width)}
    .items thead th:nth-child(6){width:40px}
    .items tbody td{padding:10px 8px;border-bottom:1px solid rgba(15,23,42,0.02);vertical-align:top;overflow:hidden}
    .items tbody td:first-child{padding-top:18px}
    .items input[type="text"]{width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);box-sizing:border-box;font-size:13px}
    .items textarea.itm-desc{width:100%;resize:vertical;min-height:42px;padding:8px;box-sizing:border-box;border-radius:6px;border:1px solid var(--border);font-size:13px}
    .drag-handle{opacity:.7;cursor:grab;padding:6px 8px;border-radius:6px}
    .drag-handle:hover{background:var(--muted)}

    /* amount wrap: scrollable + animated transitions */
    .item-total{padding:0}
    .item-total .amount-wrap, .inv-table td.amount-wrap{
      display:inline-block;
      max-width:var(--max-amount-width);
      min-width:60px;
      padding:10px 8px;
      box-sizing:border-box;
      white-space:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      text-overflow:ellipsis;
      font-weight:700;
      text-align:right;
      direction:ltr;
      background:transparent;
    }
    /* animation */
    .amount-wrap .amount-val{display:inline-block;transition:opacity .22s ease, transform .22s ease}
    .amount-wrap .amount-val.fade-out{opacity:0; transform: translateY(-4px) scale(.995)}
    .amount-wrap .amount-val.fade-in{opacity:1; transform: translateY(0) scale(1)}

    .add-row{display:flex;justify-content:flex-end;padding:10px;border-top:1px solid rgba(15,23,42,0.03);background:transparent}

    /* preview */
    .preview-wrap{padding:14px;background:linear-gradient(180deg,#fbfcff,#f6f9ff);height:calc(100vh - 170px);position:sticky;top:18px;display:flex;flex-direction:column;border-left:1px solid rgba(15,23,42,0.03)}
    .invoice{background:#fff;border-radius:10px;border:1px solid rgba(15,23,42,0.04);padding:18px;flex:1;display:flex;flex-direction:column;overflow:auto;min-height:120px}
    .inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;border-bottom:1px solid rgba(15,23,42,0.03);padding-bottom:12px}
    .inv-meta{font-size:13px;color:var(--soft)}
    .inv-table table{width:100%;border-collapse:collapse;margin-top:12px;table-layout:fixed;font-size:14px}
    .inv-table th,.inv-table td{padding:10px 6px;text-align:left;border-bottom:1px solid rgba(15,23,42,0.02);font-size:14px}
    .inv-table thead th:nth-child(1){width:60%}
    .inv-table thead th:nth-child(2){width:10%;text-align:center}
    .inv-table thead th:nth-child(3){width:15%;text-align:right}
    .inv-table thead th:nth-child(4){width:15%;text-align:right}
    .inv-table td:first-child{white-space:pre-wrap;word-break:break-word}
    .inv-table td.amount-wrap{display:block;text-align:right;padding:8px 6px;font-weight:600;white-space:nowrap;overflow-x:auto;max-width:160px}

    .summary{margin-top:12px;display:flex;justify-content:flex-end;padding-top:10px}
    .summary-card{width:320px;background:#fff;border-radius:8px;padding:14px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(15,23,42,0.03)}
    .summary-row{display:flex;justify-content:space-between;padding:6px 0;color:var(--soft);font-weight:700}
    .summary-total{display:flex;justify:content:space-between;padding-top:10px;border-top:1px dashed rgba(15,23,42,0.03);font-size:1.05rem;font-weight:900;color:var(--text)}

    .notes-preview{margin-top:14px;font-size:13px;color:var(--soft);border-top:1px solid rgba(15,23,42,0.03);padding-top:12px;line-height:1.45;margin-bottom:auto;white-space:pre-wrap;word-break:break-word}

    .preview-actions{padding:12px 6px;margin-top:10px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid rgba(15,23,42,0.03);background:transparent}

    .step-content{display:none}
    .step-content.active{display:block}
    .step-footer{margin-top:18px;display:flex;justify-content:space-between;gap:10px;align-items:center}

    @media(max-width:1100px){ .split{grid-template-columns:1fr 380px} .preview-wrap{height:calc(100vh - 150px)} }
    @media(max-width:860px){
      .split{grid-template-columns:1fr;gap:14px}
      .preview-wrap{order:2;position:static;height:auto;padding:12px}
      .preview-actions{justify-content:flex-start;flex-wrap:wrap}
      .invoice{max-height:none}
      .summary-card{width:100%}
    }
    @media(max-width:520px){
      .form-grid{grid-template-columns:1fr}
      .toolbar{flex-direction:column;align-items:flex-start;gap:10px}
      .items thead th{font-size:11px;padding:8px 4px}
      .items tbody td{padding:6px 4px}
      .items input[type="text"], .items textarea.itm-desc{font-size:12px;padding:6px;min-height:38px}
      .drag-handle{display:none}
      .items thead th:nth-child(2), .items tbody td:nth-child(2){width:48px !important}
      .items thead th:nth-child(4), .items tbody td:nth-child(4){width:88px !important}
      .items thead th:nth-child(5), .items tbody td:nth-child(5){width:86px !important}
      .inv-head{flex-direction:column;align-items:flex-start;gap:16px}
    }

    @media print{
      .step-nav, .step-footer, .toolbar, header, .preview-actions {display:none}
      .invoice{border:none !important;box-shadow:none !important;margin:0;padding:0 !important}
      html,body{background:#fff !important}
    }

    input:focus, textarea:focus, select:focus {outline:none;border-color:var(--ring);box-shadow:0 6px 20px rgba(23,70,199,0.04)}
    .small{font-size:12px;color:var(--soft)}