body {
    min-height: 100vh;
}

/* ---------------------------------------------------------- service picker */

.service-check {
    padding: .75rem .875rem .75rem 2.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease, background-color .15s ease;
}

.service-check .form-check-input {
    margin-left: -1.5rem;
    margin-top: .2rem;
}

.service-check:hover {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-tertiary-bg);
}

/* Checked state has to survive the hover rule above, so it comes after it. */
.service-check:has(.form-check-input:checked) {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), .06);
}

.service-check:has(.form-check-input:focus-visible) {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.service-check .form-check-label {
    cursor: pointer;
}

/* ------------------------------------------------------------- key wizard */

.key-steps {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
}

/* ------------------------------------------------------------------- stats */

.stat {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

/* ------------------------------------------------------------------ tables */

.detail-table {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
}

.detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-tertiary-bg);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color);
}

/* Secondary context under a primary value — a URL beneath a service name. */
.source-url {
    font-size: .6875rem;
    line-height: 1.35;
    word-break: break-all;
}

textarea.form-control {
    resize: vertical;
}

@media (max-width: 575.98px) {
    .stat-value {
        font-size: 1.25rem;
    }
}

/* ============================================================ WebAnalyze theme

   The dark palette from the marketing site (assets/css/style.css at the document
   root), applied to Bootstrap through Bootstrap's own custom properties so the
   existing components pick it up without markup changes.

   Bootstrap compiles button, badge and form-control accents to literal hex
   rather than to a variable, so those are re-stated individually below — that is
   why this block is longer than a handful of :root overrides.

   Light mode is left exactly as Bootstrap ships it and the toggle still works.
   Dark is simply the default now, because dark is what the rest of the site is.
   -------------------------------------------------------------------------- */

:root {
    --bs-font-sans-serif: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-border-radius: .875rem;
    --bs-border-radius-sm: .625rem;
    --bs-border-radius-lg: 1.125rem;
}

html {
    scroll-behavior: smooth;
}

[data-bs-theme="dark"] {
    --wa-bg: #08111f;
    --wa-ink: #06111e;
    --wa-card: rgba(255, 255, 255, .075);
    --wa-card-strong: rgba(255, 255, 255, .13);
    --wa-line: rgba(255, 255, 255, .13);
    --wa-brand: #55d6be;
    --wa-brand-2: #7c5cff;
    --wa-shadow: 0 24px 80px rgba(0, 0, 0, .38);

    --bs-body-bg: #08111f;
    --bs-body-bg-rgb: 8, 17, 31;
    --bs-body-color: #eef6ff;
    --bs-body-color-rgb: 238, 246, 255;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: #eef6ff;
    --bs-secondary-color: #aab8cf;
    --bs-secondary-bg: #101d33;
    --bs-secondary-bg-rgb: 16, 29, 51;
    --bs-secondary-text-emphasis: #c3d0e4;
    --bs-secondary-bg-subtle: rgba(255, 255, 255, .05);
    --bs-secondary-border-subtle: rgba(255, 255, 255, .14);
    /* Opaque on purpose: sticky table headers and the output preview sit on top
       of scrolling content and cannot be see-through. */
    --bs-tertiary-bg: #132339;
    /* The .bg-* utilities compose their own rgba(), so the -rgb pairs have to be
       restated alongside the colours or those utilities keep Bootstrap's grey. */
    --bs-tertiary-bg-rgb: 19, 35, 57;
    --bs-tertiary-color: #8899b3;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-border-color: rgba(255, 255, 255, .13);
    --bs-border-color-translucent: rgba(255, 255, 255, .1);

    --bs-primary: #55d6be;
    --bs-primary-rgb: 85, 214, 190;
    --bs-primary-text-emphasis: #b9fff4;
    --bs-primary-bg-subtle: rgba(85, 214, 190, .1);
    --bs-primary-border-subtle: rgba(85, 214, 190, .3);

    --bs-success-text-emphasis: #b9fff4;
    --bs-success-bg-subtle: rgba(85, 214, 190, .1);
    --bs-success-border-subtle: rgba(85, 214, 190, .28);
    --bs-success: #55d6be;
    --bs-success-rgb: 85, 214, 190;

    --bs-warning-text-emphasis: #ffe7a3;
    --bs-warning-bg-subtle: rgba(255, 209, 102, .1);
    --bs-warning-border-subtle: rgba(255, 209, 102, .28);
    --bs-warning: #ffd166;
    --bs-warning-rgb: 255, 209, 102;

    --bs-danger-text-emphasis: #ffc0c0;
    --bs-danger-bg-subtle: rgba(255, 107, 107, .1);
    --bs-danger-border-subtle: rgba(255, 107, 107, .28);
    --bs-danger: #ff6b6b;
    --bs-danger-rgb: 255, 107, 107;

    --bs-info-text-emphasis: #cfd8ff;
    --bs-info-bg-subtle: rgba(124, 92, 255, .12);
    --bs-info-border-subtle: rgba(124, 92, 255, .3);

    --bs-link-color: #55d6be;
    --bs-link-color-rgb: 85, 214, 190;
    --bs-link-hover-color: #8fe8d7;
    --bs-link-hover-color-rgb: 143, 232, 215;
    --bs-code-color: #ffd166;
}

/* ------------------------------------------------------------------- canvas */

[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(85, 214, 190, .18), transparent 32rem),
        radial-gradient(circle at 80% 10%, rgba(124, 92, 255, .22), transparent 34rem),
        linear-gradient(145deg, var(--wa-bg), #07101d 50%, #0a1628);
    background-attachment: fixed;
    color: var(--bs-body-color);
}

/* The masthead sets .bg-body and the page .bg-body-tertiary; both would paint
   over the gradient above. */
[data-bs-theme="dark"] body.bg-body-tertiary,
[data-bs-theme="dark"] .navbar.bg-body,
[data-bs-theme="dark"] footer.bg-body {
    background-color: transparent !important;
}

/* Same grain overlay the marketing pages use, without needing the extra div. */
[data-bs-theme="dark"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.18'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] main,
[data-bs-theme="dark"] footer {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------ masthead */

.wa-masthead {
    padding-top: 18px;
    padding-bottom: 18px;
}

.wa-logo {
    width: 150px;
    height: auto;
    display: block;
}

.wa-tool-name {
    padding-left: .875rem;
    margin-left: .875rem;
    border-left: 1px solid var(--bs-border-color);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

a.wa-tool-name:hover {
    color: var(--bs-body-color);
}

@media (max-width: 575.98px) {
    .wa-logo {
        width: 118px;
    }

    .wa-tool-name {
        padding-left: .625rem;
        margin-left: .625rem;
        font-size: .8125rem;
        white-space: normal;
    }
}

/* --------------------------------------------------------------- components */

[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--wa-card);
    --bs-card-color: var(--bs-body-color);
    --bs-card-border-color: var(--wa-line);
    --bs-card-cap-bg: rgba(255, 255, 255, .04);
    border: 1px solid var(--wa-line) !important;
    box-shadow: var(--wa-shadow);
    backdrop-filter: blur(18px);
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-border-color: var(--wa-line);
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(85, 214, 190, .2);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: rgba(85, 214, 190, .1);
}

/* The chevron ships as a dark SVG; recolour it rather than leaving a smudge. */
[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(1.6);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color-translucent);
    --bs-table-hover-bg: rgba(255, 255, 255, .05);
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: rgba(6, 15, 28, .55);
    border-color: var(--wa-line);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: rgba(6, 15, 28, .75);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(85, 214, 190, .2);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #7f90aa;
}

[data-bs-theme="dark"] .form-control::file-selector-button {
    background-color: rgba(255, 255, 255, .07);
    color: var(--bs-body-color);
    border-color: var(--wa-line);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: rgba(6, 15, 28, .55);
    border-color: rgba(255, 255, 255, .28);
}

[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(85, 214, 190, .2);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Bootstrap's tick and switch knob are white, which disappears on mint —
   restate both in the dark ink used on brand-coloured buttons. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306111e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2306111e'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2306111e'/%3e%3c/svg%3e");
}

/* ------------------------------------------------------------------ buttons */

[data-bs-theme="dark"] .btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .2s ease, filter .2s ease, background-color .15s ease, border-color .15s ease;
}

[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-success {
    --bs-btn-color: var(--wa-ink);
    --bs-btn-bg: var(--wa-brand);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--wa-ink);
    --bs-btn-hover-bg: var(--wa-brand);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--wa-ink);
    --bs-btn-active-bg: #45c9b0;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--wa-ink);
    --bs-btn-disabled-bg: rgba(85, 214, 190, .45);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 85, 214, 190;
    background-image: linear-gradient(135deg, var(--wa-brand), #6be2ff);
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(85, 214, 190, .22);
}

[data-bs-theme="dark"] .btn-primary:hover:not(:disabled),
[data-bs-theme="dark"] .btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

[data-bs-theme="dark"] .btn-primary:disabled,
[data-bs-theme="dark"] .btn-success:disabled {
    background-image: none;
    box-shadow: none;
}

[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #dce8fa;
    --bs-btn-bg: rgba(255, 255, 255, .06);
    --bs-btn-border-color: var(--wa-line);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: rgba(85, 214, 190, .4);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, .16);
    --bs-btn-active-border-color: rgba(85, 214, 190, .5);
    --bs-btn-disabled-color: #7f90aa;
    --bs-btn-disabled-border-color: var(--wa-line);
    --bs-btn-focus-shadow-rgb: 85, 214, 190;
    backdrop-filter: blur(16px);
}

/* ------------------------------------------------------------------- badges */

[data-bs-theme="dark"] .badge {
    font-weight: 600;
}

[data-bs-theme="dark"] .text-bg-light {
    color: #dce9fb !important;
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--wa-line) !important;
}

[data-bs-theme="dark"] .text-bg-warning {
    color: #ffe7a3 !important;
    background-color: rgba(255, 209, 102, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .28);
}

[data-bs-theme="dark"] .text-bg-danger {
    color: #ffc0c0 !important;
    background-color: rgba(255, 107, 107, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, .28);
}

[data-bs-theme="dark"] .text-bg-success {
    color: #b9fff4 !important;
    background-color: rgba(85, 214, 190, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(85, 214, 190, .28);
}

[data-bs-theme="dark"] .text-bg-secondary {
    color: #dce9fb !important;
    background-color: rgba(255, 255, 255, .08) !important;
}

/* --------------------------------------------------------------------- nav */

[data-bs-theme="dark"] .navbar {
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-hover-color: var(--bs-body-color);
    --bs-navbar-active-color: var(--bs-primary-text-emphasis);
    --bs-navbar-brand-color: var(--bs-body-color);
    --bs-navbar-brand-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .navbar-nav .nav-link {
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

[data-bs-theme="dark"] .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .navbar-nav .nav-link.active {
    background-color: rgba(85, 214, 190, .1);
    box-shadow: inset 0 0 0 1px rgba(85, 214, 190, .28);
}

[data-bs-theme="dark"] .nav-pills .nav-link {
    border-color: var(--wa-line);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: rgba(85, 214, 190, .12);
    border-color: var(--bs-primary);
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] footer {
    border-top-color: var(--wa-line) !important;
}

/* The WebAnalyze wordmark is white on transparent, so the masthead keeps the
   site's dark bar in both themes — on Bootstrap's light background half the
   logo would simply disappear. Everything below the bar still follows the
   theme toggle. */

.wa-masthead {
    background-color: #0b1626 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
}

.wa-masthead .wa-tool-name {
    color: #aab8cf;
    border-left-color: rgba(255, 255, 255, .16);
}

.wa-masthead a.wa-tool-name:hover {
    color: #eef6ff;
}

.wa-masthead .navbar-nav .nav-link {
    border-radius: 999px;
    color: #aab8cf;
    transition: background-color .15s ease, color .15s ease;
}

.wa-masthead .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #eef6ff;
}

.wa-masthead .navbar-nav .nav-link.active {
    background-color: rgba(85, 214, 190, .1);
    box-shadow: inset 0 0 0 1px rgba(85, 214, 190, .28);
    color: #b9fff4;
}

.wa-masthead .btn-outline-secondary {
    --bs-btn-color: #dce8fa;
    --bs-btn-bg: rgba(255, 255, 255, .06);
    --bs-btn-border-color: rgba(255, 255, 255, .16);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .12);
    --bs-btn-hover-border-color: rgba(85, 214, 190, .4);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, .16);
    --bs-btn-active-border-color: rgba(85, 214, 190, .5);
    --bs-btn-focus-shadow-rgb: 85, 214, 190;
    border-radius: 999px;
}