/* Quick Bill — public anonymous bill builder. Loaded alongside /style.css,
   which already defines the --primary / --border / --muted etc. tokens.
   UI/UX redesign only — no calculation, DB, save/token or PDF logic lives
   here. Every id/class the JS (quick-bill.js) queries is unchanged; classes
   added by this redesign are new, additive markup only (logo states,
   mobile item-card pairing, sticky CTA, notice pills). */

*, *::before, *::after { box-sizing: border-box; }

/* Fast local/system font stack — no external Google Fonts request. Looks
   excellent even where "Inter" itself isn't installed, and never blocks or
   delays first paint of the core UI on a slow mobile connection. */
:root {
    --qb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
    --qb-radius: 10px;
    --qb-safe-b: env(safe-area-inset-bottom, 0px);
    --qb-safe-t: env(safe-area-inset-top, 0px);
}

html { -webkit-text-size-adjust: 100%; }
body { background: #f5f7f6; font-family: var(--qb-font); }
.qb-wrap, .qb-topbar { font-family: var(--qb-font); }
.qb-wrap h1, .qb-wrap h3, .qb-topbar .qb-brand { font-family: var(--qb-font); font-weight: 700; }

/* ---------------------------------------------------------------- */
/* Header                                                             */
/* ---------------------------------------------------------------- */
.qb-topbar {
    background: #fff;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: var(--qb-safe-t);
}
.qb-topbar-inner {
    max-width: 1450px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; gap: 14px;
}
.qb-topbar .qb-brand {
    font-weight: 800; font-size: 19px; text-decoration: none; color: var(--primary);
    letter-spacing: -.01em; flex: none;
}
.qb-topbar nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.qb-topbar nav a {
    color: var(--text); text-decoration: none; opacity: .85;
    padding: 6px 2px; white-space: nowrap;
}
.qb-topbar nav a:hover, .qb-topbar nav a:focus-visible { opacity: 1; }
.qb-topbar nav a.qb-topbar-cta {
    background: var(--primary); color: #fff; opacity: 1; padding: 9px 16px;
    border-radius: 7px; font-weight: 600; font-size: 13.5px;
}
.qb-topbar nav a.qb-topbar-cta:hover { background: var(--primary-dark); }

@media (max-width: 480px) {
    .qb-topbar-inner { padding: 10px 14px; gap: 8px; }
    .qb-topbar .qb-brand { font-size: 17px; }
    .qb-topbar nav { gap: 10px; font-size: 13px; }
    .qb-topbar nav a.qb-topbar-cta { padding: 8px 11px; font-size: 12.5px; }
}
@media (max-width: 370px) {
    .qb-topbar nav a.qb-home-link { display: none; } /* Log In + Create Free Account stay — the two actions a visitor actually needs */
}

/* ---------------------------------------------------------------- */
/* Page shell                                                        */
/* ---------------------------------------------------------------- */
.qb-wrap { max-width: 1450px; margin: 0 auto; padding: 0 24px 60px; }
@media (max-width: 767px) {
    /* Room for the sticky mobile Generate/Update bar so it never overlaps
       the last field or the bank-details section above it. */
    .qb-wrap { padding-bottom: calc(96px + var(--qb-safe-b)); }
}

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */
.qb-hero-h1 { margin: 26px 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; text-align: center; }
.qb-hero { padding: 0 0 18px; text-align: center; }
.qb-hero .qb-hero-sub { margin: 0 auto 14px; max-width: 560px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.qb-hero-features { display: flex; justify-content: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--primary-dark); font-weight: 600; }
.qb-hero-features span { display: inline-flex; align-items: center; gap: 5px; }
.qb-hint { font-size: 13px; color: var(--muted); margin: 2px 0 16px; }

/* Kept for the edit-bill title (h1 without the hero wrapper) */
.qb-wrap > h1 { margin-bottom: 2px; }

@media (max-width: 480px) {
    .qb-hero-h1 { font-size: 21px; margin-top: 16px; line-height: 1.25; }
    .qb-hero { padding-bottom: 14px; }
    .qb-hero .qb-hero-sub { font-size: 13.5px; margin-bottom: 10px; }
    .qb-hero-features { gap: 6px 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------- */
/* Restored-draft / saved-bill notice banner                         */
/* ---------------------------------------------------------------- */
.qb-notice {
    background: var(--success-bg); border: 1px solid var(--primary); border-radius: var(--qb-radius);
    padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; display: flex;
    align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
}
.qb-notice > span:first-child { flex: 1 1 220px; }
.qb-notice-links { display: flex; gap: 8px; flex-wrap: wrap; }
/* Each action is its own clearly-tappable pill — never run together as
   plain inline links, which is what made "Continue editing" / "View it" /
   "Dismiss" read as one concatenated word on small screens. */
.qb-notice-links a, .qb-pill {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; text-decoration: none; white-space: nowrap;
    padding: 7px 13px; border-radius: 7px; min-height: 36px;
    background: #fff; border: 1px solid var(--primary); color: var(--primary);
}
.qb-notice-links a:hover, .qb-notice-links a:focus-visible { background: var(--primary); color: #fff; }
.qb-notice-links a.qb-pill-quiet { border-color: var(--border); color: var(--muted); }
.qb-notice-links a.qb-pill-quiet:hover { background: #eef1ef; color: var(--text); }
@media (max-width: 480px) {
    .qb-notice { flex-direction: column; align-items: stretch; }
    .qb-notice-links { flex-direction: column; }
    .qb-notice-links a { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* Builder / Preview grid                                            */
/* ---------------------------------------------------------------- */
.qb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}
@media (min-width: 1200px) {
    .qb-grid { grid-template-columns: minmax(720px, 1.35fr) minmax(390px, .75fr); }
    .qb-preview-col { position: sticky; top: 78px; }
}
@media (min-width: 980px) and (max-width: 1199px) {
    .qb-preview-col { margin-top: 4px; }
}

.qb-builder-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 0 0 10px 2px; }

/* ---------------------------------------------------------------- */
/* Cards                                                              */
/* ---------------------------------------------------------------- */
.qb-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 20px;
    margin-bottom: 14px;
}
.qb-section h3 { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; }
.qb-section .qb-section-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.qb-section-toggle {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent; margin: -2px -2px 0; padding: 2px;
}
.qb-section-toggle .arrow { transition: transform .15s; color: var(--muted); flex: none; margin-left: 10px; }
.qb-section.collapsed .qb-section-body { display: none; }
.qb-section.collapsed .arrow { transform: rotate(-90deg); }
.qb-section.collapsed { padding-bottom: 18px; }

.qb-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qb-row > div { flex: 1; min-width: 150px; }
/* Always 2-up, even on narrow phones — for short paired fields (Bill
   Number/Date, PO/Place of Supply) this fills the row and halves the
   scroll distance to Items, instead of stacking four full-width fields. */
.qb-row-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 12px; }
.qb-row label, .qb-section label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.qb-label-required { color: var(--primary-dark); }
.qb-label-strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.qb-section input[type=text], .qb-section input[type=tel], .qb-section input[type=number], .qb-section input[type=date],
.qb-section select, .qb-section textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 15px; font-family: inherit; background: #fff; color: var(--text);
    height: 41px; transition: border-color .12s, box-shadow .12s; -webkit-appearance: none;
}
.qb-section textarea { resize: vertical; min-height: 60px; height: auto; }
.qb-section input:focus, .qb-section select:focus, .qb-section textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 95, 74, .12);
}
.qb-section input::placeholder, .qb-section textarea::placeholder { color: #a3aba7; }
.qb-input-priority { font-size: 16px; font-weight: 600; height: 46px; border-width: 1.5px; }

/* ---------------------------------------------------------------- */
/* Segmented Document-Type selector                                  */
/* ---------------------------------------------------------------- */
.qb-doctype {
    display: flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; background: #fff;
}
.qb-doctype label {
    flex: 1; text-align: center; padding: 9px 6px;
    font-size: 13px; line-height: 1.3; cursor: pointer; color: var(--text);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border-right: 1px solid var(--border); min-height: 40px;
    -webkit-tap-highlight-color: transparent;
}
.qb-doctype label:last-child { border-right: none; }
.qb-doctype input { margin: 0; position: absolute; opacity: 0; width: 0; height: 0; }
.qb-doctype label.active { background: var(--primary); color: #fff; font-weight: 600; }
@media (max-width: 420px) {
    .qb-doctype label { font-size: 11.5px; padding: 8px 4px; }
}

.qb-statetoggle { display: flex; gap: 8px; margin-bottom: 4px; }
.qb-statetoggle label {
    flex: 1; text-align: center; border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 8px; font-size: 13px; cursor: pointer; line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
.qb-statetoggle input { display: none; }
.qb-statetoggle label.active { background: var(--success-bg); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.qb-taxtype-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 14px 0 8px; }

/* ---------------------------------------------------------------- */
/* Items table                                                       */
/* ---------------------------------------------------------------- */
.qb-items-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.qb-items-table { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: collapse; margin-bottom: 0; }
.qb-items-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
    text-align: left; padding: 10px 8px; background: #f3f5f4; border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.qb-items-table tbody td { padding: 8px; vertical-align: middle; border-bottom: 1px solid #eef1ef; }
.qb-items-table tbody tr:last-child td { border-bottom: none; }
.qb-items-table input, .qb-items-table select {
    padding: 8px 9px; font-size: 15px; height: 40px; border: 1px solid var(--border);
    border-radius: 7px; width: 100%; background: #fff; font-family: inherit; -webkit-appearance: none;
}
.qb-items-table input:focus, .qb-items-table select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 95, 74, .12);
}
.qb-items-table .qb-col-name input { font-weight: 600; }
.qb-items-table .qb-amt { font-size: 13.5px; font-weight: 700; white-space: nowrap; text-align: right; color: var(--text); }
.qb-items-table .qb-del {
    background: none; border: none; color: var(--danger); cursor: pointer; font-size: 17px;
    padding: 8px; border-radius: 6px; min-width: 36px; min-height: 36px;
}
.qb-items-table .qb-del:hover, .qb-items-table .qb-del:focus-visible { background: var(--danger-bg); }

/* Fixed layout: the visible column widths below come from the <colgroup> in
   index.php (fixed table layout requires that, not per-cell CSS, to hold
   reliably) — Product is the only column left unsized there, so it soaks up
   whatever width remains. These classes now only carry alignment/behavior,
   not sizing. A container narrower than the table's 860px min-width scrolls
   horizontally inside .qb-items-wrap rather than ever squeezing a column. */
.qb-col-amt { text-align: right; }
.qb-col-del { text-align: center; }

.qb-items-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.qb-items-actions #qbAddItem { min-height: 44px; }
.qb-items-actions #qbAddItem:disabled { opacity: .5; cursor: not-allowed; }
.qb-items-limit-note { font-size: 12.5px; color: var(--muted); }
.qb-items-limit-note a { font-weight: 600; }
.qb-items-limit-note.qb-items-limit-hit { color: var(--primary-dark); background: var(--success-bg); border: 1px solid var(--primary); border-radius: 8px; padding: 8px 12px; }

/* Below this width a 9-column table can't fit typed values on screen — each
   item becomes a labeled stacked CARD instead, using the same td.qb-col-*
   classes JS already assigns (renderRows() in quick-bill.js), so this rule
   covers every column with no per-column CSS or markup change needed.
   The card lays its fields out on a 2-column CSS grid: the always-full-width
   columns (Product/Service, HSN, GST, Amount) explicitly span both columns,
   and the two remaining pairs — Qty+Unit, Rate+Discount — fall into the
   grid's normal auto-flow two-per-row, which is what pairs them side by
   side exactly as intended, without needing to reorder the DOM. */
@media (max-width: 680px) {
    .qb-items-wrap { border: none; overflow: visible; }
    .qb-items-table { min-width: 0; }
    .qb-items-table thead { display: none; }
    .qb-items-table, .qb-items-table tbody { display: block; width: 100%; }
    .qb-items-table tr {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px;
        position: relative; width: 100%;
        border: 1px solid var(--border); border-radius: 12px;
        padding: 14px 46px 14px 14px; margin-bottom: 12px; background: var(--card);
    }
    .qb-items-table td {
        width: auto; padding: 6px 0; border: none;
    }
    .qb-items-table td.qb-col-name,
    .qb-items-table td.qb-col-hsn,
    .qb-items-table td.qb-col-gst,
    .qb-items-table td.qb-col-amt {
        grid-column: 1 / -1;
    }
    .qb-items-table td[data-label]::before {
        content: attr(data-label); display: block; font-size: 11px;
        text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
        font-weight: 600; margin-bottom: 4px;
    }
    .qb-items-table input, .qb-items-table select { width: 100%; box-sizing: border-box; height: 44px; }
    .qb-items-table .qb-col-name input { font-size: 16px; }
    .qb-items-table .qb-amt { text-align: left; font-size: 16px; padding-top: 2px; }
    .qb-items-table td.qb-col-del {
        position: absolute; top: 10px; right: 8px; width: auto; padding: 0; grid-column: auto;
    }
    .qb-items-table td.qb-col-del::before { content: none; }
    .qb-items-table .qb-del { font-size: 20px; padding: 8px; }
}

/* ---------------------------------------------------------------- */
/* Logo upload                                                       */
/* ---------------------------------------------------------------- */
.qb-logo-drop {
    border: 1.5px dashed var(--border); border-radius: 10px; padding: 20px 14px;
    text-align: center; cursor: pointer; font-size: 13px; color: var(--muted);
    background: #fafcfb; transition: border-color .12s, background .12s;
    -webkit-tap-highlight-color: transparent;
}
.qb-logo-drop:hover, .qb-logo-drop:focus-visible { border-color: var(--primary); background: var(--success-bg); }
.qb-logo-drop .qb-logo-drop-icon { font-size: 22px; margin-bottom: 4px; opacity: .7; }
.qb-logo-drop .qb-logo-drop-title { color: var(--text); font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }

/* Uploaded state — logo preview thumbnail + explicit Change/Remove actions,
   never a plain image the person has to guess is clickable. */
.qb-logo-uploaded {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fafcfb;
}
.qb-logo-preview-img {
    max-height: 56px; max-width: 120px; display: block; border-radius: 6px;
    background: #fff; border: 1px solid var(--border); padding: 4px; flex: none;
}
.qb-logo-meta { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.qb-logo-uploaded-label { font-size: 13px; font-weight: 600; color: var(--primary-dark); }
.qb-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qb-logo-btn {
    font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 7px;
    min-height: 34px; cursor: pointer; background: #fff; border: 1px solid var(--border); color: var(--text);
}
.qb-logo-btn:hover, .qb-logo-btn:focus-visible { border-color: var(--primary); color: var(--primary); }
.qb-logo-btn-danger { color: var(--danger); }
.qb-logo-btn-danger:hover, .qb-logo-btn-danger:focus-visible { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- */
/* Generate bar — the reliable, always-present trailing CTA. A duplicate
   sticky bar (below) mirrors it on small screens; both post the SAME form
   (form="qbForm"), so only one submit ever fires no matter which is tapped. */
/* ---------------------------------------------------------------- */
.qb-generate-bar {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 18px; margin: 4px 0 0; display: flex;
    align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.qb-generate-bar-text { font-size: 14px; font-weight: 600; color: var(--text); }
.qb-generate-btn { min-width: 180px; min-height: 48px; font-size: 15px; font-weight: 700; }
.qb-generate-btn::after { content: ' \2192'; }

/* Mobile sticky duplicate — fixed to the viewport bottom, safe-area aware.
   Hidden entirely at >=768px, where the trailing bar above is already right
   at hand. Deliberately a plain fixed bar, not scroll-linked JS, so it can
   never desync or jump. */
.qb-sticky-cta {
    display: none;
}
@media (max-width: 767px) {
    .qb-sticky-cta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
        background: #fff; border-top: 1px solid var(--border);
        padding: 10px 14px calc(10px + var(--qb-safe-b));
        box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    }
    .qb-sticky-cta .qb-generate-btn { width: 100%; display: block; }
}

/* ---------------------------------------------------------------- */
/* Live preview                                                      */
/* ---------------------------------------------------------------- */
.qb-preview-panel { background: transparent; }
.qb-preview-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 10px; padding: 0 2px;
}
.qb-preview-toolbar .qb-preview-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qb-preview-toolbar .qb-preview-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.qb-preview-toolbar .qb-preview-zoom { font-size: 12px; color: var(--muted); background: #eef1ef; padding: 4px 9px; border-radius: 6px; flex: none; }

.qb-preview-frame {
    background: #eef1ef; border-radius: 12px; padding: 18px 14px; display: flex; justify-content: center;
}

.qb-preview {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 22px; font-size: 12.5px; color: #1a1a1a; line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    width: 100%; max-width: 460px; aspect-ratio: 210 / 297; overflow-y: auto;
}
.qb-preview .qb-p-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--primary); padding-bottom: 10px; margin-bottom: 10px; }
.qb-preview .qb-p-head img { max-height: 46px; max-width: 120px; margin-bottom: 6px; }
.qb-preview .qb-p-company { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.qb-preview .qb-p-doctype { font-size: 14px; font-weight: 700; text-align: right; color: var(--primary); }
.qb-preview .qb-p-meta { font-size: 11.5px; text-align: right; color: var(--muted); margin-top: 4px; }
.qb-preview .qb-p-parties { display: flex; gap: 14px; margin-bottom: 10px; }
.qb-preview .qb-p-parties > div { flex: 1; }
.qb-preview .qb-p-label { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.qb-preview table.qb-p-items { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.qb-preview table.qb-p-items th, .qb-preview table.qb-p-items td { border: 1px solid #ddd; padding: 4px 5px; font-size: 11.5px; }
.qb-preview table.qb-p-items th { background: #f3f5f4; text-align: left; }
.qb-preview .qb-p-totals { margin-left: auto; width: 220px; font-size: 12.5px; }
.qb-preview .qb-p-totals div { display: flex; justify-content: space-between; padding: 2px 0; }
.qb-preview .qb-p-totals .qb-p-grand { border-top: 1.5px solid #333; font-weight: 700; font-size: 14px; padding-top: 4px; margin-top: 2px; }
.qb-preview .qb-p-words { font-size: 11px; color: var(--muted); margin: 8px 0; font-style: italic; }
.qb-preview .qb-p-empty { color: var(--muted); text-align: center; padding: 40px 10px; font-size: 13px; }
.qb-preview .qb-p-footer { display: flex; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; font-size: 11.5px; }
.qb-preview .qb-p-footer-col { flex: 1; min-width: 0; }
.qb-preview .qb-p-footer-col div { margin-bottom: 2px; color: #444; }
.qb-preview table.qb-p-items th[style*="right"], .qb-preview table.qb-p-items td[style*="right"] { text-align: right; }
@media (max-width: 460px) {
    .qb-preview .qb-p-footer { flex-direction: column; gap: 10px; }
}
@media (max-width: 1199px) {
    .qb-preview { aspect-ratio: auto; max-width: 620px; }
}

/* ---- Ready screen ---- */
.qb-ready { text-align: center; padding: 40px 6px 4px; max-width: 620px; margin: 0 auto; }
.qb-ready .qb-check {
    width: 56px; height: 56px; border-radius: 50%; background: var(--success-bg);
    color: var(--primary); font-size: 28px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.qb-ready h1 { font-size: 24px; }
.qb-ready .qb-ready-total { font-size: 30px; font-weight: 800; color: var(--text); margin: 6px 0 2px; }
.qb-ready-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0 28px; }
.qb-ready-actions .btn { min-width: 150px; min-height: 46px; }
.qb-cta-box {
    background: var(--success-bg); border: 1px solid var(--primary); border-radius: 12px;
    padding: 22px; text-align: left; max-width: 460px; margin: 0 auto;
}
.qb-cta-box ul { margin: 12px 0; padding-left: 20px; font-size: 13.5px; }
.qb-cta-box li { margin-bottom: 5px; }

@media (max-width: 640px) {
    .qb-wrap { padding-left: 14px; padding-right: 14px; }
    .qb-row { flex-direction: column; }
    .qb-row > div { min-width: 0; }
    .qb-generate-bar { flex-direction: column; align-items: stretch; }
    .qb-generate-btn { width: 100%; }
}

/* Prevent any horizontal page overflow on narrow Android widths. */
@media (max-width: 400px) {
    .qb-ready-actions .btn { min-width: 0; flex: 1 1 45%; }
}