/* Sha4owX multi-design invoice */

  .inv-multi-root{
    --accent:#C9A227;
    --accent-dark:#9C7D1A;
    --accent-soft:#FBF3DC;
    --ink:#101113;
    --ink-soft:#3A3D40;
    --grey:#8A8E92;
    --line:#E8E7E4;
    --paper:#FFFFFF;
    font-family:'Inter', sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    background:transparent;
  }
  .inv-multi-root, .inv-multi-root * { box-sizing:border-box; }
  .flow-invoice-preview .inv-multi-root .sheet{
    margin:0 auto;
    max-width:100%;
    width:100%;
    box-shadow:0 12px 32px rgba(16,17,19,0.12);
  }

  /* ============ Control bar ============ */
    .inv-multi-root .design{ display:none; }
  .inv-multi-root .design.active{ display:block; }

  /* ============ Shared: seller details + amount in words ============ */
  .inv-multi-root .brand-details{
    font-size:10.5px; color:var(--ink-soft); line-height:1.55;
    margin:6px 0 0; max-width:360px;
  }
  .inv-multi-root .amount-words{
    font-size:11.5px; color:var(--ink-soft); line-height:1.5;
    margin:16px 0 0; padding:9px 12px;
    background:var(--accent-soft); border-radius:6px;
  }
  .inv-multi-root .amount-words span{
    font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase;
    font-weight:600; color:var(--accent-dark); margin-right:6px;
  }

  /* ============ Shared: logo slot ============ */
  .logo-slot{
    position:relative;
    flex-shrink:0;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-slot img,
  .logo-slot .logo-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
    display:block;
  }
  .logo-slot input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .logo-hint{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:8.5px; line-height:1.2; font-weight:600;
    color:#fff; background:rgba(16,17,19,0.72); border-radius:12px;
    opacity:0; transition:opacity .15s ease; pointer-events:none;
  }
  .logo-slot:hover .logo-hint{ opacity:1; }
  .logo-remove{
    position:absolute; top:-6px; right:-6px;
    width:16px; height:16px; border-radius:50%;
    background:var(--ink); color:#fff; font-size:11px; line-height:16px;
    text-align:center; display:none; z-index:3; border:none; cursor:pointer;
  }
  .logo-slot.has-logo .logo-remove{ display:block; }

  /* ================================================================
     DESIGN 1 — Bold Diagonal (chevron corner + segmented table)
     ================================================================ */
  .d1 .sheet{ max-width:820px; margin:20px auto 48px; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 24px 48px rgba(16,17,19,0.14); }
  .d1 .inner{ position:relative; z-index:2; padding:56px 60px 0; }
  .d1 .top-graphic{ position:absolute; top:0; right:0; width:100%; height:170px; z-index:1; overflow:hidden; pointer-events:none; }
  .d1 .tg-accent{ position:absolute; top:-60px; right:-120px; width:520px; height:340px; background:var(--accent); transform:rotate(28deg); }
  .d1 .tg-ink{ position:absolute; top:-100px; right:-40px; width:320px; height:340px; background:var(--ink); transform:rotate(28deg); }
  .d1 .header{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
  .d1 .brand{
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,0.95); border-radius:8px;
    padding:10px 14px; margin:-10px 0 0 -14px;
    box-shadow:0 2px 10px rgba(16,17,19,0.08);
  }
  .d1 .logo-slot{ width:44px; height:44px; }
  .d1 .logo-mark{ width:40px; height:40px; }
  .d1 .brand-name{ font-family:'Poppins', sans-serif; font-size:19px; font-weight:700; margin:0; letter-spacing:-0.01em; }
  .d1 .brand-tag{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin:3px 0 0; max-width:280px; }
  /* Keep seller details clear of the diagonal top graphic on the right. */
  .d1 .brand .brand-details{ max-width:250px; }
  .d1 .invoice-title{ font-family:'Poppins', sans-serif; font-size:34px; font-weight:800; letter-spacing:0.04em; color:#fff; margin:8px 0 0; text-align:right; }
  .d1 .meta-strip{ display:flex; justify-content:space-between; align-items:flex-start; margin-top:72px; gap:24px; flex-wrap:wrap; }
  .d1 .detail-label{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dark); font-weight:600; margin:0 0 8px; }
  .d1 .name{ font-family:'Poppins', sans-serif; font-size:15.5px; font-weight:600; margin:0 0 4px; }
  .d1 .sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
  .d1 .invoice-facts{ text-align:right; font-size:12.5px; background:var(--paper); border-radius:4px; padding:10px 16px; box-shadow:0 2px 10px rgba(16,17,19,0.08); }
  .d1 .invoice-facts div{ display:flex; justify-content:flex-end; gap:10px; padding:4px 0; }
  .d1 .invoice-facts .f-label{ color:var(--grey); min-width:96px; text-align:left; }
  .d1 .invoice-facts .f-val{ font-weight:600; color:var(--ink); }
  .d1 table{ width:100%; border-collapse:collapse; margin-top:44px; }
  .d1 thead th{ font-family:'Poppins', sans-serif; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600; padding:13px 14px; text-align:left; }
  .d1 thead th:first-child{ background:var(--ink); color:#fff; }
  .d1 thead th:nth-child(2){ background:var(--ink-soft); color:#fff; text-align:center; width:70px; }
  .d1 thead th:nth-child(3){ background:var(--ink-soft); color:#fff; text-align:right; width:110px; }
  .d1 thead th:last-child{ background:var(--accent); color:var(--ink); text-align:right; width:120px; }
  .d1 tbody td{ padding:14px; font-size:13px; border-bottom:1px solid var(--line); }
  .d1 tbody tr:nth-child(even){ background:#FAFAF9; }
  .d1 tbody td:nth-child(2){ text-align:center; }
  .d1 tbody td:nth-child(3), .d1 tbody td:last-child{ text-align:right; }
  .d1 .totals-wrap{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:30px; gap:24px; flex-wrap:wrap; }
  .d1 .payment-block{ max-width:300px; }
  .d1 .payment-block .detail-value{ font-size:12.5px; color:var(--ink-soft); line-height:1.75; }
  .d1 .totals-box{ width:260px; }
  .d1 .totals-row{ display:flex; justify-content:space-between; padding:7px 2px; font-size:13px; color:var(--ink-soft); }
  .d1 .totals-row.grand{ margin-top:10px; padding:14px 16px; background:var(--ink); color:#fff; }
  .d1 .totals-row.grand .label{ font-family:'Poppins', sans-serif; font-weight:600; font-size:13px; }
  .d1 .totals-row.grand .val{ font-family:'Poppins', sans-serif; font-weight:700; font-size:18px; color:var(--accent); }
  .d1 .bottom-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:48px; gap:24px; flex-wrap:wrap; }
  .d1 .terms{ max-width:360px; }
  .d1 .terms .detail-value{ font-size:12px; color:var(--ink-soft); line-height:1.7; }
  .d1 .signature{ text-align:center; }
  .d1 .signature .line{ font-family:'Poppins', sans-serif; font-size:20px; font-style:italic; color:var(--ink-soft); border-bottom:1px solid var(--ink); padding:0 24px 6px; margin:0 0 8px; }
  .d1 .signature .role{ font-size:11px; letter-spacing:0.04em; color:var(--grey); }
  .d1 .bottom-graphic{ position:relative; margin-top:56px; height:136px; overflow:hidden; }
  .d1 .bg-ink{ position:absolute; left:0; bottom:0; width:100%; height:100%; background:var(--ink); clip-path:polygon(0 28%, 100% 0, 100% 100%, 0 100%); }
  .d1 .bg-accent{ position:absolute; left:0; bottom:0; width:48%; height:100%; background:var(--accent); clip-path:polygon(0 48%, 100% 0, 100% 100%, 0 100%); }
  .d1 .footer-contacts{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:0 36px 22px;
    pointer-events:none;
  }
  .d1 .footer-contacts-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
    gap:10px 28px;
    align-items:end;
    width:100%;
  }
  .d1 .fc-item{
    display:flex; align-items:flex-start; gap:8px;
    color:#fff; font-size:11.5px; line-height:1.5; font-weight:500;
    text-shadow:0 1px 3px rgba(0,0,0,0.65);
    min-width:0;
  }
  .d1 .fc-item svg{ width:15px; height:15px; stroke:#fff; flex-shrink:0; margin-top:1px; }
  .d1 .fc-item span{ flex:1; min-width:0; word-break:break-word; }
  .d1 .fc-phone{ grid-column:1; padding-right:8px; }
  .d1 .fc-email{ grid-column:2; }
  .d1 .fc-address{ grid-column:3; font-size:10.5px; line-height:1.45; }

  /* ================================================================
     DESIGN 2 — Corner Ribbon (twin triangles, centered title, ribbon totals)
     ================================================================ */
  .d2 .sheet{ max-width:820px; margin:0; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 24px 48px rgba(16,17,19,0.14); }
  .d2 .tri{ position:absolute; width:0; height:0; z-index:1; pointer-events:none; }
  .d2 .tri-tr-ink{ top:0; right:0; border-top:150px solid var(--ink); border-left:150px solid transparent; }
  .d2 .tri-tr-accent{ top:0; right:0; border-top:100px solid var(--accent); border-left:100px solid transparent; }
  .d2 .tri-bl-ink{ bottom:0; left:0; border-bottom:130px solid var(--ink); border-right:130px solid transparent; }
  .d2 .tri-bl-accent{ bottom:0; left:0; border-bottom:80px solid var(--accent); border-right:80px solid transparent; }
  /* Bottom padding clears the bottom-left corner triangles (130px tall) so text never overlaps them. */
  .d2 .inner{ position:relative; z-index:2; padding:48px 56px 150px; }
  .d2 .header{ display:flex; justify-content:space-between; align-items:center; }
  .d2 .brand{ display:flex; align-items:center; gap:12px; }
  .d2 .logo-slot{ width:46px; height:46px; }
  .d2 .logo-mark{ width:42px; height:42px; }
  .d2 .brand-name{ font-family:'Poppins', sans-serif; font-size:18px; font-weight:700; margin:0; }
  .d2 .brand-tag{ font-size:11px; color:var(--grey); margin:2px 0 0; }
  .d2 .invoice-title-wrap{ text-align:center; margin:6px 0 0; }
  .d2 .invoice-title{ font-family:'Poppins', sans-serif; font-size:30px; font-weight:800; letter-spacing:0.12em; margin:0; }
  .d2 .invoice-title .accent-dot{ color:var(--accent); }
  .d2 .meta-strip{ display:flex; justify-content:space-between; margin-top:32px; gap:24px; flex-wrap:wrap; padding-bottom:20px; border-bottom:2px solid var(--ink); }
  .d2 .detail-label{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-dark); font-weight:600; margin:0 0 8px; }
  .d2 .name{ font-family:'Poppins', sans-serif; font-size:15px; font-weight:600; margin:0 0 4px; }
  .d2 .sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
  .d2 .invoice-facts{ text-align:right; font-size:12.5px; }
  .d2 .invoice-facts div{ display:flex; justify-content:flex-end; gap:10px; padding:4px 0; }
  .d2 .invoice-facts .f-label{ color:var(--grey); min-width:96px; text-align:left; }
  .d2 .invoice-facts .f-val{ font-weight:600; color:var(--ink); }
  .d2 table{ width:100%; border-collapse:collapse; margin-top:36px; }
  .d2 thead th{ font-family:'Poppins', sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; font-weight:600; padding:12px 10px; text-align:left; background:var(--accent); color:var(--ink); }
  .d2 thead th:nth-child(2), .d2 tbody td:nth-child(2){ text-align:center; width:60px; }
  .d2 thead th:nth-child(3), .d2 tbody td:nth-child(3){ text-align:right; width:100px; }
  .d2 thead th:last-child, .d2 tbody td:last-child{ text-align:right; width:110px; }
  .d2 tbody td{ padding:13px 10px; font-size:13px; border-bottom:1px solid var(--line); }
  .d2 .totals-wrap{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:28px; gap:24px; flex-wrap:wrap; }
  .d2 .payment-block{ max-width:300px; }
  .d2 .payment-block .detail-value{ font-size:12.5px; color:var(--ink-soft); line-height:1.75; }
  .d2 .totals-box{ width:250px; }
  .d2 .totals-row{ display:flex; justify-content:space-between; padding:6px 2px; font-size:13px; color:var(--ink-soft); }
  .d2 .totals-row.grand{ margin-top:8px; padding:12px 16px; background:var(--ink); position:relative; }
  .d2 .totals-row.grand::before{ content:""; position:absolute; left:-14px; top:0; border-top:22px solid transparent; border-bottom:22px solid transparent; border-right:14px solid var(--ink); }
  .d2 .totals-row.grand .label{ color:#fff; font-family:'Poppins', sans-serif; font-weight:600; font-size:13px; }
  .d2 .totals-row.grand .val{ color:var(--accent); font-family:'Poppins', sans-serif; font-weight:700; font-size:18px; }
  .d2 .bottom-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:28px; gap:24px; flex-wrap:wrap; }
  .d2 .terms{ max-width:340px; }
  .d2 .terms .detail-value{ font-size:12px; color:var(--ink-soft); line-height:1.7; }
  .d2 .signature{ text-align:center; }
  .d2 .signature .line{ font-family:'Newsreader', serif; font-style:italic; font-size:20px; color:var(--ink-soft); border-bottom:1px solid var(--ink); padding:0 24px 6px; margin:0 0 8px; }
  .d2 .signature .role{ font-size:11px; letter-spacing:0.04em; color:var(--grey); }
  .d2 .footer-contacts{ margin-top:28px; padding-top:14px; border-top:1px solid var(--line); }
  .d2 .footer-contacts-inner{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; }
  .d2 .fc-item{ display:flex; align-items:flex-start; gap:7px; color:var(--ink-soft); font-size:11px; line-height:1.5; min-width:0; }
  .d2 .fc-item svg{ width:13px; height:13px; stroke:var(--accent-dark); flex-shrink:0; margin-top:1px; }
  .d2 .fc-item span{ word-break:break-word; }

  /* ================================================================
     DESIGN 3 — Minimal Card (no shapes, accent side-rule, quiet)
     ================================================================ */
  .d3 .sheet{ max-width:820px; margin:20px auto 48px; background:var(--paper); position:relative; box-shadow:0 24px 48px rgba(16,17,19,0.14); border-left:6px solid var(--accent); }
  .d3 .inner{ padding:60px 64px; }
  .d3 .header{ display:flex; justify-content:space-between; align-items:flex-start; }
  .d3 .brand{ display:flex; align-items:center; gap:12px; }
  .d3 .logo-slot{ width:42px; height:42px; }
  .d3 .logo-mark{ width:38px; height:38px; }
  .d3 .brand-name{ font-family:'Poppins', sans-serif; font-size:17px; font-weight:600; margin:0; }
  .d3 .brand-tag{ font-size:11.5px; color:var(--grey); margin:2px 0 0; }
  .d3 .invoice-title{ font-family:'Newsreader', serif; font-style:italic; font-size:28px; color:var(--accent-dark); margin:0; text-align:right; }
  .d3 .hairline{ height:1px; background:var(--line); margin:36px 0; }
  .d3 .meta-strip{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .d3 .detail-label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); font-weight:500; margin:0 0 9px; }
  .d3 .name{ font-size:14.5px; font-weight:600; margin:0 0 4px; }
  .d3 .sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
  .d3 .invoice-facts{ text-align:right; font-size:12.5px; }
  .d3 .invoice-facts div{ display:flex; justify-content:flex-end; gap:10px; padding:3px 0; }
  .d3 .invoice-facts .f-label{ color:var(--grey); min-width:90px; text-align:left; }
  .d3 .invoice-facts .f-val{ font-weight:600; color:var(--ink); }
  .d3 table{ width:100%; border-collapse:collapse; margin-top:8px; }
  .d3 thead th{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); font-weight:500; padding:0 0 10px; text-align:left; border-bottom:1px solid var(--ink); }
  .d3 thead th:nth-child(2), .d3 tbody td:nth-child(2){ text-align:right; width:50px; }
  .d3 thead th:nth-child(3), .d3 tbody td:nth-child(3){ text-align:right; width:100px; }
  .d3 thead th:last-child, .d3 tbody td:last-child{ text-align:right; width:110px; }
  .d3 tbody td{ padding:13px 0; font-size:13px; border-bottom:1px solid var(--line); }
  .d3 .totals-wrap{ display:flex; justify-content:flex-end; margin-top:8px; }
  .d3 .totals-box{ width:240px; }
  .d3 .totals-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:13px; color:var(--ink-soft); }
  .d3 .totals-row.grand{ margin-top:6px; padding-top:14px; border-top:1px solid var(--ink); }
  .d3 .totals-row.grand .label{ font-weight:500; color:var(--ink); }
  .d3 .totals-row.grand .val{ font-weight:700; font-size:18px; color:var(--accent-dark); }
  .d3 .bottom-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:40px; gap:24px; flex-wrap:wrap; }
  .d3 .payment-block{ max-width:320px; }
  .d3 .payment-block .detail-value{ font-size:12.5px; color:var(--ink-soft); line-height:1.75; }
  .d3 .signature{ text-align:right; }
  .d3 .signature .line{ font-family:'Newsreader', serif; font-style:italic; font-size:18px; color:var(--ink-soft); margin:0 0 6px; }
  .d3 .signature .role{ font-size:11px; letter-spacing:0.04em; color:var(--grey); border-top:1px solid var(--ink); padding-top:6px; }
  .d3 .footer-contacts{ margin-top:32px; padding-top:14px; border-top:1px solid var(--line); }
  .d3 .footer-contacts-inner{ display:flex; flex-wrap:wrap; gap:8px 26px; }
  .d3 .fc-item{ display:flex; align-items:flex-start; gap:7px; color:var(--ink-soft); font-size:11px; line-height:1.5; min-width:0; }
  .d3 .fc-item svg{ width:13px; height:13px; stroke:var(--accent-dark); flex-shrink:0; margin-top:1px; }
  .d3 .fc-item span{ word-break:break-word; }

  @media print{
    body{ background:var(--paper); }
    .control-bar{ display:none; }
    .sheet{ box-shadow:none; margin:0; }
  }
  @media (max-width:640px){
    .d1 .inner, .d2 .inner, .d3 .inner{ padding:36px 24px; }
    .d1 .meta-strip, .d2 .meta-strip, .d3 .meta-strip{ flex-direction:column; }
    .d1 .invoice-facts, .d2 .invoice-facts, .d3 .invoice-facts{ text-align:left; }
    .d1 .invoice-facts div, .d2 .invoice-facts div, .d3 .invoice-facts div{ justify-content:flex-start; }
    .d1 .invoice-title{ text-align:left; font-size:24px; }
    .d1 .totals-wrap, .d2 .totals-wrap, .d3 .totals-wrap{ flex-direction:column; align-items:flex-start; }
    .d1 .bottom-row, .d2 .bottom-row, .d3 .bottom-row{ flex-direction:column; align-items:flex-start; }
    .d1 .footer-contacts{ padding:0 20px 18px; }
    .d1 .footer-contacts-inner{ grid-template-columns:1fr; gap:12px; }
    .d1 .fc-phone, .d1 .fc-email, .d1 .fc-address{ grid-column:1; }
  }