/* Quebius app components. Class prefix qb- (app.quebius.com and admin.quebius.com).
   The embeddable chat widget uses the qw- prefix and its own custom properties. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 24px; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.qb-i { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -0.125em; }
.qb-pad { padding: var(--space-6); }
.qb-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.qb-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.qb-stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.qb-muted { color: var(--ink-muted); }
.qb-mono { font-family: var(--font-mono); }
.qb-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.qb-link:hover { color: var(--plum-strong); }
.qb-skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 10000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--plum);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.qb-skip-link:focus {
  left: var(--space-2);
  outline: none;
  box-shadow: var(--focus-ring);
}

.qb-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.qb-js a:focus { outline: none; }
.qb-js a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.qb-js .qb-account:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qb-js .qb-sidebar-foot a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.qb-h { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.qb-p { margin: 0; }
.qb-small { font-size: 13px; line-height: 20px; }
.qb-sr, .qb-input.qb-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.qb-sep { height: 1px; background: var(--line); border: 0; margin: 0; }


/* ---------- Button ---------- */
.qb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-5); border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.qb-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qb-btn--primary { background: var(--plum); color: var(--on-plum); }
.qb-btn--primary:hover { background: var(--plum-strong); }
.qb-btn--secondary { background: transparent; color: var(--plum); border-color: var(--plum); }
.qb-btn--secondary:hover { background: var(--plum); color: var(--on-plum); }
.qb-btn--ghost { background: transparent; color: var(--ink); }
.qb-btn--ghost:hover { background: var(--surface-sunken); }
.qb-btn--danger { background: var(--danger); color: var(--on-danger); }
.qb-btn--danger:hover { filter: brightness(.92); }
.qb-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 13px; }
.qb-btn--lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: 16px; }
.qb-btn--block { width: 100%; }
.qb-btn--icon { width: var(--control-md); padding: 0; }
.qb-btn--icon.qb-btn--sm { width: var(--control-sm); }
.qb-btn[disabled], .qb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.qb-btn[aria-busy="true"] .qb-i { animation: qb-spin .8s linear infinite; }
@keyframes qb-spin { to { transform: rotate(360deg); } }
.qb-btn--on-navy { background: transparent; color: var(--on-navy); border-color: var(--on-navy-muted); }
.qb-btn--on-navy:hover { background: var(--navy-raised); }

/* ---------- Fields ---------- */
.qb-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
:root { --dialog-max: 520px; }
.qb-form { display: flex; flex-direction: column; gap: var(--space-6); }
.qb-form--settings { width: 100%; gap: 0; }
.qb-pagecard .qb-form, .qb-pagecard.qb-form { gap: 0; width: 100%; }
.qb-grid-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-5); align-items: start; width: 100%; }
.qb-span-1 { grid-column: span 1; }
.qb-span-2 { grid-column: span 2; }
.qb-span-3 { grid-column: span 3; }
.qb-span-4 { grid-column: span 4; }
.qb-span-5 { grid-column: span 5; }
.qb-span-6 { grid-column: span 6; }
.qb-span-7 { grid-column: span 7; }
.qb-span-8 { grid-column: span 8; }
.qb-span-9 { grid-column: span 9; }
.qb-span-10 { grid-column: span 10; }
.qb-span-11 { grid-column: span 11; }
.qb-span-12 { grid-column: span 12; }
.qb-pagecard .qb-section, .qb-card .qb-section { padding: var(--space-6); }
.qb-pagecard { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; width: 100%; }
.qb-pagehead { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; padding: var(--space-6) var(--space-6) var(--space-6); flex-wrap: wrap; }
.qb-pagecard > .qb-pagehead + .qb-stats { margin-top: 0; }
.qb-pagehead .qb-page-title { font-size: 22px; line-height: 28px; margin: 0 0 4px; }
.qb-pagehead .qb-page-sub { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.qb-pagecard .qb-tabs, .qb-pagecard > .qb-tabs { padding-inline: 16px; margin-top: var(--space-4); margin-bottom: 0; border-bottom: 1px solid var(--line); }
.qb-pagecard > .qb-pagehead + .qb-table-wrap, .qb-pagecard > .qb-pagehead + .qb-toolbar { margin-top: var(--space-5); }
.qb-pagecard .qb-section + .qb-section, .qb-pagecard .qb-section + details.qb-advanced, .qb-pagecard details.qb-advanced + .qb-section, .qb-pagecard form + form .qb-section, .qb-pagecard > form + form { border-top: 1px solid var(--line); }
.qb-pagecard > .qb-pagehead + .qb-section, .qb-pagecard > .qb-pagehead + form .qb-section:first-child, .qb-pagecard form > .qb-pagehead + .qb-section, .qb-pagecard > .qb-pagehead + .qb-alert + .qb-section { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.qb-pagecard .qb-advanced, .qb-pagecard > .qb-advanced, .qb-card .qb-advanced, .qb-card > .qb-advanced { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; }
.qb-pagecard .qb-stats { padding: var(--space-6); gap: var(--space-4); }
.qb-pagecard .qb-savebar, .qb-pagecard > .qb-savebar { width: 100%; box-sizing: border-box; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); position: sticky; bottom: 0; box-shadow: 0 -4px 12px rgb(0 38 66 / 6%); background: var(--surface-raised); z-index: 10; }
.qb-pagefoot { padding: 14px 24px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.qb-toolbar { display: flex; gap: var(--space-3); align-items: flex-start; padding: 0 var(--space-6) var(--space-5); flex-wrap: wrap; }
.qb-toolbar .qb-field { flex: 1 1 320px; }
.qb-toolbar-btns { display: flex; gap: var(--space-3); align-items: center; padding-top: 26px; flex-wrap: wrap; }
.qb-table-wrap { overflow-x: auto; }
.qb-pagecard > .qb-table-wrap { border-top: 1px solid var(--line); }
.qb-cell-sub { display: block; color: var(--ink-muted); font-size: 13px; }
.qb-you { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--plum-soft); color: var(--plum-strong); margin-left: 8px; vertical-align: 1px; }
.qb-section { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; padding: var(--space-6); }
.qb-section-title { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 600; }
.qb-section-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-form-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.qb-form-split > .qb-group { padding-right: var(--space-6); min-width: 0; }
.qb-form-split > .qb-group + .qb-group { padding-left: var(--space-6); padding-right: 0; border-left: 1px solid var(--line); }
.qb-group-title { margin: 0 0 4px; font-size: 15px; line-height: 20px; font-weight: 600; }
.qb-group > .qb-hint { margin: 0 0 14px; }
.qb-act { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.qb-act .qb-hint { display: inline-flex; gap: 6px; align-items: center; }
.qb-hidden { display: none !important; }
.qb-conv-back { padding: var(--space-4) var(--space-6) 0; }
.qb-conv-title { margin: 0 0 var(--space-2); font-size: 20px; line-height: 28px; }
.qb-conv-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-bottom: var(--space-4); }
.qb-conv-transcript { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); max-width: 720px; }
.qb-conv-line { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); max-width: 92%; }
.qb-conv-line--visitor { align-self: flex-start; border-bottom-left-radius: var(--radius-sm); }
.qb-conv-line--assistant { align-self: flex-end; background: var(--plum-soft); border-bottom-right-radius: var(--radius-sm); }
.qb-conv-line-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-1); }
.qb-conv-role { font-size: 13px; font-weight: 600; color: var(--ink); }
.qb-conv-time { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.qb-conv-line p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 20px; }
.qb-conv-lead { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); max-width: 720px; }
.qb-conv-lead-title { margin: 0 0 var(--space-2); font-size: 16px; line-height: 24px; }
.qb-pagecard .qb-stats.qb-stats--row { display: flex; flex-wrap: wrap; padding: 0; gap: 0; border-top: 1px solid var(--line); grid-template-columns: none; }
.qb-pagecard .qb-stats.qb-stats--row .qb-stat { flex: 1 1 160px; min-width: 0; padding: var(--space-6); background: transparent; border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.qb-pagecard .qb-stats.qb-stats--row .qb-stat:last-child { border-right: 0; }
.qb-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); flex-wrap: wrap; }
.qb-pagination-label { font-size: 13px; color: var(--ink-muted); }
.qb-checklist--setup li { justify-content: flex-start; }
.qb-checklist--setup .qb-hint { margin-left: auto; }
@media (min-width: 769px) and (max-width: 1024px) {
  .qb-table--conversations .qb-col-hide-md, .qb-table--leads .qb-col-hide-md { display: none; }
  .qb-pagecard > .qb-table-wrap { overflow-x: visible; }
}
@media (max-width: 768px) {
  .qb-pagecard .qb-stats.qb-stats--row { flex-direction: column; }
  .qb-pagecard .qb-stats.qb-stats--row .qb-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .qb-pagecard .qb-stats.qb-stats--row .qb-stat:last-child { border-bottom: 0; }
}
.qb-pagecard > .qb-pagehead + .qb-stats--dashboard,
.qb-pagecard > .qb-pagehead + .qb-alert + .qb-stats--dashboard { border-top: 1px solid var(--line); }
.qb-stats.qb-stats--dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; border-top: 1px solid var(--line); }
.qb-stats--dashboard .qb-stat { padding: var(--space-4) var(--space-6); border-right: 1px solid var(--line); border-bottom: 0; background: transparent; border-radius: 0; min-width: 0; }
.qb-stats--dashboard .qb-stat:last-child { border-right: 0; }
.qb-stats--dashboard .qb-stat-meta { margin: var(--space-1) 0 0; font-size: 13px; line-height: 18px; }
.qb-stats--dashboard .qb-stat-meta--primary { margin: var(--space-2) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); font-weight: 500; }
.qb-dashboard { border-top: 1px solid var(--line); }
.qb-pagecard > .qb-stats--dashboard + .qb-dashboard { border-top: 0; }
.qb-dash-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
.qb-dash-panel { grid-column: span 6; display: flex; flex-direction: column; min-height: 100%; padding: var(--space-6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.qb-dash-panel[data-span="12"] { grid-column: span 12; border-right: 0; }
.qb-dash-row .qb-dash-panel:last-child { border-right: 0; }
.qb-dash-panel-head { position: relative; padding-right: 0; margin-bottom: var(--space-4); }
.qb-dash-panel-head:has(.qb-dash-panel-actions) { padding-right: 12rem; }
.qb-dash-panel-actions { position: absolute; top: 0; right: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.qb-dash-panel-title { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 600; }
.qb-dash-panel-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-dash-panel-body { flex: 1 1 auto; min-width: 0; }
.qb-dash-panel-foot { margin-top: var(--space-4); flex-shrink: 0; }
.qb-dash-stack { display: flex; flex-direction: column; gap: var(--space-5); max-width: 100%; }
.qb-dash-stack .qb-meter { max-width: 100%; }
.qb-kv-list { margin: 0; padding: 0; list-style: none; }
.qb-kv-row { margin: 0 0 var(--space-4); }
.qb-kv-row:last-child { margin-bottom: 0; }
.qb-kv-label { margin: 0 0 var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 400; }
.qb-kv-value { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink); }
.qb-dash-panel .qb-kv-value .qb-badge { vertical-align: baseline; }
.qb-dash-plan-line { margin: 0 0 var(--space-4); }
.qb-dash-reset { margin: var(--space-4) 0 0; }
.qb-dash-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.qb-dash-metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-dash-metric--full { grid-column: 1 / -1; }
.qb-dash-metric .qb-muted { display: block; margin-bottom: var(--space-1); font-size: 13px; }
.qb-dash-list .qb-dash-list-link { display: flex; align-items: center; gap: var(--space-3); width: 100%; color: inherit; text-decoration: none; border-radius: var(--radius-md); margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2); }
.qb-dash-list .qb-dash-list-link--action:hover { background: var(--plum-soft); }
.qb-dash-list .qb-dash-list-link:hover .qb-dash-list-title { color: var(--plum); }
.qb-dash-list .qb-dash-list-link--action .qb-i { margin-left: auto; width: 14px; height: 14px; color: var(--ink-muted); flex-shrink: 0; }
.qb-dash-list .qb-dash-list-link--action:hover .qb-i { color: var(--plum); }
.qb-dash-list-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qb-dash-list-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.qb-dash-list-meta { font-size: 13px; color: var(--ink-muted); }
.qb-dash-list-link--action .qb-dash-list-title { flex: 1 1 auto; min-width: 0; }
.qb-dash-list .qb-badge { flex-shrink: 0; }
.qb-dash-list-action { flex-shrink: 0; font-size: 14px; }
.qb-dash-panel .qb-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; width: 100%; }
@media (max-width: 1023px) {
  .qb-stats--dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-stats--dashboard .qb-stat:nth-child(2n) { border-right: 0; }
  .qb-stats--dashboard .qb-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .qb-dash-panel { grid-column: span 12; border-right: 0; }
  .qb-dash-panel-head:has(.qb-dash-panel-actions) { padding-right: 0; padding-top: 0; }
  .qb-dash-panel-actions { position: static; margin-bottom: var(--space-3); justify-content: flex-start; }
  .qb-dash-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .qb-stats--dashboard { grid-template-columns: 1fr; }
  .qb-stats--dashboard .qb-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .qb-stats--dashboard .qb-stat:last-child { border-bottom: 0; }
}
.qb-stat-value--sm { font-size: 22px; line-height: 28px; }
.qb-list-plain { margin: 0; padding-left: 20px; }
.qb-filter-actions { display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }
.qb-lead-notify-row { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.qb-lead-notify-row .qb-field { flex: 1; margin-bottom: 0; }
.qb-lead-fields-table .qb-toggle { margin: 0; }
.qb-lead-fields-table tbody td { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); }
.qb-savebar { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.qb-savebar .qb-hint { margin-right: auto; align-self: center; }
.qb-stepcard { width: 100%; }
.qb-formfoot { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.qb-formfoot--end { justify-content: flex-end; }
.qb-formfoot .qb-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.qb-authcard { max-width: 440px; width: 100%; margin-inline: auto; padding: var(--space-8); }
.qb-auth-brand { font-weight: 700; font-size: 20px; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: var(--space-5); }
.qb-auth-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--raspberry); display: inline-block; flex: none; }
.qb-input--code { height: 56px; font-size: 24px; letter-spacing: .3em; text-align: center; }
.qb-status-readout { display: flex; gap: var(--space-2); align-items: center; height: var(--control-md); font-size: 13px; color: var(--ink-muted); }
.qb-status-readout.qb-hint--ok, .qb-hint--ok { color: var(--success); }
.qb-hint--err { color: var(--danger); }
.qb-text-danger { color: var(--danger); }
.qb-text-warning { color: var(--warning); }
.qb-text-success { color: var(--success); }
.qb-form .qb-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.qb-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: var(--space-2); }
.qb-label .qb-opt { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.qb-label--spacer { visibility: hidden; height: 20px; }
.qb-hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.qb-error { font-size: 13px; line-height: 20px; color: var(--danger); display: flex; gap: var(--space-2); align-items: center; margin: 0; }
.qb-input { height: var(--control-md); width: 100%; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 15px; }
.qb-input::placeholder { color: var(--ink-muted); }
.qb-input:focus { outline: none; border-color: var(--plum); box-shadow: var(--focus-ring); }
.qb-input[aria-invalid="true"] { border-color: var(--danger); }
.qb-input[disabled], .qb-input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
.qb-input--lg { height: var(--control-lg); }
textarea.qb-input { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); line-height: 24px; resize: vertical; }
select.qb-input, .qb-select { height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.qb-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.qb-select:focus { outline: none; border-color: var(--plum); box-shadow: var(--focus-ring); }
.qb-select[disabled], .qb-select[readonly] { background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; }

.qb-input-group { display: flex; align-items: stretch; width: 100%; }
.qb-input-group .qb-input-prefix { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); height: var(--control-md); background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line-strong); border-right: 0; border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); font-size: 15px; font-weight: 500; flex: 0 0 auto; }
.qb-input-group .qb-input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1 1 auto; min-width: 0; width: auto; }
.qb-input-group .qb-input:focus { z-index: 2; }
.qb-input-group:has(.qb-input:disabled) .qb-input-prefix { background: var(--surface-sunken); opacity: 0.6; }
.qb-input-wrap { position: relative; display: flex; align-items: center; }
.qb-input-wrap > .qb-i { position: absolute; left: var(--space-3); color: var(--ink-muted); pointer-events: none; }
.qb-input-wrap > .qb-i ~ .qb-input { padding-left: 38px; }
.qb-input-wrap > .qb-input-action { position: absolute; right: var(--space-1); }
.qb-input-wrap > .qb-input-action ~ .qb-input, .qb-input-wrap .qb-input:has(~ .qb-input-action) { padding-right: 44px; }
.qb-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Password checklist: one marker per rule; label colour does not change with state */
.qb-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 20px; }
.qb-checklist li { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); }
.qb-checklist-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; flex: none; box-sizing: border-box; }
.qb-checklist-mark .qb-i { display: none; width: 9px; height: 9px; color: #ffffff; }
.qb-checklist li.is-met .qb-checklist-mark { background: var(--success); border-color: var(--success); }
.qb-checklist li.is-met .qb-checklist-mark .qb-i { display: block; color: #ffffff; }

.qb-check { display: flex; gap: var(--space-2); align-items: center; font-size: 14px; line-height: 20px; cursor: pointer; }
.qb-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--plum); cursor: pointer; }
.qb-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* One-time code */
.qb-otp { display: flex; gap: var(--space-2); justify-content: center; align-items: center; }
.qb-otp input { width: 48px; height: 56px; text-align: center; font: inherit; font-family: var(--font-mono); font-size: 24px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); caret-color: var(--plum); }
.qb-otp input:focus { outline: none; border-color: var(--plum); box-shadow: var(--focus-ring); }
.qb-otp[aria-invalid="true"] input { border-color: var(--danger); }
.qb-otp-sep { width: var(--space-2); height: 2px; background: var(--line-strong); }

/* Toggle */
.qb-toggle { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.qb-toggle input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; margin: 0; border-radius: var(--radius-full); background: var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background-color .15s ease; }
.qb-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-raised); transition: transform .15s ease; }
.qb-toggle input:checked { background: var(--plum); }
.qb-toggle input:checked::after { transform: translateX(16px); }
.qb-toggle input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qb-toggle input:disabled { opacity: .5; cursor: not-allowed; }
.qb-toggle-text { display: flex; flex-direction: column; }
.qb-toggle-title { font-size: 15px; line-height: 24px; font-weight: 500; }
.qb-toggle-desc { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Colour field */
.qb-colour { display: flex; align-items: center; gap: var(--space-2); }
.qb-colour input[type="color"] { appearance: none; -webkit-appearance: none; width: var(--control-md); height: var(--control-md); padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; }
.qb-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.qb-colour input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.qb-colour input[type="color"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qb-colour .qb-input { width: 128px; font-family: var(--font-mono); text-transform: uppercase; }
.qb-contrast { display: inline-flex; gap: var(--space-2); align-items: center; font-size: 13px; line-height: 20px; }
.qb-contrast-chip { display: inline-grid; place-items: center; width: 28px; height: 20px; border-radius: 4px; font-size: 12px; font-weight: 700; }

/* Widget position picker */
.qb-pos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); max-width: 360px; border: 0; padding: 0; margin: 0; }
.qb-pos-opt { position: relative; display: block; cursor: pointer; }
.qb-pos-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qb-pos-opt input:focus { outline: none; }
.qb-pos-frame { display: block; position: relative; height: 84px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; }
.qb-pos-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--line); }
.qb-pos-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-muted); }
.qb-pos-opt[data-pos="tl"] .qb-pos-dot { left: 10px; top: 22px; }
.qb-pos-opt[data-pos="tr"] .qb-pos-dot { right: 10px; top: 22px; }
.qb-pos-opt[data-pos="bl"] .qb-pos-dot { left: 10px; bottom: 10px; }
.qb-pos-opt[data-pos="br"] .qb-pos-dot { right: 10px; bottom: 10px; }
.qb-pos-label { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-2); font-size: 13px; line-height: 16px; font-weight: 500; }
.qb-pos-label .qb-i { display: none; color: var(--plum); }
.qb-pos-opt input:checked + .qb-pos-frame { border: 2px solid var(--plum); background: var(--plum-soft); }
.qb-pos-opt input:checked + .qb-pos-frame .qb-pos-dot { background: var(--plum); }
.qb-pos-opt input:checked ~ .qb-pos-label .qb-i { display: inline-block; }
.qb-pos-opt input:focus-visible + .qb-pos-frame { box-shadow: var(--focus-ring); }

/* ---------- Card ---------- */
.qb-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.qb-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.qb-card-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.qb-card-sub { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.qb-card-body { padding: var(--space-6); }
.qb-card-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.qb-card .qb-advanced, .qb-card > .qb-advanced { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; }
.qb-advanced > summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6); font-weight: 600; display: flex; gap: var(--space-2); align-items: center; }
.qb-advanced > summary::-webkit-details-marker { display: none; }
.qb-advanced > summary::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.qb-advanced[open] > summary::before { transform: rotate(90deg); }
.qb-advanced > .qb-section { padding-top: 0; }

/* ---------- Badge ---------- */
.qb-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); }
.qb-badge .qb-i { font-size: 11px; }
.qb-badge--plum { background: var(--plum-soft); color: var(--plum); border-color: transparent; }
.qb-badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.qb-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.qb-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.qb-badge--navy { background: var(--navy); color: var(--on-navy); border-color: transparent; }
.qb-env { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: 4px; background: var(--raspberry); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Alert ---------- */
.qb-alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink); font-size: 14px; line-height: 20px; }
.qb-alert > .qb-i { font-size: 16px; margin-top: 2px; }
.qb-alert-title { display: block; font-weight: 600; }
.qb-alert-body { flex: 1; }
.qb-alert-body p { margin: 0; }
.qb-alert--success { background: var(--success-soft); border-color: transparent; }
.qb-alert--success > .qb-i { color: var(--success); }
.qb-alert--warning { background: var(--warning-soft); border-color: transparent; }
.qb-alert--warning > .qb-i { color: var(--warning); }
.qb-alert--danger { background: var(--danger-soft); border-color: transparent; }
.qb-alert--danger > .qb-i { color: var(--danger); }
.qb-alert--info > .qb-i { color: var(--plum); }

/* ---------- Usage meter ---------- */
.qb-meter { display: flex; flex-direction: column; gap: var(--space-2); }
.qb-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 13px; line-height: 20px; }
.qb-meter-label { font-weight: 600; }
.qb-meter-value { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.qb-meter-track { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.qb-meter-fill { height: 100%; border-radius: inherit; background: var(--success); }
.qb-meter-note { display: flex; gap: var(--space-2); align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--success); }
.qb-meter--warning .qb-meter-fill { background: var(--warning); }
.qb-meter--warning .qb-meter-note { color: var(--warning); }
.qb-meter--danger .qb-meter-fill { background: var(--danger); }
.qb-meter--danger .qb-meter-note { color: var(--danger); }
.qb-meter--compact .qb-meter-track { height: 6px; }

.qb-pct-0 { width: 0%; }
.qb-pct-5 { width: 5%; }
.qb-pct-10 { width: 10%; }
.qb-pct-15 { width: 15%; }
.qb-pct-20 { width: 20%; }
.qb-pct-25 { width: 25%; }
.qb-pct-30 { width: 30%; }
.qb-pct-35 { width: 35%; }
.qb-pct-40 { width: 40%; }
.qb-pct-45 { width: 45%; }
.qb-pct-50 { width: 50%; }
.qb-pct-55 { width: 55%; }
.qb-pct-60 { width: 60%; }
.qb-pct-65 { width: 65%; }
.qb-pct-70 { width: 70%; }
.qb-pct-75 { width: 75%; }
.qb-pct-80 { width: 80%; }
.qb-pct-85 { width: 85%; }
.qb-pct-90 { width: 90%; }
.qb-pct-95 { width: 95%; }
.qb-pct-100 { width: 100%; }

/* ---------- Stat ---------- */
.qb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 100%; }
@media (max-width: 768px) { .qb-stats { grid-template-columns: minmax(0, 1fr); } }
.qb-stat { padding: var(--space-5) var(--space-6); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.qb-stat-label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.qb-stat-value { margin-top: var(--space-1); font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.qb-stat-meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Filter bar ---------- */
.qb-filterbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--surface-raised); border-top: 1px solid var(--line); margin: 0; }
.qb-pagecard > .qb-pagehead + .qb-filterbar { border-top: 1px solid var(--line); margin-top: var(--space-4); }
.qb-pagecard > .qb-tabs + .qb-filterbar { border-top: 0; }
.qb-filter-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.qb-filter-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.qb-filter-search { flex: 1 1 180px; min-width: 180px; }
.qb-filter-select { flex: 0 0 auto; min-width: 160px; }
.qb-filter-btn { flex: 0 0 auto; margin-left: auto; align-self: flex-end; }
@media (max-width: 768px) {
  .qb-filterbar { flex-direction: column; align-items: stretch; padding: var(--space-4); gap: var(--space-3); }
  .qb-filter-search, .qb-filter-select, .qb-filter-btn { width: 100%; min-width: 100%; flex: 1 1 auto; }
  .qb-filter-btn .qb-btn { width: 100%; }
}

/* ---------- Table ---------- */
.qb-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; background: var(--surface-raised); box-shadow: var(--shadow-card); }
.qb-pagecard .qb-table-wrap, .qb-pagecard > .qb-table-wrap, .qb-card .qb-table-wrap, .qb-card > .qb-table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.qb-table-toolbar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.qb-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; table-layout: auto; }
.qb-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.qb-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.qb-table tbody tr:last-child td { border-bottom: 0; }
.qb-table tbody tr:hover { background: var(--surface-sunken); }
.qb-table .qb-num { text-align: right; font-variant-numeric: tabular-nums; }
.qb-table th:not(.qb-col-primary),
.qb-table td:not(.qb-col-primary) { width: 1%; white-space: nowrap; }
.qb-table .qb-col-primary { width: 100%; white-space: normal; }
.qb-table td:not(.qb-col-primary) { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.qb-table td:not(.qb-col-primary) .qb-cell-truncate { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.qb-table .qb-col-primary .qb-cell-truncate { display: block; overflow: visible; text-overflow: unset; white-space: normal; word-break: break-word; max-width: none; }
.qb-table a.qb-table-link { font-weight: 400; text-decoration: none; color: var(--ink); }
.qb-table a.qb-table-link:hover { text-decoration: underline; color: var(--plum); }
.qb-table .qb-col-primary .qb-badge { vertical-align: middle; }
.qb-table .qb-flag-badges { display: inline-flex; flex-wrap: nowrap; gap: var(--space-2); align-items: center; }
.qb-cell-main { display: block; font-weight: 600; color: var(--ink); }
.qb-table .qb-col-primary .qb-cell-main { font-weight: 400; }
.qb-cell-sub { display: block; font-size: 13px; color: var(--ink-muted); }
.qb-stacked-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; max-width: 100%; }
.qb-stacked-cell__primary { display: block; font-weight: 600; color: var(--ink); white-space: normal; overflow: visible; text-overflow: unset; max-width: none; }
.qb-stacked-cell__secondary { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: normal; min-width: 0; max-width: 100%; }
.qb-stacked-cell__secondary .qb-table-link { font-weight: 400; max-width: 240px; }
.qb-cell-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; }
.qb-cell-clamp--2 { -webkit-line-clamp: 2; line-clamp: 2; }
.qb-table-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }

/* ---------- Empty state ---------- */
.qb-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-8) var(--space-6); gap: var(--space-3); }
.qb-empty-icon { font-size: 32px; color: var(--ink-muted); line-height: 1; display: inline-flex; }
.qb-empty-icon svg { width: 36px; height: 36px; }
.qb-empty-text { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 420px; }
.qb-empty-action { margin-top: var(--space-2); }
.qb-table td.qb-empty-cell { padding: 0; border-bottom: 0; }
.qb-table tbody tr:hover:has(.qb-empty-cell) { background: transparent; }

/* ---------- Tabs ---------- */
.qb-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
.qb-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); margin-bottom: -1px; font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; }
.qb-tab:hover { color: var(--ink); }
.qb-tab[aria-selected="true"], .qb-tab[aria-current="page"] { color: var(--plum); border-bottom-color: var(--plum); }
.qb-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.qb-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.qb-tab[aria-selected="true"] .qb-tab-count, .qb-tab[aria-current="page"] .qb-tab-count { background: var(--plum-soft); color: var(--plum); }

/* ---------- Dropzone and file rows ---------- */
.qb-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); text-align: center; }
.qb-drop-icon { font-size: 28px; color: var(--plum); }
.qb-drop-title { font-weight: 600; }
.qb-drop-meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.qb-drop-actions { margin-top: var(--space-2); }
.qb-drop.is-dragover { border-color: var(--plum); background: var(--plum-soft); }
.qb-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.qb-file-icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--plum-soft); color: var(--plum); }
.qb-file-main { flex: 1; min-width: 0; }
.qb-file-name { display: block; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-file-meta { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-progress { height: 4px; margin-top: var(--space-1); border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.qb-progress > span { display: block; height: 100%; background: var(--plum); border-radius: inherit; }
.qb-progress.is-busy > span { width: 35%; animation: qb-progress-slide 1.2s ease-in-out infinite; }
@keyframes qb-progress-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}
.qb-file-list { display: flex; flex-direction: column; gap: var(--space-3); }
.qb-file.is-failed { border-color: var(--danger); }

/* ---------- Domain list ---------- */
.qb-domains { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.qb-domain { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.qb-domain:last-child { border-bottom: 0; }
.qb-domain > .qb-i { color: var(--ink-muted); }
.qb-domain-host { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
.qb-domain-host small { display: block; font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- Code and secrets ---------- */
.qb-code { position: relative; margin: 0; background: var(--navy); color: var(--on-navy); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 13px; line-height: 20px; padding: 52px var(--space-4) var(--space-4); overflow-x: auto; white-space: pre; }
.qb-code .t { color: var(--navy-accent); }
.qb-code .s { color: var(--code-string); }
.qb-code .c { color: var(--on-navy-muted); }
.qb-code-copy { position: absolute; top: var(--space-2); right: var(--space-2); }
.qb-secret { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 14px; line-height: 20px; }
.qb-secret code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dialog ---------- */
.qb-scrim { background: var(--overlay); display: grid; place-items: center; padding: var(--space-6); }
.qb-dialog { width: 100%; max-width: var(--dialog-max); background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); border: 1px solid var(--line); padding: var(--space-6); }
.qb-dialog-head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-6) var(--space-6) 0; }
.qb-dialog-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); font-size: 18px; }
.qb-dialog-icon--warning { background: var(--warning-soft); color: var(--warning); }
.qb-dialog-title { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.qb-dialog-body { padding: var(--space-3) var(--space-6) var(--space-6); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.qb-dialog-body p { margin: 0 0 var(--space-4); }
.qb-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---------- App shell ---------- */
.qb-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; background: var(--surface); }
.qb-sidebar { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5) var(--space-4); background: var(--surface-raised); border-right: 1px solid var(--line); }
.qb-sidebar-brand { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); }
.qb-sidebar-brand img { height: 26px; width: auto; }
.qb-sidebar-org { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); }
.qb-sidebar-org img { height: 26px; width: auto; }
.qb-sidebar-org-name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.qb-nav { display: flex; flex-direction: column; gap: 2px; }
.qb-nav-section { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.qb-nav a { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.qb-nav a .qb-i { width: 18px; font-size: 16px; color: var(--ink-muted); }
.qb-nav a:hover { background: var(--surface-sunken); }
.qb-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.qb-nav a[aria-current="page"] { background: var(--plum-soft); color: var(--plum); font-weight: 600; }
.qb-nav a[aria-current="page"] .qb-i { color: var(--plum); }
.qb-nav-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.qb-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.qb-plan { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
/* Admin portal: navy chrome, raspberry environment marker */
.qb-sidebar--admin { background: var(--navy); border-right-color: var(--navy); color: var(--on-navy); }
.qb-sidebar--admin .qb-nav a { color: var(--on-navy); }
.qb-sidebar--admin .qb-nav a .qb-i { color: var(--on-navy-muted); }
.qb-sidebar--admin .qb-nav a:hover { background: var(--navy-raised); }
.qb-sidebar--admin .qb-nav a[aria-current="page"] { background: var(--navy-raised); color: var(--navy-accent); }
.qb-sidebar--admin .qb-nav a[aria-current="page"] .qb-i { color: var(--navy-accent); }
.qb-sidebar--admin .qb-nav-section { color: var(--on-navy-muted); }
.qb-sidebar--admin .qb-nav a:focus-visible { outline: none; box-shadow: var(--admin-focus-ring); }
.qb-sidebar-brand--admin { color: var(--on-navy); font-weight: 600; font-size: 15px; }
.qb-sidebar-brand--admin img { height: 24px; }
.qb-admin-strip { height: 4px; background: var(--raspberry); }
.qb-main { display: flex; flex-direction: column; min-width: 0; }
.qb-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--topbar-height); padding: 0 var(--space-8); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.qb-topbar .qb-row { flex-wrap: nowrap; gap: var(--space-2); }
.qb-topbar-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.qb-crumbs { display: flex; gap: var(--space-2); align-items: center; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-crumbs a { color: var(--ink-muted); text-decoration: none; }
.qb-crumbs strong { color: var(--ink); font-weight: 600; }
.qb-account { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); background: none; border: 0; font-family: inherit; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); }
.qb-account small { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-muted); text-align: left; }
.qb-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--plum-soft); color: var(--plum); font-size: 13px; font-weight: 700; }
.qb-avatar--navy { background: var(--navy); color: var(--on-navy); }
.qb-content { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--space-8); }
.qb-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.qb-page-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.qb-page-sub { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.qb-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.qb-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.qb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.qb-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-column); gap: var(--space-6); align-items: start; }
.qb-list { list-style: none; margin: 0; padding: 0; }
.qb-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.qb-list li:last-child { border-bottom: 0; }

/* ---------- Auth ---------- */
.qb-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--space-10) var(--space-4); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-raised) 100%); }
.qb-auth-card { width: 100%; max-width: 440px; padding: var(--space-10) var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.qb-auth-logo { display: flex; justify-content: center; margin-bottom: var(--space-8); }
.qb-auth-logo img { height: 32px; width: auto; }
.qb-auth-title { margin: 0; text-align: center; font-size: 18px; line-height: 24px; font-weight: 600; }
.qb-auth-sub { margin: var(--space-2) 0 var(--space-6); text-align: center; color: var(--ink-muted); }
.qb-auth-foot { margin-top: var(--space-6); text-align: center; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-auth-legal { margin-top: var(--space-6); text-align: center; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-auth--admin { background: var(--navy); }
.qb-auth--admin .qb-auth-legal { color: var(--on-navy-muted); }
.qb-auth-admin-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); color: var(--on-navy); }
.qb-auth-admin-head img { height: 40px; }
.qb-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.qb-split-brand { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-12); background: var(--navy); color: var(--on-navy); }
.qb-split-form { display: grid; place-items: center; padding: var(--space-12) var(--space-8); background: var(--surface-raised); }
.qb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.qb-steps li { display: flex; gap: var(--space-4); }
.qb-step-num { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--plum); color: #ffffff; font-weight: 600; }
.qb-steps .qb-step-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--on-navy); }
.qb-steps p { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-navy-muted); }

/* ---------- Chat widget (embedded on client sites) ----------
   Per-client values: --qw-brand (client colour) and --qw-on-brand (computed: #ffffff or #002642,
   whichever contrasts more with --qw-brand). Everything else is fixed and light-only. */
.qw { --qw-brand: #8f3985; --qw-on-brand: #ffffff; --qw-surface: #ffffff; --qw-sunken: #f5f6fa; --qw-line: #e1e5ee; --qw-ink: #002642; --qw-muted: #4a5b70; --qw-focus-ring: 0 0 0 2px var(--qw-surface), 0 0 0 4px var(--qw-brand); font-family: var(--font-sans); color: var(--qw-ink); }
.qw-launcher { width: var(--launcher-size); height: var(--launcher-size); border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--qw-brand); color: var(--qw-on-brand); box-shadow: var(--shadow-float); cursor: pointer; font-size: 26px; transition: transform .3s ease; }
.qw-launcher:hover { transform: scale(1.05); }
.qw-launcher:focus-visible { outline: none; box-shadow: var(--qw-focus-ring); }
.qw-panel { width: var(--widget-width); max-width: calc(100vw - 32px); height: 600px; display: flex; flex-direction: column; overflow: hidden; background: var(--qw-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); border: 1px solid var(--qw-line); }
.qw-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--qw-brand); color: var(--qw-on-brand); }
.qw-logo { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; overflow: hidden; flex: none; }
.qw-logo img { width: 100%; height: 100%; object-fit: cover; }
.qw-logo--initials { color: var(--qw-brand); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.qw-title { flex: 1; min-width: 0; }
.qw-title strong { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.qw-title span { display: block; font-size: 12px; line-height: 16px; opacity: .9; }
.qw-close { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: inherit; cursor: pointer; font-size: 16px; }
.qw-close:hover { background: rgba(0, 0, 0, .12); }
.qw-close:focus-visible { outline: none; box-shadow: var(--qw-focus-ring); }
.qw-msgs { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--qw-sunken); }
.qw-msg { max-width: 85%; padding: 10px 14px; border-radius: var(--radius-bubble); font-size: 14px; line-height: 20px; word-break: break-word; }
.qw-msg p { margin: 0 0 var(--space-2); }
.qw-msg p:last-child { margin: 0; }
.qw-msg--bot { align-self: flex-start; background: var(--qw-surface); border: 1px solid var(--qw-line); border-bottom-left-radius: 6px; }
.qw-msg--user { align-self: flex-end; background: var(--qw-brand); color: var(--qw-on-brand); border-bottom-right-radius: 6px; }
.qw-contact { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.qw-contact a { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--qw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.qw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px; background: var(--qw-surface); border: 1px solid var(--qw-line); border-radius: var(--radius-bubble); border-bottom-left-radius: 6px; }
.qw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--qw-muted); opacity: .5; }
.qw-typing span:nth-child(2) { opacity: .75; }
.qw-typing span:nth-child(3) { opacity: 1; }
.qw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; background: var(--qw-surface); }
.qw-chip { border: 1px solid #7d8a9d; background: var(--qw-surface); color: var(--qw-ink); border-radius: var(--radius-full); padding: 6px 12px; font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.qw-chip:hover { border-color: var(--qw-brand); }
.qw-chip:focus-visible { outline: none; box-shadow: var(--qw-focus-ring); }
.qw-input { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--qw-surface); }
.qw-input textarea { flex: 1; resize: none; height: 40px; padding: 9px 14px; border: 1px solid #7d8a9d; border-radius: 20px; font: inherit; font-size: 14px; line-height: 20px; color: var(--qw-ink); background: var(--qw-surface); }
.qw-input textarea::placeholder { color: var(--qw-muted); }
.qw-input textarea:focus { outline: none; border-color: var(--qw-brand); box-shadow: var(--qw-focus-ring); }
.qw-input textarea:focus-visible { outline: none; border-color: var(--qw-brand); box-shadow: var(--qw-focus-ring); }
.qw-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--qw-brand); color: var(--qw-on-brand); cursor: pointer; font-size: 15px; }
.qw-send:focus-visible { outline: none; box-shadow: var(--qw-focus-ring); }
.qw-foot { padding: var(--space-2) var(--space-4) var(--space-3); text-align: center; font-size: 12px; line-height: 16px; color: var(--qw-muted); background: var(--qw-surface); }
.qw-foot a { color: var(--qw-muted); text-decoration: underline; text-underline-offset: 2px; }
.qw-note { font-size: 11px; line-height: 16px; color: var(--qw-muted); text-align: center; }

/* Browser mock used by previews of the widget and branding screen */
.qb-browser { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; }
.qb-browser-bar { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); background: var(--surface-raised); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); }
.qb-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.qb-browser-bar span { margin-left: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--surface-sunken); font-family: var(--font-mono); }
.qb-browser-stage.qb-brand-preview-browser { min-height: calc(32px + var(--brand-preview-footprint-h)); }
.qb-brand-preview-stage { position: relative; min-height: var(--brand-preview-footprint-h); background: var(--surface-raised); overflow: hidden; }
.qb-brand-preview-scale-host { position: relative; min-height: var(--brand-preview-footprint-h); display: flex; align-items: flex-end; justify-content: flex-end; }
.qb-brand-preview-scale-host[data-preview-pos="bl"] { justify-content: flex-start; }
.qb-brand-preview-scale-host[data-preview-pos="tr"],
.qb-brand-preview-scale-host[data-preview-pos="tl"] { align-items: flex-start; }
.qb-brand-preview-scale-host[data-preview-pos="tr"] { justify-content: flex-end; }
.qb-brand-preview-scale-host[data-preview-pos="tl"] { justify-content: flex-start; }
.qb-brand-preview-scale-inner { width: var(--brand-preview-footprint-w); height: var(--brand-preview-footprint-h); flex: none; transform-origin: bottom right; }
.qb-brand-preview-scale-host[data-preview-pos="bl"] .qb-brand-preview-scale-inner { transform-origin: bottom left; }
.qb-brand-preview-scale-host[data-preview-pos="tr"] .qb-brand-preview-scale-inner { transform-origin: top right; }
.qb-brand-preview-scale-host[data-preview-pos="tl"] .qb-brand-preview-scale-inner { transform-origin: top left; }
.qb-brand-preview-mount { position: relative; width: 100%; height: 100%; }
.qb-brand-preview-aside { position: sticky; top: var(--space-6); max-width: 400px; }
.qb-brand-preview-aside-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-3); }
.qb-brand-preview-aside-head .qb-h { margin: 0; }
.qb-brand-full-preview--head { display: none; }
.qb-grid-main--brand { align-items: start; }
@media (min-width: 1280px) {
  .qb-grid-main--brand { grid-template-columns: minmax(0, 1fr) min(400px, 100%); }
  .qb-pagecard form > .qb-grid-main--brand .qb-brand-preview-aside { padding-right: var(--space-6); padding-bottom: var(--space-6); }
}
@media (max-width: 1279px) {
  .qb-grid-main--brand { grid-template-columns: minmax(0, 1fr); }
  .qb-brand-preview-aside { display: none; }
  .qb-brand-full-preview--head { display: inline-flex; }
}
.qb-dialog--brand-full { max-width: min(960px, calc(100vw - var(--space-8))); padding: 0; overflow: hidden; }
.qb-dialog--brand-full .qb-brand-full-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.qb-dialog--brand-full .qb-brand-full-dialog-head .qb-dialog-title { margin: 0; font-size: 16px; line-height: 24px; }
.qb-brand-mock-page { position: relative; min-height: calc(var(--brand-preview-footprint-h) + 120px); padding: var(--space-8); background: #e8eaef; }
.qb-brand-mock-blocks { display: grid; gap: var(--space-4); max-width: 640px; margin: 0 auto var(--space-8); }
.qb-brand-mock-block { height: 48px; border-radius: var(--radius-md); background: #d4d8e0; }
.qb-brand-mock-block--tall { height: 96px; }
.qb-brand-full-preview-mount { position: absolute; inset: 0; pointer-events: none; }
.qb-brand-full-preview-mount .qb-brand-preview-mount { pointer-events: auto; }
.qb-security-selfcheck-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.qb-security-selfcheck-summary p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-section--stack { display: block; grid-template-columns: minmax(0, 1fr); }
.qb-section-stack-head { margin-bottom: var(--space-4); }
.qb-section-stack-body { min-width: 0; }
.qb-section--stack .qb-table-wrap { width: 100%; }
.qb-section--stack .qb-table .qb-date { white-space: nowrap; }
.qb-brand-main .qb-section--stack { padding: var(--space-6); }
.qb-brand-main > .qb-section--stack + .qb-section--stack { border-top: 1px solid var(--line); margin-top: 0; }
.qb-pagecard form > .qb-grid-main + .qb-savebar { margin-top: 0; }
.qb-logo-row-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
.qb-brand-logo-preview-wrap { flex: 0 0 auto; }
.qb-brand-logo-preview-img,
.qb-brand-logo-preview-fallback { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 700; }
.qb-logo-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 1 1 240px; min-width: 0; }
.qb-logo-row-hint { flex: 1 1 100%; margin: 0; }
.qb-logo-crop-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.qb-logo-crop-stage { position: relative; height: 480px; min-height: 480px; width: 100%; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.qb-logo-crop-stage cropper-canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 768px) {
  .qb-logo-crop-stage { height: 60vh; min-height: 240px; }
}
.qb-logo-crop-round { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-raised); }
.qb-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.qb-checklist .qb-check-fail { color: var(--danger); }
.qb-checklist .qb-check-ok { color: var(--ink); }
.qb-install-snippet-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.qb-install-snippet-code { flex: 1 1 12rem; min-width: 0; margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 20px; }
/* Widget host scroll lock (preview and live sites load quebius.css or equivalent) */
html.qw-no-scroll,
html.qw-no-scroll body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* ---------- Preview page (app.quebius.com/preview/{token}) ---------- */
.qb-preview { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); }
.qb-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--navy); color: var(--on-navy); font-size: 14px; line-height: 20px; }
.qb-preview-bar img { height: 22px; width: auto; }
.qb-preview-bar .qb-muted { color: var(--on-navy-muted); }
.qb-preview-bar-end { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qb-preview-bar .qb-btn--ghost { color: var(--on-navy); background: transparent; border-color: transparent; }
.qb-preview-bar .qb-btn--ghost:hover { background: color-mix(in srgb, var(--on-navy) 12%, transparent); color: var(--on-navy); }
.qb-preview-bar .qb-btn--ghost:focus-visible { outline: none; box-shadow: var(--preview-focus-ring); }
.qb-preview-bar .qb-btn--ghost svg { color: var(--on-navy); }
.qb-preview-stage { position: relative; flex: 1; width: 100%; min-height: 320px; padding: var(--space-12) var(--space-6); }
@media (min-width: 961px) { .qb-preview-stage { padding-right: calc(var(--widget-width) + 64px); } .qb-preview-stage--left { padding-right: var(--space-6); padding-left: calc(var(--widget-width) + 64px); } }
.qb-preview-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - var(--space-12))); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); pointer-events: none; }
.qb-preview-logo { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--line); font-size: 24px; font-weight: 700; }
.qb-preview-title { margin: 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.qb-preview-try { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.qb-preview-widget { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
@media (max-width: 768px) { .qb-preview-bar { flex-direction: column; align-items: flex-start; padding: var(--space-3) var(--space-4); } }

/* ---------- Responsive: one layout per portal, adapting at 1500, 1100, 960, 768 and 480px ---------- */
.qb-menu-btn { display: none; }
.qb-nav-backdrop { display: none; }
@media (max-width: 1500px) {
  .qb-form-split { grid-template-columns: minmax(0, 1fr); }
  .qb-form-split > .qb-group { padding: 0; }
  .qb-form-split > .qb-group + .qb-group { border-left: 0; border-top: 1px solid var(--line); padding: var(--space-5) 0 0; margin-top: var(--space-5); }
}
@media (max-width: 1100px) {
  .qb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .qb-shell { grid-template-columns: minmax(0, 1fr); }
  .qb-shell > .qb-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(var(--sidebar-width), 85vw); overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease; visibility: hidden; }
  .qb-shell.is-nav-open > .qb-sidebar { visibility: visible; transform: none; box-shadow: var(--shadow-float); }
  .qb-shell.is-nav-open > .qb-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
  .qb-menu-btn { display: inline-flex; }
  .qb-topbar { padding: 0 var(--space-4); }
  .qb-content { padding: var(--space-6) var(--space-4); }
  .qb-split { grid-template-columns: minmax(0, 1fr); }
  .qb-split-brand { display: none; }
  .qb-section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .qb-topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .qb-crumbs { display: none; }
  .qb-account-text, .qb-account > span:not(.qb-avatar), .qb-account small { display: none; }
  .qb-topbar .qb-signout-btn { width: var(--control-sm); padding: 0; }
  .qb-topbar .qb-signout-btn .qb-btn-label { display: none; }
  .qb-grid-2, .qb-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .qb-page-head { align-items: flex-start; }
  .qb-page-head > .qb-row, .qb-page-head > .qb-btn { width: 100%; }
  .qb-page-head > .qb-row > .qb-btn { flex: 1; }
  .qb-crumbs a, .qb-crumbs > .qb-muted { display: none; }
  .qb-account > span:not(.qb-avatar), .qb-account > .qb-i { display: none; }
  .qb-auth-card { padding: var(--space-8) var(--space-5); }
  .qb-checklist { grid-template-columns: minmax(0, 1fr); }
  .qb-card-head, .qb-card-body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .qb-table--stack thead { display: none; }
  .qb-table--stack tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
  .qb-table--stack tbody tr:last-child { border-bottom: 0; }
  .qb-table--stack td { display: flex; justify-content: flex-start; align-items: flex-start; gap: var(--space-3); padding: var(--space-1) var(--space-4); border: 0; text-align: left; }
  .qb-table--stack td .qb-cell-main { text-align: left; }
  .qb-table--stack td.qb-stack-hide-empty { display: none; }
  .qb-table--stack td[data-label]::before { content: attr(data-label); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--ink-muted); text-align: left; flex: 0 0 auto; }
  .qb-filter-btn { align-self: stretch; width: 100%; }
  .qb-filter-btn .qb-btn { width: 100%; }
  .qb-grid-form > [class*="qb-span-"] { grid-column: span 12; }
  .qb-savebar { flex-wrap: wrap; }
  .qb-savebar .qb-btn { flex: 1; justify-content: center; }
  .qb-formfoot .qb-btn { flex: 1; justify-content: center; }
  .qb-toolbar-btns { padding-top: 0; width: 100%; }
  .qb-toolbar-btns .qb-btn { width: 100%; justify-content: center; }
  .qb-form .qb-actions, .qb-save { width: 100%; }
  .qb-form .qb-actions .qb-btn, .qb-save .qb-btn { width: 100%; }
  .qb-save { justify-content: stretch; }
}
@media (max-width: 480px) {
  .qb-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .qw-panel { width: 100vw; max-width: none; height: 100dvh; border-radius: 0; border: 0; }
  .qb-otp input { width: 42px; height: 52px; }
}
.qb-typing { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.qb-typing-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.qb-typing-dots span { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; animation: qb-typing 1s infinite; }
.qb-typing-dots span:nth-child(2) { animation-delay: .15s; }
.qb-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes qb-typing {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Storage input with unit dropdown (joined input group) ---------- */
.qb-storage-input { display: flex; align-items: stretch; width: 100%; }
.qb-storage-input .qb-input { flex: 1 1 auto; min-width: 80px; width: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qb-storage-input .qb-select { flex: 0 0 72px; width: 72px !important; min-width: 72px; max-width: 72px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; position: relative; padding-left: var(--space-2); padding-right: 22px; background-position: calc(100% - 14px) 17px, calc(100% - 9px) 17px; }
.qb-storage-input .qb-input:focus,
.qb-storage-input .qb-select:focus { z-index: 2; }

/* ---------- Plain read-only value in a field ---------- */
.qb-plain-val { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); font-size: 14px; line-height: 20px; color: var(--ink); font-weight: 500; }
.qb-plain-val .qb-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--surface-raised); padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); word-break: break-all; }

/* ---------- Section toolbars and tables ---------- */
.qb-section .qb-toolbar { padding: 0 0 var(--space-4); width: 100%; }
.qb-section .qb-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; width: 100%; }

/* ---------- Admin operations log tables ---------- */
.qb-audit-detail-summary { display: block; white-space: normal; word-break: break-word; }
.qb-table--audit .qb-audit-client-compact .qb-table-link,
.qb-table--audit .qb-audit-client-compact .qb-cell-truncate { display: inline-block; max-width: 180px; vertical-align: top; }
.qb-table--audit .qb-col-primary .qb-stacked-cell__primary { white-space: normal; overflow: visible; text-overflow: unset; }
.qb-table--audit .qb-col-primary > .qb-cell-truncate,
.qb-table--security .qb-col-primary > .qb-cell-truncate { white-space: normal; display: block; overflow: visible; text-overflow: unset; }
.qb-table--audit .qb-table-more summary,
.qb-table--security .qb-table-more summary { white-space: nowrap; display: inline-block; }
.qb-table--leads .qb-col-primary .qb-cell-clamp { max-width: 100%; }

/* ---------- Knowledge fixes ---------- */
.qb-filterbar .qb-table-search,
.qb-filter-search .qb-table-search,
.qb-filter-search .qb-input,
.qb-filter-search .qb-field,
.qb-filter-search .qb-field-control { width: 100% !important; max-width: 100% !important; }
.qb-tabs + [data-kn-table] .qb-filterbar { border-top: 0; }
.qb-dropzone-section { padding: var(--space-6); }
.qb-flash-slot:empty { display: none; }

/* ---------- Admin Plans comparison grid (Decision 134) ---------- */
.qb-plans-grid-wrap { overflow-x: auto; width: 100%; border-top: 1px solid var(--line); }
.qb-plans-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.qb-plans-grid th, .qb-plans-grid td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.qb-plans-grid th { text-align: left; font-weight: 600; background: var(--surface-raised); }
.qb-plans-grid th:first-child,
.qb-plans-grid td:first-child,
.qb-plans-setting-col,
.qb-plans-setting-label { width: 200px; min-width: 200px; max-width: 200px; }
.qb-plans-grid th.qb-plan-col-head { text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); width: calc((100% - 200px) / 4); }
.qb-plans-grid td.qb-plans-setting-label { font-weight: 600; color: var(--ink); }
.qb-plans-grid td.qb-plan-cell { text-align: center; width: calc((100% - 200px) / 4); }
.qb-plans-grid td.qb-plan-cell .qb-input { width: 100%; }
.qb-plans-grid td.qb-plan-cell .qb-storage-input .qb-input { width: auto; min-width: 80px; flex: 1 1 auto; }
.qb-plans-grid td.qb-plan-cell .qb-storage-input .qb-select { width: 72px !important; flex: 0 0 72px; }
.qb-plans-grid td.qb-plan-cell .qb-input-group .qb-input { width: auto; min-width: 0; flex: 1 1 auto; }
.qb-plans-grid td.qb-plan-cell .qb-toggle { justify-content: center; margin: 0; }
.qb-plans-grid tr:last-child th, .qb-plans-grid tr:last-child td { border-bottom: 0; }
textarea.qb-plans-desc { height: 56px; min-height: 56px; padding: 6px 10px; line-height: 20px; font-size: 13px; resize: vertical; }

/* ---------- Client Plan Cards (Decision 134) ---------- */
.qb-billing-switch { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--surface-sunken); padding: 3px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.qb-billing-switch .qb-btn { border: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 500; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted); height: 28px; line-height: 20px; }
.qb-billing-switch .qb-btn.is-active { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.qb-plancards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: var(--space-6); align-items: stretch; }
@media (max-width: 1100px) {
  .qb-plancards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .qb-plancards { grid-template-columns: 1fr; padding: var(--space-4); }
}
.qb-plancard { display: flex; flex-direction: column; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; }
.qb-plancard--current { border: 2px solid var(--plum); }
.qb-plancard--popular { border: 2px solid rgba(143, 57, 133, 0.35); }
.qb-plancard-head { margin-bottom: var(--space-4); }
.qb-plancard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.qb-plancard-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); }
.qb-plancard-desc { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-plancard-pricing { margin-bottom: var(--space-5); }
.qb-plancard-price { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.qb-plancard-price-note { margin: var(--space-1) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-plancard-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); text-align: center; }
.qb-plancard-figure { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.qb-plancard-figure .qb-figure-val { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.qb-plancard-figure .qb-figure-lbl { font-size: 11px; line-height: 14px; color: var(--ink-muted); white-space: nowrap; }
.qb-plancard-features { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.qb-feature-item { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.qb-feature-item.is-included { color: var(--ink); }
.qb-feature-item.is-included .qb-feature-icon { color: var(--plum); font-weight: bold; width: 16px; text-align: center; }
.qb-feature-item.is-excluded { color: var(--ink-muted); opacity: .65; }
.qb-feature-item.is-excluded .qb-feature-icon { color: var(--ink-muted); width: 16px; text-align: center; }
.qb-plancard-footer { margin-top: auto; display: flex; justify-content: center; align-items: center; }
.qb-plancard-footer .qb-btn--full { width: 100%; justify-content: center; }

.qb-table-more { margin-top: var(--space-1); }
.qb-table-more summary { cursor: pointer; font-size: 13px; color: var(--plum); list-style: none; }
.qb-table-more summary:focus { outline: none; }
.qb-table-more summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.qb-table-more summary::-webkit-details-marker { display: none; }
.qb-table-more pre { margin: var(--space-2) 0 0; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; font-size: 12px; line-height: 1.4; }