/*
 * Brand Calibration Tokens
 * Source of truth: BRAND_GUIDELINES.md
 * Keep micro-brand tweaks token-first (avoid hardcoded pixel overrides in component rules).
 */
:root {
    /* Core surface and semantic color tokens */
    --app-bg-a: #f3f6fb;
    --app-bg-b: #e9eff7;
    --app-surface: #ffffff;
    --app-border: #d4dee9;
    --app-text: #162234;
    --app-muted: #5b6a80;
    --app-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    --app-radius: 16px;
    --app-focus: #2d79d8;
    --app-link: #1d5fbf;
    --app-link-visited: #1d5fbf;
    --app-link-hover: #154a95;
    --app-menu-border: rgba(84, 108, 138, 0.28);
    --app-menu-bg-a: rgba(255, 255, 255, 0.93);
    --app-menu-bg-b: rgba(243, 248, 255, 0.9);
    --app-menu-link: #2a3d56;
    --app-menu-link-hover: #182a40;
    --app-menu-link-hover-bg: rgba(67, 102, 151, 0.12);
    --app-menu-current-text: #ffffff;
    --app-menu-current-border: #225ea7;
    --app-menu-current-bg-a: #2f7ad2;
    --app-menu-current-bg-b: #2468b8;
    --app-menu-scroll-fade-solid: var(--app-bg-a);
    --app-dropdown-bg: #ffffff;
    --app-dropdown-hover-bg: #eef3fa;
    --app-dropdown-hover-text: #16283d;
    --app-message-border: #c6493f;
    --app-message-bg: #fff2f0;
    --app-message-text: #7d2f29;
    --app-title-text: #0f1d30;
    --app-table-divider: #e3eaf2;
    --app-table-header-a: #3a78b8;
    --app-table-header-b: #2a5d94;
    --app-table-header-text: #ffffff;
    --app-row-even: #f7faff;
    --app-row-odd: #ffffff;
    --app-list-zebra-even: color-mix(in srgb, var(--app-row-even) 88%, var(--app-surface) 12%);
    --app-list-zebra-odd: color-mix(in srgb, var(--app-row-odd) 94%, var(--app-surface) 6%);
    --app-list-row-divider: color-mix(in srgb, var(--app-table-divider) 68%, var(--app-border) 32%);
    --app-colheader-text: #3b4f69;
    --app-colheader-link: #255f9a;
    --app-input-border: #c2cfde;
    --app-input-bg: #ffffff;
    --app-button-border: #2b66ad;
    --app-button-a: #3a84de;
    --app-button-b: #2b6fc2;
    --app-button-text: #ffffff;
    --app-tab-border: #cad8e7;
    --app-tab-bg: #f7faff;
    --app-tab-text: #2a3d57;
    --app-tab-active-border: #2a64ad;
    --app-tab-active-a: #3a82d8;
    --app-tab-active-b: #2d6bbd;
    --app-tab-active-text: #ffffff;
    --app-hero-border: #d4e0ef;
    --app-hero-bg-a: #ffffff;
    --app-hero-bg-b: #f5f9ff;
    --app-metric-border: #d0deef;
    --app-metric-bg: #f3f8ff;
    --app-metric-text: #1f446f;
    --app-tip-border: #d5deea;
    --app-tip-bg: #f8fbff;
    --app-mobile-card-border: #d5e1ef;
    --app-mobile-card-bg: #ffffff;
    --app-mobile-card-divider: #e5edf7;
    --app-mobile-card-label: #5f7088;
    --app-glow-a: #ffffff;
    --app-glow-b: #f3f8ff;
    --app-elevated-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);

    /* Dealsman Hot Deals iframe theme-sync contract */
    --dm-hotdeals-title-font: var(--app-font-heading);
    --dm-hotdeals-title-size: 16;
    --dm-hotdeals-title-color: var(--app-colheader-link);
    --dm-hotdeals-row-odd-bg: var(--app-row-odd);
    --dm-hotdeals-row-even-bg: var(--app-row-even);
    --dm-hotdeals-deal-count: var(--sr-dealsman-deal-count, 50);
    --dm-hotdeals-header-bg: color-mix(in srgb, var(--app-row-even) 82%, var(--app-surface) 18%);
    --dm-hotdeals-header-text-color: var(--app-colheader-text);
    --dm-hotdeals-header-control-bg: var(--app-surface);
    --dm-hotdeals-header-control-text: var(--app-text);
    --dm-hotdeals-frame-border: color-mix(in srgb, var(--app-border) 74%, var(--app-surface) 26%);
    --dm-hotdeals-header-control-border: var(--dm-hotdeals-frame-border);
    --dm-hotdeals-border-color: var(--dm-hotdeals-frame-border);

    /* Typography ramp */
    --app-font-body: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", sans-serif;
    --app-font-heading: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Noto Sans", sans-serif;
    --type-h1: clamp(2.02rem, 2.9vw, 2.58rem);
    --type-h2: clamp(1.56rem, 2.1vw, 2rem);
    --type-h3: clamp(1.2rem, 1.45vw, 1.46rem);
    --type-page-title: clamp(1.9rem, 2.45vw, 2.42rem);
    --type-nav: 13.35px;
    --type-body: 15px;

    /* Logo lockup: keep emblem/wordmark ratio in the 1.20-1.30 range */
    --brand-mark-size: 33px;
    --brand-wordmark-height: 25px;
    --brand-gap: 8px;

    /* Icon system: shared custom glyphs with unified stroke weight */
    --icon-size-desktop: 16px;
    --icon-size-mobile-chip: 14px;
    --icon-size-mobile-nav: 17px;
    --icon-opacity: 0.98;
    --icon-home: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 10.5L12 3.75l8.5 6.75'/><path d='M5.75 9.75V20.25h4.75v-5.25h3v5.25h4.75V9.75'/></svg>");
    --icon-add: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
    --icon-add-gift: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.2'/><path d='M12 7.7v8.6'/><path d='M7.7 12h8.6'/></svg>");
    --icon-shop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M6.25 8.25h11.5l-1 11h-9.5l-1-11z'/><path d='M9.25 8.25V6.75A2.75 2.75 0 0 1 12 4a2.75 2.75 0 0 1 2.75 2.75v1.5'/></svg>");
    --icon-shopping: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M4.25 6.5h2.1l1.7 9.4h9.25l1.45-7.15H7.15'/><circle cx='10.15' cy='18.75' r='1.4'/><circle cx='16.45' cy='18.75' r='1.4'/><path d='M14.1 8.45l1.25 1.25 2.15-2.2'/></svg>");
    --icon-reserved: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4h10a1 1 0 0 1 1 1v15.25l-6-3-6 3V5a1 1 0 0 1 1-1z'/></svg>");
    --icon-bought: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.75'/><path d='M8.5 12.4l2.4 2.4 4.8-4.9'/></svg>");
    --icon-stuff: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 8.25L12 4l7.5 4.25v8.5L12 21l-7.5-4.25v-8.5z'/><path d='M4.75 8.4L12 12.5l7.25-4.1'/><path d='M12 12.5V21'/><path d='M8.25 6.15l7.5 4.25'/></svg>");
    --icon-profile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.2' r='3.35'/><path d='M4.75 20c1.5-2.7 4.05-4.25 7.25-4.25S17.75 17.3 19.25 20'/></svg>");
    --icon-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.4' r='2.8'/><circle cx='15.6' cy='8.9' r='2.35'/><path d='M3.8 19.75c1.25-2.35 3.45-3.7 6.2-3.7s4.95 1.35 6.2 3.7'/><path d='M14.2 16.9c2.35.15 4.15 1.15 5.15 2.85'/></svg>");
    --icon-registries: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l8 4.5-8 4.5-8-4.5L12 4z'/><path d='M4 12.5L12 17l8-4.5'/><path d='M4 16.5L12 21l8-4.5'/></svg>");
    --icon-events: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='5.5' width='15' height='14.5' rx='1.8'/><path d='M8 3.75v3.5'/><path d='M16 3.75v3.5'/><path d='M4.5 9.5h15'/></svg>");
    --icon-logout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M14.25 4.25h4.75v15.5h-4.75'/><path d='M11.5 12h-7'/><path d='M7.5 9l-3 3 3 3'/></svg>");
    --icon-settings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.25 4.6h5.5l1.35 2.35 2.4 1.35v5.4l-2.4 1.35-1.35 2.35h-5.5l-1.35-2.35-2.4-1.35V8.3l2.4-1.35 1.35-2.35z'/><circle cx='12' cy='12' r='2.7'/></svg>");
    --icon-security: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><rect x='5.5' y='10.5' width='13' height='9.5' rx='2'/><path d='M8 10.5V7.75A4 4 0 0 1 12 3.75a4 4 0 0 1 4 4v2.75'/></svg>");
    --icon-appearance: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4.25a7.75 7.75 0 1 0 0 15.5h1.25a2.75 2.75 0 0 0 0-5.5H12a1.8 1.8 0 1 1 0-3.6h2.25A5.75 5.75 0 0 0 12 4.25z'/><circle cx='8.25' cy='10' r='1'/><circle cx='10.5' cy='7.5' r='1'/><circle cx='7.25' cy='13.2' r='1'/></svg>");
    --icon-licensing: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><rect x='3.75' y='6.5' width='16.5' height='11' rx='2.3'/><circle cx='12' cy='12' r='2.3'/><path d='M7.25 10.8v2.4'/><path d='M16.75 10.8v2.4'/></svg>");
    --icon-ai: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><rect x='7.25' y='7.25' width='9.5' height='9.5' rx='2'/><path d='M12 9.75v4.5'/><path d='M9.75 12h4.5'/><path d='M12 3.75v2'/><path d='M12 18.25v2'/><path d='M3.75 12h2'/><path d='M18.25 12h2'/></svg>");
    --icon-legal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16'/><path d='M7 6h10'/><path d='M8.5 6L5.5 12h6L8.5 6z'/><path d='M15.5 6l-3 6h6l-3-6z'/><path d='M8 20h8'/></svg>");
    --icon-priority: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M10 7h9'/><path d='M10 12h9'/><path d='M10 17h9'/><path d='M4.6 7l1.1 1.2 2.1-2.1'/><path d='M4.6 12l1.1 1.2 2.1-2.1'/><path d='M4.6 17l1.1 1.2 2.1-2.1'/></svg>");
    --icon-passkeys: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><circle cx='8.25' cy='11.5' r='3.15'/><path d='M11.4 11.5h8.1'/><path d='M16.2 11.5v2.1'/><path d='M18.6 11.5v2.1'/><path d='M8.25 8.35v-1.6'/></svg>");
    --icon-domain-intelligence: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='10' cy='10' r='5.5'/><path d='M10 4.5v11'/><path d='M4.5 10h11'/><path d='M6.1 6.1c1.4 1.2 2.7 1.8 3.9 1.8s2.5-.6 3.9-1.8'/><path d='M6.1 13.9c1.4-1.2 2.7-1.8 3.9-1.8s2.5.6 3.9 1.8'/><path d='M14.9 14.9l4.6 4.6'/></svg>");
    --icon-llm-routing: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='6.5' r='2.1'/><circle cx='18.5' cy='6.5' r='2.1'/><circle cx='5.5' cy='17.5' r='2.1'/><circle cx='18.5' cy='17.5' r='2.1'/><path d='M7.6 6.5h8.8'/><path d='M7.6 17.5h8.8'/><path d='M5.5 8.6v6.8'/><path d='M18.5 8.6v6.8'/><path d='M7.1 8.1l9.8 7.8'/></svg>");
}

/* Breakpoint calibration tokens (desktop -> tablet -> mobile). */
@media (max-width: 1200px) {
    :root {
        --type-h1: clamp(1.92rem, 3vw, 2.32rem);
        --type-h2: clamp(1.48rem, 2.15vw, 1.84rem);
        --type-h3: clamp(1.16rem, 1.5vw, 1.34rem);
        --type-page-title: clamp(1.82rem, 2.6vw, 2.2rem);
        --type-nav: 12.95px;
        --brand-mark-size: 31px;
        --brand-wordmark-height: 23px;
        --brand-gap: 7px;
        --icon-size-desktop: 15.5px;
    }
}

@media (max-width: 980px) {
    :root {
        --type-h1: clamp(1.78rem, 4.1vw, 2.06rem);
        --type-h2: clamp(1.38rem, 3.1vw, 1.64rem);
        --type-h3: clamp(1.12rem, 2.3vw, 1.28rem);
        --type-page-title: clamp(1.68rem, 3.5vw, 1.98rem);
        --type-nav: 12.55px;
        --brand-mark-size: 28px;
        --brand-wordmark-height: 21px;
        --brand-gap: 6.5px;
        --icon-size-desktop: 15px;
        --icon-size-mobile-chip: 13.6px;
        --icon-size-mobile-nav: 16.6px;
    }
}

@media (max-width: 760px) {
    :root {
        --type-h1: clamp(1.68rem, 5.4vw, 1.92rem);
        --type-h2: clamp(1.28rem, 4.2vw, 1.5rem);
        --type-h3: clamp(1.06rem, 3.2vw, 1.2rem);
        --type-page-title: clamp(1.56rem, 4.6vw, 1.8rem);
        --type-nav: 12.15px;
        --brand-mark-size: 26px;
        --brand-wordmark-height: 20px;
        --brand-gap: 6px;
        --icon-size-desktop: 14.5px;
        --icon-size-mobile-chip: 13.4px;
        --icon-size-mobile-nav: 16.2px;
    }
}

@media (max-width: 760px) {
    :root {
        --type-h1: 1.54rem;
        --type-h2: 1.3rem;
        --type-h3: 1.12rem;
        --type-page-title: 1.62rem;
        --type-nav: 11.85px;
        --type-body: 14px;
        --brand-mark-size: 24px;
        --brand-wordmark-height: 19px;
        --brand-gap: 5.5px;
        --icon-size-desktop: 14.2px;
        --icon-size-mobile-chip: 13.2px;
        --icon-size-mobile-nav: 16px;
    }
}

* {
    box-sizing: border-box;
}

/* Keep fixed desktop navigation from widening the layout viewport on short
   landscape phones while retaining its intentional horizontal nav scroll. */
body.home-dashboard-page {
    max-width: 100%;
    overflow-x: clip;
}

html:has(body.home-dashboard-page) {
    max-width: 100%;
    overflow-x: clip;
}

@media (orientation: landscape) and (max-height: 520px) {
    .home-dashboard-page .topmenu,
    .home-dashboard-page .topmenu > ul {
        min-width: 0;
        max-width: 100vw;
    }

    .home-dashboard-page .topmenu > ul {
        overflow-x: auto !important;
        contain: inline-size;
    }
}

@media (max-width: 760px) {
    .profile-page code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0 20px 34px;
    color: var(--app-text);
    font: var(--type-body)/1.55 var(--app-font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at 10% -18%, var(--app-glow-a) 0%, rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 95% -8%, var(--app-glow-b) 0%, rgba(248, 251, 255, 0) 42%),
        linear-gradient(145deg, var(--app-bg-a) 0%, var(--app-bg-b) 100%);
}

body.home-dashboard-page,
body.home-dashboard-page *:not(code):not(pre):not(kbd):not(samp) {
    font-family: var(--app-font-body) !important;
}

.topmenu,
.topmenu a,
.topmenu button,
.topmenu input,
.topmenu select,
.topmenu textarea,
.mobile-portrait-chrome,
.mobile-portrait-chrome a,
.mobile-portrait-chrome button {
    font-family: var(--app-font-body);
}

.sr-site-footer,
.sr-site-footer a,
.sr-site-footer-btn,
.sr-site-footer-copy {
    font-family: var(--app-font-body);
}

.settings-shell .settings-nav,
.settings-shell .settings-nav button,
.settings-shell .settings-nav a,
.settings-shell .settings-nav .settings-nav-btn,
.settings-shell .settings-nav .settings-nav-btn-label,
.settings-shell .settings-nav .settings-nav-section-label,
.settings-shell .settings-nav .settings-nav-flyout-item {
    font-family: var(--app-font-body);
}

a {
    color: var(--app-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--app-link-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* Shared hero treatment aligned to /shoplist hero styling. */
:is(
    .events-hero,
    .settings-topbar,
    .shop-page-hero,
    .dashboard-hero,
    .shopfor-overview-hero,
    .sg-hero,
    .llm-access-hero,
    .domain-intel-hero,
    .categories-hero,
    .users-hero,
    .item-add-hero,
    .registries-hero,
    .invite-hero,
    .forgot-hero,
    .passkey-dialog-hero,
    .rank-icon-preview-hero,
    .shopping-history-hero,
    .reserved-list-hero
) {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--app-hero-border) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(90deg, var(--app-button-a) 0%, var(--app-button-b) 100%) top/100% 4px no-repeat,
        linear-gradient(138deg, var(--app-hero-bg-a) 0%, var(--app-hero-bg-b) 100%) !important;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

.theme-dark :is(
    .events-hero,
    .settings-topbar,
    .shop-page-hero,
    .dashboard-hero,
    .shopfor-overview-hero,
    .sg-hero,
    .llm-access-hero,
    .domain-intel-hero,
    .categories-hero,
    .users-hero,
    .item-add-hero,
    .registries-hero,
    .invite-hero,
    .forgot-hero,
    .passkey-dialog-hero,
    .rank-icon-preview-hero,
    .shopping-history-hero,
    .reserved-list-hero
) {
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

:is(
    .events-hero,
    .settings-topbar,
    .shop-page-hero,
    .dashboard-hero,
    .shopfor-overview-hero,
    .sg-hero,
    .llm-access-hero,
    .domain-intel-hero,
    .categories-hero,
    .users-hero,
    .item-add-hero,
    .registries-hero,
    .invite-hero,
    .forgot-hero,
    .passkey-dialog-hero,
    .rank-icon-preview-hero,
    .shopping-history-hero,
    .reserved-list-hero
) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--app-title-text) !important;
}

:is(
    .events-hero,
    .settings-topbar,
    .shop-page-hero,
    .dashboard-hero,
    .shopfor-overview-hero,
    .sg-hero,
    .llm-access-hero,
    .domain-intel-hero,
    .categories-hero,
    .users-hero,
    .item-add-hero,
    .registries-hero,
    .invite-hero,
    .forgot-hero,
    .passkey-dialog-hero,
    .rank-icon-preview-hero,
    .shopping-history-hero,
    .reserved-list-hero
) p {
    color: var(--app-muted) !important;
}

:is(
    .shop-page-kicker,
    .shopfor-overview-eyebrow,
    .settings-kicker,
    .llm-access-kicker,
    .domain-intel-kicker,
    .categories-eyebrow,
    .users-hero-kicker,
    .item-add-hero-kicker,
    .reserved-list-kicker,
    .shopping-history-kicker,
    .legal-heading-kicker,
    .invite-eyebrow,
    .passkey-dialog-kicker
) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--app-hero-border) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-row-even) 100%) !important;
    color: var(--app-colheader-text) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

:is(
    .events-hero,
    .settings-topbar,
    .shop-page-hero,
    .dashboard-hero,
    .shopfor-overview-hero,
    .sg-hero,
    .llm-access-hero,
    .domain-intel-hero,
    .categories-hero,
    .users-hero,
    .item-add-hero,
    .registries-hero,
    .invite-hero,
    .forgot-hero,
    .passkey-dialog-hero,
    .rank-icon-preview-hero,
    .shopping-history-hero,
    .reserved-list-hero
) :is(button, a.smallbut, a.btn, .smallbut, .btn, .shop-layout-btn, .settings-nav-drawer-open, .domain-intel-hero-action, .llm-access-jump, .sg-btn):not(.sr-neutral-btn) {
    border: 1px solid var(--app-button-border) !important;
    background: linear-gradient(180deg, var(--app-button-a) 0%, var(--app-button-b) 100%) !important;
    color: var(--app-button-text) !important;
}


/* Privacy footer and consent surfaces */
:root {
    --sr-mobile-bottom-nav-height: 0px;
    --sr-site-footer-height: 108px;
    --sr-footer-viewport-adjust: 0px;
}

body.sr-consent-modal-open {
    overflow: hidden;
}

body.sr-has-site-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.sr-site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--sr-footer-viewport-adjust, 0px);
    z-index: 120;
    border-top: 1px solid var(--app-border);
    background:
        linear-gradient(180deg, var(--app-menu-bg-a) 0%, var(--app-menu-bg-b) 100%),
        radial-gradient(900px 240px at 50% 0%, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0));
    box-shadow: 0 -14px 28px rgba(7, 18, 40, 0.2);
    backdrop-filter: blur(8px);
    isolation: isolate;
}

.sr-site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0));
    pointer-events: none;
}

.sr-site-footer.sr-site-footer-noscript {
    position: static;
    margin: 14px auto 6px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    box-shadow: var(--app-shadow);
    backdrop-filter: none;
}

.sr-site-footer-inner {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sr-site-footer-links {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
}

.sr-site-footer a,
.sr-site-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-row-even) 100%);
    color: var(--app-link);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(7, 18, 40, 0.14);
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.sr-site-footer a:hover,
.sr-site-footer-btn:hover {
    color: var(--app-link-hover);
    text-decoration: none;
    border-color: var(--app-focus);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(7, 18, 40, 0.2);
    transform: translateY(-1px);
}

.sr-site-footer a:focus-visible,
.sr-site-footer-btn:focus-visible {
    outline: 2px solid var(--app-focus);
    outline-offset: 1px;
}

.sr-site-footer a:active,
.sr-site-footer-btn:active {
    transform: translateY(0);
}

.sr-site-footer-btn {
    font-family: inherit;
}

.sr-site-footer-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 20px;
    margin-left: auto;
    padding: 0 0 0 11px;
    border-left: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
    opacity: 0.95;
}

body.sr-help-open {
    overflow: hidden;
}

.sr-help-modal-overlay {
    --sr-dialog-backdrop: rgba(10, 20, 37, 0.64);
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(10, 20, 37, 0.64);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sr-help-modal-overlay:not([hidden]) {
    animation: sr-help-overlay-fade 0.18s ease-out;
}

.sr-help-modal-overlay[hidden] {
    display: none !important;
}

.sr-help-modal {
    position: relative;
    width: min(760px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    border: 1px solid var(--app-border);
    border-radius: 24px;
    padding: 20px 20px 18px;
    background: var(--app-surface);
    box-shadow: 0 28px 68px rgba(7, 18, 40, 0.28);
    font-family: var(--app-font-body);
    color: var(--app-text);
    animation: sr-help-modal-enter 0.22s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.sr-help-modal::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, var(--app-link) 0%, color-mix(in srgb, var(--app-link) 54%, #8db8ff 46%) 100%);
    opacity: 0.95;
}

.sr-help-modal h2 {
    margin: 0 42px 8px 0;
    color: var(--app-title-text);
    font-family: var(--app-font-heading);
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.sr-help-copy {
    margin: 0 0 14px;
    color: var(--app-muted);
    font-family: var(--app-font-body);
    font-size: 14px;
    line-height: 1.55;
    max-width: 56ch;
}

.sr-help-form {
    display: grid;
    gap: 12px;
}

.sr-help-form textarea {
    min-height: 118px;
    resize: vertical;
    width: 100%;
    border: 1px solid var(--app-input-border);
    border-radius: 16px;
    padding: 15px 16px;
    background: var(--app-row-even);
    box-shadow: inset 0 1px 2px rgba(7, 18, 40, 0.04);
    color: var(--app-text);
    font-family: var(--app-font-body);
    font-size: 15px;
    line-height: 1.55;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.sr-help-form textarea::placeholder {
    color: color-mix(in srgb, var(--app-muted) 84%, var(--app-text) 16%);
}

.sr-help-form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-link) 72%, white 28%);
    background: color-mix(in srgb, var(--app-row-even) 82%, #eef5ff 18%);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--app-link) 14%, transparent 86%),
        inset 0 1px 2px rgba(7, 18, 40, 0.04);
}

.sr-help-form textarea.is-busy,
.sr-help-form textarea:disabled {
    background: color-mix(in srgb, var(--app-row-even) 76%, #ecf3ff 24%);
    color: color-mix(in srgb, var(--app-text) 84%, var(--app-muted) 16%);
    -webkit-text-fill-color: color-mix(in srgb, var(--app-text) 84%, var(--app-muted) 16%);
    opacity: 1;
    cursor: wait;
}

.sr-help-input-hint {
    margin: -2px 0 0;
    color: var(--app-muted);
    font-family: var(--app-font-body);
    font-size: 12px;
    line-height: 1.45;
}

.sr-help-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sr-help-actions .smallbut {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--app-link);
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-link) 88%, white 12%) 0%, var(--app-link) 100%);
    box-shadow: 0 10px 20px rgba(29, 95, 191, 0.2);
    color: #fff;
    font-family: var(--app-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.sr-help-actions .smallbut:hover {
    filter: brightness(1.02);
}

.sr-help-actions .smallbut:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--app-link) 20%, transparent 80%),
        0 10px 20px rgba(29, 95, 191, 0.2);
}

.sr-help-loading {
    display: none;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-link) 8%, var(--app-surface) 92%);
    color: var(--app-link);
    font-family: var(--app-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sr-help-loading.is-visible {
    display: inline-flex;
}

.sr-help-answer {
    display: none;
    border: 1px solid var(--app-metric-border);
    border-radius: 18px;
    background: var(--app-metric-bg);
    padding: 14px 15px;
    color: var(--app-text);
    font-family: var(--app-font-body);
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sr-help-answer > :first-child {
    margin-top: 0;
}

.sr-help-answer > :last-child {
    margin-bottom: 0;
}

.sr-help-answer p,
.sr-help-answer ul,
.sr-help-answer ol {
    margin: 0.1em 0 0.45em;
}

.sr-help-answer ul,
.sr-help-answer ol {
    padding-left: 1.25em;
}

.sr-help-answer li + li {
    margin-top: 0.16em;
}

.sr-help-answer li > p {
    margin: 0;
}

.sr-help-answer h1,
.sr-help-answer h2,
.sr-help-answer h3,
.sr-help-answer h4,
.sr-help-answer h5,
.sr-help-answer h6 {
    margin: 0.08em 0 0.28em;
    line-height: 1.25;
    font-size: 1.02em;
    font-family: var(--app-font-heading);
    color: var(--app-title-text);
}

.sr-help-answer.is-visible {
    display: block;
}

.sr-help-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(18, 33, 50, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: #122132;
    cursor: pointer;
    font-family: var(--app-font-body);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 6px 12px rgba(7, 18, 40, 0.08);
}

.sr-help-modal-close:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--app-link) 34%, var(--app-border) 66%);
    background: #f8fbff;
}

.sr-help-modal-close:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--app-link) 16%, transparent 84%),
        0 8px 16px rgba(7, 18, 40, 0.08);
}

@keyframes sr-help-overlay-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sr-help-modal-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sr-consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(74px + var(--sr-footer-viewport-adjust, 0px) + env(safe-area-inset-bottom));
    z-index: 171;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--app-surface) 0%, var(--app-row-even) 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(8px);
}

.sr-consent-banner[hidden] {
    display: none !important;
}

.sr-consent-banner-copy {
    flex: 1 1 560px;
}

.sr-consent-banner-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.2;
    color: var(--app-text);
}

.sr-consent-banner-copy p {
    margin: 0 0 6px;
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.45;
}

.sr-consent-banner-copy a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 12px;
    font-weight: 700;
    color: var(--app-link);
}

.sr-consent-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.sr-consent-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--app-row-even) 0%, var(--app-surface) 100%);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.sr-consent-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.sr-consent-btn-primary {
    border-color: var(--app-button-border);
    background: linear-gradient(150deg, var(--app-button-a) 0%, var(--app-button-b) 100%);
    color: var(--app-button-text);
}

.sr-consent-btn-secondary {
    border-color: var(--app-border);
    background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-row-even) 100%);
    color: var(--app-text);
}

.sr-consent-btn-ghost {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-link);
}

.sr-consent-modal-overlay {
    --sr-dialog-backdrop: rgba(9, 18, 33, 0.6);
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(9, 18, 33, 0.6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sr-consent-modal-overlay[hidden] {
    display: none !important;
}

.sr-consent-modal {
    position: relative;
    width: min(700px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 18px 18px 16px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: linear-gradient(165deg, var(--app-surface) 0%, var(--app-row-even) 100%);
    box-shadow: 0 22px 44px rgba(6, 12, 24, 0.44);
}

.sr-consent-modal-close {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.sr-consent-modal h2 {
    margin: 0 36px 8px 0;
    font-size: 22px;
    line-height: 1.15;
    color: var(--app-title-text);
}

.sr-consent-modal p {
    margin: 0 0 10px;
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.45;
}

.sr-consent-gpc {
    margin: 8px 0 12px !important;
    padding: 8px 10px;
    border: 1px solid var(--app-metric-border);
    border-radius: 10px;
    background: var(--app-metric-bg);
    color: var(--app-metric-text);
    font-size: 12px !important;
}

.sr-consent-toggles {
    display: grid;
    gap: 9px;
    margin: 6px 0 12px;
}

.sr-consent-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
}

.sr-consent-toggle strong {
    display: block;
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--app-title-text);
}

.sr-consent-toggle small {
    display: block;
    color: var(--app-muted);
    font-size: 12px;
    line-height: 1.4;
}

.sr-consent-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--app-focus);
}

.sr-consent-toggle.is-locked {
    opacity: 0.88;
}

.sr-consent-status {
    min-height: 18px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--app-muted);
}

.sr-consent-status.is-info {
    color: var(--app-link);
}

.sr-consent-status.is-err {
    color: var(--app-message-text);
}

.sr-consent-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 980px) {
    body.sr-has-site-footer {
        padding-bottom: calc(var(--sr-mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom)) !important;
    }

    .sr-site-footer {
        display: none !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sr-mobile-bottom-nav-height, 0px) + var(--sr-footer-viewport-adjust, 0px));
        max-width: 100%;
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 0;
        box-shadow: 0 -12px 24px rgba(7, 18, 40, 0.2);
        backdrop-filter: blur(8px);
    }

    .sr-site-footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 9px 9px;
        flex-wrap: nowrap;
    }

    .sr-site-footer-links {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
    }

    .sr-site-footer-copy {
        display: none;
    }

    .sr-site-footer a,
    .sr-site-footer-btn {
        min-height: 32px;
        padding: 6px 10px;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-row-even) 100%);
        font-size: 11.5px;
        line-height: 1.2;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(7, 18, 40, 0.12);
    }

    .sr-site-footer-btn {
        color: var(--app-link);
    }

    .sr-consent-banner {
        left: 8px;
        right: 8px;
        bottom: calc(var(--sr-mobile-bottom-nav-height, 0px) + var(--sr-site-footer-height, 108px) + var(--sr-footer-viewport-adjust, 0px) + 18px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .sr-consent-banner-copy {
        flex: none;
    }

    .sr-consent-banner-copy strong {
        font-size: 14px;
    }

    .sr-consent-banner-copy p {
        font-size: 12.5px;
    }

    .sr-consent-banner-actions {
        width: 100%;
        justify-content: stretch;
    }

    .sr-consent-banner-actions .sr-consent-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .sr-consent-modal-overlay {
        align-items: flex-end;
        padding: 8px;
    }

    .sr-consent-modal {
        width: 100%;
        max-height: min(88vh, 760px);
        border-radius: 16px;
        padding: 16px 14px 14px;
    }

    .sr-consent-modal h2 {
        font-size: 20px;
    }
}

/* The settings nav remains visible beside short landscape layouts. Reserve
   that column for the stacked consent actions instead of letting their full
   banner width cover an actionable nav item. */
@media (min-width: 768px) and (max-width: 980px) and (orientation: landscape) {
    .profile-page .sr-consent-banner {
        left: 232px;
        top: 2px;
        bottom: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "copy copy copy"
            "actions actions actions";
        gap: 4px;
        padding: 4px 8px;
    }

    .profile-page .sr-consent-banner-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .profile-page .sr-consent-banner-actions .sr-consent-btn {
        width: 100%;
    }

    .profile-page .sr-consent-banner-copy {
        grid-area: copy;
        flex: none;
        min-width: 0;
    }

    .profile-page .sr-consent-banner-copy p {
        margin: 0 0 2px;
        font-size: 11px;
        line-height: 1.15;
    }

    .profile-page .sr-consent-banner-copy strong {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.1;
    }
}

@media (max-width: 640px) {
    .sr-help-modal-overlay {
        padding: 8px;
    }

    .sr-help-modal {
        border-radius: 18px;
        padding: 16px 14px 14px;
    }

    .sr-help-modal h2 {
        font-size: 22px;
    }

    .sr-site-footer {
        margin: 0;
    }

    .sr-site-footer-inner {
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .sr-site-footer-links {
        gap: 6px;
    }

    .sr-site-footer-copy {
        padding-left: 7px;
        font-size: 10.5px;
    }

    .sr-consent-modal-actions .sr-consent-btn {
        width: 100%;
    }
}