/* ==========================================================================
   SMAP QA — design layer on top of Bootstrap 5.3
   ========================================================================== */
:root {
  --qa-brand: #4f46e5;
  --qa-brand-2: #7c3aed;
  --qa-brand-soft: #eef2ff;
  --qa-ink: #0f172a;
  --qa-muted: #64748b;
  --qa-line: #e6e8ef;
  --qa-bg: #f6f7fb;
  --qa-sidebar: #ffffff;
  --qa-radius: 14px;
  --qa-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --qa-shadow-lg: 0 12px 32px -12px rgba(16,24,40,.18);
  --qa-sidebar-w: 248px;

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .925rem;
  --bs-body-color: #1e293b;
  --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: #4338ca;
  --bs-border-color: var(--qa-line);
  --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 14px;
  --bs-secondary-color: #64748b;
}
body { background: var(--qa-bg); min-height: 100vh; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--qa-ink); letter-spacing: -.02em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn, .nav-link, .list-group-item-action, .dropdown-item, .card a { text-decoration: none !important; }
code { color: #6d28d9; background: #f5f3ff; padding: .05rem .3rem; border-radius: 5px; font-size: .85em; }
kbd { background: #fff; color: var(--qa-ink); border: 1px solid var(--qa-line); border-bottom-width: 2px; font-size: .75em; padding: .05rem .35rem; }

/* Buttons */
.btn { font-weight: 550; border-radius: 10px; padding: .45rem .9rem; }
.btn-sm { border-radius: 8px; padding: .3rem .65rem; }
.btn-primary { --bs-btn-bg: var(--qa-brand); --bs-btn-border-color: var(--qa-brand); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; --bs-btn-disabled-bg: #a5b4fc; --bs-btn-disabled-border-color: #a5b4fc; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.btn-outline-primary { --bs-btn-color: var(--qa-brand); --bs-btn-border-color: #c7d2fe; --bs-btn-hover-bg: var(--qa-brand-soft); --bs-btn-hover-color: #3730a3; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-active-bg: #e0e7ff; --bs-btn-active-color: #3730a3; }
.btn-outline-secondary { --bs-btn-color: #334155; --bs-btn-border-color: var(--qa-line); --bs-btn-bg: #fff; --bs-btn-hover-bg: #f8fafc; --bs-btn-hover-color: var(--qa-ink); --bs-btn-hover-border-color: #cbd5e1; --bs-btn-active-bg: #f1f5f9; --bs-btn-active-color: var(--qa-ink); }
.btn-gradient { color: #fff; border: 0; background: linear-gradient(135deg, var(--qa-brand), var(--qa-brand-2)); box-shadow: 0 6px 16px -6px rgba(124,58,237,.55); }
.btn-gradient:hover { color: #fff; filter: brightness(1.06); }
.form-control, .form-select { border-radius: 10px; border-color: #dfe3ea; }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99,102,241,.15); }
.form-label { font-weight: 550; font-size: .85rem; color: #334155; }
.form-text { color: var(--qa-muted); }

/* Top bar */
.qa-topbar { height: 60px; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--qa-line); }
.qa-topbar .navbar-brand { font-weight: 750; color: var(--qa-ink); display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; }
.brand-logo { height: 36px; width: auto; display: block; }
.qa-search { position: relative; }
.qa-search .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.qa-search input { padding-left: 2rem; width: 280px; background: #f1f5f9; border-color: transparent; }
.qa-search input:focus { background: #fff; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #475569; border: 1px solid transparent; background: transparent; position: relative; }
.icon-btn:hover { background: #f1f5f9; color: var(--qa-ink); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Shell + sidebar */
.qa-shell { display: flex; min-height: calc(100vh - 60px); }
.qa-sidebar { width: var(--qa-sidebar-w); flex-shrink: 0; background: var(--qa-sidebar); border-right: 1px solid var(--qa-line); padding: 1rem .8rem 2rem; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.qa-sidebar .nav-link { color: #475569; border-radius: 9px; padding: .48rem .7rem; display: flex; align-items: center; gap: .7rem; font-weight: 520; font-size: .9rem; margin-bottom: 2px; }
.qa-sidebar .nav-link .bi { font-size: 1.05rem; color: #94a3b8; width: 1.1rem; text-align: center; }
.qa-sidebar .nav-link:hover { background: #f4f5fa; color: var(--qa-ink); }
.qa-sidebar .nav-link.active { background: var(--qa-brand-soft); color: #3730a3; font-weight: 620; }
.qa-sidebar .nav-link.active .bi { color: var(--qa-brand); }
.qa-sidebar .nav-link .count { margin-left: auto; font-size: .72rem; background: #f1f5f9; color: #475569; border-radius: 6px; padding: 0 .4rem; font-weight: 600; }
.qa-sidebar .nav-link .new-pill { margin-left: auto; font-size: .62rem; background: linear-gradient(135deg, var(--qa-brand), var(--qa-brand-2)); color: #fff; border-radius: 6px; padding: .05rem .35rem; font-weight: 700; letter-spacing: .03em; }
.qa-sidebar .section-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #94a3b8; padding: 1rem .7rem .35rem; font-weight: 650; }
.project-switch { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 12px; border: 1px solid var(--qa-line); background: #fff; width: 100%; text-align: left; box-shadow: var(--qa-shadow); }
.project-switch:hover { border-color: #c7d2fe; }
.project-switch .lh-sm { min-width: 0; }
.project-switch .name { font-weight: 650; color: var(--qa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #e0e7ff, #ede9fe); color: #4338ca; display: inline-flex; align-items: center; justify-content: center; font-weight: 750; font-size: .8rem; flex-shrink: 0; }
.qa-main { flex: 1; min-width: 0; padding: 1.75rem 2.25rem 1.25rem; display: flex; flex-direction: column; }
.qa-main > .qa-container { max-width: 1440px; margin: 0 auto 3rem; width: 100%; }

/* Footer: under the content, at the bottom of the window when the page is short */
.qa-footer { max-width: 1440px; width: 100%; margin: auto auto 0; padding-top: .75rem; border-top: 1px solid var(--bs-border-color-translucent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .78rem; color: var(--bs-secondary-color); }
.qa-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.qa-footer a { color: inherit; text-decoration: none; } .qa-footer a:hover { color: var(--bs-link-color); }
@media print { .qa-footer { display: none; } }

/* Page header */
.qa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
/* The title block takes the room left; the actions keep their own size and stay top right, however long the subtitle. */
.qa-page-header > :first-child { flex: 1 1 18rem; min-width: 0; }
.qa-page-header > :not(:first-child) { flex: 0 0 auto; }
.qa-page-header h1 { font-size: 1.55rem; margin: 0; font-weight: 750; }
.qa-page-header .sub { color: var(--qa-muted); font-size: .92rem; margin-top: .25rem; max-width: 70ch; }

/* Cards */
.card { border: 1px solid var(--qa-line); border-radius: var(--qa-radius); box-shadow: var(--qa-shadow); background: #fff; }
.card-header { background: transparent; font-weight: 650; color: var(--qa-ink); border-bottom: 1px solid var(--qa-line); padding: .85rem 1.1rem; font-size: .92rem; }
.card-header:first-child { border-radius: var(--qa-radius) var(--qa-radius) 0 0; }
.card-body { padding: 1.1rem; }
.card-footer { border-top: 1px solid var(--qa-line); }
.list-group-item { border-color: var(--qa-line); padding: .7rem 1.1rem; }
.project-card { transition: box-shadow .18s, transform .18s, border-color .18s; }
.project-card:hover { box-shadow: var(--qa-shadow-lg); transform: translateY(-2px); border-color: #c7d2fe; }

/* Action tiles (home) */
.action-tile { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem; border-radius: var(--qa-radius); border: 1px solid var(--qa-line); background: #fff; color: inherit; height: 100%; transition: all .18s; box-shadow: var(--qa-shadow); }
.action-tile:hover { border-color: #c7d2fe; box-shadow: var(--qa-shadow-lg); transform: translateY(-2px); color: inherit; }
.action-tile .tile-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.action-tile h3 { font-size: 1rem; margin: 0 0 .2rem; font-weight: 700; }
.action-tile p { margin: 0; font-size: .82rem; color: var(--qa-muted); }
.tile-indigo { background: #eef2ff; color: #4f46e5; } .tile-green { background: #ecfdf5; color: #059669; }
.tile-red { background: #fef2f2; color: #dc2626; } .tile-amber { background: #fffbeb; color: #d97706; } .tile-sky { background: #f0f9ff; color: #0284c7; } .tile-violet { background: #f5f3ff; color: #7c3aed; }
.hero { border-radius: 18px; padding: 1.5rem 1.75rem; background: radial-gradient(1200px 300px at 0% 0%, rgba(124,58,237,.18), transparent 60%), radial-gradient(800px 300px at 100% 0%, rgba(79,70,229,.15), transparent 55%), #fff; border: 1px solid var(--qa-line); box-shadow: var(--qa-shadow); }

/* Tables */
.table { --bs-table-hover-bg: #f8f9fd; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: #eef0f5; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 650; background: #fafbfd; border-bottom: 1px solid var(--qa-line); }
.table-light, .table-light > * { --bs-table-bg: #f8f9fc; }

/* Soft badges */
.badge { font-weight: 600; border-radius: 7px; padding: .35em .6em; letter-spacing: .01em; }
.badge.text-bg-success { background: #dcfce7 !important; color: #166534 !important; }
.badge.text-bg-danger { background: #fee2e2 !important; color: #991b1b !important; }
.badge.text-bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.text-bg-info { background: #e0f2fe !important; color: #075985 !important; }
.badge.text-bg-primary { background: #e0e7ff !important; color: #3730a3 !important; }
.badge.text-bg-secondary { background: #f1f5f9 !important; color: #475569 !important; }
.badge.text-bg-dark { background: #1e293b !important; color: #fff !important; }
.badge.text-bg-light { background: #f8fafc !important; color: #475569 !important; border: 1px solid var(--qa-line); }
.badge.st-bg-passed { background: #dcfce7; color: #166534; } .badge.st-bg-failed { background: #fee2e2; color: #991b1b; }
.badge.st-bg-blocked { background: #fef3c7; color: #92400e; } .badge.st-bg-not_run, .badge.st-bg-skipped { background: #f1f5f9; color: #475569; }
.badge.st-bg-in_progress, .badge.st-bg-running, .badge.st-bg-queued { background: #e0e7ff; color: #3730a3; }
.badge.st-bg-timedOut, .badge.st-bg-error, .badge.st-bg-interrupted { background: #fee2e2; color: #991b1b; }
.badge.st-bg-flaky { background: #f3e8ff; color: #6b21a8; } .badge.st-bg-cancelled { background: #f1f5f9; color: #475569; }
.st-passed { color: #16a34a; } .st-failed { color: #dc2626; } .st-blocked { color: #d97706; } .st-skipped, .st-not_run { color: #94a3b8; } .st-in_progress { color: #4f46e5; }
.progress-stack { display: flex; height: .55rem; border-radius: 99px; overflow: hidden; background: #eef0f5; }
.progress-stack > span { display: block; height: 100%; }

/* Misc */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #c7d2fe, #ddd6fe); color: #3730a3; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 750; flex-shrink: 0; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.checklist-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--qa-line); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item .bi-check-circle-fill { color: #16a34a; } .checklist-item .bi-circle { color: #cbd5e1; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--qa-muted); }
.empty-state .bi { font-size: 2.4rem; display: block; margin-bottom: .6rem; color: #c7d2fe; }
.secret-mask { letter-spacing: .2em; color: #94a3b8; }
.module-row td:first-child { white-space: nowrap; }
.nav-pills .nav-link { border-radius: 9px; color: #475569; font-weight: 550; }
.nav-pills .nav-link.active { background: var(--qa-ink); }
.nav-tabs { border-bottom-color: var(--qa-line); }
.nav-tabs .nav-link { color: #64748b; font-weight: 550; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--qa-ink); border-bottom-color: var(--qa-brand); background: transparent; }
.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.modal-content { border-radius: 16px; border: 0; box-shadow: var(--qa-shadow-lg); }
.dropdown-menu { border-radius: 12px; border-color: var(--qa-line); box-shadow: var(--qa-shadow-lg); padding: .35rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .7rem; font-size: .9rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--qa-brand-soft); color: #3730a3; }
.pre { white-space: pre-wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.text-ink { color: var(--qa-ink); }
.stat-card .kpi-label { margin-bottom: .2rem; }

/* Role cards (register / onboarding) */
.role-option { display: block; cursor: pointer; }
.role-option input { position: absolute; opacity: 0; }
.role-option .role-box { border: 1.5px solid var(--qa-line); border-radius: 12px; padding: .7rem .85rem; display: flex; gap: .7rem; align-items: flex-start; transition: all .15s; background: #fff; }
.role-option .role-box .bi { font-size: 1.2rem; color: var(--qa-brand); margin-top: .1rem; }
.role-option .role-box strong { display: block; font-size: .9rem; color: var(--qa-ink); }
.role-option .role-box span { font-size: .78rem; color: var(--qa-muted); }
.role-option input:checked + .role-box { border-color: var(--qa-brand); background: var(--qa-brand-soft); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* Auth pages */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: #0b1020; }
.auth-card { width: 100%; max-width: 460px; position: relative; z-index: 1; }
/* Slow drifting purple glow behind the login card */
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-bg span { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.auth-bg span:nth-child(1) { background: radial-gradient(circle, #7c3aed 0%, transparent 65%); top: -22vmax; left: -18vmax; animation: auth-drift-1 24s ease-in-out infinite alternate; }
.auth-bg span:nth-child(2) { background: radial-gradient(circle, #4f46e5 0%, transparent 65%); bottom: -24vmax; right: -18vmax; animation: auth-drift-2 28s ease-in-out infinite alternate; }
.auth-bg span:nth-child(3) { width: 40vmax; height: 40vmax; background: radial-gradient(circle, #c026d3 0%, transparent 65%); top: 30%; left: 45%; opacity: .28; animation: auth-drift-3 32s ease-in-out infinite alternate; }
@keyframes auth-drift-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18vw, 12vh) scale(1.15); } 100% { transform: translate(8vw, 28vh) scale(.95); } }
@keyframes auth-drift-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20vw, -10vh) scale(1.1); } 100% { transform: translate(-6vw, -26vh) scale(1.2); } }
@keyframes auth-drift-3 { 0% { transform: translate(-50%, -50%) scale(.9); } 50% { transform: translate(-80%, -20%) scale(1.15); } 100% { transform: translate(-20%, -70%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .auth-bg span { animation: none; } }
.auth-card .card { border: 0; }
.auth-panel { background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); overflow: hidden; }
.auth-logo { padding: 1.75rem 1.5rem .25rem; text-align: center; }
.auth-logo img { height: 56px; width: auto; max-width: 100%; }
.auth-panel .card { box-shadow: none !important; border-radius: 0; }
.auth-card .container { padding: 0 !important; max-width: 100%; }
.auth-card .card[class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
.auth-card .card-title.mb-5 { margin-bottom: 1rem !important; }

/* Evidence widget */
.evidence { border: 1.5px dashed #dfe3ea; border-radius: 12px; padding: .55rem; background: #fcfcfe; }
.evidence[data-readonly] { border: 0; padding: 0; background: transparent; }
.evidence.ev-drag { border-color: var(--qa-brand); background: var(--qa-brand-soft); }
.ev-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ev-list:empty { display: none; }
.evidence:not([data-readonly]) .ev-list:not(:empty) { margin-bottom: .5rem; }
.ev-item { position: relative; width: 112px; }
.ev-item a { display: block; text-decoration: none; color: inherit; }
.ev-item img, .ev-item .ev-icon { width: 112px; height: 72px; object-fit: cover; border-radius: 9px; border: 1px solid var(--qa-line); display: flex; align-items: center; justify-content: center; background: #f8fafc; font-size: 1.6rem; color: #94a3b8; }
.ev-name { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--qa-muted); }
.ev-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #ef4444; color: #fff; font-size: .8rem; line-height: 1; padding: 0; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

/* Execution screen */
.step-card { border-left: 4px solid #e2e8f0; outline: none; }
.step-card.step-current { box-shadow: 0 0 0 2px rgba(99,102,241,.35), var(--qa-shadow); }
.step-card.st-card-passed { border-left-color: #22c55e; } .step-card.st-card-failed { border-left-color: #ef4444; background: #fffafa; }
.step-card.st-card-blocked { border-left-color: #f59e0b; } .step-card.st-card-skipped { border-left-color: #cbd5e1; }
.step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: #475569; }

/* Bug detail */
.bug-doc dt { font-weight: 600; color: #94a3b8; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem; }
.bug-doc dd { margin-bottom: .9rem; }

/* Automation */
.run-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.run-dot.passed { background: #22c55e; } .run-dot.failed, .run-dot.error { background: #ef4444; } .run-dot.cancelled { background: #94a3b8; }
.run-dot.running, .run-dot.queued { background: #6366f1; animation: qa-pulse 1.2s infinite; }
@keyframes qa-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.55); } 70% { box-shadow: 0 0 0 8px rgba(99,102,241,0); } 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); } }
.terminal { background: #0b1020; color: #cbd5e1; border-radius: 12px; padding: .9rem 1rem; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.terminal .ok { color: #4ade80; } .terminal .bad { color: #f87171; }
.test-row summary { list-style: none; cursor: pointer; }
.test-row summary::-webkit-details-marker { display: none; }
.test-row[open] summary .chev { transform: rotate(90deg); }
.chev { transition: transform .15s; color: #94a3b8; }
.err-box { background: #fff7f7; border: 1px solid #fecaca; color: #7f1d1d; border-radius: 10px; padding: .75rem .9rem; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; max-height: 320px; overflow: auto; }
.setup-check { display: flex; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; }
.setup-check:last-child { border-bottom: 0; }
.setup-check .bi { font-size: 1.15rem; }
.file-group { border: 1px solid var(--qa-line); border-radius: 12px; margin-bottom: .6rem; overflow: hidden; background: #fff; }
.file-group > .fg-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; background: #fafbfd; font-size: .85rem; font-weight: 600; }
.file-group .fg-test { display: flex; align-items: center; gap: .6rem; padding: .4rem .85rem .4rem 2.3rem; font-size: .85rem; border-top: 1px solid #f3f4f8; }

/* Reports */
.kpi { font-size: 1.7rem; font-weight: 750; line-height: 1.1; color: var(--qa-ink); letter-spacing: -.02em; }
.kpi-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; font-weight: 650; }
.heat td.heat-cell { text-align: center; font-weight: 650; }
.bar-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.bar-row .bar { height: .55rem; border-radius: .3rem; }
.report-header { border-bottom: 2px solid var(--qa-ink); padding-bottom: .75rem; margin-bottom: 1.25rem; }

/* Tour (driver.js) */
.driver-popover { border-radius: 14px !important; padding: 18px 18px 14px !important; box-shadow: 0 24px 48px -12px rgba(15,23,42,.35) !important; font-family: var(--bs-font-sans-serif) !important; max-width: 340px !important; }
.driver-popover-title { font-size: 1rem !important; font-weight: 750 !important; color: var(--qa-ink) !important; }
.driver-popover-description { color: #475569 !important; font-size: .87rem !important; line-height: 1.5 !important; }
.driver-popover-footer button { border-radius: 8px !important; text-shadow: none !important; font-weight: 600 !important; padding: 5px 12px !important; }
.driver-popover-next-btn { background: var(--qa-brand) !important; color: #fff !important; border-color: var(--qa-brand) !important; }
.driver-popover-progress-text { color: #94a3b8 !important; }

@media (max-width: 991.98px) {
  .qa-sidebar { display: none; }
  .qa-sidebar.show { display: block; position: fixed; top: 60px; left: 0; bottom: 0; z-index: 1030; box-shadow: var(--qa-shadow-lg); }
  .qa-main { padding: 1rem; }
  .qa-search input { width: 160px; }
}

@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  .qa-topbar, .qa-sidebar, .no-print, .alert-dismissible .btn-close { display: none !important; }
  .qa-shell { display: block; }
  .qa-main { padding: 0 !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .progress-stack, .bar, .badge, .heat-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Browser extension install steps */
.ext-steps { padding-left: 1.2rem; }
.ext-steps li { margin-bottom: .6rem; }
.step-list .step-no { width: 2.2rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* Select2 (bootstrap-5 theme) matched to the app's inputs — every <select>, see assets/select.js */
.select2-container--bootstrap-5 .select2-selection { border-color: #dfe3ea; border-radius: 10px; color: var(--bs-body-color); }
.select2-container--bootstrap-5 .select2--small.select2-selection { border-radius: 8px; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99,102,241,.15); }
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection { border-top-right-radius: 10px; border-top-left-radius: 10px; }
.select2-container--bootstrap-5.select2-container--disabled .select2-selection { background-color: #f8fafc; border-color: #e2e8f0; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: inherit; }
.select2-container--bootstrap-5 .select2-dropdown { border: 1px solid var(--qa-line); border-radius: 12px !important; box-shadow: var(--qa-shadow-lg); overflow: hidden; margin-top: 4px; }
.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above { margin-top: -4px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search { padding: .5rem .5rem .25rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { border-color: #dfe3ea; border-radius: 8px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99,102,241,.15); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options { padding: .3rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { border-radius: 8px; padding: .42rem .65rem; font-size: .9rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option + .select2-results__option { margin-top: 2px; }
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option { padding: .32rem .6rem; font-size: .85rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--qa-brand-soft); color: #3730a3; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { background: var(--qa-brand); color: #fff; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--disabled { color: #cbd5e1; }
.select2-container.qa-s2-auto { min-width: 9rem; }
.qa-s2-tree .bi { color: #94a3b8; font-size: .75em; margin-right: .35rem; }
.select2-results__option--selected .qa-s2-tree .bi { color: inherit; opacity: .7; }
/* "+ Add new …" entry of quick-add dropdowns */
.qa-s2-add { color: var(--qa-brand); font-weight: 600; display: flex; align-items: center; gap: .45rem; }
.select2-results__option:has(> .qa-s2-add) { margin-bottom: .25rem; box-shadow: 0 1px 0 var(--qa-line); border-radius: 8px 8px 0 0 !important; }
.select2-results__option--highlighted .qa-s2-add { color: #3730a3; }
/* SweetAlert2 (public/assets/alerts.js) in the dashboard's font */
.swal2-container .qa-swal, .swal2-container .qa-swal-toast { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.swal2-container .qa-swal { border-radius: 16px; }
.swal2-container .qa-swal .swal2-title { font-size: 1.35rem; }
.swal2-container .qa-swal .swal2-html-container { font-size: .95rem; }
.swal2-container .qa-swal-toast .swal2-title { font-size: .9rem; font-weight: 500; }
.swal2-container .qa-swal-undo .swal2-actions { margin: 0 0 0 .5rem; }
.swal2-container .qa-swal-undo .swal2-confirm { font-size: .85rem; padding: .3rem .75rem; margin: 0; }
/* Toasts (QaAlert.toast) fade in and out */
@keyframes qa-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes qa-toast-out { from { opacity: 1; } to { opacity: 0; } }
.swal2-popup.qa-toast-in { animation: qa-toast-in .25s ease-out both; }
.swal2-popup.qa-toast-out { animation: qa-toast-out .3s ease-in both; }

/* Recorded tests: {{VARIABLE}} chips and step results */
.var-chip { display: inline-block; font: 600 .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; border-radius: 6px; padding: 0 .4rem; white-space: nowrap; }
.var-chip::before { content: '{{'; opacity: .5; } .var-chip::after { content: '}}'; opacity: .5; }
.var-chip-btn { cursor: pointer; } .var-chip-btn:hover { background: #ede9fe; }
.step-list .step-result { width: 1.1rem; text-align: center; flex-shrink: 0; }
.step-list .step-failed { background: #fef2f2; }
.step-list .step-actions { opacity: .55; } .step-list .step-row:hover .step-actions { opacity: 1; }

/* Variables repeater */
.var-rows-head, .var-row { display: grid; grid-template-columns: 1.4rem minmax(8rem, 2fr) minmax(8rem, 3fr) auto auto; gap: .4rem; align-items: center; }
.var-rows-head { padding: 0 0 .2rem; font-weight: 600; }
.var-row { padding: .2rem 0; }
.var-row [data-var-show][hidden] { display: inline-block !important; visibility: hidden; }
.var-row-grip { text-align: center; }
@media (max-width: 575.98px) {
    .var-rows-head { display: none !important; }
    .var-row { grid-template-columns: minmax(0, 1fr) auto auto; border-bottom: 1px solid var(--bs-border-color); padding: .4rem 0; }
    .var-row-grip { display: none; }
    .var-row-name { grid-column: 1 / -1; }
}

/* Recorded test: steps editing, timing */
.bt-steps-card { position: relative; }
.bt-steps-card .bt-busy { display: none; position: absolute; inset: 0; background: rgba(255,255,255,.45); align-items: flex-start; justify-content: center; padding-top: 4rem; border-radius: inherit; z-index: 3; }
.bt-steps-card.is-busy .bt-busy { display: flex; }
.bulk-code { white-space: pre; overflow-x: auto; min-height: 55vh; font-size: .78rem; line-height: 1.55; }
.bulk-values td { padding-top: .35rem; padding-bottom: .35rem; }
.step-list .step-grip { cursor: grab; color: var(--bs-tertiary-color); width: 1rem; flex-shrink: 0; touch-action: none; }
.step-list .step-grip:hover { color: var(--bs-body-color); }
.step-list .step-ghost { opacity: .35; background: #eef2ff; }
.step-list .step-chosen { box-shadow: 0 6px 18px rgba(15,23,42,.12); background: var(--bs-body-bg); }
.step-list .step-busy { opacity: .6; }
.step-list .step-leaving { opacity: .35; text-decoration: line-through; }
.step-list .step-new { background: #fff7f7; box-shadow: inset 3px 0 0 #ef4444; }
.step-list .step-insert { background: #fef2f2; color: #b91c1c; border-style: dashed !important; }
.step-list .step-ms { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bt-timing { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; color: var(--bs-secondary-color); }
.bt-timing-item strong { color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.bt-timing-item.text-primary strong, .bt-timing-item.text-danger strong { color: inherit; }
.run-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rerecord-flow { padding-left: 1.2rem; } .rerecord-flow li { margin-bottom: .35rem; }
.rerecord-was { background: var(--bs-tertiary-bg); border-radius: 8px; padding: .5rem .7rem; }

/* Seed sample (environment form → Advanced) */
.seed-code { background: #0b1020; color: #e2e8f0; border-radius: 8px; padding: .6rem .75rem; font-size: .74rem; max-height: 320px; overflow: auto; white-space: pre; margin-bottom: .5rem; }
.var-chip-auto { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.var-chip-btn.var-chip-auto:hover { background: #cffafe; }
.var-menu { min-width: 20rem; max-height: 22rem; overflow-y: auto; }
.var-chip-saved { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.var-chip-btn.var-chip-saved:hover { background: #dcfce7; }

/* Notifications: bell menu and the Notifications page share .qa-notify-item */
.qa-notify { width: 360px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.qa-notify-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--qa-line); }
.qa-notify-head form { margin: 0; }
.qa-notify .qa-notify-list { max-height: 380px; overflow-y: auto; padding: .3rem; }
.qa-notify-item { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .65rem; border-radius: 10px; color: var(--bs-body-color); }
.qa-notify-item:hover { background: #f8fafc; color: var(--qa-ink); }
.qa-notify-item .title { font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.qa-notify-item.unread { background: var(--qa-brand-soft); }
.qa-notify-item.unread:hover { background: #e0e7ff; }
.qa-notify-item.unread .title { font-weight: 600; color: var(--qa-ink); }
.qa-notify-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
.qa-notify-item.unread .qa-notify-icon { background: #fff; color: var(--qa-brand); }
.qa-notify-dot { flex: none; width: 8px; height: 8px; margin-top: .45rem; border-radius: 50%; background: var(--qa-brand); }
.qa-notify-foot { display: block; text-align: center; padding: .6rem; border-top: 1px solid var(--qa-line); font-size: .85rem; font-weight: 500; }
.qa-notify-foot:hover { background: #f8fafc; }
.qa-notify-page { padding: .4rem; display: flex; flex-direction: column; gap: 2px; }

/* Steps of a recorded test: one grid, so number, icon, text, time and buttons line up on every row */
.min-w-0 { min-width: 0 !important; }
.step-list .step-row { display: grid; grid-template-columns: 1.8rem 1.25rem minmax(0, 1fr) 4.5rem; column-gap: .6rem; align-items: start; }
.step-list.step-list-edit .step-row { grid-template-columns: 1rem 1.8rem 1.25rem minmax(0, 1fr) 4.5rem auto; }
.step-list .step-row > .step-grip, .step-list .step-row > .step-no, .step-list .step-row > .step-result, .step-list .step-row > .step-ms { line-height: 1.5; padding-top: .1rem; }
.step-list .step-no { width: auto; text-align: right; }
.step-list .step-result { width: auto; }
.step-list .step-body { min-width: 0; }
.step-list .step-title { overflow-wrap: anywhere; }
.step-list .step-where { font-size: .72rem; }
/* a tip on a step (BrowserTests::suggestions()), shown unless dismissed */
.step-list .step-tip { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .45rem; margin-top: .35rem; padding: .3rem .55rem; border-radius: 8px; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.step-list .step-tip.d-none { display: none !important; }
.step-list .step-tip .btn-link { font-size: inherit; vertical-align: baseline; }
.step-list .step-ms { text-align: right; }
.step-list .step-actions { display: flex; align-items: center; margin-top: -.15rem; }
@media (max-width: 575.98px) {
    .step-list .step-row { grid-template-columns: 1.4rem 1.1rem minmax(0, 1fr) auto; column-gap: .4rem; }
    .step-list.step-list-edit .step-row { grid-template-columns: .9rem 1.4rem 1.1rem minmax(0, 1fr) auto auto; }
}

/* Pagination */
.qa-pager .page-link { border-radius: 8px !important; margin: 0 2px; border-color: var(--qa-line); color: var(--bs-body-color); min-width: 2rem; text-align: center; }
.qa-pager .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.qa-pager .page-item.disabled .page-link { color: var(--bs-tertiary-color); background: transparent; }
.qa-pager .page-link:hover { background: #eef2ff; }

/* Cards: what is inside follows the rounded corners (table header, hover and failed rows) */
.card { --bs-card-border-radius: var(--qa-radius); --bs-card-inner-border-radius: calc(var(--qa-radius) - 1px); }
.card > .table-responsive { border-radius: calc(var(--qa-radius) - 1px); }
.card > .card-header ~ .table-responsive { border-top-left-radius: 0; border-top-right-radius: 0; }
.card > .table-responsive:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.card .list-group-flush:last-child > .list-group-item:last-child { border-bottom-left-radius: calc(var(--qa-radius) - 1px); border-bottom-right-radius: calc(var(--qa-radius) - 1px); }
.card > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }

/* Placeholders are hints, not values: clearly lighter than typed text, so an empty box never looks filled in. */
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--bs-secondary-color); opacity: .5; }
.select2-container .select2-selection__placeholder { color: var(--bs-secondary-color) !important; opacity: .6; }
.select2-container .select2-search__field::placeholder { color: var(--bs-secondary-color); opacity: .5; }

/* Run detail of a recorded test: the run played back frame by frame, step screenshots, page problems */
.run-viewer { position: relative; background: #0f172a; border-radius: 10px; overflow: hidden; line-height: 0; }
.run-viewer img { width: 100%; height: auto; display: block; }
.run-viewer .run-mark { position: absolute; border: 3px solid #22c55e; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(15,23,42,.18); pointer-events: none; transition: all .25s; }
.run-viewer .run-mark.failed { border-color: #ef4444; }
.run-viewer-empty { line-height: 1.5; color: #cbd5e1; padding: 3rem 1rem; text-align: center; }
.run-caption { min-height: 2.6rem; }
.run-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.run-strip button { flex: 0 0 auto; width: 26px; height: 8px; border: 0; border-radius: 99px; background: #cbd5e1; padding: 0; }
.run-strip button.passed { background: #86efac; } .run-strip button.failed { background: #fca5a5; } .run-strip button.skipped { background: #e2e8f0; }
.run-strip button.has-issue { box-shadow: inset 0 -3px 0 #f59e0b; }
.run-strip button.on { outline: 2px solid #4f46e5; outline-offset: 1px; }
.run-strip button.sub { width: 14px; opacity: .85; }
/* The steps of a component, under its step on the run page */
.step-subs { list-style: none; margin: .6rem 0 .1rem; padding: .2rem 0 .2rem .6rem; border-left: 2px solid var(--qa-line); display: flex; flex-direction: column; gap: 2px; font-size: .84rem; }
.step-sub { display: grid; grid-template-columns: 1.1rem 1rem minmax(0, 1fr); column-gap: .4rem; align-items: start; padding: .4rem .55rem; border-radius: 6px; line-height: 1.5; color: var(--bs-secondary-color); cursor: pointer; }
.step-sub:hover { background: #f1f5f9; }
.step-sub.step-current { background: #eef2ff; box-shadow: inset 2px 0 0 #6366f1; color: var(--bs-body-color); }
.step-sub.step-sub-failed { color: #b91c1c; }
.step-sub-no { text-align: right; color: var(--bs-tertiary-color); font-variant-numeric: tabular-nums; }
.step-sub-icon { line-height: 1.5; }
.step-sub-title { overflow-wrap: anywhere; margin-right: .5rem; }
.step-sub-title .var-chip { line-height: 1.35; }
.step-sub-meta { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; color: var(--bs-tertiary-color); font-size: .78rem; vertical-align: baseline; }
.step-sub-meta .btn { font-size: .85rem; line-height: 1; }
.step-sub-note { margin-top: .2rem; font-size: .8rem; }
@media (min-width: 1200px) { .run-replay { position: sticky; top: 76px; } }
.run-steps-head { display: flex; align-items: center; gap: .35rem; padding: .6rem 1rem; font-weight: 600; border-top: 1px solid var(--qa-line); border-bottom: 1px solid var(--qa-line); background: var(--bs-tertiary-bg); }
.step-list.step-list-run .step-row { grid-template-columns: 1.4rem 1.1rem minmax(0, 1fr) 2rem 3.6rem; column-gap: .45rem; cursor: pointer; }
.step-list.step-list-run .step-row:hover { background: #f8fafc; }
.step-list.step-list-run .step-row.step-failed:hover { background: #fee2e2; }
.step-list-run .step-shots { display: flex; justify-content: center; }
.step-list-run .step-shot-btn { padding: .05rem .4rem; line-height: 1.4; border: 1px solid var(--qa-line); color: var(--bs-secondary-color); cursor: zoom-in; }
.step-list-run .step-shot-btn:hover { color: #4f46e5; border-color: #c7d2fe; background: #eef2ff; }
.shot-label::before { content: ''; display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .35rem; vertical-align: .05em; }
.shot-label.before::before { background: #f59e0b; } .shot-label.after::before { background: #22c55e; }
.issue-list { list-style: none; padding: 0; margin: .35rem 0 0; }
.issue-list li { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .3rem .55rem; margin-top: .25rem; font-size: .8rem; color: #78350f; word-break: break-word; }
.issue-list .issue-kind { font-weight: 650; margin-right: .3rem; }
.step-list .step-current { box-shadow: inset 3px 0 0 #4f46e5; }
.badge-issues { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Flow diagram: blocks placed freely on a board that pans and zooms, arrows in the order they play,
   dashed lines for values passed on (public/assets/flow.js) */
.flow-board { overflow: hidden; }
/* Runs beside the diagram on wide screens: as tall as the board, the list scrolls on its own. */
@media (min-width: 1200px) {
    .flow-runs-card { height: 100%; display: flex; flex-direction: column; }
    .flow-runs-card #flow-runs { flex: 1 1 0; min-height: 0; overflow-y: auto; }
}
.flow-board .card-header { padding-top: .5rem; padding-bottom: .5rem; }
.flow-viewport { position: relative; overflow: hidden; height: max(440px, calc(100vh - 330px)); cursor: grab; touch-action: none; user-select: none;
    background-color: #f8fafc; background-image: radial-gradient(#dbe2ea 1px, transparent 1px); background-size: 20px 20px; border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
.flow-viewport.is-panning { cursor: grabbing; }
.flow-stage { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; }
.flow-wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; overflow: visible; }
.flow-start { position: absolute; z-index: 1; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
    color: #4f46e5; font-weight: 650; font-size: .75rem; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 50%; cursor: default; }
.flow-start .bi { font-size: 1.2rem; line-height: 1; }
.flow-block { position: absolute; z-index: 1; width: 270px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 4px 14px rgba(15,23,42,.07); cursor: default; user-select: text; }
.flow-block.is-dragging { z-index: 3; box-shadow: 0 14px 30px rgba(15,23,42,.18); }
.flow-block.is-target { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.25); }
.flow-block.is-passed { border-color: #86efac; box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.flow-block.is-failed { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.flow-block.is-missing { border-style: dashed; border-color: #fca5a5; }
.flow-block.is-check .fb-head { background: #f0fdf4; border-radius: 12px 12px 0 0; }
.flow-block.is-new { animation: flow-new 1s ease-out; }
@keyframes flow-new { from { box-shadow: 0 0 0 6px rgba(79,70,229,.35); } }
.fb-head { display: flex; align-items: center; gap: .45rem; height: 44px; padding: 0 .5rem 0 .7rem; border-bottom: 1px solid var(--qa-line); user-select: none; }
.flow-edit .fb-head { cursor: move; }
.fb-no { flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #eef2ff; color: #4f46e5; font: 700 .72rem/1.45rem sans-serif; text-align: center; }
.fb-name { flex: 1; min-width: 0; font-weight: 650; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-body { padding: .6rem .7rem .3rem; }
.fb-param { margin-bottom: .55rem; }
.fb-slot { font: 600 .7rem/1.5 var(--bs-body-font-family); background: #f1f5f9; color: #475569; border-radius: 6px; padding: 0 .4rem; }
.fb-warn { font-size: .75rem; color: #92400e; background: #fffbeb; border-radius: 6px; padding: .2rem .4rem; margin-top: .25rem; }
.fb-foot { padding: .45rem .7rem .55rem; border-top: 1px dashed var(--qa-line); }
.fb-error { margin: 0 .7rem .6rem; font-size: .78rem; color: #b91c1c; background: #fef2f2; border-radius: 6px; padding: .3rem .45rem; word-break: break-word; }
.fb-sub { padding: 0 .7rem .55rem; }
/* ports: the dot on the right is dragged onto the block that plays next */
.flow-port { position: absolute; top: 22px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid #94a3b8; z-index: 2; }
.flow-port.in { left: -7px; pointer-events: none; }
.flow-port.out { right: -7px; }
.flow-start .flow-port { top: 50%; }
.flow-edit .flow-port.out { cursor: crosshair; }
.flow-edit .flow-port.out:hover, .flow-port.out.is-active { border-color: #4f46e5; background: #eef2ff; transform: scale(1.25); }
.flow-block.is-off { opacity: .62; border-style: dashed; box-shadow: none; }
.flow-block.is-off:hover { opacity: .9; }
.fb-off { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; font-size: .72rem; color: var(--qa-muted); white-space: nowrap; }
.flow-cut { pointer-events: all; cursor: pointer; opacity: .55; }
.flow-cut circle { fill: #fff; stroke: #94a3b8; stroke-width: 1.5; }
.flow-cut path { stroke: #64748b; stroke-width: 1.6; stroke-linecap: round; }
.flow-cut:hover { opacity: 1; }
.flow-cut:hover circle { stroke: #dc2626; fill: #fef2f2; }
.flow-cut:hover path { stroke: #dc2626; }
.fb-no-sm { display: inline-block; width: 1.15rem; height: 1.15rem; font-size: .62rem; line-height: 1.15rem; }
.flow-values td, .flow-values th { padding-left: .75rem; padding-right: .75rem; }
.flow-values .fb-no { display: inline-block; }
.flow-hint { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; color: var(--qa-muted); pointer-events: none; }
.flow-hint .bi { font-size: 2rem; display: block; margin-bottom: .3rem; }
.flow-zoom .btn { min-width: 2rem; }
#flow-zoom-label { min-width: 3.4rem; font-variant-numeric: tabular-nums; }
/* "Add a block" */
.flow-pick { display: block; width: 100%; height: 100%; text-align: left; border: 1px solid var(--qa-line); border-radius: 12px; padding: .75rem .85rem; background: #fff; transition: border-color .12s, box-shadow .12s; }
.flow-pick:hover, .flow-pick:focus-visible { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); outline: 0; }
.flow-pick .fp-name { font-weight: 650; }
.flow-pick .fp-open { color: var(--qa-muted); }
.flow-pick .fp-open:hover { color: #4f46e5; }
.flow-pick-check { background: #f0fdf4; border-color: #bbf7d0; }
.flow-pick .fp-meta { font-size: .78rem; color: var(--qa-muted); margin-top: .15rem; }
.flow-pick .fp-desc { font-size: .82rem; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flow-pick .fp-vars { font-size: .78rem; margin-top: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
/* "Add block component": search + module chips under the header, components in one section per module */
.flow-add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--qa-line); background: #fafbfd; }
.flow-add-search { width: 260px; max-width: 100%; }
.flow-add-modules { display: flex; flex-wrap: wrap; gap: .35rem; }
.flow-add-chip { border: 1px solid var(--qa-line); background: #fff; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 550; color: #334155; }
.flow-add-chip span { color: var(--qa-muted); font-weight: 500; margin-left: .15rem; }
.flow-add-chip:hover { border-color: #a5b4fc; }
.flow-add-chip.active { background: var(--qa-brand); border-color: var(--qa-brand); color: #fff; }
.flow-add-chip.active span { color: rgba(255,255,255,.8); }
.flow-add-section { margin-bottom: 1.25rem; }
#flow-add-list .flow-add-section:last-child { margin-bottom: 0; }
.flow-add-head { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 1px dashed var(--qa-line); }
.flow-add-head .badge { text-transform: none; letter-spacing: 0; }
/* help behind a "?" (help_tip()) */
.qa-help { padding: 0 .15rem; line-height: 1; font-size: 1.05rem; color: var(--qa-muted); text-decoration: none; vertical-align: middle; }
.qa-help:hover, .qa-help:focus-visible { color: #4f46e5; }
.modal-header .qa-help { margin-left: .6rem; margin-right: auto; }
.qa-help-pop { --bs-popover-max-width: 440px; --bs-popover-font-size: .85rem; --bs-popover-header-bg: #f8fafc; box-shadow: var(--qa-shadow-lg); }
.qa-help-pop .popover-body { max-height: 70vh; overflow: auto; }
.qa-help-pop ol, .qa-help-pop ul { padding-left: 1.1rem; }
.qa-help-pop li { margin-bottom: .3rem; }
/* actions at the top right of a page's hero */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-left: auto; }
/* compact hero of a detail page: back arrow, title + badges, one meta line (description cut short) */
.hero-compact { padding: .75rem 1rem; border-radius: 14px; }
.hero-compact h1 { font-weight: 700; }
.hero-compact .hero-back { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--qa-muted); text-decoration: none; }
.hero-compact .hero-back:hover { background: rgba(79,70,229,.08); color: #4f46e5; }
.hero-compact .hero-actions { gap: .4rem; }
.hero-compact .hero-actions .btn { padding: .3rem .65rem; font-size: .875rem; }
.hero-compact .hero-actions .dropdown-toggle-split { padding-left: .45rem; padding-right: .45rem; }
/* low specificity, so a split button (.btn-group) keeps its square inner corners */
.hero-compact :where(.hero-actions .btn) { border-radius: 8px; }
/* settings → Modules: the components count, and the "No module" row at the bottom */
.module-count { font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.module-none td { background: #fafbfd; }
/* Extension preview: the sample page (or the popup) in a frame, the messages the panel sent */
.ext-preview-stage { background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 0 0 14px 14px; overflow: hidden; }
.ext-preview-stage iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.ext-preview-stage.is-popup { padding: 24px; }
.ext-preview-stage.is-popup iframe { width: 360px; max-width: 100%; height: 560px; margin: 0 auto; border-radius: 10px; box-shadow: var(--qa-shadow-lg); }
.ext-preview-log { max-height: 260px; overflow: auto; font-size: .82rem; }
.ext-preview-log li { padding: .35rem 1rem; border-bottom: 1px solid #f1f5f9; overflow-wrap: anywhere; }
.ext-preview-list .list-group-item-action { font-size: .88rem; padding: .45rem 1rem; }
.ext-sandbox { background: radial-gradient(900px 260px at 0% 0%, rgba(124,58,237,.10), transparent 60%), #fff; border-color: #ddd6fe; }
.hero-compact .hero-desc { display: inline-block; max-width: min(60ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--bs-body-color); }
.hero-compact .alert { margin-top: .6rem !important; padding: .45rem .75rem; }
.hero-compact .bt-timing { font-size: .8rem; }

/* "Run on" dialog (QaRec.chooseRun) */
.run-on-list .list-group-item { cursor: pointer; }
.run-on-list .list-group-item:has(input:checked) { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }

/* Variables page: values, test accounts and next numbers edited in the grid (variables.js) */
.var-grid th.var-env-col { min-width: 10rem; }
.var-cell-edit { cursor: pointer; }
.var-cell-edit:hover, .var-cell-edit:focus-visible { background: var(--bs-tertiary-bg); outline: none; box-shadow: inset 0 0 0 1px var(--bs-border-color); }
.var-cell-edit.var-editing { cursor: default; background: transparent; box-shadow: none; }
.var-cell-edit.var-missing { background: var(--bs-danger-bg-subtle); }
.var-editor { min-width: 13rem; }
.var-more { display: inline; } .var-more summary { display: inline; cursor: pointer; list-style: none; }
.var-more summary::-webkit-details-marker { display: none; } .var-more[open] summary { display: none; }

/* Suite form: flows and components pickers, and the run order */
.suite-pick-head { padding: .55rem 1rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--qa-line); }
.suite-pick-list { max-height: 420px; overflow-y: auto; }
.suite-pick { padding: .6rem 1rem; }
.suite-pick.suite-pick-in { background: #f8fafc; }
@media (min-width: 768px) { .suite-pick-col { border-left: 1px solid var(--qa-line); } }
.suite-kind-flow { color: #7c3aed; } .suite-kind-component { color: #0891b2; }
.suite-badge-flow { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; font-weight: 600; }
.suite-badge-component { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; font-weight: 600; }
@media (min-width: 992px) { .suite-order-card { position: sticky; top: 76px; } }
.suite-order-card .suite-list { max-height: 60vh; overflow-y: auto; }
.suite-order-card .suite-no { width: 1.4rem; text-align: right; }

/* Help & FAQ (faq/index.php) */
.faq-search { position: relative; max-width: 560px; }
.faq-search i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--qa-muted); }
.faq-search .form-control { padding: .65rem 1rem .65rem 2.4rem; border-radius: 12px; box-shadow: var(--qa-shadow); }
.faq-path { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.faq-path-step { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--qa-line); border-radius: var(--qa-radius); box-shadow: var(--qa-shadow); color: inherit; }
a.faq-path-step:hover { text-decoration: none; border-color: #c7d2fe; box-shadow: var(--qa-shadow-lg); }
.faq-path-step > .bi { font-size: 1.3rem; color: var(--qa-brand); }
.faq-path-no { position: absolute; top: .7rem; right: .8rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--qa-brand-soft); color: var(--qa-brand); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.faq-path-title { font-weight: 650; color: var(--qa-ink); line-height: 1.25; }
.faq-path-note { font-size: .78rem; color: var(--qa-muted); }
.faq-toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.faq-toc a { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: 8px; color: var(--qa-muted); font-weight: 500; }
.faq-toc a:hover { background: #fff; color: var(--qa-ink); text-decoration: none; }
.faq-toc a.active { background: var(--qa-brand-soft); color: var(--qa-brand); }
.faq-section { scroll-margin-top: 84px; }
.faq-h { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.faq-h .bi { color: var(--qa-brand); }
.faq-item { border-top: 1px solid var(--qa-line); scroll-margin-top: 84px; }
.faq-item > summary { list-style: none; cursor: pointer; padding: .8rem 2.2rem .8rem 0; font-weight: 600; color: var(--qa-ink); position: relative; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: .25rem; top: .8rem; color: var(--qa-muted); transition: transform .15s; }
.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item > summary:hover { color: var(--qa-brand); }
.faq-link { margin-left: .35rem; color: var(--qa-muted); opacity: 0; font-weight: 400; }
.faq-item > summary:hover .faq-link, .faq-link:focus-visible { opacity: 1; }
.faq-a { padding: 0 0 1rem; color: #334155; max-width: 75ch; }
.faq-a ul, .faq-a ol { padding-left: 1.2rem; }
.faq-a li + li { margin-top: .25rem; }
.faq-terms { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.faq-terms dt { font-weight: 650; color: var(--qa-ink); }
.faq-terms dd { margin: 0; }
.faq-table { font-size: .875rem; }
.faq-table td:first-child { white-space: nowrap; }
@media (max-width: 575.98px) {
  .faq-terms { grid-template-columns: 1fr; }
  .faq-terms dd { margin-bottom: .4rem; }
  .faq-table td:first-child { white-space: normal; }
}