/* Shared Bootstrap skin for public pages and application screens. */
.site-page {
    --page-surface: #191e25;
    --page-line: #2b3340;
    --page-muted: #a0a8b6;
    --bs-body-bg: #101317;
    --bs-body-color: #f4f5f7;
    --bs-secondary-bg: #191e25;
    --bs-tertiary-bg: #151a21;
    --bs-border-color: #2b3340;
    --bs-secondary-color: #a0a8b6;
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--bs-body-color);
    min-height: 100vh;
    height: auto;
}
[data-bs-theme="light"] .site-page {
    --page-surface: #ffffff;
    --page-line: #dfe5ef;
    --page-muted: #586477;
    --bs-body-bg: #f8fafc;
    --bs-body-color: #17202e;
    --bs-secondary-bg: #eef2f7;
    --bs-tertiary-bg: #f2f5fa;
    --bs-border-color: #dfe5ef;
    --bs-secondary-color: #586477;
}
.site-page .page-intro { padding-block: 65px 35px; }
.page-eyebrow { color: #478bff; font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; margin-bottom: 16px; }
[data-bs-theme="light"] .page-eyebrow { color: #0961da; }
.page-intro h1 { font-size: clamp(2.1rem, 4.3vw, 3.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; margin-bottom: 20px; }
.page-lead { color: var(--page-muted); max-width: 620px; line-height: 1.8; margin-bottom: 25px; }
.page-intro .d-sm-flex { justify-content: flex-start !important; }
.site-page .btn { border-radius: 9px; padding: .65rem 1.1rem; font-size: .875rem; font-weight: 600; }
.site-page .btn-sm { padding: .45rem .85rem; font-size: .8rem; }
.site-page .btn-outline-secondary { --bs-btn-color: var(--page-muted); --bs-btn-border-color: var(--page-line); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--page-muted); }
.site-page .form-control, .site-page .form-select { border-color: var(--page-line); border-radius: 9px; background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.site-page .form-control:focus, .site-page .form-select:focus { border-color: #478bff; box-shadow: 0 0 0 .2rem #0d6efd20; }
.site-page .form-label, .site-page label { font-size: .85rem; }
.site-page a:focus-visible, .site-page button:focus-visible { outline: 3px solid #478bff; outline-offset: 3px; }
.site-page .alert { border-radius: 12px; }

/* Reading pages */
.faq-page #faq, .support-page #faq, .legal-page #terms { max-width: 900px; margin-bottom: 45px; }
.faq-page .page-intro, .support-page .page-intro, .legal-page .page-intro { max-width: 900px; }
.faq-page #components > h2 { font-size: 1.25rem; padding-top: 15px !important; }
.faq-page .accordion { --bs-accordion-bg: var(--page-surface); --bs-accordion-color: var(--bs-body-color); --bs-accordion-border-color: var(--page-line); --bs-accordion-btn-color: var(--bs-body-color); --bs-accordion-active-bg: var(--bs-tertiary-bg); --bs-accordion-active-color: var(--bs-body-color); }
.faq-page .accordion-item { margin-bottom: 12px; border: 1px solid var(--page-line); border-radius: 12px; overflow: hidden; }
.faq-page .accordion-button { padding: 23px; font-weight: 600; font-size: .95rem; box-shadow: none; }
.faq-page .accordion-body { padding: 0 23px 23px; font-size: .9rem; line-height: 1.9; color: var(--page-muted); }
.support-page #components { background: var(--page-surface); border: 1px solid var(--page-line); border-radius: 18px; padding: 35px; }
.support-page textarea { min-height: 170px; }
.legal-page #components { background: var(--page-surface); border: 1px solid var(--page-line); border-radius: 18px; padding: 30px 40px; }
.legal-page #components > h2 { padding-top: 0 !important; font-size: 1.65rem; letter-spacing: -.035em; }
.legal-page article { line-height: 1.9; font-size: .925rem; color: var(--page-muted); }
.legal-page article h3 { color: var(--bs-body-color); font-size: 1.15rem; margin: 32px 0 12px; }

/* Explore: selectors cover both initial and AJAX-loaded cards. */
.explore-page .explore-filters { max-width: 1000px; margin-block: 5px 40px; }
.explore-filters > .row > div { background: var(--page-surface); border-radius: 16px; padding: 24px; }
.explore-page #explore .card { background: var(--page-surface); padding: 28px 18px !important; transition: border-color .18s, transform .18s; }
.explore-page #explore .card:hover { border-color: #478bff !important; transform: translateY(-3px); }
.explore-page #explore .card > b { font-size: .75rem; font-weight: 500; overflow-wrap: anywhere; }
.explore-page #explore .card > img { width: 100px; height: 100px; object-fit: cover; border-radius: 22px !important; padding: 0; box-shadow: none !important; background: var(--bs-tertiary-bg); }
.explore-page #explore .card-title { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.explore-page #explore .row { margin-top: 0 !important; }

/* Account and profile creation */
.auth-page .form-signin, .creation-page .form-signin { background: var(--page-surface); border: 1px solid var(--page-line); border-radius: 20px; padding: 35px; }
.auth-title { font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.055em; }
.auth-page .form-signin > p, .creation-page .form-signin > p { font-size: .85rem; line-height: 1.8; }
.auth-page .form-signin form > .h5 { font-size: .9rem; color: var(--page-muted); }
.creation-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Preserve each profile's selected Bootstrap card and button colors. */
.profile-page #main-content > .container { max-width: 1100px; }
.profile-page .profile-card { padding: 28px !important; border-radius: 22px !important; box-shadow: 0 18px 60px #00000018 !important; }
.profile-page .profile-card.bg-body { background-color: var(--page-surface) !important; }
.profile-page .profile-photo { width: 124px; height: 124px; object-fit: cover; border-radius: 28px; }
.profile-page .card-header { padding-top: 16px; }
.profile-page .card-header .card-title { margin: 20px 0 14px; letter-spacing: -.035em; }
.profile-page .card-title > span { flex-wrap: wrap; justify-content: center; }
.profile-page .card-text { font-size: .9rem; line-height: 1.8; }
.profile-page .link-click { padding: 14px 18px; }
.profile-page .card-body { padding: 20px 0 0; }
.profile-page #searchForm { padding-top: 12px; }
.profile-page #verifyBox { font-size: .85rem; }

/* Dashboard and verification share the palette, with their existing controls. */
.dashboard-page .dashboard-header { background: var(--page-surface); border-bottom: 1px solid var(--page-line); min-height: 70px; }
.dashboard-page .dashboard-header .navbar-brand { color: var(--bs-body-color) !important; background-color: transparent; box-shadow: none; }
/* Keep range tracks distinct from the dark form panel in both browser engines. */
[data-bs-theme="dark"] .dashboard-page .form-range::-webkit-slider-runnable-track { background-color: #536277; }
[data-bs-theme="dark"] .dashboard-page .form-range::-moz-range-track { background-color: #536277; }
.dashboard-page .dashboard-header .nav-link { color: var(--bs-body-color) !important; }
.dashboard-page .sidebar { border-color: var(--page-line) !important; min-height: calc(100vh - 70px); }
.dashboard-page .sidebar .nav-link { font-size: .85rem; color: var(--page-muted); padding: 14px 22px; }
.dashboard-page .sidebar .nav-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.dashboard-page .modal-content, .dashboard-page .card { background-color: var(--page-surface); border-color: var(--page-line); border-radius: 16px; }
.dashboard-page .tab-content { line-height: 1.65; }
.dashboard-page .nav-tabs .btn { color: var(--page-muted); }
.dashboard-page .nav-tabs .btn.active { color: #478bff; }
.verification-page .card.bg-body { background: var(--page-surface) !important; border: 1px solid var(--page-line) !important; border-radius: 20px !important; }
.verification-page .card .card { background: transparent; }
.verification-page .card h2 { font-size: 1.7rem; letter-spacing: -.04em; }
.verification-page .card p { font-size: .875rem; line-height: 1.8; }
@media (max-width: 767px) {
    .site-page .page-intro { padding-block: 38px 20px; }
    .page-intro h1 { font-size: 2.2rem; }
    .page-lead { font-size: .9rem; }
    .auth-page .form-signin, .creation-page .form-signin, .support-page #components, .legal-page #components { padding: 24px; }
    .explore-page .explore-filters { padding-inline: 24px; }
    .explore-filters > .row > div { padding: 16px; }
    .explore-page #explore .card { padding: 20px 10px !important; }
    .explore-page #explore .card > img { width: 80px; height: 80px; }
    .profile-page .profile-card { padding: 24px 18px !important; }
    .dashboard-page .sidebar { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .explore-page #explore .card { transition: none; }
}