/* Floqify's visual styles share one set of components and one brand mark. */
.brand-wordmark {display:flex;flex-direction:column;line-height:1.2;letter-spacing:-.025em}
.brand-wordmark small {font-size:.6rem;font-weight:400;letter-spacing:.02em;opacity:.75;margin-top:3px}
.section-eyebrow {font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted);margin-bottom:.5rem}
.insight-tabs {display:flex;gap:24px;border-bottom:1px solid var(--color-border);margin-bottom:24px;flex-wrap:wrap}
.insight-tabs a {padding:0 0 12px;color:var(--color-muted);text-decoration:none;border-bottom:2px solid transparent;font-size:.9rem}
.insight-tabs a[aria-current] {color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}
.appearance-page {max-width:960px}
.appearance-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.appearance-option {display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);position:relative;cursor:pointer}
.appearance-option input {position:absolute;inset:16px auto auto 16px;width:18px;height:18px;accent-color:var(--color-primary)}
.appearance-option:has(input:checked) {outline:2px solid var(--color-primary);outline-offset:2px}
.appearance-option:has(input:focus-visible) {outline:3px solid var(--bs-body-color);outline-offset:4px}
.appearance-selection {visibility:hidden;color:var(--color-primary)}
.appearance-option:has(input:checked) .appearance-selection {visibility:visible}
.appearance-thumbnail {display:flex;gap:8px;height:90px;padding:12px;background:#f3f5f9;border-radius:6px;--preview-color:#0d6efd}
.appearance-thumbnail>span:first-child {width:22%;background:#0f172a;border-radius:3px}
.appearance-thumbnail>span:last-child {flex:1;display:flex;align-items:flex-end;gap:5px;padding:13px 5px 0}
.appearance-thumbnail i {height:48%;flex:1;background:var(--preview-color);border-radius:3px 3px 0 0}
.appearance-thumbnail i:nth-child(2) {height:70%;opacity:.65}
.appearance-thumbnail i:nth-child(3) {height:95%}
[data-preview="flow"] .appearance-thumbnail {--preview-color:#086c60;background:#e4f3ef}
[data-preview="relay"] .appearance-thumbnail {--preview-color:#515e26;background:#f1efe7}
[data-preview="studio"] .appearance-thumbnail {--preview-color:#5046c5;background:#eeedff}
html[data-design="flow"] {--fq-brand:#086c60;--fq-on:#fff;--fq-rgb:8,108,96;--fq-soft:#e4f3ef;--fq-bg:#f5f7f8;--fq-surface:#fff;--fq-text:#182a32;--fq-muted:#52636c;--fq-line:#dce4e8;--fq-series:#899ba6;--radius-lg:14px}
html[data-design="relay"] {--fq-brand:#515e26;--fq-on:#fff;--fq-rgb:81,94,38;--fq-soft:#edf0dc;--fq-bg:#f7f5f1;--fq-surface:#fffefa;--fq-text:#2c302b;--fq-muted:#62645b;--fq-line:#dddcd2;--fq-series:#b38a68;--radius-lg:6px}
html[data-design="studio"] {--fq-brand:#5046c5;--fq-on:#fff;--fq-rgb:80,70,197;--fq-soft:#eeedff;--fq-bg:#f3f4f8;--fq-surface:#fff;--fq-text:#23283e;--fq-muted:#62677e;--fq-line:#dce0ec;--fq-series:#8b95ad;--radius-lg:9px}
html[data-design="flow"][data-bs-theme="dark"] {--fq-brand:#6cddc7;--fq-on:#122921;--fq-rgb:108,221,199;--fq-soft:#233e38;--fq-bg:#141b20;--fq-surface:#1c252b;--fq-text:#e7f0f3;--fq-muted:#a6b8c1;--fq-line:#35444d;--fq-series:#8297a3}
html[data-design="relay"][data-bs-theme="dark"] {--fq-brand:#c5d58a;--fq-on:#242a15;--fq-rgb:197,213,138;--fq-soft:#373e29;--fq-bg:#1d1c1a;--fq-surface:#272622;--fq-text:#f2f0e8;--fq-muted:#b9baad;--fq-line:#49493e;--fq-series:#caa88c}
html[data-design="studio"][data-bs-theme="dark"] {--fq-brand:#b5afff;--fq-on:#201a47;--fq-rgb:181,175,255;--fq-soft:#302d51;--fq-bg:#12151e;--fq-surface:#1c202e;--fq-text:#eceefa;--fq-muted:#a9b0ca;--fq-line:#353e56;--fq-series:#8f9ab7}
html[data-design]:not([data-design="current"]) {
 --bs-primary:var(--fq-brand);--bs-primary-rgb:var(--fq-rgb);--bs-primary-text-emphasis:var(--fq-brand);--bs-primary-bg-subtle:var(--fq-soft);
 --bs-body-bg:var(--fq-surface);--bs-body-color:var(--fq-text);--bs-secondary-color:var(--fq-muted);--bs-emphasis-color:var(--fq-text);
 --bs-tertiary-bg:var(--fq-bg);--bs-secondary-bg:var(--fq-soft);--bs-border-color:var(--fq-line);--bs-link-color:var(--fq-brand);--bs-link-hover-color:var(--fq-brand);--bs-link-color-rgb:var(--fq-rgb);--bs-link-hover-color-rgb:var(--fq-rgb);
 --bs-border-radius-lg:var(--radius-lg);--color-primary:var(--fq-brand);--color-primary-hover:var(--fq-brand);
 --color-bg:var(--fq-bg);--color-bg-subtle:var(--fq-soft);--color-surface:var(--fq-surface);--color-dark:var(--fq-text);--color-muted:var(--fq-muted);--color-border:var(--fq-line);
 --sidebar-bg:var(--fq-surface);--sidebar-text:var(--fq-muted);--sidebar-text-active:var(--fq-text);--sidebar-hover-bg:var(--fq-soft);--sidebar-active-bg:var(--fq-soft);--sidebar-active-text:var(--fq-brand);--sidebar-border:var(--fq-line);
 --chart-created:var(--fq-series);--shadow-sm:none;
}
html[data-design]:not([data-design="current"]) .btn-primary {--bs-btn-bg:var(--fq-brand);--bs-btn-color:var(--fq-on);--bs-btn-border-color:var(--fq-brand);--bs-btn-hover-bg:var(--fq-brand);--bs-btn-hover-color:var(--fq-on);--bs-btn-hover-border-color:var(--fq-brand);--bs-btn-active-bg:var(--fq-brand);--bs-btn-active-color:var(--fq-on);--bs-btn-active-border-color:var(--fq-brand);--bs-btn-disabled-bg:var(--fq-brand);--bs-btn-disabled-border-color:var(--fq-brand);--bs-btn-disabled-color:var(--fq-on)}
html[data-design]:not([data-design="current"]) .btn-outline-primary {--bs-btn-color:var(--fq-brand);--bs-btn-border-color:var(--fq-brand);--bs-btn-hover-bg:var(--fq-brand);--bs-btn-hover-color:var(--fq-on);--bs-btn-hover-border-color:var(--fq-brand);--bs-btn-active-bg:var(--fq-brand);--bs-btn-active-border-color:var(--fq-brand);--bs-btn-active-color:var(--fq-on)}
html[data-design]:not([data-design="current"]) .sidebar-brand,
html[data-design]:not([data-design="current"]) .sidebar-nav .nav-link:hover,
html[data-design]:not([data-design="current"]) .sidebar-submenu .nav-link:hover {color:var(--fq-text)}
html[data-design]:not([data-design="current"]) .sidebar-section-label,
html[data-design]:not([data-design="current"]) .sidebar-submenu .nav-link {color:var(--fq-muted)}
html[data-design]:not([data-design="current"]) .card {border:1px solid var(--fq-line)!important;border-radius:var(--radius-lg)}
html[data-design]:not([data-design="current"]) .table-light {--bs-table-bg:var(--fq-soft);--bs-table-color:var(--fq-text);--bs-table-border-color:var(--fq-line)}
html[data-design]:not([data-design="current"]) .dropdown-menu-dark {--bs-dropdown-bg:var(--fq-surface);--bs-dropdown-color:var(--fq-text);--bs-dropdown-link-color:var(--fq-text);--bs-dropdown-link-hover-color:var(--fq-text);--bs-dropdown-link-hover-bg:var(--fq-soft);--bs-dropdown-border-color:var(--fq-line);--bs-dropdown-divider-bg:var(--fq-line)}
html[data-design]:not([data-design="current"]) .select2-results__option--highlighted {color:var(--fq-on)!important}
html[data-design="relay"] .app-content h1,html[data-design="relay"] .app-content h2,html[data-design="relay"] .app-content h4 {font-family:Georgia,serif;font-weight:400!important;letter-spacing:-.025em}
html[data-design="studio"] .app-content {padding-top:1.25rem}
html[data-design="studio"] .card-body {padding:1rem}
@media(max-width:900px){.appearance-options {grid-template-columns:1fr 1fr}}
@media(max-width:430px){.appearance-options {gap:12px}.appearance-option {padding:12px}.appearance-thumbnail {height:75px}.appearance-option input {inset:14px auto auto 14px}}
@media(pointer:coarse){.appearance-option {min-height:160px}}
@media(prefers-reduced-motion:reduce){.appearance-option {transition:none}}