/* Base Layout and Grid configurations */
  .q-form-scroll {
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 15px;
      text-align: left;
      border-bottom: 1px dashed #e2e8f0;
      box-sizing: border-box;
  }
  .q-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      width: 100%;
  }
  .q-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      width: 100%;
  }

  /* Section Styling */
  .q-sec-title {
      font-weight: 800;
      font-size: 14.5px;
      margin-bottom: 15px;
      padding: 10px 15px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
  }
  .q-sec-sender { background: #eff6ff; border-left: 5px solid #1e3a8a; color: #1e3a8a; }
  .q-sec-client { background: #faf5ff; border-left: 5px solid #7c3aed; color: #581c87; }
  .q-sec-meta { background: #ecfeff; border-left: 5px solid #0891b2; color: #164e63; }
  .q-sec-items { background: #fff1f2; border-left: 5px solid #f43f5e; color: #881337; }
  .q-sec-terms { background: #fffbeb; border-left: 5px solid #f59e0b; color: #78350f; }

  /* Premium Inputs */
  .q-setting-item { display: flex; flex-direction: column; gap: 8px; }
  .q-setting-item label { font-size: 12.5px; font-weight: 700; color: #475569; }
  .q-setting-item input, .q-setting-item select, .q-setting-item textarea, .q-item-row input {
      width: 100%;
      padding: 12px 16px;
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
      border-radius: 12px !important;
      font-size: 14.5px;
      outline: none;
      color: #1e293b;
      box-sizing: border-box;
      transition: all 0.3s ease !important;
  }
  .q-setting-item input:focus, .q-setting-item select:focus, .q-setting-item textarea:focus, .q-item-row input:focus {
      border-color: #1e3a8a !important;
      background: #f0f7ff !important;
      box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.15) !important;
  }

  /* Dynamic Item Row */
  .q-item-row {
      display: grid;
      grid-template-columns: 2fr 0.6fr 1fr 0.8fr 0.4fr;
      gap: 10px;
      align-items: center;
      background: #f8fafc;
      padding: 15px;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-sizing: border-box;
      margin-bottom: 10px;
  }

  /* Glowing Total Card (Blue/Amber) */
  .q-total-card {
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      border: 1.5px dashed #1e3a8a;
      border-radius: 16px;
      padding: 20px;
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 10px 25px rgba(30, 58, 138, 0.05);
      box-sizing: border-box;
      font-weight: bold;
      color: #1e3a8a;
      text-align: left;
  }
  .q-total-row {
      display: flex;
      justify-content: space-between;
  }

  @media (max-width: 600px) {
      .q-grid-2, .q-grid-3 { grid-template-columns: 1fr; gap: 10px; }
      .q-item-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
      .q-form-scroll { padding: 5px; }
  }