:root {
    --theme-primary: #2f6fed;
    --theme-primary-strong: #2458c6;
    --theme-accent: #2f6fed;
    --theme-gradient: #2f6fed;
}

html[data-theme-name-pending="true"] [data-site-name] {
    visibility: hidden;
}

.membership-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 38px;
    padding: 0 17px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #f15b3b);
    box-shadow: 0 6px 16px rgba(245, 158, 11, .25);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
}

.membership-nav-link:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, .34);
}

@media (max-width: 760px) {
    .membership-nav-link { padding: 0 12px; font-size: 13px; }
}

.logo-icon,
.login-mark,
.auth-mark {
    background: var(--theme-gradient) !important;
}

.announcement-bar,
.top-header {
    --home-primary: var(--theme-primary);
    --home-primary-strong: var(--theme-primary-strong);
    --home-violet: var(--theme-accent);
    --home-violet-deep: var(--theme-primary-strong);
}

.announcement-bar {
    background: var(--theme-gradient) !important;
}

.announcement-bar .announcement-content,
.announcement-bar .notice-prefix,
.announcement-bar .notice-text,
.announcement-bar .round-link,
.announcement-bar .round-link::before {
    color: #fff !important;
}

.announcement-bar .announcement-content::before {
    filter: brightness(0) invert(1);
}

.announcement-bar .round-link:hover,
.announcement-bar .round-link:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Keep the public header navigation aligned with the configured theme. */
.top-header .nav-item:hover,
.top-header .nav-item:focus-visible,
.top-header .nav-item.active {
    color: var(--theme-primary) !important;
}

.top-header .nav-item.active::after {
    background: var(--theme-gradient) !important;
}

/* The public login shortcut follows the configured theme on every page. */
.top-header #loginShortcutBtn {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--theme-gradient) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-primary) 28%, transparent) !important;
}

.top-header #loginShortcutBtn:hover,
.top-header #loginShortcutBtn:focus-visible {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--theme-gradient) !important;
    filter: brightness(0.96);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-primary) 36%, transparent) !important;
}

/* The home search control is one visual unit, so its outline and action use
   the same theme tokens as the active navigation state. */
.home-redesign .search-box {
    border-color: var(--theme-primary) !important;
}

.home-redesign .search-box:hover,
.home-redesign .search-box:focus-within {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 18px 46px color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
}

.home-redesign .search-button {
    border-color: transparent !important;
    background: var(--theme-gradient) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--theme-primary) 24%, transparent) !important;
}

.home-redesign .search-button:hover,
.home-redesign .search-button:focus-visible {
    filter: brightness(0.96);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-primary) 30%, transparent) !important;
}

/* Keep the homepage search backdrop visually consistent across every theme:
   a soft tinted field, a fading dot matrix on the left, and concentric rings
   with ambient glows on the right. All decoration colors come from the
   configured theme instead of the original hard-coded blue palette. */
.home-redesign .home-search-section {
    background:
        radial-gradient(circle at 17.3% 16%, rgba(255, 255, 255, 0.76) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--theme-primary) 3%, #f8fbff) 0%,
            color-mix(in srgb, var(--theme-primary) 6%, #f5f9ff) 45%,
            color-mix(in srgb, var(--theme-accent) 10%, #f2f7ff) 100%
        ) !important;
}

.home-redesign .home-search-section::before {
    opacity: 0.5;
    background-image: radial-gradient(
        color-mix(in srgb, var(--theme-primary) 32%, transparent) 1px,
        transparent 1.1px
    ) !important;
}

.home-redesign .home-search-section::after {
    background: radial-gradient(
        ellipse at 38% 54%,
        color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%,
        color-mix(in srgb, var(--theme-primary) 7%, transparent) 48%,
        transparent 76%
    ) !important;
}

.home-redesign .home-search-bg {
    background:
        radial-gradient(
            ellipse at 0% 88%,
            color-mix(in srgb, var(--theme-primary) 11%, transparent) 0%,
            color-mix(in srgb, var(--theme-primary) 6%, transparent) 44%,
            transparent 72%
        ),
        radial-gradient(
            ellipse at 100% 66%,
            color-mix(in srgb, var(--theme-accent) 12%, transparent) 0%,
            color-mix(in srgb, var(--theme-primary) 6%, transparent) 52%,
            transparent 80%
        ) !important;
}

.home-redesign .home-search-bg::before {
    background: repeating-radial-gradient(
        circle at center,
        color-mix(in srgb, var(--theme-primary) 24%, transparent) 0 1px,
        transparent 2px 11px
    ) !important;
}

.search-page .filter-input {
    border-color: var(--theme-primary) !important;
}

.search-page .filter-input:hover,
.search-page .filter-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

.search-page .category-tab:hover,
.search-page .category-tab:focus-visible,
.search-page .category-tab.active,
.search-page .filter-toggle {
    border-color: var(--theme-primary) !important;
    color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 8%, #fff) !important;
}

.search-page .category-tab.active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
}

/* Home shortcut badges and category tabs use the configured theme for their
   interactive/selected state while keeping inactive tab text neutral. */
.home-redesign .tag-pill {
    color: var(--theme-primary) !important;
}

.home-redesign .tab-btn:hover,
.home-redesign .tab-btn.active,
.home-redesign .tab-btn:hover > span:last-child,
.home-redesign .tab-btn.active > span:last-child,
.home-redesign .tab-btn:hover .tab-icon,
.home-redesign .tab-btn.active .tab-icon {
    color: var(--theme-primary) !important;
}

.home-redesign .tab-btn.active {
    border-bottom-color: var(--theme-primary) !important;
}

.site-link,
.auth-link-button,
.detail-breadcrumb a:hover,
.detail-text-action:hover,
.hot-material-item:hover strong,
.account-menu-item:last-child,
.activity-refresh,
.activity-link,
.modal-kicker,
.modal-close:hover,
.pdf-tab.active {
    color: var(--theme-primary) !important;
}

.auth-tab.active,
.login-submit,
.auth-submit,
.search-action.primary,
.detail-action.primary {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
}

.login-submit:hover,
.auth-submit:hover {
    background: var(--theme-primary-strong) !important;
}

.auth-form input:focus {
    border-color: var(--theme-primary) !important;
}

.activity-refresh:hover,
.activity-link:hover,
.modal-close:hover,
.pdf-tab.active {
    border-color: var(--theme-primary) !important;
}

.preview-tab.active {
    border-color: transparent !important;
    color: #fff !important;
    background: var(--theme-gradient) !important;
}

.preview-tag {
    color: var(--theme-primary) !important;
    background: color-mix(in srgb, var(--theme-primary) 10%, #fff) !important;
}

.detail-action.primary,
.preview-download-button {
    background: var(--theme-primary) !important;
}

.account-menu-item:last-child,
.activity-refresh:hover,
.activity-link:hover,
.modal-close:hover {
    background: color-mix(in srgb, var(--theme-primary) 7%, #fff) !important;
}

.profile-avatar,
.user-avatar,
.hero-icon {
    background-image: var(--theme-gradient) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-primary);
}

html[data-theme-style="vibrant"] .primary-btn,
html[data-theme-style="vibrant"] .login-submit,
html[data-theme-style="vibrant"] .auth-submit,
html[data-theme-style="vibrant"] .search-action.primary,
html[data-theme-style="vibrant"] .detail-action.primary {
    border-color: transparent !important;
    background: var(--theme-gradient) !important;
}

/* A custom Logo uploaded in the appearance panel replaces the default letter
   mark everywhere while preserving each page's original Logo dimensions. */
html[data-site-logo="custom"] .logo-mark,
html[data-site-logo="custom"] .logo-icon,
html[data-site-logo="custom"] .auth-mark,
html[data-site-logo="custom"] .login-mark {
    color: transparent !important;
    background-color: transparent !important;
    background-image: var(--site-logo-image) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none;
}

/* When no image is configured, the brand is intentionally text-only. */
html[data-site-logo="empty"] .logo-mark,
html[data-site-logo="empty"] .logo-icon,
html[data-site-logo="empty"] .auth-mark,
html[data-site-logo="empty"] .login-mark {
    display: none !important;
}

/* One designed default avatar across member-facing account entry points. */
#accountAvatar,
#sidebarAvatar {
    overflow: hidden !important;
    border-radius: 50% !important;
    color: transparent !important;
    background-color: #073f43 !important;
    background-image: url("images/default-member-avatar-v1.png") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 118% 118% !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
}

#accountAvatar::before,
#sidebarAvatar::before {
    display: none !important;
}