:root{
      --bg:#eef1f5;
      --paper:#ffffff;
      --ink:#111827;
      --muted:#6b7280;
      --line:#d1d5db;
      --header:#111827;
    }

    body{ background:var(--bg); padding:24px 0; color:var(--ink); }

    .nav-tabs .nav-link{ border:none; color:var(--muted); }
    .nav-tabs .nav-link.active{
      color:var(--ink);
      border-bottom:2px solid var(--ink);
      background:transparent;
    }

    .paper-wrap{  margin: 0 auto; }
    .invoice-paper{
      background:var(--paper);
      border:1px solid var(--line);
      box-shadow: 0 8px 28px rgba(0,0,0,.08);
      border-radius: 6px;
      padding: 28px 28px 18px;
    }

    .invoice-top{
      display:flex;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 14px;
      align-items:flex-start;
    }

    .invoice-title{
      font-size: 44px;
      letter-spacing: .08em;
      font-weight: 800;
      margin: 0;
      line-height: 1;
      text-align:right;
    }

    .left-stack{ width:44%; min-width:320px; }

    /* --- LOGO (uploadable + contained) --- */
    .logo-frame{
      width: 140px;
      height: 90px;
      border:1px dashed var(--line);
      border-radius: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      background:#fff;
      overflow:hidden;             /* critical: keep image contained */
      position: relative;          /* for overlay controls */
      cursor:pointer;
      user-select:none;
    }
    .logo-frame:hover{
      border-color: var(--ink);
    }
    .logo-frame img{
      width:100%;
      height:100%;
      object-fit: contain;         /* keep logo inside box */
      display:block;
      background:#fff;
    }
    .logo-placeholder{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:12px;
      text-align:center;
      padding: 8px;
    }
    .logo-actions{
      position:absolute;
      top:8px;
      right:8px;
      display:flex;
      gap:6px;
      opacity:0;
      transition: opacity .15s ease-in-out;
    }
    .logo-frame.has-logo .logo-actions{ opacity:1; }
    .logo-frame:hover .logo-actions{ opacity:1; }
    .logo-actions button{
      border:1px solid var(--line);
      background:#fff;
      border-radius:8px;
      padding:6px 8px;
      font-size:12px;
      line-height:1;
    }
    .logo-actions button:hover{
      border-color: var(--ink);
    }

    .block h6{
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--muted);
      margin: 0 0 6px;
      text-transform: uppercase;
    }

    .label-edit{
      display:inline-block;
      padding: 2px 4px;
      border-radius: 6px;
      cursor: text;
    }
    .label-edit:focus{
      outline: 2px solid rgba(17,24,39,.15);
      background: rgba(17,24,39,.04);
    }

    .field, .field-area{
      width:100%;
      border:none;
      border-bottom:1px solid var(--line);
      outline:none;
      background:transparent;
      padding: 6px 2px;
      font-size: 14px;
    }
    .field:focus, .field-area:focus{ border-bottom-color: var(--ink); }
    .field-area{ resize: vertical; }
    .field-area-min-height {
        min-height: 140px;
    }
    .items-table{
      width: 100%;
      border-collapse: collapse;
      margin-top: 18px;
    }
    .items-table thead th{
      background: var(--header);
      color: #fff;
      font-size: 12px;
      letter-spacing: .06em;
      padding: 10px 10px;
      text-transform: uppercase;
    }
    .items-table td{
      border-bottom:1px solid var(--line);
      padding: 10px 10px;
      vertical-align: middle;
    }
    .items-table input{
      width:100%;
      border:none;
      outline:none;
      background:transparent;
    }

    .btn-icon{
      border:1px solid var(--line);
      background:#fff;
      color: var(--ink);
      border-radius: 8px;
      padding: 8px 10px;
    }
    .btn-icon:hover{ border-color: var(--ink); }

    .totals{ display:flex; justify-content:flex-end; }
    .totals-box{ width: 320px; }
    .totals-row{
      display:flex;
      justify-content:space-between;
      padding: 8px 0;
      color: var(--ink);
    }
    .totals-row small{ color: var(--muted); }
    .totals-row.total{
      border-top:2px solid var(--ink);
      padding-top: 12px;
      margin-top: 6px;
      font-weight: 800;
    }
    .total-amount{ font-size: 20px; }

    .side-card{
      background: var(--paper);
      border:1px solid var(--line);
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 8px 28px rgba(0,0,0,.06);
    }
    .side-card label{ font-size: 12px; color: var(--muted); }
    .side-card .form-control{ border-radius: 10px; }

    .action-bar{
      display:flex;
      gap:10px;
      margin-top: 16px;
    }
    .btn-primary{
      background: var(--ink);
      border-color: var(--ink);
      border-radius: 10px;
    }
    .btn-primary:hover{
      background: #0b1220;
      border-color: #0b1220;
    }

    .invoice-list-item{
      background: var(--paper);
      border:1px solid var(--line);
      border-radius: 10px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,.06);
    }

    /* Preview */
    .preview-stage{
      background: var(--bg);
      padding: 18px;
      border-radius: 10px;
    }
    .preview-paper{
      max-width: 900px;
      margin: 0 auto;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 12px 40px rgba(0,0,0,.10);
      padding: 32px;
    }
    .preview-logo-frame{
      width: 140px;
      height: 90px;
      border: 1px dashed #d1d5db;
      border-radius: 10px;
      overflow: hidden;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#6b7280;
      font-size:12px;
    }
    .preview-logo-frame img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      background:#fff;
    }

    .b-dashed {
        border: 1px dashed var(--line)
    }