/*
 * ART PROTOCOL — "Gallery Terminal" theme
 * Dark exchange + fine-art design system for the public website.
 *
 * Loaded by templates/layouts/website_base.html right after the vendor
 * template CSS (main.css) and before page stylesheets, so pages can use
 * the --ap-* tokens below. <html data-bs-theme="dark"> turns on
 * Bootstrap's dark mode; the --bs-* overrides map it to this palette.
 */

/* ------------------------------------------------------------------
   1. Tokens
------------------------------------------------------------------ */
:root {
    /* surfaces (back → front) */
    --ap-bg: #070A12;
    --ap-bg-2: #0A0E19;
    --ap-surface: #0D1220;
    --ap-surface-2: #111829;
    --ap-raised: #161F33;

    /* lines */
    --ap-line: #141C2E;
    --ap-border: #1E2840;
    --ap-border-strong: #2A3550;

    /* text */
    --ap-text: #E9EDF5;
    --ap-text-2: #AEB8CC;
    --ap-muted: #8E9AB3;

    /* brand */
    --ap-gold: #D9B26F;
    --ap-gold-hover: #E6C487;
    --ap-gold-ink: #17120A;
    --ap-gold-soft: rgba(217, 178, 111, 0.12);
    --ap-gold-line: #4A3E26;

    /* market */
    --ap-up: #3DD68C;
    --ap-up-soft: rgba(61, 214, 140, 0.12);
    --ap-up-ink: #06140D;
    --ap-down: #FF7A86;
    --ap-down-soft: rgba(255, 122, 134, 0.12);
    --ap-down-ink: #1A0609;

    /* type */
    --ap-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
    --ap-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

    /* shape */
    --ap-radius-sm: 8px;
    --ap-radius: 12px;
    --ap-radius-lg: 16px;
    --ap-header-h: 72px;

    /* vendor template (main.css) variables, remapped */
    --default-font: var(--ap-font);
    --heading-font: var(--ap-font);
    --nav-font: var(--ap-font);
    --background-color: var(--ap-bg);
    --default-color: var(--ap-text);
    --heading-color: #FFFFFF;
    --accent-color: var(--ap-gold);
    --surface-color: var(--ap-surface);
    --contrast-color: var(--ap-gold-ink);
    --color-primary: #FFFFFF;
    --nav-color: var(--ap-text-2);
    --nav-hover-color: #FFFFFF;
    --nav-mobile-background-color: var(--ap-surface);
    --nav-dropdown-background-color: var(--ap-surface);
    --nav-dropdown-color: var(--ap-text-2);
    --nav-dropdown-hover-color: var(--ap-gold);
    --artc-theme-color: var(--ap-gold);

    color-scheme: dark;
}

.light-background,
.dark-background {
    --background-color: var(--ap-bg-2);
    --default-color: var(--ap-text);
    --heading-color: #FFFFFF;
    --surface-color: var(--ap-surface);
    --contrast-color: var(--ap-gold-ink);
}

/* Bootstrap 5.3 dark mode, mapped to the palette */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--ap-bg);
    --bs-body-bg-rgb: 7, 10, 18;
    --bs-body-color: var(--ap-text);
    --bs-body-color-rgb: 233, 237, 245;
    --bs-body-font-family: var(--ap-font);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--ap-text-2);
    --bs-tertiary-color: var(--ap-muted);
    --bs-secondary-bg: var(--ap-surface-2);
    --bs-tertiary-bg: var(--ap-surface);
    --bs-border-color: var(--ap-border);
    --bs-border-color-translucent: rgba(142, 154, 179, 0.18);
    --bs-heading-color: #FFFFFF;
    --bs-link-color: var(--ap-gold);
    --bs-link-color-rgb: 217, 178, 111;
    --bs-link-hover-color: var(--ap-gold-hover);
    --bs-link-hover-color-rgb: 230, 196, 135;
    --bs-primary: var(--ap-gold);
    --bs-primary-rgb: 217, 178, 111;
    --bs-warning: var(--ap-gold);
    --bs-warning-rgb: 217, 178, 111;
    --bs-success: var(--ap-up);
    --bs-success-rgb: 61, 214, 140;
    --bs-danger: var(--ap-down);
    --bs-danger-rgb: 255, 122, 134;
    --bs-dark: var(--ap-bg);
    --bs-dark-rgb: 7, 10, 18;
    --bs-light: var(--ap-surface-2);
    --bs-light-rgb: 17, 24, 41;
    --bs-focus-ring-color: rgba(217, 178, 111, 0.35);
    --bs-border-radius: var(--ap-radius-sm);
    --bs-border-radius-lg: var(--ap-radius);
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------ */
html,
body {
    background-color: var(--ap-bg);
}

body {
    color: var(--ap-text);
    font-family: var(--ap-font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
    font-family: var(--ap-font);
}

h1, .h1 {
    font-family: var(--ap-font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

a { color: var(--ap-gold); }
a:hover { color: var(--ap-gold-hover); }

::selection { background: rgba(217, 178, 111, 0.35); color: #FFFFFF; }

hr { border-color: var(--ap-border); opacity: 1; }

.num,
table,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}

.up, .text-up { color: var(--ap-up) !important; }
.down, .text-down { color: var(--ap-down) !important; }

/* Bootstrap utility classes that assumed a light page */
.text-dark,
.text-black { color: var(--ap-text) !important; }
/* ...except on gold, where dark text is still right */
.bg-warning.text-dark,
.text-bg-warning,
.btn-warning .text-dark,
.btn-warning.text-dark,
.btn-primary .text-dark { color: var(--ap-gold-ink) !important; }
.text-muted,
.text-secondary { color: var(--ap-muted) !important; }
.bg-white,
.bg-light { background-color: var(--ap-surface) !important; }
.bg-dark,
.bg-black { background-color: var(--ap-bg) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--ap-border) !important; }
.shadow,
.shadow-sm,
.shadow-lg { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important; }

/* main.css sections */
.section,
section {
    color: var(--ap-text);
    background-color: var(--background-color);
}

.section-title h2 {
    font-family: var(--ap-font-display);
    font-weight: 400;
    color: #FFFFFF;
}

.section-title h2::before,
.section-title h2::after {
    background: var(--ap-gold);
}

.section-title p { color: var(--ap-text-2); }

.page-title {
    background: var(--ap-bg-2);
    border-bottom: 1px solid var(--ap-line);
}

/* fixed header offset for pages whose first block is not a hero */
.main { min-height: calc(100vh - var(--ap-header-h)); }

/* ------------------------------------------------------------------
   3. Shared components (ap-*)
------------------------------------------------------------------ */
.ap-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.ap-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ap-gold);
}

.ap-display {
    font-family: var(--ap-font-display);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.ap-display em,
.ap-display .ap-accent {
    font-style: italic;
    color: var(--ap-gold);
}

.ap-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ap-text-2);
}

.ap-section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}

.ap-section-head h2 {
    margin: 0;
    font-family: var(--ap-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    color: #FFFFFF;
}

.ap-section-head p {
    margin: 0;
    color: var(--ap-text-2);
    max-width: 640px;
}

.ap-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
}

.ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-text-2);
    border: 1px solid var(--ap-border-strong);
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.ap-chip-gold {
    color: var(--ap-gold);
    border-color: var(--ap-gold-line);
}

.ap-btn,
.ap-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    font-family: var(--ap-font);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ap-btn {
    background: var(--ap-gold);
    color: var(--ap-gold-ink);
    border: 1px solid var(--ap-gold);
}

.ap-btn:hover {
    background: var(--ap-gold-hover);
    border-color: var(--ap-gold-hover);
    color: var(--ap-gold-ink);
}

.ap-btn-outline {
    background: transparent;
    color: var(--ap-text);
    border: 1px solid var(--ap-border-strong);
}

.ap-btn-outline:hover {
    border-color: var(--ap-gold);
    color: var(--ap-gold);
}

/* framed artwork image ("gallery frame") */
.ap-frame {
    border-radius: 10px;
    background: var(--ap-raised);
    border: 1px solid var(--ap-gold);
    outline: 6px solid var(--ap-surface);
    outline-offset: -12px;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   4. Header
------------------------------------------------------------------ */
/* #header (id) + fixed color values so no page stylesheet — including a
   stale cached copy of the old light-header CSS — can turn the bar white. */
.header,
.scrolled .header,
#header.header,
.scrolled #header.header {
    --background-color: rgba(7, 10, 18, 0.92);
    --default-color: #E9EDF5;
    --heading-color: #FFFFFF;
    --nav-color: #AEB8CC;
    --nav-hover-color: #FFFFFF;
    --nav-dropdown-background-color: #0D1220;
    --nav-dropdown-color: #AEB8CC;
    --nav-dropdown-hover-color: #D9B26F;
    --nav-mobile-background-color: #0D1220;
    height: var(--ap-header-h, 72px);
    color: #E9EDF5;
    background-color: rgba(7, 10, 18, 0.92) !important;
    border-bottom: 1px solid #141C2E;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

#header .logo .ap-wordmark { color: #FFFFFF; }
#header .mobile-nav-toggle { color: #E9EDF5; }

.header .logo { gap: 10px; text-decoration: none; }
.header .logo .ap-mark { flex: none; }
.header .logo span.ap-wordmark,
.header .logo .ap-wordmark {
    font-family: var(--ap-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #FFFFFF;
    padding: 0;
}

@media (min-width: 1200px) {
    /* Nav fills the space after the logo. Auto margins on the first item and
       on the My item center the main menu and pin My to the right edge.
       Logged out (no My item), the main menu stays centered. */
    .header .navmenu { flex: 1 1 auto; }
    .header .navmenu > ul { width: 100%; }
    .header .navmenu > ul > li:first-child { margin-left: auto; }
    .header .navmenu > ul > li.ap-nav-account { margin-left: auto; padding-right: 0; }
    .header .navmenu > ul > li:last-child:not(.ap-nav-account) { margin-right: auto; }
    .header .navmenu > ul > li.ap-nav-account > ul { left: auto; right: 0; }

    .navmenu a,
    .navmenu a:focus {
        color: var(--ap-text-2);
        font-family: var(--ap-font);
        font-size: 14px;
        font-weight: 500;
        padding: 18px 14px;
    }

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: #FFFFFF;
    }

    .navmenu > ul > li > a::before {
        background-color: var(--ap-gold);
        bottom: 10px;
        height: 1px;
    }

    .navmenu .dropdown ul {
        background: var(--ap-surface);
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        padding: 8px 0;
        margin-top: 0;
    }

    .navmenu .dropdown ul a {
        color: var(--ap-text-2);
        font-size: 14px;
        padding: 10px 20px;
    }

    .navmenu .dropdown ul li:hover > a {
        color: var(--ap-gold);
        background: var(--ap-surface-2);
    }

    .navmenu .dropdown ul li.dropdown-divider hr {
        border-top: 1px solid var(--ap-border);
        margin: 6px 16px;
    }
}

@media (max-width: 1199px) {
    .mobile-nav-toggle { color: var(--ap-text); }

    .navmenu ul {
        background-color: var(--ap-surface);
        border: 1px solid var(--ap-border);
        border-radius: var(--ap-radius);
        inset: 72px 16px 16px 16px;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--ap-text-2);
        font-family: var(--ap-font);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus { color: var(--ap-gold); }

    .navmenu a i,
    .navmenu a:focus i { background-color: var(--ap-raised); }

    .navmenu .dropdown ul {
        background-color: var(--ap-surface-2);
        border: 1px solid var(--ap-border);
    }

    .mobile-nav-active .navmenu {
        background: rgba(3, 5, 10, 0.8);
    }

    .mobile-nav-active .mobile-nav-toggle { color: #FFFFFF; }

    /* mobile: logo · actions · menu toggle */
    .header .ap-header-actions { margin-left: auto; }
    .header .navmenu { order: 3; }
}

.header .ap-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header .ap-signin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ap-text-2);
}

.header .ap-signin:hover { color: #FFFFFF; }

/* wallet button rendered by static/js/web3/connect_wallet.js */
#connect-wallet-btn,
.header .btn-warning {
    background: var(--ap-gold);
    border: 1px solid var(--ap-gold);
    color: var(--ap-gold-ink);
    font-weight: 600;
    font-size: 14px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--ap-radius-sm);
    width: auto !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#connect-wallet-btn:hover,
.header .btn-warning:hover {
    background: var(--ap-gold-hover);
    border-color: var(--ap-gold-hover);
    color: var(--ap-gold-ink);
}

@media (max-width: 575px) {
    .header .ap-signin span { display: none; }
    #connect-wallet-btn { padding: 0 12px; font-size: 13px; }
}

/* ------------------------------------------------------------------
   5. Footer
------------------------------------------------------------------ */
.footer {
    --background-color: #05070D;
    background: #05070D;
    color: var(--ap-text-2);
    border-top: 1px solid var(--ap-line);
    font-size: 14px;
    padding: 0;
}

.footer::before { display: none; }

.footer .ap-footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    padding: 56px 0 40px;
}

.footer .ap-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 340px;
}

.footer .ap-footer-brand p { margin: 0; color: var(--ap-muted); line-height: 1.6; }

.footer .ap-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
}

.footer .ap-footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer .ap-footer-col h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ap-muted);
    text-transform: uppercase;
    margin: 0 0 4px;
}

.footer .ap-footer-col a { color: var(--ap-text); }
.footer .ap-footer-col a:hover { color: var(--ap-gold); }

.footer .ap-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--ap-line);
    color: var(--ap-muted);
    font-size: 13px;
}

.footer .ap-footer-bottom a { color: var(--ap-text-2); }
.footer .ap-footer-bottom a:hover { color: var(--ap-gold); }

/* ------------------------------------------------------------------
   6. Bootstrap components
------------------------------------------------------------------ */
.btn { font-family: var(--ap-font); font-weight: 600; border-radius: var(--ap-radius-sm); }

.btn-warning,
.btn-primary {
    --bs-btn-color: var(--ap-gold-ink);
    --bs-btn-bg: var(--ap-gold);
    --bs-btn-border-color: var(--ap-gold);
    --bs-btn-hover-color: var(--ap-gold-ink);
    --bs-btn-hover-bg: var(--ap-gold-hover);
    --bs-btn-hover-border-color: var(--ap-gold-hover);
    --bs-btn-active-color: var(--ap-gold-ink);
    --bs-btn-active-bg: var(--ap-gold-hover);
    --bs-btn-active-border-color: var(--ap-gold-hover);
    --bs-btn-disabled-color: var(--ap-gold-ink);
    --bs-btn-disabled-bg: var(--ap-gold);
    --bs-btn-disabled-border-color: var(--ap-gold);
}

.btn-dark,
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--ap-text);
    --bs-btn-bg: var(--ap-raised);
    --bs-btn-border-color: var(--ap-border-strong);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1D2740;
    --bs-btn-hover-border-color: var(--ap-gold);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #1D2740;
    --bs-btn-active-border-color: var(--ap-gold);
}

.btn-success {
    --bs-btn-color: var(--ap-up-ink);
    --bs-btn-bg: var(--ap-up);
    --bs-btn-border-color: var(--ap-up);
    --bs-btn-hover-color: var(--ap-up-ink);
    --bs-btn-hover-bg: #5BE2A1;
    --bs-btn-hover-border-color: #5BE2A1;
}

.btn-danger {
    --bs-btn-color: var(--ap-down-ink);
    --bs-btn-bg: var(--ap-down);
    --bs-btn-border-color: var(--ap-down);
    --bs-btn-hover-color: var(--ap-down-ink);
    --bs-btn-hover-bg: #FF96A0;
    --bs-btn-hover-border-color: #FF96A0;
}

.btn-outline-warning,
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-light {
    --bs-btn-color: var(--ap-text);
    --bs-btn-border-color: var(--ap-border-strong);
    --bs-btn-hover-color: var(--ap-gold);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--ap-gold);
    --bs-btn-active-color: var(--ap-gold);
    --bs-btn-active-bg: var(--ap-gold-soft);
    --bs-btn-active-border-color: var(--ap-gold);
}

.card {
    --bs-card-bg: var(--ap-surface);
    --bs-card-border-color: var(--ap-border);
    --bs-card-cap-bg: var(--ap-surface-2);
    --bs-card-color: var(--ap-text);
    --bs-card-title-color: #FFFFFF;
    --bs-card-border-radius: var(--ap-radius-lg);
    --bs-card-inner-border-radius: calc(var(--ap-radius-lg) - 1px);
}

.card-text { color: var(--ap-text-2); }

.table {
    --bs-table-color: var(--ap-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ap-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--ap-text);
    --bs-table-hover-bg: var(--ap-surface-2);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-active-bg: var(--ap-raised);
}

.table > thead > tr > th,
.table thead th {
    color: var(--ap-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ap-surface-2);
    border-bottom-color: var(--ap-border);
}

.table-light,
.table-dark,
.table-secondary {
    --bs-table-color: var(--ap-muted);
    --bs-table-bg: var(--ap-surface-2);
    --bs-table-border-color: var(--ap-border);
}

.form-control,
.form-select,
.base-input {
    background-color: var(--ap-bg);
    border: 1px solid var(--ap-border-strong);
    color: var(--ap-text);
    border-radius: var(--ap-radius-sm);
    min-height: 44px;
}

.form-control:focus,
.form-select:focus,
.base-input:focus {
    background-color: var(--ap-bg);
    border-color: var(--ap-gold);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(217, 178, 111, 0.2);
    outline: none;
}

.form-control::placeholder,
.base-input::placeholder { color: #6E7A93; }

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--ap-surface-2);
    color: var(--ap-text-2);
}

.form-label,
label { color: var(--ap-text-2); }

.form-check-input {
    background-color: var(--ap-bg);
    border-color: var(--ap-border-strong);
}

.form-check-input:checked {
    background-color: var(--ap-gold);
    border-color: var(--ap-gold);
}

.input-group-text {
    background: var(--ap-surface-2);
    border-color: var(--ap-border-strong);
    color: var(--ap-text-2);
}

.modal-content {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    color: var(--ap-text);
}

.modal-header,
.modal-footer { border-color: var(--ap-border); }

.modal-backdrop.show { opacity: 0.7; }

.nav-tabs { --bs-nav-tabs-border-color: var(--ap-border); }
.nav-tabs .nav-link { color: var(--ap-text-2); }
.nav-tabs .nav-link.active {
    color: #FFFFFF;
    background: var(--ap-surface);
    border-color: var(--ap-border) var(--ap-border) var(--ap-surface);
}

.nav-pills .nav-link { color: var(--ap-text-2); border-radius: 999px; }
.nav-pills .nav-link.active {
    background: var(--ap-raised);
    color: #FFFFFF;
    border: 1px solid var(--ap-border-strong);
}

.pagination {
    --bs-pagination-bg: var(--ap-surface);
    --bs-pagination-color: var(--ap-text-2);
    --bs-pagination-border-color: var(--ap-border);
    --bs-pagination-hover-bg: var(--ap-surface-2);
    --bs-pagination-hover-color: #FFFFFF;
    --bs-pagination-hover-border-color: var(--ap-border-strong);
    --bs-pagination-active-bg: var(--ap-gold);
    --bs-pagination-active-color: var(--ap-gold-ink);
    --bs-pagination-active-border-color: var(--ap-gold);
    --bs-pagination-disabled-bg: var(--ap-bg-2);
    --bs-pagination-disabled-color: #5B6680;
    --bs-pagination-disabled-border-color: var(--ap-border);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(217, 178, 111, 0.25);
}

.badge.bg-warning,
.badge.text-bg-warning { background: var(--ap-gold) !important; color: var(--ap-gold-ink) !important; }

.alert {
    --bs-alert-bg: var(--ap-surface-2);
    --bs-alert-border-color: var(--ap-border);
    --bs-alert-color: var(--ap-text);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ap-surface);
    --bs-dropdown-border-color: var(--ap-border);
    --bs-dropdown-link-color: var(--ap-text-2);
    --bs-dropdown-link-hover-bg: var(--ap-surface-2);
    --bs-dropdown-link-hover-color: var(--ap-gold);
}

/* ------------------------------------------------------------------
   7. Preloader & scroll-top
------------------------------------------------------------------ */
#preloader { background: var(--ap-bg); }

#preloader::before {
    border-color: var(--ap-gold) transparent var(--ap-gold) transparent;
    border-width: 2px;
    width: 44px;
    height: 44px;
    top: calc(50% - 22px);
    left: calc(50% - 22px);
}

.scroll-top {
    background-color: var(--ap-raised);
    border: 1px solid var(--ap-border-strong);
    border-radius: 10px;
    width: 44px;
    height: 44px;
}

.scroll-top i { color: var(--ap-gold); }
.scroll-top:hover { background-color: #1D2740; }

/* ------------------------------------------------------------------
   8. Page hero (shared by inner pages)
------------------------------------------------------------------ */
.ap-page-hero {
    padding: calc(var(--ap-header-h) + 64px) 0 48px;
    background: var(--ap-bg);
    border-bottom: 1px solid var(--ap-line);
}

.ap-page-hero h1 {
    margin: 12px 0 12px;
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    line-height: 1.05;
    color: #FFFFFF;
}

.ap-page-hero p {
    margin: 0;
    max-width: 640px;
    color: var(--ap-text-2);
    font-size: 1.05rem;
    line-height: 1.6;
}