* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: #F7F7F9;
      color: #333;
      /* padding: 24px 16px; */
  }

  /* ──── TOP BAR ──── */
  .topbar {
      max-width: 1200px;
      margin: 10px auto 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 12px;
      padding: 20px 24px;
      border: 1px solid #e5e5e7;
      /* box-shadow: 0 2px 8px rgba(0,0,0,0.04); */
  }

  .topbar h1 {
      font-size: 28px;
      font-weight: 600;
      color: #1e293b;
      letter-spacing: -0.5px;
  }

  .topbar .btn-group {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  /* ──── BUTTONS ──── */
  .btn {
      padding: 11px 22px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: 'Plus Jakarta Sans', sans-serif;
      letter-spacing: 0.3px;
  }

  .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .btn:active {
      transform: scale(.97);
  }

  .btn-blue {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: #fff;
  }

  .btn-blue:hover {
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  }

  .btn-green {
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: #fff;
  }

  .btn-green:hover {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  }

  .btn-gray {
      background: #e2e8f0;
      color: #334155;
  }

  .btn-gray:hover {
      background: #cbd5e1;
  }

  .btn-red {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: #fff;
  }

  .btn-red:hover {
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  }

  /* ──── LAYOUT ──── */
  .wrapper {
      max-width: 1200px;
      margin: 0 auto;
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: 550px 1fr;
      gap: 24px;
      align-items: start;
  }

  /* ──── LEFT: FORM ──── */
  .form-side {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      padding: 24px;
      position: sticky;
      top: 24px;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
  }

  /* ──── LOGO UPLOAD ──── */
  .logo-upload-section {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e2e8f0;
  }

  .logo-preview-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100px;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
  }

  .logo-preview-box img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
  }

  .logo-preview-box.empty {
      color: #94a3b8;
      font-size: 13px;
      font-weight: 500;
  }

  #logoUpload {
      display: none;
  }

  .logo-upload-btn {
      width: 100%;
      padding: 8px;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      background: #fff;
      color: #3b82f6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
  }

  .logo-upload-btn:hover {
      background: #eff6ff;
      border-color: #3b82f6;
  }

  .logo-clear-btn {
      background: none;
      border: none;
      color: #ef4444;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      text-decoration: underline;
  }

  .logo-clear-btn:hover {
      color: #dc2626;
  }

  .section-title {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin: 22px 0 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid #e2e8f0;
  }

  .section-title:first-child {
      margin-top: 0;
  }

  .row {
      display: flex;
      gap: 10px;
  }

  .row .field {
      flex: 1;
      min-width: 0;
  }

  .field {
      margin-bottom: 10px;
  }

  .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
  }

  .field input,
  .field select,
  .field textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 13.5px;
      font-family: inherit;
      color: #1e293b;
      background: #fff;
      outline: none;
      transition: border-color .15s;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
      border-color: #3b82f6;
  }

  .field textarea {
      resize: vertical;
      min-height: 50px;
  }

  /* ──── ITEMS ──── */
  .items-head {
      display: grid;
      grid-template-columns: 1fr 60px 90px 28px;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      padding: 6px 4px;
      background: #f8fafc;
      border-radius: 6px;
      margin-bottom: 4px;
  }

  .items-head span:not(:first-child) {
      text-align: right;
  }

  .item-row {
      display: grid;
      grid-template-columns: 1fr 60px 90px 28px;
      gap: 6px;
      align-items: center;
      padding: 4px 4px;
      border-bottom: 1px solid #f1f5f9;
  }

  .item-row input {
      padding: 6px 8px;
      font-size: 13px;
      border-radius: 5px;
      border: 1px solid #d1d5db;
      font-family: inherit;
      outline: none;
      transition: border-color .15s;
  }

  .item-row input:focus {
      border-color: #3b82f6;
  }

  .item-row input[type="number"] {
      text-align: right;
  }

  .del-btn {
      background: none;
      border: none;
      color: #cbd5e1;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      border-radius: 4px;
      transition: color .15s, background .15s;
      padding: 2px 5px;
  }

  .del-btn:hover {
      color: #ef4444;
      background: #fee2e2;
  }

  .add-row-btn {
      width: 100%;
      margin-top: 8px;
      padding: 8px;
      border: 1.5px dashed #cbd5e1;
      border-radius: 6px;
      background: none;
      color: #3b82f6;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s, border-color .15s;
  }

  .add-row-btn:hover {
      background: #eff6ff;
      border-color: #3b82f6;
  }

  /* ──── TAXES LIST ──── */
  .tax-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 6px;
  }

  .tax-row input[type="text"] {
      flex: 1;
      padding: 6px 8px;
      border: 1px solid #d1d5db;
      border-radius: 5px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color .15s;
  }

  .tax-row input[type="number"] {
      width: 70px;
      padding: 6px 8px;
      border: 1px solid #d1d5db;
      border-radius: 5px;
      font-size: 13px;
      font-family: inherit;
      text-align: right;
      outline: none;
      transition: border-color .15s;
  }

  .tax-row input:focus {
      border-color: #3b82f6;
  }

  .tax-row .del-btn {
      font-size: 16px;
  }

  .add-tax-btn {
      background: none;
      border: none;
      color: #3b82f6;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      padding: 2px 0;
      font-family: inherit;
  }

  .add-tax-btn:hover {
      text-decoration: underline;
  }

  /* ──── RIGHT: INVOICE PREVIEW ──── */
  .preview-side {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: center;
      width: 100%;
  }

  .invoice-sheet {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      /* box-shadow: 0 2px 12px rgba(0,0,0,0.06); */
      overflow: hidden;
      width: 100%;
      max-width: 800px;
  }

  .theme-bar {
      height: 6px;
      background: var(--theme-color, #3b82f6);
  }

  .inv-inner {
      padding: 32px 34px 28px;
  }

  /* header */
  .inv-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 26px;
  }

  .inv-top .company-name {
      font-size: 24px;
      font-weight: 700;
      color: #1e293b;
  }

  .inv-top .company-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
  }

  .inv-top .inv-title-block {
      text-align: right;
  }

  .inv-top .inv-title-block .inv-word {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #fff;
      background: var(--theme-color, #3b82f6);
      display: inline-block;
      padding: 3px 12px;
      border-radius: 4px;
      margin-bottom: 4px;
  }

  .inv-top .inv-title-block .inv-num {
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
  }

  /* status badge */
  .status-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
  }

  .status-Draft {
      background: #f1f5f9;
      color: #64748b;
  }

  .status-Pending {
      background: #fef3c7;
      color: #b45309;
  }

  .status-Paid {
      background: #dcfce7;
      color: #16a34a;
  }

  .status-Overdue {
      background: #fee2e2;
      color: #dc2626;
  }

  /* dates row */
  .inv-dates {
      display: flex;
      gap: 32px;
      margin-bottom: 22px;
  }

  .inv-dates .date-item .date-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: #94a3b8;
      letter-spacing: 0.6px;
      margin-bottom: 3px;
  }

  .inv-dates .date-item .date-val {
      font-size: 13px;
      color: #1e293b;
      font-weight: 500;
  }

  /* parties */
  .inv-parties {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 26px;
      padding-bottom: 22px;
      border-bottom: 1px solid #e2e8f0;
  }

  .party-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: #94a3b8;
      letter-spacing: 0.6px;
      margin-bottom: 5px;
  }

  .party-val {
      font-size: 13px;
      color: #374151;
      line-height: 1.6;
  }

  /* items table */
  .inv-table {
      width: 100%;
      border-collapse: collapse;
  }

  .inv-table th {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      padding: 8px 10px;
      border-bottom: 2px solid #e2e8f0;
      text-align: left;
  }

  .inv-table th.r {
      text-align: right;
  }

  .inv-table td {
      padding: 9px 10px;
      font-size: 13px;
      color: #374151;
      border-bottom: 1px solid #f1f5f9;
  }

  .inv-table td.r {
      text-align: right;
      font-weight: 500;
  }

  .inv-table tbody tr:last-child td {
      border-bottom: none;
  }

  /* totals */
  .inv-totals {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
  }

  .inv-totals-box {
      width: 240px;
  }

  .totals-line {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 13px;
      color: #64748b;
      border-bottom: 1px solid #f1f5f9;
  }

  .totals-line:last-child {
      border-bottom: none;
  }

  .totals-line.grand {
      margin-top: 8px;
      padding: 10px 12px;
      background: #f8fafc;
      border-radius: 6px;
      border-bottom: none !important;
  }

  .totals-line.grand .t-label {
      font-weight: 700;
      color: #1e293b;
      font-size: 14px;
  }

  .totals-line.grand .t-val {
      font-weight: 700;
      color: var(--theme-color, #3b82f6);
      font-size: 17px;
  }

  /* notes */
  .inv-notes {
      margin-top: 22px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
  }

  .inv-notes .note-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      color: #94a3b8;
      letter-spacing: 0.6px;
      margin-bottom: 4px;
  }

  .inv-notes .note-text {
      font-size: 12.5px;
      color: #64748b;
      line-height: 1.6;
  }

  /* footer */
  .inv-footer {
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      padding: 12px 34px;
      font-size: 11.5px;
      color: #94a3b8;
      display: flex;
      justify-content: space-between;
  }

  /* ──── THEME PICKER ──── */
  .theme-picker {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
  }

  .theme-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2.5px solid transparent;
      cursor: pointer;
      transition: border-color .15s, transform .1s;
  }

  .theme-dot:hover {
      transform: scale(1.15);
  }

  .theme-dot.active {
      border-color: #1e293b;
  }

  /* ──── PRINT ──── */
  @media print {
      * {
          margin: 0;
          padding: 0;
      }

      html,
      body {
          background: #fff;
          padding: 0;
          margin: 0;
          -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important;
      }

      @page {
          margin: 0;
          size: A4;
      }

      body {
          margin: 0;
          padding: 0;
      }

      /* Hide UI elements during print - Added more specific selectors */
      header,
      nav,
      .nav-links,
      .nav-btn-primary,
      .account-icon-link,
      .ham,
      .mobile-menu,
      .menu-overlay,
      .form-side,
      .topbar,
      .no-print {
          display: none !important;
          opacity: 0 !important;
          visibility: hidden !important;
          height: 0 !important;
          width: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          pointer-events: none !important;
      }

      .wrapper {
          display: block;
          margin: 0;
          padding: 0;
      }

      .preview-side {
          max-width: 100%;
          margin: 0;
          padding: 0;
      }

      .invoice-sheet {
          box-shadow: none;
          border: none;
          border-radius: 0;
          margin: 0 auto;
          padding: 0;
      }

      .theme-bar {
          display: none !important;
      }

      .inv-totals {
          page-break-inside: avoid;
      }

      .inv-footer {
          display: none !important;
      }

      .inv-totals,
      .inv-footer {
          page-break-before: avoid;
      }
  }

  /* ──── RESPONSIVE ──── */
  @media(max-width:1090px) {
      .wrapper {
          grid-template-columns: 1fr;
      }

      .form-side {
          position: static;
          max-height: none;
          order: -1;
      }

      .preview-side {
          order: 1;
      }

      .inv-inner {
          padding: 28px 28px 24px;
      }
  }

  @media(max-width:860px) {
      .wrapper {
          grid-template-columns: 1fr;
      }

      .form-side {
          position: static;
          max-height: none;
          order: -1;
      }

      .preview-side {
          order: 1;
      }

      .inv-inner {
          padding: 28px 28px 24px;
      }
  }

  @media(max-width:600px) {
      body {
          padding: 16px 10px;
      }

      .topbar {
          flex-direction: column;
          align-items: stretch;
          gap: 15px;
          /* margin-top: 80px; */
      }

      .topbar h1 {
          font-size: 25px;
          text-align: center;
      }

      .topbar .btn-group {
          justify-content: center;
      }

      .btn {
          padding: 12px 16px;
          font-size: 11px;
          flex: 1;
          justify-content: center;
      }

      .form-side {
          padding: 18px 14px;
          border-radius: 8px;
      }

      .section-title {
          font-size: 12px;
          margin-top: 18px;
          margin-bottom: 8px;
      }

      .row {
          flex-direction: column;
          gap: 0;
      }

      .items-head {
          grid-template-columns: 1fr 46px 72px 26px;
          font-size: 10px;
          padding: 5px 2px;
      }

      .item-row {
          grid-template-columns: 1fr 46px 72px 26px;
          gap: 4px;
          padding: 3px 2px;
      }

      .item-row input {
          padding: 5px 5px;
          font-size: 12px;
      }

      .del-btn {
          font-size: 16px;
          padding: 2px 3px;
      }

      .add-row-btn {
          font-size: 12.5px;
          padding: 7px;
      }

      .tax-row input[type="text"] {
          font-size: 12px;
      }

      .tax-row input[type="number"] {
          width: 58px;
          font-size: 12px;
      }

      .invoice-sheet {
          border-radius: 8px;
      }

      .inv-inner {
          padding: 22px 18px 20px;
      }

      .inv-top {
          flex-direction: column;
          gap: 10px;
          margin-bottom: 18px;
      }

      .inv-top .inv-title-block {
          text-align: left;
      }

      .inv-top .company-name {
          font-size: 20px;
      }

      .inv-dates {
          flex-wrap: wrap;
          gap: 12px 20px;
      }

      .inv-parties {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-bottom: 20px;
          padding-bottom: 16px;
      }

      .inv-table th,
      .inv-table td {
          padding: 7px 6px;
          font-size: 12px;
      }

      .inv-table th {
          font-size: 9.5px;
      }

      .inv-totals {
          justify-content: stretch;
      }

      .inv-totals-box {
          width: 100%;
      }

      .totals-line {
          font-size: 12.5px;
      }

      .totals-line.grand .t-label {
          font-size: 13px;
      }

      .totals-line.grand .t-val {
          font-size: 15px;
      }

      .inv-footer {
          padding: 10px 18px;
          font-size: 10.5px;
      }

      .theme-dot {
          width: 26px;
          height: 26px;
      }

      .ad-banner.no-print {
          margin-top: 65px !important;
      }
  }

  @media(max-width:420px) {
      body {
          padding: 12px 6px;
      }

      .topbar h1 {
          font-size: 25px;
      }

      .btn {
          padding: 12px 16px;
          font-size: 11px;
      }

      .form-side {
          padding: 14px 10px;
      }

      .field label {
          font-size: 11.5px;
      }

      .field input,
      .field select,
      .field textarea {
          font-size: 13px;
          padding: 9px 8px;
      }

      .items-head {
          grid-template-columns: 1fr 40px 64px 24px;
          font-size: 9.5px;
      }

      .item-row {
          grid-template-columns: 1fr 40px 64px 24px;
          gap: 3px;
      }

      .item-row input {
          padding: 5px 4px;
          font-size: 11.5px;
      }

      .inv-inner {
          padding: 18px 14px 16px;
      }

      .inv-top .company-name {
          font-size: 18px;
      }

      .inv-top .inv-title-block .inv-num {
          font-size: 15px;
      }

      .inv-top .inv-title-block .inv-word {
          font-size: 10px;
          padding: 2px 9px;
          letter-spacing: 1px;
      }

      .inv-dates {
          flex-direction: column;
          gap: 8px;
      }

      .inv-table th {
          font-size: 9px;
          padding: 6px 4px;
      }

      .inv-table td {
          font-size: 11.5px;
          padding: 6px 4px;
      }

      .totals-line {
          font-size: 12px;
      }

      .totals-line.grand {
          padding: 8px 10px;
      }

      .totals-line.grand .t-label {
          font-size: 12px;
      }

      .totals-line.grand .t-val {
          font-size: 14px;
      }

      .inv-footer {
          flex-direction: column;
          align-items: center;
          gap: 2px;
          font-size: 10px;
          padding: 8px 14px;
      }

      .theme-dot {
          width: 28px;
          height: 28px;
      }
  }

  /* Alignment for the group */
  .btn-group {
      display: flex;
      align-items: center;
      gap: 12px;
      /* Space between tooltip icon and buttons */
  }

  /* Tooltip Container */
  .soprolo-tooltip {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: help;
  }

  /* The (?) Icon */
  .help-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #86868b;
      /* soprolo Secondary Gray */
      color: white;
      font-family: -soprolo-system, BlinkMacSystemFont, sans-serif;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
  }

  .soprolo-tooltip:hover .help-icon {
      background: #007AFF;
      /* soprolo Blue */
      transform: scale(1.1);
  }

  /* The Tooltip Glass Box */
  .tooltip-content {
      position: absolute;
      bottom: 35px;
      /* Positioned above the icon */
      left: 50%;
      transform: translateX(-50%) scale(0.95);
      width: 180px;
      padding: 12px;
      border-radius: 12px;
      z-index: 1000;

      /* soprolo Glassmorphism */
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

      /* Text Styling */
      color: #1d1d1f;
      font-family: -soprolo-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
      font-size: 12px;
      line-height: 1.4;
      text-align: center;

      /* Animation Logic */
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: none;
  }

  /* Tooltip Arrow */
  .tooltip-content::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -6px;
      border-width: 6px;
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
  }

  /* Show on Hover */
  .soprolo-tooltip:hover .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
  }

  /* Dark Mode support */
  @media (prefers-color-scheme: dark) {
      .tooltip-content {
          background: rgba(45, 45, 45, 0.8);
          border-color: rgba(255, 255, 255, 0.1);
          color: #f5f5f7;
      }

      .tooltip-content::after {
          border-color: rgba(45, 45, 45, 0.8) transparent transparent transparent;
      }
  }