/*
 * QuikSEO application pages in the Obsidian Emerald style (owner decision 2026-10-07). Loaded by app_wrapper.php after
 * obsidian.css and obsidian-kit.css. The 66audit and Bootstrap components read the variables below, so remapping them
 * to the kit tokens turns every app view dark and emerald; the rest are the layout pieces of the app (sidebar, menu,
 * content) and the few components that use fixed colours.
 */

/* ---------------------------------------------------------------- tokens of 66audit, Bootstrap and quikseo.css */
body.qs-public {
    --white: #0e1110;
    --black: #ededeb;
    --light: #141816;
    --dark: #ededeb;
    --gray: #8e948f;
    --gray-dark: #d4d6d2;
    --gray-50: #0b0e0c;
    --gray-100: #141816;
    --gray-200: #1a1f1c;
    --gray-300: #232825;
    --gray-400: #3a403c;
    --gray-500: #5c625e;
    --gray-600: #8e948f;
    --gray-700: #a9aea9;
    --gray-800: #d4d6d2;
    --gray-900: #ededeb;
    --primary: #10b981;
    --primary-50: #0b1611;
    --primary-100: #0d2a1f;
    --primary-200: #065f46;
    --primary-300: #047857;
    --primary-400: #059669;
    --primary-600: #34d399;
    --primary-700: #6ee7b7;
    --primary-800: #a7f3d0;
    --primary-900: #d1fae5;
    --secondary: #8e948f;
    --success: #34d399;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;
    --qs-accent: #34d399;
    --qs-accent-50: #0b1611;
    --qs-accent-700: #6ee7b7;
    --qs-pink: #34d399;
    --qs-gradient: linear-gradient(100deg, #059669 0%, #10b981 60%, #34d399 100%);
    --qs-gradient-soft: linear-gradient(120deg, rgba(16, 185, 129, .1), rgba(16, 185, 129, .03));
    --qs-gradient-text: linear-gradient(100deg, #6ee7b7, #10b981 60%, #34d399);
    --qs-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 20px 50px -30px rgba(var(--ob-shade), calc(.9 * var(--ob-shade-k)));
    --qs-shadow-hover: 0 0 0 1px rgba(52, 211, 153, .25), 0 24px 60px -30px rgba(16, 185, 129, .45);
    --qs-font: var(--ob-font-ui);
    background: var(--ob-canvas);
}

/* The same names in the light theme (white text on --primary and --qs-gradient stays at least 4.5:1) */
:root[data-theme-style="light"] body.qs-public {
    --white: #ffffff;
    --black: #101412;
    --light: #f1f3f0;
    --dark: #101412;
    --gray: #646c66;
    --gray-dark: #2a302c;
    --gray-50: #f6f7f5;
    --gray-100: #eff1ee;
    --gray-200: #e1e5e0;
    --gray-300: #ccd2cd;
    --gray-400: #a3aaa5;
    --gray-500: #7a827c;
    --gray-600: #5a625c;
    --gray-700: #48504a;
    --gray-800: #2a302c;
    --gray-900: #101412;
    --primary: #047857;
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-600: #065f46;
    --primary-700: #064e3b;
    --primary-800: #064e3b;
    --primary-900: #022c22;
    --secondary: #646c66;
    --success: #047857;
    --warning: #b45309;
    --danger: #c81e1e;
    --info: #0369a1;
    --qs-accent: #047857;
    --qs-accent-50: #ecfdf5;
    --qs-accent-700: #065f46;
    --qs-pink: #047857;
    --qs-gradient: linear-gradient(100deg, #065f46 0%, #047857 60%, #047857 100%);
    --qs-gradient-soft: linear-gradient(120deg, rgba(5, 150, 105, .08), rgba(5, 150, 105, .02));
    --qs-gradient-text: var(--ob-hero-gradient);
    --qs-shadow-hover: 0 0 0 1px rgba(4, 120, 87, .3), 0 18px 40px -24px rgba(4, 120, 87, .35);
}

/* ---------------------------------------------------------------- layout */
body.qs-app { background: var(--ob-canvas); color: var(--ob-fg-2); }
body.qs-app .app-container, body.qs-app .app-content { background: transparent; }
body.qs-app .app-content { position: relative; z-index: 2; }
body.qs-app main { padding-bottom: 24px; }

/* Sidebar */
body.qs-app .app-sidebar { background: rgba(var(--ob-glass), .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ob-line-3); border-radius: 16px; box-shadow: 0 30px 80px -40px rgba(var(--ob-shade), calc(.9 * var(--ob-shade-k))); }
body.qs-app .app-sidebar-title { height: 64px; justify-content: flex-start; padding: 0 20px; margin: 4px 0 8px; border-bottom: 1px solid var(--ob-line-2); }
body.qs-app .app-sidebar-title .ob-brand { font-size: inherit; }
body.qs-app .app-sidebar-links > li { padding: 2px 10px; }
body.qs-app .app-sidebar-links > li > a { color: var(--ob-fg-2); border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
body.qs-app .app-sidebar-links > li > a svg, body.qs-app .app-sidebar-links > li > a i { color: var(--ob-fg-3); transition: color .15s; }
body.qs-app .app-sidebar-links > li > a:hover { background: var(--ob-surface-3); color: var(--ob-fg-1); }
body.qs-app .app-sidebar-links > li > a:hover svg { color: var(--ob-fg-2); }
body.qs-app .app-sidebar-links > li.active > a:not(.default) { background: var(--ob-accent-tint-2); color: var(--ob-fg-1); box-shadow: inset 2px 0 0 var(--ob-accent); }
body.qs-app .app-sidebar-links > li.active > a:not(.default) svg { color: var(--ob-accent-hover); }
body.qs-app .app-sidebar-links > li > a.default { padding: 9px 10px; }
body.qs-app .app-sidebar-links > li > a.bg-primary { background: var(--ob-accent-tint-2) !important; color: var(--ob-accent-hover) !important; }
body.qs-app .app-sidebar-label { font-family: var(--ob-font-mono); font-weight: 400 !important; font-size: 10.5px; letter-spacing: .08em; color: var(--ob-fg-3) !important; padding: 0 22px !important; margin-top: 18px !important; }
body.qs-app .app-sidebar-links > .divider-wrapper > .divider { border-color: var(--ob-line-2); }
body.qs-app .app-sidebar-footer > a { border-top: 1px solid var(--ob-line-2); border-radius: 0 0 16px 16px; padding: 14px 20px; }
body.qs-app .app-sidebar-footer > a:hover { background: var(--ob-surface-3); }
body.qs-app .app-sidebar-footer-text span { color: var(--ob-fg-1); font-weight: 600; font-size: 14px; }
body.qs-app .app-sidebar-footer-text small { color: var(--ob-fg-3); font-family: var(--ob-font-mono); font-size: 11px; }
body.qs-app .app-sidebar-avatar { border: 1px solid var(--ob-line-4); }
body.qs-app .app-overlay { background: rgba(var(--ob-scrim), .7); opacity: 1; }

/* Top menu of the app (phones) and the notifications */
body.qs-app .app-content > .container .navbar, body.qs-app .navbar { background: transparent; }
body.qs-app #app_menu_toggler { background: var(--ob-surface-2); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); border-radius: 8px; }
body.qs-app .navbar-brand { color: var(--ob-fg-1) !important; }

/* Page titles and headings inside the app */
body.qs-app main h1, body.qs-app main .h1 { font-family: var(--ob-font-display); font-weight: 300; letter-spacing: -.02em; color: var(--ob-fg-1); }
body.qs-app main h1.h4, body.qs-app main h1.h3, body.qs-app main h1.h5 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
body.qs-public.qs-app main .container h1:not(.ob-h1) { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
body.qs-app main h2, body.qs-app main h3, body.qs-app main h4, body.qs-app main h5, body.qs-app main h6,
body.qs-app main .h2, body.qs-app main .h3, body.qs-app main .h4, body.qs-app main .h5, body.qs-app main .h6 { font-weight: 600; letter-spacing: -.01em; color: var(--ob-fg-1); font-family: var(--ob-font-ui); }
body.qs-public.qs-app main .container h2:not(.ob-h2):not(.ob-h3):not(.h-h2) { font-family: var(--ob-font-ui); font-weight: 600; }
body.qs-public.qs-app main .container .h2, body.qs-public.qs-app main .container .h3 { font-family: var(--ob-font-ui); font-weight: 600; }

/* Cards, lists and tables */
body.qs-app .card { background: rgba(var(--ob-glass), .94); border: 1px solid var(--ob-line-3); border-radius: 16px; box-shadow: none; }
body.qs-app .card.bg-gray-50, body.qs-app .bg-gray-50, body.qs-app .bg-gray-100 { background: var(--ob-surface-1) !important; }
body.qs-app .table-custom-container { background: rgba(var(--ob-glass), .94); border: 1px solid var(--ob-line-3); border-radius: 16px; }
body.qs-app .table-custom thead th { background: transparent; color: var(--ob-fg-3); border-color: var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
body.qs-app .table-custom td { border-color: var(--ob-line-1); color: var(--ob-fg-1); }
body.qs-app .table-custom tbody tr:hover td { background: rgba(var(--ob-ink), .02); }
body.qs-app .text-muted { color: var(--ob-fg-2) !important; }
body.qs-app a { color: var(--ob-accent-hover); }
body.qs-app a:hover { color: var(--ob-accent-soft); }
body.qs-app .text-dark, body.qs-app a.text-dark { color: var(--ob-fg-1) !important; }

/* Buttons, badges and forms that use fixed Bootstrap colours */
body.qs-app .btn-primary, body.qs-app .btn-primary:not(:disabled):not(.disabled):active { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-accent-ink); box-shadow: var(--ob-shadow-cta); }
body.qs-app .btn-primary:hover, body.qs-app .btn-primary:focus { background: var(--ob-accent-hover); border-color: var(--ob-accent-hover); color: var(--ob-accent-ink); }
body.qs-app .btn-outline-primary { background: transparent; border-color: var(--ob-accent-border); color: var(--ob-accent-hover); }
body.qs-app .btn-outline-primary:hover { background: var(--ob-accent-tint-2); color: var(--ob-accent-soft); border-color: var(--ob-accent); }
body.qs-app .btn-light, body.qs-app .btn-gray-100, body.qs-app .btn-gray-200, body.qs-app .btn-secondary, body.qs-app .btn-outline-secondary { background: var(--ob-surface-3); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); }
body.qs-app .btn-light:hover, body.qs-app .btn-gray-100:hover, body.qs-app .btn-gray-200:hover, body.qs-app .btn-secondary:hover, body.qs-app .btn-outline-secondary:hover { background: var(--ob-surface-3); border-color: var(--ob-accent-border); color: var(--ob-fg-1); }
body.qs-app .btn-dark { background: var(--ob-fg-1); color: var(--ob-canvas); border-color: var(--ob-fg-1); }
body.qs-app .btn-danger { background: var(--ob-danger); border-color: var(--ob-danger); }
body.qs-app .bg-primary { background: var(--ob-accent) !important; color: var(--ob-accent-ink) !important; }
body.qs-app .bg-primary-50, body.qs-app .bg-primary-100 { background: var(--ob-accent-tint-2) !important; }
body.qs-app .text-primary, body.qs-app .text-primary-600, body.qs-app .text-primary-700 { color: var(--ob-accent-hover) !important; }
body.qs-app .border-primary { border-color: var(--ob-accent) !important; }
body.qs-app .badge-light, body.qs-app .badge-gray-100, body.qs-app .badge-secondary { background: var(--ob-surface-3); color: var(--ob-fg-2); border: 1px solid var(--ob-line-4); }
body.qs-app .badge-primary, body.qs-app .badge-success { background: var(--ob-accent-tint); color: var(--ob-accent-hover); border: 1px solid var(--ob-accent-border); }
body.qs-app .badge-warning { background: var(--ob-warn-tint); color: var(--ob-warn); border: 1px solid var(--ob-warn-border); }
body.qs-app .badge-danger { background: var(--ob-danger-tint); color: var(--ob-danger); border: 1px solid var(--ob-danger-border); }
body.qs-app .badge-info { background: rgba(56, 189, 248, .1); color: var(--info); border: 1px solid rgba(56, 189, 248, .35); }
body.qs-app .btn-outline-success { color: var(--ob-accent-hover); border-color: var(--ob-accent-border); background: transparent; }
body.qs-app .btn-outline-success:hover, body.qs-app .btn-outline-success:focus { color: var(--ob-accent-ink); background: var(--ob-accent); border-color: var(--ob-accent); }
body.qs-app .form-control, body.qs-app .custom-select, body.qs-app .input-group-text, body.qs-app .select2-container--default .select2-selection--single, body.qs-app .select2-container--default .select2-selection--multiple { background: var(--ob-canvas); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); border-radius: 8px; }
body.qs-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ob-fg-1); }
body.qs-app .select2-dropdown { background: var(--ob-surface-2); border-color: var(--ob-line-3); }
body.qs-app .select2-container--default .select2-results__option--highlighted[aria-selected], body.qs-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--ob-accent-tint-2); color: var(--ob-fg-1); }
body.qs-app .select2-search__field { background: var(--ob-canvas); color: var(--ob-fg-1); border-color: var(--ob-line-4) !important; }
body.qs-app .custom-control-label::before { border: 1px solid var(--ob-control-border); }
body.qs-app .custom-control-input:checked ~ .custom-control-label::before { background: var(--ob-accent); border-color: var(--ob-accent); }
body.qs-app .custom-switch .custom-control-label::after { background: var(--ob-fg-2); }
body.qs-app .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: var(--ob-accent-ink); }
body.qs-app .progress { background: var(--ob-line-2); }
body.qs-app .progress-bar { background: var(--ob-accent); }
body.qs-app .nav-pills .nav-link, body.qs-app .nav-tabs .nav-link { color: var(--ob-fg-2); }
body.qs-app .nav-pills .nav-link.active { background: var(--ob-accent-tint-2); color: var(--ob-fg-1); box-shadow: inset 0 0 0 1px var(--ob-accent-border); }
body.qs-app .nav-tabs { border-color: var(--ob-line-2); }
body.qs-app .nav-tabs .nav-link.active { background: transparent; color: var(--ob-fg-1); border-color: var(--ob-line-3) var(--ob-line-3) transparent; }
body.qs-app .modal-content { background: var(--ob-surface-2); border: 1px solid var(--ob-line-3); border-radius: 16px; }
body.qs-app .modal-header, body.qs-app .modal-footer { border-color: var(--ob-line-2); }
body.qs-app .close { color: var(--ob-fg-1); text-shadow: none; }
body.qs-app .tooltip-inner { background: var(--ob-surface-3); color: var(--ob-fg-1); border: 1px solid var(--ob-line-4); }
body.qs-app .popover { background: var(--ob-surface-2); border-color: var(--ob-line-3); }
body.qs-app .popover-body { color: var(--ob-fg-1); }
body.qs-app hr { border-color: var(--ob-line-2); }
body.qs-app code { color: var(--ob-accent-soft); background: var(--ob-surface-3); }
body.qs-app pre { background: var(--ob-inset); border: 1px solid var(--ob-line-2); color: var(--ob-fg-1); border-radius: 10px; }

/* The app footer */
body.qs-app .app-footer { border-top: 1px solid var(--ob-line-2); color: var(--ob-fg-3); font-family: var(--ob-font-mono); font-size: 12px; }
body.qs-app .app-footer a { color: var(--ob-fg-2); }

/* Entity colours of 66audit (website blue, audit purple) in the kit palette */
body.qs-public .text-website { color: var(--ob-fg-1) !important; }
body.qs-public .bg-website { background: var(--ob-surface-3) !important; box-shadow: inset 0 0 0 1px var(--ob-line-4); }
body.qs-public .text-audit { color: var(--ob-accent-hover) !important; }
body.qs-public .bg-audit { background: var(--ob-accent-tint-2) !important; box-shadow: inset 0 0 0 1px var(--ob-accent-border); }
body.qs-app .card-widget-icon { background: var(--ob-surface-3) !important; box-shadow: inset 0 0 0 1px var(--ob-line-4); }
body.qs-app .bg-success { background-color: var(--ob-accent) !important; }
body.qs-app .text-success { color: var(--ob-accent-hover) !important; }
body.qs-app .bg-warning { background-color: var(--ob-warn) !important; }
body.qs-app .text-warning { color: var(--ob-warn) !important; }
body.qs-app .bg-danger { background-color: var(--ob-danger) !important; }
body.qs-app .text-danger { color: var(--ob-danger) !important; }

body.qs-app .h-app-bar { background: rgba(var(--ob-glass), .94) !important; border: 1px solid var(--ob-line-3); border-radius: 14px; }
body.qs-app .h-app-bar .ob-brand { padding: 0; margin: 0; }
body.qs-app #app_menu_toggler:focus { box-shadow: 0 0 0 3px var(--ob-accent-tint-2); }
body.qs-app .btn-gray-300, body.qs-app .btn-gray-400, body.qs-app .btn-gray-50 { background: var(--ob-surface-3); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); }
body.qs-app .btn-gray-300:hover, body.qs-app .btn-gray-400:hover, body.qs-app .btn-gray-50:hover { border-color: var(--ob-accent-border); color: var(--ob-fg-1); }

/* Tooltips and popovers: 66audit writes light text classes for its dark tooltips (text-gray-50, text-white); in the kit
   every text inside them uses the kit foreground */
body.qs-public .tooltip-inner, body.qs-public .tooltip-inner * { color: var(--ob-fg-1) !important; }
body.qs-public .tooltip-inner a:hover { color: var(--ob-accent-hover) !important; }
body.qs-public .popover-body, body.qs-public .popover-body *, body.qs-public .popover-header { color: var(--ob-fg-1); }
body.qs-public .tooltip.bs-tooltip-top .arrow::before, body.qs-public .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--ob-line-4); }
body.qs-public .tooltip.bs-tooltip-bottom .arrow::before, body.qs-public .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--ob-line-4); }
body.qs-public .tooltip.bs-tooltip-right .arrow::before, body.qs-public .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--ob-line-4); }
body.qs-public .tooltip.bs-tooltip-left .arrow::before, body.qs-public .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--ob-line-4); }
body.qs-public .tooltip-inner { background: var(--ob-surface-3); border: 1px solid var(--ob-line-4); box-shadow: var(--ob-shadow-float); }
body.qs-public .h-merge { color: var(--ob-fg-2); }
body.qs-public .h-build__card small { color: var(--ob-fg-2); }
body.qs-public .dropdown-item.active, body.qs-public .dropdown-item:active { background: var(--ob-accent-tint-2); color: var(--ob-fg-1) !important; box-shadow: inset 2px 0 0 var(--ob-accent); }

/* Kit headings inside the app and admin keep the display font of the mockup */
body.qs-app main .h-h2, body.qs-app main .h-page-h1, body.qs-app main .h-h1, body.qs-app main .h-h3,
body.qs-public.qs-app main .container h2.h-h2, body.qs-app main .h-tool-h2, body.qs-app main .h-start__title { font-family: var(--ob-font-display); letter-spacing: -.025em; }
body.qs-app main .h-h2, body.qs-app main .h-page-h1, body.qs-app main .h-h1, body.qs-app main .h-tool-h2, body.qs-app main .h-start__title { font-weight: 300; }
body.qs-app main .h-h3 { font-weight: 400; }
body.qs-app main .h-faq summary h3, body.qs-app main .h-tool h3, body.qs-app main .h-plan__name h3 { font-family: var(--ob-font-ui); }

/* Plans without PDF export cannot print the pages of the account */
@media print { body.qs-no-print { display: none; } }

/* Cookie consent in the kit (was an inline style block of the cookie consent partial) */
:root {
    --cc-font-family: inherit;
    --cc-bg: var(--ob-surface-2, hsla(0, 0%, 100%, 90%));
    --cc-separator-border-color: transparent;
    --cc-modal-border-radius: 14px;
    --cc-btn-border-radius: 8px;
    --cc-primary-color: var(--ob-fg-1, #111);
    --cc-secondary-color: var(--ob-fg-2, #555);
    --cc-btn-primary-color: var(--ob-accent-ink, #fff);
    --cc-btn-primary-bg: var(--ob-accent, #10b981);
    --cc-btn-primary-border-color: var(--ob-accent, #10b981);
    --cc-btn-primary-hover-bg: var(--ob-accent-hover, #34d399);
    --cc-btn-primary-hover-color: var(--ob-accent-ink, #fff);
    --cc-btn-primary-hover-border-color: var(--ob-accent-hover, #34d399);
    --cc-btn-secondary-bg: var(--ob-surface-3, #eee);
    --cc-btn-secondary-color: var(--ob-fg-1, #111);
    --cc-btn-secondary-border-color: var(--ob-line-4, #ddd);
    --cc-btn-secondary-hover-bg: var(--ob-line-4, #ddd);
    --cc-btn-secondary-hover-color: var(--ob-fg-1, #111);
    --cc-btn-secondary-hover-border-color: var(--ob-line-5, #ccc);
    --cc-toggle-on-bg: var(--ob-accent, #10b981);
    --cc-cookie-category-block-bg: var(--ob-surface-3, #f5f5f5);
    --cc-cookie-category-block-hover-bg: var(--ob-line-2, #eee);
    --cc-section-category-border: var(--ob-line-2, #eee);
    --cc-overlay-bg: rgba(var(--ob-scrim), .7);
    --cc-link-color: var(--ob-accent-hover, #059669);
}

/* All Checks (audit report): a row header names a check, so it keeps the check's own case and size */
body .audit-all-checks .table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; font-family: inherit; color: inherit; }
.audit-all-checks summary { cursor: pointer; }