.crqqb { --line:#e5e7eb; --ink:#111827; --muted:#6b7280; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); }
.crqqb * { box-sizing: border-box; }
.crqqb .crq-grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:12px; }
.crqqb label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.crqqb .crq-input, .crqqb .crq-select, .crqqb .crq-textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px; font-size:14px; }
.crqqb .crq-textarea { min-height:92px; }
.crqqb .section-title { font-weight:600; font-size:16px; margin-top:14px; margin-bottom:8px; }
.crqqb .crq-table-wrap { border:1px solid var(--line); border-radius:8px; overflow:auto; }
.crqqb .crq-table-wrap table {
  /* Ensure item table cells are wider by setting a minimum width; horizontal scroll will appear if needed */
  min-width: 1100px;
}
.crqqb table { width:100%; border-collapse:collapse; font-size:13px; }
.crqqb thead th { position:sticky; top:0; background:#fafafa; border-bottom:1px solid var(--line); text-align:left; padding:8px; }
.crqqb tbody td { border-bottom:1px solid var(--line); padding:6px 8px; }
.crqqb .actions { display:flex; gap:8px; flex-wrap:wrap; }
.crqqb .crq-btn { background:#111827; color:white; border:0; border-radius:8px; padding:12px 16px; font-size:15px; cursor:pointer; }
.crqqb .crq-btn.secondary { background:#374151; }
.crqqb .sticky-bar { position:sticky; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; background:#fff; border-top:1px solid var(--line); }
.crqqb .muted { color: var(--muted); }
.crqqb .small { font-size:12px; color: var(--muted); }

/* Mobile-friendly adjustments */
@media (max-width: 640px) {
  /* Stack all grid items vertically on small screens */
  .crqqb .crq-grid {
    grid-template-columns: 1fr;
  }
  /* Ensure inputs and selects fill available width */
  .crqqb .crq-input,
  .crqqb .crq-select,
  .crqqb .crq-textarea {
    width: 100%;
  }
  /* Tables become horizontally scrollable */
  .crqqb .crq-table-wrap {
    overflow-x: auto;
  }
  /* Buttons stack vertically with full width */
  .crqqb .actions {
    flex-direction: column;
  }
  .crqqb .crq-btn {
    width: 100%;
    text-align: center;
  }
  .crqqb .sticky-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Preview table numeric alignment and optional column visibility */
.crqqb table { table-layout: fixed; }
.crqqb thead th:nth-child(5), .crqqb tbody td:nth-child(5),
.crqqb thead th:nth-child(6), .crqqb tbody td:nth-child(6),
.crqqb thead th:nth-child(7), .crqqb tbody td:nth-child(7),
.crqqb thead th:nth-child(11), .crqqb tbody td:nth-child(11) { text-align: right; font-variant-numeric: tabular-nums; }
/* Hide Rate column (8th) per requirement */
.crqqb thead th:nth-child(8), .crqqb tbody td:nth-child(8) { display: none; }