/* ===== CSS Variables - Unified Light/Dark Theme ===== */

:root {
    /* Layout Dimensions */
    --header-height: 50px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 60px;

    /* Primary Blue Theme - Light Mode (Default) */
    --app-primary: #0a6fe8;
    --app-primary-hover: #0858b8;
    --app-primary-light: #e6f1fd;
    --app-primary-dark: #054a9e;

    /* Header & Navigation - Light */
    --app-header-bg: linear-gradient(135deg, #0a6fe8 0%, #054a9e 100%);
    --app-header-text: #ffffff;
    --app-sidebar-bg: #ffffff;
    --app-sidebar-text: #1c1b1f;
    --app-sidebar-hover: rgba(0, 0, 0, 0.04);
    --app-sidebar-active: rgba(0, 0, 0, 0.08);
    --app-sidebar-active-text: #1c1b1f;

    /* Content Areas - Light */
    --app-content-bg: #fafafa;
    --app-content-text: #1c1b1f;
    --app-border-color: rgba(0, 0, 0, 0.12);

    /* Semantic Colors - Light */
    --app-success: #4caf50;
    --app-error: #f44336;
    --app-warning: #ff9800;
    --app-info: #00bcd4;

    /* Surfaces - Light */
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --surface-secondary: #f5f5f5;

    /* Input Background - Light */
    --input-bg: #ffffff;

    /* Scrollbar - Light */
    --scrollbar-track: #f0f0f0;
    --scrollbar-thumb: #c4c4c4;
    --scrollbar-thumb-hover: #a8a8a8;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Progress bar theming */
    --progress-track-color: #e0e0e0;
    --progress-color: #0a6fe8;
}

/* ===== Dark Theme Override ===== */
[data-theme="dark"] {
    /* Primary Blue Theme - Dark Mode */
    --app-primary: #4d9ffc;
    --app-primary-hover: #7ab8ff;
    --app-primary-light: rgba(77, 159, 252, 0.15);
    --app-primary-dark: #0a6fe8;

    /* Header & Navigation - Dark */
    --app-header-bg: linear-gradient(135deg, #054a9e 0%, #032d5f 100%);
    --app-header-text: #ffffff;
    --app-sidebar-bg: #1a1a1a;
    --app-sidebar-text: #ffffff;
    --app-sidebar-hover: rgba(255, 255, 255, 0.08);
    --app-sidebar-active: rgba(255, 255, 255, 0.12);
    --app-sidebar-active-text: #ffffff;

    /* Content Areas - Dark */
    --app-content-bg: #121212;
    --app-content-text: #e6e1e5;
    --app-border-color: rgba(255, 255, 255, 0.12);

    /* Semantic Colors - Dark */
    --app-success: #81c784;
    --app-error: #ef5350;
    --app-warning: #ffb74d;
    --app-info: #4dd0e1;

    /* Surfaces - Dark */
    --surface-card: #2d2d30;
    --surface-elevated: #3d3d40;
    --surface-secondary: #2d2d30;

    /* Input Background - Dark */
    --input-bg: #2a2a2d;

    /* Scrollbar - Dark */
    --scrollbar-track: #2d2d30;
    --scrollbar-thumb: #4a4a4d;
    --scrollbar-thumb-hover: #5a5a5d;

    /* Progress bar theming - Dark */
    --progress-track-color: #3d3d40;
    --progress-color: #4d9ffc;
}
/* ===== Base Reset Styles ===== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--app-content-bg);
    color: var(--app-content-text);
    height: 100%;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 7px;
    border: 3px solid var(--scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* Firefox scrollbar */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===== Layout Wrapper ===== */
.layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* ===== Typography & Links ===== */

/* ===== Page Title - Editorial Impact ===== */

.page-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--app-border-color);
}

.page-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;

    /* Gradient text - professional blue spectrum */
    background: linear-gradient(
        135deg,
        var(--app-primary) 0%,
        color-mix(in srgb, var(--app-primary) 70%, #1e3a5f) 50%,
        var(--app-primary-dark) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Subtle text shadow for depth */
    filter: drop-shadow(0 1px 2px rgba(10, 111, 232, 0.08));
}

/* Dark mode refinement */
[data-theme="dark"] .page-header h1 {
    background: linear-gradient(
        135deg,
        #5ba3f5 0%,
        var(--app-primary) 50%,
        #7fc0ff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(91, 163, 245, 0.15));
}

/* Page description styling */
.page-header .page-description {
    font-size: 1rem;
    font-weight: 400;
    color: var(--app-content-text);
    opacity: 0.6;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ===== Links ===== */

a:not(.nav-item), .btn-link {
    color: var(--app-primary-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

[data-theme="dark"] a:not(.nav-item),
[data-theme="dark"] .btn-link {
    color: var(--app-primary);
}

a:hover {
    color: var(--app-primary-hover);
    text-decoration: underline;
}
/* ===== Header ===== */

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--app-header-bg);
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 1001;
    gap: 8px;
}

.nav-toggle {
    background: transparent;
    border: none;
    cursor: default;
    padding: 0;
    color: var(--app-header-text);
    display: inline-flex;
    align-items: center;
    /* Fixed hit-area: the logo resizes when the sidebar opens, and a hover target that
       shrinks under the pointer would fire pointerleave and loop open/close */
    height: var(--header-height);
    min-width: 50px;
}

/* ===== Logo Crossfade ===== */
.logo-swap {
    display: grid;
    align-items: start;
    justify-items: start;
    width: 50px;
    height: 50px;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
}

.logo-swap > * {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-swap .app-logo {
    width: 50px;
    height: 50px;
    opacity: 1;
    transform: scale(1);
}

.logo-swap .app-logo-full {
    height: 35px;
    width: auto;
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}

.logo-swap--expanded {
    width: 140px;
    height: 35px;
}

.logo-swap--expanded .app-logo-full {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.logo-swap--expanded .app-logo {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}

.header-spacer {
    flex: 1;
}

.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: var(--app-header-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== Header Actions Container ===== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== User Menu ===== */
.user-menu {
    display: flex;
    align-items: center;
}

/* Avatar circle via CSS custom property --user-initials */
.user-avatar-icon.e-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.user-avatar-icon.e-btn-icon::before {
    content: var(--user-initials) !important;
    font-family: inherit !important;
}

/* Avatar-only button (circle, no text, no caret) */
.user-menu-dropdown.e-dropdown-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--app-header-text) !important;
    box-shadow: none !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 47px !important;
    height: 47px !important;
}

.user-menu-dropdown.e-dropdown-btn:hover,
.user-menu-dropdown.e-dropdown-btn:focus {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== User Popup Card ===== */
.user-popup-card {
    width: 280px;
    padding: 0;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.user-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.user-popup-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--app-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.user-popup-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-popup-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-content-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-popup-email {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-popup-divider {
    height: 1px;
    background: var(--app-border-color);
    margin: 0;
}

.user-popup-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}

.user-popup-plan-label {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.6;
}

.user-popup-plan-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-content-text);
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--surface-secondary);
}

.user-popup-plan-name--premium {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

[data-theme="dark"] .user-popup-plan-name--premium {
    background: rgba(77, 159, 252, 0.15);
    color: var(--app-primary);
}

.user-popup-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--app-content-text);
    transition: background var(--transition-fast);
    text-align: left;
}

.user-popup-action:hover {
    background: var(--surface-secondary);
}

.user-popup-action > .e-icons {
    flex-shrink: 0;
    font-size: 16px;
}

.user-popup-action--logout {
    color: var(--app-error);
}



/* Override Syncfusion popup container for user menu only */
.e-dropdown-popup:has(.user-popup-card) {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--app-border-color) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

[data-theme="dark"] .e-dropdown-popup:has(.user-popup-card) {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Hide default Syncfusion menu items container when using PopupContent */
.e-dropdown-popup:has(.user-popup-card) .e-ul {
    display: none !important;
}

/* ===== Culture Toggle ===== */
.culture-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--app-header-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.culture-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.culture-toggle .fi {
    font-size: 1.1rem;
    line-height: 1;
}

/* ===== User Popup Preferences ===== */
.user-popup-preferences {
    display: flex;
    flex-direction: column;
}

.user-popup-action .action-indicator {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    opacity: 0.6;
}

.user-popup-action .action-indicator .e-icons {
    flex-shrink: 0;
}

.user-popup-action .action-indicator .fi {
    font-size: 1rem;
    line-height: 1;
}

.user-popup-action .action-indicator .e-chevron-up {
    transform: rotate(0deg);
}

/* ===== Language Dropdown List ===== */
.user-popup-language-list {
    display: flex;
    flex-direction: column;
    padding: 2px 8px 6px;
}

.user-popup-language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--app-content-text);
    transition: background var(--transition-fast);
    text-align: left;
}

.user-popup-language-option:hover {
    background: var(--surface-secondary);
}

.user-popup-language-option--active {
    font-weight: 600;
}

.user-popup-language-option .fi {
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 2px;
}

.user-popup-language-option .e-icons {
    margin-left: auto;
    color: var(--app-primary);
    flex-shrink: 0;
}

/* ===== Login Button ===== */
.login-button {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--app-header-text);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.login-button:hover {
    background: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    color: var(--app-header-text);
}
/* ===== Syncfusion Sidebar Override ===== */

/* Base sidebar styling */
.app-sidebar.e-sidebar {
    background: var(--app-sidebar-bg);
    border-right: none;
    z-index: 20 !important;
}

/* Smooth transition without bounce effect */
.app-sidebar.e-sidebar,
.app-sidebar.e-sidebar.e-transition,
.e-sidebar.e-left,
.e-sidebar.e-right {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent content area bounce */
.e-content-animation {
    transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Override Syncfusion default animation */
.e-sidebar.e-open,
.e-sidebar.e-close {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fixed during scroll - Syncfusion dock state selector */
.e-sidebar.e-left.e-close.e-dock,
.e-sidebar.e-right.e-close.e-dock {
    position: fixed !important;
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
}

.e-sidebar.e-left.e-open.e-dock,
.e-sidebar.e-right.e-open.e-dock {
    position: fixed !important;
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
}

/* Open state - fixed position + shadow */
.app-sidebar.e-sidebar.e-open {
    position: fixed !important;
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .app-sidebar.e-sidebar.e-open {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
}

/* Docked/collapsed state */
.app-sidebar.e-sidebar.e-close.e-dock {
    overflow: hidden;
    transform: translateX(0px);
    visibility: visible;
}

/* Hover zone wrapping the nav: keeps a hover-opened sidebar open while the pointer is inside */
.sidebar-hover-zone {
    height: 100%;
    min-height: 100%;
}

/* Navigation container */
.sidebar-nav {
    display: flex;
    flex-direction: column;
}

/* Navigation Items */
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--app-sidebar-text);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    gap: 16px;
    white-space: nowrap;
}

.sidebar-nav .nav-item:hover {
    background: var(--app-sidebar-hover);
    text-decoration: none;
    color: var(--app-sidebar-text);
}

/* Active state - Light theme: solid blue background */
.sidebar-nav .nav-item.active {
    background: #0a6fe8;
    color: #ffffff;
}

.sidebar-nav .nav-item.active svg {
    color: #ffffff;
}

/* Active state - Dark theme: solid blue background */
[data-theme="dark"] .sidebar-nav .nav-item.active {
    background: #0a6fe8;
    color: #ffffff;
}

[data-theme="dark"] .sidebar-nav .nav-item.active svg {
    color: #ffffff;
}

.sidebar-nav .nav-item svg {
    flex-shrink: 0;
}

/* Illustrated icons (webp): fixed size; only Favorites retains a white chip */
.sidebar-nav .nav-icon {
    flex-shrink: 0;
    width: 22.1px;
    height: 22.1px;
    object-fit: contain;
    border-radius: 6px;
}

.sidebar-nav .nav-icon.icon-on-light,
.sidebar-nav .nav-icon.icon-on-blue {
    width: 27.625px;
    height: 27.625px;
}

.sidebar-nav .nav-item.active .nav-icon--chip {
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff;
}

.sidebar-nav .nav-text {
    font-size: 13.6px;
    font-weight: 400;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.3s ease;
}

/* Hide text when collapsed/docked */
.app-sidebar.e-sidebar.e-close .nav-text {
    opacity: 0;
    width: 0;
}

.app-sidebar.e-sidebar.e-close .nav-item {
    justify-content: center;
    padding: 12px;
}

/* ===== Navigation Sections ===== */
.nav-section {
    display: flex;
    flex-direction: column;
}

.nav-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-sidebar-text);
    opacity: 0.5;
    padding: 12px 16px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Hide section labels when collapsed/docked */
.app-sidebar.e-sidebar.e-close .nav-section-label,
.app-sidebar.e-sidebar.e-dock:not(.e-open) .nav-section-label,
.e-sidebar.e-close .nav-section-label {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ===== Navigation Dividers ===== */
.nav-divider {
    height: 1px;
    background: var(--app-border-color);
    margin: 8px 16px;
    opacity: 0.4;
    transition: margin 0.2s ease, opacity 0.2s ease;
}

/* Compact dividers when collapsed */
.app-sidebar.e-sidebar.e-close .nav-divider,
.app-sidebar.e-sidebar.e-dock:not(.e-open) .nav-divider,
.e-sidebar.e-close .nav-divider {
    margin: 8px 10px;
}

/* ===== Layout Body ===== */

.layout-body {
    display: flex;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

/* ===== Main Content ===== */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--app-content-bg);
    position: relative;
    min-height: calc(100vh - var(--header-height));
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    max-width: 100vw;
}

/* Dark theme: subtle blue gradient glow (like Pro card) - top and bottom */
[data-theme="dark"] .main-content {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(77, 159, 252, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(77, 159, 252, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, rgba(77, 159, 252, 0.04) 0%, transparent 15%, transparent 85%, rgba(77, 159, 252, 0.03) 100%),
        var(--app-content-bg);
}

.page-content {
    flex: 1 1 auto;
    padding: 24px;
    /* Force styles for docked sidebar - Syncfusion doesn't apply on initial navigation */
    margin-left: 60px;
    transform: translateX(0px);
    transition: margin-left 0.3s ease, transform 0.3s ease;
    /* Prevent horizontal overflow from child components */
    max-width: calc(100vw - 60px);
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ===== App Footer ===== */

.app-footer {
    flex-shrink: 0;
    margin-top: auto;
    margin-left: 60px;
    padding: 16px 24px;
    background: transparent;
    transition: margin-left 0.3s ease;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-copyright {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.6;
}

[data-theme="dark"] .footer-copyright {
    color: #ffffff;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

[data-theme="dark"] .footer-links a {
    color: #ffffff;
    opacity: 0.8;
}

[data-theme="dark"] .footer-links a:hover {
    opacity: 1;
    color: var(--app-primary);
}

@media (max-width: 768px) {
    .app-footer {
        margin-left: 0;
        padding: 12px 16px;
    }

    .footer-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .footer-links {
        gap: 16px;
    }
}

/* ===== No Sidebar Layout (Legal Pages) ===== */

.layout-body--no-sidebar .page-content {
    margin-left: 0;
}

.layout-body--no-sidebar .app-footer {
    margin-left: 0;
}
/* ===== Responsive Layout ===== */

/* Syncfusion Sidebar handles responsive behavior automatically */

/* Auth pages responsive */
@media (max-width: 480px) {
    .auth-container {
        padding: 24px 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}

/* Calculator responsive */
@media (max-width: 1200px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }

    .filters-accordion-grid {
        grid-template-columns: 1fr;
    }
}

/* Results two-column responsive */
@media (max-width: 900px) {
    .results-two-column {
        flex-direction: column;
    }

    .results-chart-column {
        flex: none;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--app-border-color);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 16px;
    }
}
/* ===== Buttons ===== */

.btn-primary {
    color: #ffffff;
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.3);
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.3);
}

.btn-primary:active {
    transform: scale(0.98);
}

/* Secondary Button */
.btn-secondary {
    background: transparent;
    color: var(--app-primary);
    border: 1px solid var(--app-primary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--app-primary-light);
}

/* Outline Button */
.btn-outline {
    background: transparent;
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline:hover {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--app-primary);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background: var(--app-primary-light);
}

/* Filter Actions */
.filter-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .filter-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.3);
}

[data-theme="dark"] .filter-actions .btn-primary {
    background: linear-gradient(135deg, var(--app-primary) 0%, #4d9ffc 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.35);
}

.filter-actions .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 111, 232, 0.4);
}

[data-theme="dark"] .filter-actions .btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(77, 159, 252, 0.45);
}

.filter-actions .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.filter-actions .btn-primary:disabled {
    background: #c4bfd4;
    color: #9a95a8;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

[data-theme="dark"] .filter-actions .btn-primary:disabled {
    background: #4a4a4d;
    color: #6e6880;
    opacity: 0.6;
}

.filter-actions .btn-secondary {
    padding: 12px 24px;
    background: transparent;
    color: var(--app-content-text);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[data-theme="dark"] .filter-actions .btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.filter-actions .btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .filter-actions .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
}

.filter-actions .btn-secondary:disabled {
    color: #a0a0a0;
    border-color: #d0d0d0;
    cursor: not-allowed;
    opacity: 0.6;
}

[data-theme="dark"] .filter-actions .btn-secondary:disabled {
    color: #5a5a5e;
    border-color: #4a4a4e;
    opacity: 0.5;
}

/* Calculator Actions */
.calculator-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border-color);
}

.calculator-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--app-primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

[data-theme="dark"] .calculator-actions .btn-primary {
    color: #ffffff;
}

.calculator-actions .btn-primary:hover:not(:disabled) {
    background: var(--app-primary-hover);
}

.calculator-actions .btn-primary:disabled {
    background: #c4bfd4;
    color: #9a95a8;
    cursor: not-allowed;
}

[data-theme="dark"] .calculator-actions .btn-primary:disabled {
    background: #4a4a4d;
    color: #6e6880;
}
/* ===== Cards ===== */

.card {
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: box-shadow var(--transition-normal);
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Featured Card with Blue Accent */
.card-featured {
    background: linear-gradient(135deg, var(--app-primary-light) 0%, rgba(10, 111, 232, 0.05) 100%);
    border: 1px solid rgba(10, 111, 232, 0.2);
    border-left: 4px solid var(--app-primary);
}

[data-theme="dark"] .card-featured {
    background: linear-gradient(135deg, #2d2d30 0%, #3d3d40 100%);
    border: 1px solid rgba(77, 159, 252, 0.2);
    border-left: 4px solid var(--app-primary);
}

/* Calculator Card */
.calculator-card {
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .calculator-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.calculator-card .card-header {
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--app-border-color);
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
}

.calculator-card .card-header h3 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--app-content-text);
}

.calculator-card .card-content {
    padding: 20px;
}

/* Results Card */
.calculator-results .calculator-card.results-card {
    border: 2px solid var(--app-primary);
}

/* Chart Container */
.chart-container {
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

[data-theme="dark"] .chart-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.chart-container .e-chart {
    background: transparent !important;
}

/* Chart Toggle Container */
.chart-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.chart-toggle-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ===== Calculation cards: shared equation layout (Revenue estimates + Royalty results) =====
   Colours follow the design system: estimates are blue, earned money is green. */
.calc-results {
    --calc-figure-font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --calc-estimate: var(--app-primary, #0a6fe8);
    --calc-estimate-tint: rgba(10, 111, 232, 0.06);
    --calc-estimate-edge: rgba(10, 111, 232, 0.2);
    --calc-earned: #2e7d32;
    --calc-earned-tint: rgba(46, 125, 50, 0.07);
    --calc-earned-edge: rgba(46, 125, 50, 0.22);
    --calc-loss: var(--app-error, #f44336);
    --calc-operator: #ff9f1c;

    container-type: inline-size;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--app-border-color, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    overflow: hidden;
    color: var(--app-content-text, #1c1b1f);
}

[data-theme="dark"] .calc-results {
    --calc-estimate-tint: rgba(77, 159, 252, 0.1);
    --calc-estimate-edge: rgba(77, 159, 252, 0.28);
    --calc-earned: var(--app-success, #81c784);
    --calc-earned-tint: rgba(129, 199, 132, 0.1);
    --calc-earned-edge: rgba(129, 199, 132, 0.28);
}

/* --- Equation --- */
.calc-equation {
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: auto auto auto;
    justify-content: center;
    column-gap: 28px;
    padding: 20px 24px;
}

/* Each term shares the parent rows, so values and operators sit on one row */
.calc-term {
    grid-row: 1 / span 3;
    display: grid;
    grid-template-rows: subgrid;
    justify-items: center;
    align-items: center;
    row-gap: 4px;
    min-width: 0;
    text-align: center;
}

.calc-term__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 4px;
}

/* Illustrated icons (media/icons/landing/*.webp): size comes from the width/height attributes */
.app-icon {
    display: inline-block;
    flex-shrink: 0;
    object-fit: contain;
}

/* Blue-surface icons are 25% larger; paired variants share the same footprint. */
.app-icon[src^="media/icons/landing/blue/"],
.app-icon.icon-on-light {
    width: 25px;
    height: 25px;
}

.category-band__viewall .app-icon[src^="media/icons/landing/blue/"] {
    width: 27.5px;
    height: 27.5px;
}

.filter-actions .app-icon.app-icon--search-action {
    width: 32.5px;
    height: 32.5px;
}

.app-icon.app-icon--reset-action {
    width: 29px;
    height: 29px;
}

/* Paired decorative assets: show the blue variant only on selected blue surfaces. */
.icon-on-blue {
    display: none;
}

.sidebar-nav .nav-item.active .icon-on-light,
.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .icon-on-light {
    display: none;
}

.sidebar-nav .nav-item.active .icon-on-blue,
.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .icon-on-blue {
    display: inline-block;
}

.calc-term__value {
    font-family: var(--calc-figure-font);
    font-variant-numeric: tabular-nums;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.calc-term__label {
    align-self: start;
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.7;
}

.calc-term--earned .calc-term__value {
    color: var(--calc-earned);
}

/* Result term: blue for estimates, green when the result is money earned */
.calc-term--result {
    --calc-accent: var(--calc-estimate);
    --calc-accent-tint: var(--calc-estimate-tint);
    --calc-accent-edge: var(--calc-estimate-edge);

    padding: 12px 16px;
    background: var(--calc-accent-tint);
    border: 1px solid var(--calc-accent-edge);
    border-radius: 10px;
}

.calc-term--result.calc-term--earned {
    --calc-accent: var(--calc-earned);
    --calc-accent-tint: var(--calc-earned-tint);
    --calc-accent-edge: var(--calc-earned-edge);
}

.calc-term--result.is-negative {
    --calc-accent: var(--calc-loss);
    --calc-accent-tint: rgba(244, 67, 54, 0.06);
    --calc-accent-edge: rgba(244, 67, 54, 0.25);
}

.calc-term--result .calc-term__value {
    font-size: 2rem;
    letter-spacing: -0.01em;
    color: var(--calc-accent);
}

.calc-operator {
    grid-row: 2;
    align-self: center;
    font-family: var(--calc-figure-font);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--calc-operator);
}

/* --- Revenue: period timeline --- */
.revenue-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 190px));
    justify-content: center;
    margin: 0;
    padding: 18px 24px 20px;
    list-style: none;
    border-top: 1px solid var(--app-border-color, rgba(0, 0, 0, 0.12));
}

.revenue-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 24px;
    min-width: 0;
    text-align: center;
}

/* Rail segment: spans the node, trimmed to the dot on the first and last node */
.revenue-node::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--app-border-color, rgba(0, 0, 0, 0.12));
}

.revenue-node:first-child::before {
    left: 50%;
}

.revenue-node:last-child::before {
    right: 50%;
}

.revenue-node::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--calc-estimate);
    background: var(--surface-card, #ffffff);
}

.revenue-node--current::after {
    background: var(--calc-estimate);
    box-shadow: 0 0 0 4px var(--calc-estimate-edge);
}

.revenue-node__period {
    font-size: 0.8rem;
    font-weight: 600;
}

.revenue-node--current .revenue-node__period {
    color: var(--calc-estimate);
}

.revenue-node__value {
    font-family: var(--calc-figure-font);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--calc-estimate);
}

.revenue-node.is-negative .revenue-node__value {
    color: var(--calc-loss);
}

.revenue-node__copies {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* --- Royalty: breakdown ledger under the equation --- */
.royalty-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
    gap: 20px 48px;
    padding: 18px 24px 20px;
    border-top: 1px solid var(--app-border-color, rgba(0, 0, 0, 0.12));
}

.royalty-ledger__group {
    min-width: 0;
    margin: 0;
}

.royalty-ledger__title {
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.royalty-ledger__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.8rem;
}

.royalty-ledger__row dt {
    opacity: 0.75;
}

.royalty-ledger__row dd {
    margin: 0;
    font-family: var(--calc-figure-font);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.royalty-ledger__row--total {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid var(--app-border-color, rgba(0, 0, 0, 0.12));
}

.royalty-ledger__row--total dt {
    font-weight: 600;
    opacity: 1;
}

.royalty-ledger__row--total dd {
    font-weight: 700;
}

.royalty-ledger__caption {
    margin: 6px 0 0;
    font-size: 0.75rem;
    opacity: 0.65;
}

/* Narrow container: equation reads top to bottom, timeline and ledger stack */
@container (max-width: 600px) {
    .calc-equation {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 6px;
        padding: 16px;
    }

    .calc-term {
        grid-row: auto;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 0;
        justify-items: start;
        text-align: left;
    }

    .calc-term__icon {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .calc-term__label {
        align-self: auto;
    }

    .calc-term--result .calc-term__value {
        font-size: 1.6rem;
    }

    .calc-operator {
        grid-row: auto;
        justify-self: start;
        margin-left: 14px;
        font-size: 1.4rem;
    }

    .royalty-ledger {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .revenue-timeline {
        grid-template-columns: 1fr;
        padding: 16px 16px 16px 44px;
    }

    .revenue-node {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 12px;
        padding: 0 0 14px;
        text-align: left;
    }

    .revenue-node:last-child {
        padding-bottom: 0;
    }

    .revenue-node__copies {
        grid-column: 1 / -1;
    }

    .revenue-node::before,
    .revenue-node:first-child::before,
    .revenue-node:last-child::before {
        top: 8px;
        bottom: -8px;
        left: -23px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .revenue-node:last-child::before {
        display: none;
    }

    .revenue-node::after {
        top: 3px;
        left: -28px;
        margin-left: 0;
    }
}

/* ===== Royalty Results Card: empty state (calculator page) ===== */
.results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--app-content-text, #e0e0e0);
    opacity: 0.5;
    gap: 8px;
}

.results-placeholder p {
    font-size: 0.85rem;
    margin: 0;
}
/* ===== Badges ===== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.badge-primary {
    background: var(--app-primary-light);
    color: var(--app-primary-dark);
}

[data-theme="dark"] .badge-primary {
    color: var(--app-primary);
}

.badge-success {
    background: rgba(76, 175, 80, 0.15);
    color: var(--app-success);
}

[data-theme="dark"] .badge-success {
    background: rgba(129, 199, 132, 0.15);
}

.badge-error {
    background: rgba(244, 67, 54, 0.15);
    color: var(--app-error);
}

[data-theme="dark"] .badge-error {
    background: rgba(239, 83, 80, 0.15);
}

.badge-warning {
    background: rgba(255, 152, 0, 0.15);
    color: var(--app-warning);
}

[data-theme="dark"] .badge-warning {
    background: rgba(255, 183, 77, 0.15);
}

/* Currency Badge */
.currency-badge {
    background: var(--app-primary);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

[data-theme="dark"] .currency-badge {
    color: #ffffff;
}

/* BSR cell styling with color coding */
.bsr-cell {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.bsr-value {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.9rem;
    white-space: nowrap;
}

.bsr-excellent {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

[data-theme="dark"] .bsr-excellent {
    background: rgba(129, 199, 132, 0.2);
    color: #81c784;
}

.bsr-good {
    background: rgba(56, 142, 60, 0.12);
    color: #388e3c;
}

[data-theme="dark"] .bsr-good {
    background: rgba(165, 214, 167, 0.2);
    color: #a5d6a7;
}

.bsr-average {
    background: rgba(245, 124, 0, 0.12);
    color: #f57c00;
}

[data-theme="dark"] .bsr-average {
    background: rgba(255, 183, 77, 0.2);
    color: #ffb74d;
}

.bsr-low {
    background: rgba(211, 47, 47, 0.12);
    color: #d32f2f;
}

[data-theme="dark"] .bsr-low {
    background: rgba(229, 115, 115, 0.2);
    color: #e57373;
}

/* Value Badges for Sliders - Blue gradient matching Cerca button */
.bsr-value-badge,
.rating-value-badge,
.royalty-value-badge,
.month-value-badge {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.9rem;
    padding: 6px 14px;
    background: linear-gradient(135deg, #3B47CE 0%, #2D3699 100%);
    color: #ffffff;
    border-radius: 12px;
    font-weight: 600;
}

[data-theme="dark"] .bsr-value-badge,
[data-theme="dark"] .rating-value-badge,
[data-theme="dark"] .royalty-value-badge,
[data-theme="dark"] .month-value-badge {
    background: linear-gradient(135deg, #3B47CE 0%, #2D3699 100%);
    color: #ffffff;
}

/* Accordion Badge */
.accordion-badge {
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(10, 111, 232, 0.25);
    letter-spacing: 0.02em;
}

[data-theme="dark"] .accordion-badge {
    background: linear-gradient(135deg, var(--app-primary-light) 0%, var(--app-primary) 100%);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(122, 184, 255, 0.3);
}
/* ===== Form Validation ===== */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

[data-theme="dark"] .valid.modified:not([type=checkbox]) {
    outline: 1px solid #4caf50;
}

.invalid {
    outline: 1px solid #e50000;
}

[data-theme="dark"] .invalid {
    outline: 1px solid #f44336;
}

.validation-message {
    color: #e50000;
}

[data-theme="dark"] .validation-message {
    color: #f44336;
}

/* ===== Form Groups ===== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--app-content-text);
}

.form-group .e-input-group {
    border-radius: 8px;
}

.form-group .validation-message {
    font-size: 0.8rem;
    color: #d32f2f;
    margin-top: 4px;
}

[data-theme="dark"] .form-group .validation-message {
    color: #f44336;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

/* ===== Form Input Styling ===== */

.form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 8px;
    background: #ffffff;
    color: var(--app-content-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .form-input {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--input-bg);
    color: #e6e1e5;
}

.form-input:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px rgba(10, 111, 232, 0.2);
}

[data-theme="dark"] .form-input:focus {
    box-shadow: 0 0 0 2px rgba(77, 159, 252, 0.2);
}

.form-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Checkbox Styling ===== */

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--app-content-text);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--app-primary);
    cursor: pointer;
}

/* ===== Input Groups ===== */

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group .input-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-content-text);
}

.input-group .input-hint {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.6;
    font-style: italic;
}

.input-group .input-hint strong {
    color: var(--app-primary-dark);
    font-style: normal;
}

[data-theme="dark"] .input-group .input-hint strong {
    color: var(--app-primary);
}

.inputs-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(250px, 1fr);
    gap: 32px 0;
}

/* ===== Input Grid Cells ===== */

.inputs-grid > .input-group {
    padding: 0 24px;
    border-right: 1px solid var(--app-border-color);
}

.inputs-grid > .input-group:nth-child(3n) {
    border-right: none;
    padding-right: 0;
}

.inputs-grid > .input-group:nth-child(3n+1) {
    padding-left: 0;
}

/* Marketplace + VAT row */
.marketplace-vat-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* ===== Trim Size Inputs ===== */

.trim-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trim-input {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.trim-input .e-numeric {
    flex: 1;
}

.trim-input .unit-label {
    font-size: 0.85rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.trim-separator {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.5;
}

.trim-category-hint strong {
    font-weight: 600;
}

/* ===== Reviews Range Selector ===== */

.reviews-range-selector {
    padding: 8px 10px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 280px;
}

.reviews-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--app-content-text);
    margin-bottom: 4px;
}

.reviews-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-input-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 110px;
}

.review-input-group .input-label {
    font-size: 0.75rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.reviews-range-selector .e-numeric.e-input-group {
    width: 100% !important;
}

.range-separator {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.5;
    padding-top: 14px;
}

.reviews-range-selector .e-numeric {
    border-radius: 8px;
}

/* ===== Filter Groups ===== */

.filter-group {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.filter-group:last-of-type {
    margin-bottom: 8px;
}

/* Country selector - compact width */
.filter-group.country-filter {
    min-width: 250px;
    max-width: 300px;
}

/* BSR Range - full width on separate row */
.filter-group.bsr-filter {
    min-width: 500px;
    max-width: 800px;
    width: 100%;
}

/* ===== Error Message ===== */

.error-message {
    margin-top: 16px;
    padding: 12px 16px;
    background: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    color: #c62828;
    font-size: 0.9rem;
}

[data-theme="dark"] .error-message {
    background: rgba(244, 67, 54, 0.15);
    color: #ef9a9a;
}

/* ===== Portfolio & Saved Search Dropdowns ===== */

.portfolio-dropdown,
.saved-search-dropdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.portfolio-dropdown .dropdown-label,
.saved-search-dropdown .dropdown-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-content-text);
    white-space: nowrap;
}

.portfolio-dropdown .dropdown-loading,
.saved-search-dropdown .dropdown-loading {
    font-size: 0.875rem;
    color: var(--app-content-text);
    opacity: 0.7;
    padding: 8px 0;
}

.portfolio-dropdown .dropdown-hint,
.saved-search-dropdown .dropdown-hint {
    font-size: 0.75rem;
    color: var(--app-content-text);
    opacity: 0.6;
    font-style: italic;
    margin-top: 4px;
}

/* Dropdown item templates */
.portfolio-item,
.saved-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
}

.portfolio-item .e-icons,
.saved-search-item .e-icons {
    font-size: 0.9rem;
    color: var(--app-primary-dark);
}

[data-theme="dark"] .portfolio-item .e-icons,
[data-theme="dark"] .saved-search-item .e-icons {
    color: var(--app-primary);
}

.portfolio-name,
.search-name {
    flex: 1;
    font-weight: 500;
}

.portfolio-selected,
.saved-search-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0 8px;
}

/* Dropdown styling - rounded style consistent with other components */
.portfolio-ddl.e-ddl,
.saved-search-ddl.e-ddl {
    border-radius: 8px;
}

.portfolio-ddl.e-ddl.e-input-group.e-control-wrapper,
.saved-search-ddl.e-ddl.e-input-group.e-control-wrapper {
    border-radius: 8px;
}

.portfolio-ddl .e-input,
.saved-search-ddl .e-input {
    padding-left: 12px;
}

.portfolio-ddl .e-input-group-icon,
.saved-search-ddl .e-input-group-icon {
    border-radius: 0 8px 8px 0;
}

/* Disabled state for cascading dropdown */
.saved-search-dropdown .e-ddl.e-disabled {
    opacity: 0.6;
}

/* Filter row layout for portfolio/search dropdowns */
.filter-group.portfolio-search-filter {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.filter-group.portfolio-search-filter .portfolio-dropdown,
.filter-group.portfolio-search-filter .saved-search-dropdown {
    min-width: 180px;
    max-width: 250px;
}

@media (max-width: 768px) {
    .filter-group.portfolio-search-filter {
        flex-direction: column;
    }

    .filter-group.portfolio-search-filter .portfolio-dropdown,
    .filter-group.portfolio-search-filter .saved-search-dropdown {
        max-width: 100%;
        width: 100%;
    }
}

/* ===== Save Search Dialog ===== */

.save-search-dialog .e-dlg-content {
    padding: 1rem;
}

.save-search-dialog .form-group {
    margin-bottom: 1rem;
}

.save-search-dialog .form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.save-search-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-color);
}

.save-search-dialog .e-textbox {
    border-radius: 8px;
}

.save-search-dialog .validation-message {
    font-size: 0.8rem;
    color: #d32f2f;
    margin-top: 4px;
}

[data-theme="dark"] .save-search-dialog .validation-message {
    color: #f44336;
}

/* ===== Marketplace Fieldset ===== */

.marketplace-fieldset {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .marketplace-fieldset {
    border: 1px solid rgba(77, 159, 252, 0.15);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
}

.marketplace-fieldset:hover {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .marketplace-fieldset:hover {
    border-color: rgba(77, 159, 252, 0.28);
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.1);
}

.marketplace-fieldset legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    padding: 4px 12px;
    background: var(--app-primary);
    border-radius: 4px;
}

[data-theme="dark"] .marketplace-fieldset legend {
    background: var(--app-primary-dark);
}

.marketplace-fieldset legend .e-icons {
    color: #FFD700;
    font-size: 0.9rem;
}

/* ===== Create/Edit Portfolio Dialog ===== */

.create-portfolio-dialog .e-dlg-content {
    padding: 1rem;
}

.create-portfolio-dialog .form-group {
    margin-bottom: 1rem;
}

.create-portfolio-dialog .form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.create-portfolio-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-color);
}

.create-portfolio-dialog .e-textbox {
    border-radius: 8px;
}

.create-portfolio-dialog .validation-message {
    font-size: 0.8rem;
    color: #d32f2f;
    margin-top: 4px;
}

[data-theme="dark"] .create-portfolio-dialog .validation-message {
    color: #f44336;
}

.create-portfolio-dialog .marketplace-selector {
    margin-bottom: 1rem;
}

/* ===== Delete Portfolio Dialog ===== */

.delete-portfolio-dialog .warning-text {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

[data-theme="dark"] .delete-portfolio-dialog .warning-text {
    color: #f44336;
}

.delete-portfolio-dialog .portfolio-name-highlight {
    font-weight: 600;
    color: var(--app-primary);
    margin-bottom: 1rem;
}

.delete-portfolio-dialog .loading-searches {
    font-size: 0.875rem;
    color: var(--app-content-text);
    opacity: 0.7;
    font-style: italic;
}

.delete-portfolio-dialog .warning-section {
    margin-top: 1rem;
    padding: 12px;
    background: rgba(211, 47, 47, 0.08);
    border: 1px solid rgba(211, 47, 47, 0.3);
    border-radius: 8px;
}

[data-theme="dark"] .delete-portfolio-dialog .warning-section {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
}

.delete-portfolio-dialog .warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #d32f2f;
    margin: 0 0 8px 0;
    font-size: 0.875rem;
}

[data-theme="dark"] .delete-portfolio-dialog .warning-title {
    color: #f44336;
}

.delete-portfolio-dialog .warning-title .e-icons {
    font-size: 1rem;
}

.delete-portfolio-dialog .searches-to-delete {
    margin: 0;
    padding-left: 24px;
    max-height: 150px;
    overflow-y: auto;
}

.delete-portfolio-dialog .searches-to-delete li {
    font-size: 0.85rem;
    color: var(--app-content-text);
    padding: 2px 0;
}

.delete-portfolio-dialog .searches-to-delete li::marker {
    color: #d32f2f;
}

[data-theme="dark"] .delete-portfolio-dialog .searches-to-delete li::marker {
    color: #f44336;
}

/* ===== Support Request Dialog - Two-Step Feedback ===== */

.support-request-dialog .e-dlg-content {
    padding: 0 1.5rem 1.5rem;
}

/* Subtitle text below the header */
.feedback-subtitle {
    font-size: 0.875rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

/* Header with back button for Step 2 */
.feedback-header-with-back {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feedback-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--app-content-text);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.feedback-back-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .feedback-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Card Grid - vertical stack */
.feedback-card-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual feedback type card */
.feedback-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
}

.feedback-type-card:hover {
    border-color: var(--app-primary);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.1);
    background: var(--app-primary-light);
}

[data-theme="dark"] .feedback-type-card:hover {
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.15);
}

/* Card icon */
.feedback-card-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* Card type accents - left border + icon color */
.feedback-type-card[data-type="bug"] {
    border-left-color: #e53935;
}
.feedback-type-card[data-type="bug"] .feedback-card-icon {
    color: #e53935;
    background: rgba(229, 57, 53, 0.08);
}

.feedback-type-card[data-type="support"] {
    border-left-color: var(--app-primary);
}
.feedback-type-card[data-type="support"] .feedback-card-icon {
    color: var(--app-primary);
    background: var(--app-primary-light);
}

.feedback-type-card[data-type="feature"] {
    border-left-color: #43a047;
}
.feedback-type-card[data-type="feature"] .feedback-card-icon {
    color: #43a047;
    background: rgba(67, 160, 71, 0.08);
}

[data-theme="dark"] .feedback-type-card[data-type="bug"] .feedback-card-icon {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.12);
}

[data-theme="dark"] .feedback-type-card[data-type="feature"] .feedback-card-icon {
    color: #81c784;
    background: rgba(129, 199, 132, 0.12);
}

/* Keep left border color on hover */
.feedback-type-card[data-type="bug"]:hover {
    border-left-color: #e53935;
}
.feedback-type-card[data-type="feature"]:hover {
    border-left-color: #43a047;
}

/* Card text container */
.feedback-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.feedback-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--app-content-text);
}

.feedback-card-desc {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.6;
}

/* Chevron arrow on the right */
.feedback-card-arrow {
    font-size: 0.85rem;
    color: var(--app-content-text);
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.feedback-type-card:hover .feedback-card-arrow {
    opacity: 0.7;
    transform: translateX(2px);
}

/* Step 2 form */
.support-request-dialog .form-group {
    margin-bottom: 1rem;
}

.support-request-dialog .form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.support-request-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border-color);
}

.support-request-dialog .e-textbox {
    border-radius: 8px;
}

.support-request-dialog .validation-message {
    font-size: 0.8rem;
    color: #d32f2f;
    margin-top: 4px;
}

[data-theme="dark"] .support-request-dialog .validation-message {
    color: #f44336;
}

/* Error box for send failures */
.feedback-error-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 1rem;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: var(--radius-md);
    color: #d32f2f;
    font-size: 0.85rem;
    line-height: 1.4;
}

[data-theme="dark"] .feedback-error-box {
    background: rgba(239, 83, 80, 0.1);
    border-color: rgba(239, 83, 80, 0.3);
    color: #ef5350;
}
/* ===== Selector Components ===== */

/* ===== Common Selector Styles ===== */
.selector-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-content-text, #1c1b1f);
}

/* ===== BSR Type Selector ===== */
.bsr-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
}

.bsr-type-selector .e-btn-group {
    width: fit-content;
}

/* ===== Interior Type Selector ===== */
.interior-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Ink Type Selector ===== */
.ink-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
}

.ink-type-selector .e-btn-group {
    width: fit-content;
}

/* ===== VAT Type Selector ===== */
.vat-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Publisher Type Selector ===== */
.publisher-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
}

.publisher-type-selector .e-btn-group {
    width: fit-content;
}

/* ===== Binding Type Selector ===== */
.binding-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
}

.binding-type-selector .e-btn-group {
    width: fit-content;
}

/* ===== Country Selector Buttons ===== */
.country-selector-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

.country-selector-buttons .e-btn-group {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px;
    width: fit-content;
}

.country-selector-buttons .country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

.country-selector-buttons .country-btn .fi {
    font-size: 1.1rem;
    border-radius: 2px;
}

.country-selector-buttons .country-btn .country-code,
.country-selector-buttons .country-btn .country-name {
    font-weight: 500;
    font-size: 0.8rem;
}

.country-selector-buttons .country-buttons-loading {
    font-size: 0.875rem;
    color: var(--app-content-text, #1c1b1f);
    opacity: 0.7;
    padding: 8px 0;
}

/* ===== Keyword Filter Selector ===== */
.keyword-filter-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== TreeView Checkbox Component Styles ===== */
.tree-view-checkbox {
    position: relative;
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-card);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .tree-view-checkbox {
    border: 1px solid #444444;
    background: #2d2d30;
}

/* ===== Spinner Overlay Styles ===== */
.tree-view-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

[data-theme="dark"] .tree-view-spinner-overlay {
    background: rgba(45, 45, 48, 0.85);
}

.tree-view-spinner-overlay .e-icons {
    font-size: 24px;
    color: var(--app-primary);
}

/* Block all interactions when loading */
.tree-view-checkbox.is-loading .tree-view-checkbox-toolbar,
.tree-view-checkbox.is-loading .tree-view-checkbox-content {
    pointer-events: none;
    user-select: none;
}

/* ===== States (Loading/Empty) ===== */
.tree-view-checkbox-loading,
.tree-view-checkbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    gap: 8px;
    color: #666666;
}

[data-theme="dark"] .tree-view-checkbox-empty {
    color: #999999;
}

.tree-view-checkbox-empty .e-icons {
    font-size: 32px;
    opacity: 0.5;
}

/* ===== Content & Scroll Management ===== */
.tree-view-checkbox-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Ridotto il padding per evitare spazio eccessivo */
    padding-bottom: 5px;
}

.tree-view-checkbox .e-treeview {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

    /* FIX CALIBRATO: Spazio ridotto solo dopo l'ultimo elemento assoluto */
    .tree-view-checkbox .e-treeview > .e-list-parent > .e-list-item:last-child {
        margin-bottom: 10px !important;
    }

/* ===== Toolbar Styles ===== */
.tree-view-checkbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--app-border-color);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .tree-view-checkbox-toolbar {
    border-bottom: 1px solid #444444;
    background: rgba(255, 255, 255, 0.03);
}

/* ===== Custom Checkbox Styles (Syncfusion) ===== */
.tree-view-checkbox .e-checkbox-wrapper .e-frame {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--app-border-color);
    background: var(--surface-card);
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .tree-view-checkbox .e-checkbox-wrapper .e-frame {
    border-color: #555;
    background: #3d3d40;
}

.tree-view-checkbox .e-checkbox-wrapper:hover .e-frame {
    border-color: var(--app-primary);
}

.tree-view-checkbox .e-checkbox-wrapper .e-frame.e-check,
.tree-view-checkbox .e-checkbox-wrapper .e-frame.e-stop {
    background: var(--app-primary);
    border-color: var(--app-primary);
}

    .tree-view-checkbox .e-checkbox-wrapper .e-frame.e-check::before {
        color: #ffffff !important;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

/* Focus state */
.tree-view-checkbox .e-checkbox-wrapper .e-frame:focus,
.tree-view-checkbox .e-checkbox-wrapper.e-focus .e-frame {
    box-shadow: 0 0 0 2px rgba(10, 111, 232, 0.25);
}

/* ===== Utility Buttons & Info ===== */
.tree-view-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
    background: var(--surface-card);
    color: var(--app-content-text);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .tree-view-lang-btn:hover {
        background: var(--app-primary-light);
        border-color: var(--app-primary);
        color: var(--app-primary);
    }

    .tree-view-lang-btn .fi {
        font-size: 0.85rem;
        border-radius: 2px;
    }

[data-theme="dark"] .tree-view-lang-btn {
    border-color: #555;
    background: #3d3d40;
}

[data-theme="dark"] .tree-view-lang-btn:hover {
    background: rgba(77, 159, 252, 0.15);
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.tree-view-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: #dc3545;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .tree-view-clear-btn:hover {
        background: #c82333;
    }

.tree-view-max-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #856404;
    font-size: 0.75rem;
}

/* ===== Wrapper Container ===== */
.treeview-wrapper {
    flex: 1;
    min-height: 500px;
    background: var(--surface-card);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.treeview-selection-info .selection-list {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}
/* ===== Error Boundary ===== */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE44MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}
/* ===== Category Search Grid Styles ===== */

.category-search-grid-container {
    width: 100%;
    height: 100%;
}

/* Category Name Cell */
.category-search-grid-container .category-name {
    font-weight: 500;
    color: var(--app-content-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Breadcrumb with text wrap */
.category-search-grid-container .category-breadcrumb-wrap {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
    color: var(--app-content-text);
}

/* Rank Values - Larger font */
.category-search-grid-container .rank-value {
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-content-text);
}

/* Count Values - Larger font */
.category-search-grid-container .count-value {
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-content-text);
}

/* Rating Cell */
.category-search-grid-container .rating-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.category-search-grid-container .rating-stars {
    color: #f59e0b;
    font-size: 1rem;
    letter-spacing: -1px;
}

[data-theme="dark"] .category-search-grid-container .rating-stars {
    color: #fbbf24;
}

.category-search-grid-container .rating-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-content-text);
    opacity: 0.8;
}

.category-search-grid-container .rating-na {
    color: var(--app-content-text);
    opacity: 0.5;
}

/* Grid Customizations */
.category-search-grid-container .e-grid {
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.category-search-grid-container .e-grid .e-headercell {
    background: var(--surface-ground);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--app-content-text);
}

[data-theme="dark"] .category-search-grid-container .e-grid .e-headercell {
    background: rgba(255, 255, 255, 0.04);
}

.category-search-grid-container .e-grid .e-rowcell {
    padding: 10px 12px;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .category-search-grid-container .e-grid .e-rowcell {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Hover state */
.category-search-grid-container .e-grid .e-row:hover .e-rowcell {
    background: rgba(10, 111, 232, 0.04);
}

[data-theme="dark"] .category-search-grid-container .e-grid .e-row:hover .e-rowcell {
    background: rgba(77, 159, 252, 0.08);
}

/* Pager Styles */
.category-search-grid-container .e-grid .e-pager {
    border-top: 1px solid var(--app-border-color);
    background: var(--surface-ground);
}

[data-theme="dark"] .category-search-grid-container .e-grid .e-pager {
    background: rgba(255, 255, 255, 0.02);
}

/* Action Button */
.category-search-grid-container .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-search-grid-container .action-btn:hover {
    background: rgba(10, 111, 232, 0.1);
}

[data-theme="dark"] .category-search-grid-container .action-btn:hover {
    background: rgba(77, 159, 252, 0.15);
}

.category-search-grid-container .action-btn .e-icons {
    font-size: 1.1rem;
    color: var(--app-primary);
}

.category-search-grid-container .view-btn:hover .e-icons {
    color: var(--app-primary-dark);
}

[data-theme="dark"] .category-search-grid-container .view-btn:hover .e-icons {
    color: #4d9ffc;
}

/* Responsive */
@media (max-width: 768px) {
    .category-search-grid-container .e-grid .e-headercell {
        font-size: 0.75rem;
    }

    .category-search-grid-container .e-grid .e-rowcell {
        padding: 8px 10px;
        font-size: 0.8125rem;
    }

    .category-search-grid-container .rating-cell {
        flex-direction: column;
        gap: 2px;
    }
}
/* ===== Image Carousel Component ===== */

.image-carousel-container {
    width: 100%;
    height: 100%;
}

.image-carousel .e-carousel-items,
.image-carousel .e-carousel-navigators {
    height: calc(100% - 6rem);
}

.image-carousel .img-container {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-secondary, #f5f5f5);
}

.image-carousel .img-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Navigation buttons */
.image-carousel .e-carousel-navigators .e-previous,
.image-carousel .e-carousel-navigators .e-next,
.image-carousel .e-carousel-navigators .nav-btn {
    padding: 0;
}

.image-carousel .e-carousel-navigators .nav-btn:active,
.image-carousel .e-carousel-navigators .nav-btn:focus,
.image-carousel .e-carousel-navigators .nav-btn:hover {
    background-color: transparent !important;
    color: inherit;
}

.image-carousel .e-carousel-navigators svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-width: 8px;
    height: 2rem;
    vertical-align: middle;
    width: 2rem;
}

.image-carousel .e-carousel-navigators .e-previous svg {
    transform: rotate(180deg);
}

/* Indicators container - spacing from main image */
.image-carousel .e-carousel-indicators {
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.e-carousel .e-carousel-indicators.e-default .e-indicator-bars {
    gap: 0.5rem;
}

/* Indicator thumbnails */
.image-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
    height: 70px;
    width: 85px;
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    opacity: 0.6;
    transition: var(--transition-fast, 0.15s ease);
    cursor: pointer;
    border: 2px solid transparent;
}

.image-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.image-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
    opacity: 1;
    border-color: var(--app-primary, #0a6fe8);
}

/* ===== Image Carousel Dialog ===== */

.image-carousel-dialog .e-dlg-header-content {
    display: flex;
    align-items: center;
}

.image-carousel-dialog .e-dlg-header {
    flex: 1;
    text-align: center;
    order: 1;
}

.image-carousel-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    order: 2;
    margin-left: 0;
}

.image-carousel-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.carousel-dialog-content {
    height: 100%;
    width: 100%;
}

.image-carousel-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--app-border-color, #e0e0e0);
}

.image-carousel-dialog .e-footer-content .e-btn {
    background-color: var(--app-primary, #0a6fe8) !important;
    color: #fff !important;
    border: none;
    font-weight: 500;
    padding: 8px 20px;
}

.image-carousel-dialog .e-footer-content .e-btn:hover {
    background-color: var(--app-primary-dark, #2d3a9e) !important;
}
/* ===== Book Detail Dialog ===== */

/* Center dialog on viewport (Target="body" handles overlay positioning) */
.book-detail-dialog.e-dialog {
    max-width: 1265px;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.book-detail-dialog .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

/* ===== Header: Centered vertical layout ===== */
.book-detail-dialog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding-bottom: 4px;
}

/* ===== Carousel: single-row strip with nav arrows ===== */
.header-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* --- Carousel navigation arrows --- */
.carousel-nav-btn.e-btn {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 16px !important;
    border-radius: 50% !important;
    align-self: center;
    margin-top: 10px;
    background: var(--surface-secondary) !important;
    color: var(--app-content-text) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.carousel-nav-btn.e-btn:hover {
    background: var(--app-primary-light) !important;
    transform: scale(1.1);
}

[data-theme="dark"] .carousel-nav-btn.e-btn {
    background: var(--surface-elevated) !important;
}

[data-theme="dark"] .carousel-nav-btn.e-btn:hover {
    background: var(--app-primary-light) !important;
}

/* --- Thumbnail strip (single row) --- */
/* Fixed height prevents the header from resizing during thumbnail transitions.
   Value = active thumb height (106px) + translateY lift (3px) + top padding (14px)
           + bottom padding (10px) = 133px.
   max-width constrains visible thumbnails to ~7-8, the rest are reachable
   via nav arrows + programmatic scrollIntoView. */
.header-thumbnail-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 480px;
    padding: 14px 4px 10px;
    align-items: flex-end;
    height: 133px;
}

.header-thumbnail-strip::-webkit-scrollbar {
    display: none;
}

/* --- Individual thumbnails --- */
.strip-thumb {
    flex-shrink: 0;
    width: 46px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    position: relative;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                border-color 0.2s ease,
                border-radius 0.25s ease,
                box-shadow 0.3s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.strip-thumb:not(.strip-thumb--active):hover {
    opacity: 0.85;
    border-color: rgba(10, 111, 232, 0.4);
    transform: translateY(-2px);
}

[data-theme="dark"] .strip-thumb:not(.strip-thumb--active):hover {
    border-color: rgba(77, 159, 252, 0.4);
}

.strip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.strip-thumb:has(.strip-thumb-placeholder) {
    background: var(--surface-secondary);
}

.strip-thumb-placeholder {
    font-size: 16px;
    color: #9e9e9e;
}

[data-theme="dark"] .strip-thumb-placeholder {
    color: #6c757d;
}

/* --- Active (selected) thumbnail: larger with decorative frame --- */
.strip-thumb--active {
    width: 76px;
    height: 106px;
    opacity: 1;
    border: 2.5px solid var(--app-primary);
    border-radius: var(--radius-md);
    box-shadow:
        0 6px 20px rgba(10, 111, 232, 0.22),
        0 0 0 3px rgba(10, 111, 232, 0.08);
    cursor: default;
    transform: translateY(-3px);
}

[data-theme="dark"] .strip-thumb--active {
    border-color: var(--app-primary);
    box-shadow:
        0 6px 20px rgba(77, 159, 252, 0.28),
        0 0 0 3px rgba(77, 159, 252, 0.12);
}

/* Glass highlight on top edge of active thumbnail */
.strip-thumb--active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    pointer-events: none;
}

/* ===== Solo cover (single book, no carousel) ===== */
.header-cover-solo {
    padding: 8px 0 4px;
}

.header-cover-solo img {
    width: 76px;
    height: 106px;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 2.5px solid var(--app-primary);
    box-shadow:
        0 6px 20px rgba(10, 111, 232, 0.22),
        0 0 0 3px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .header-cover-solo img {
    box-shadow:
        0 6px 20px rgba(77, 159, 252, 0.28),
        0 0 0 3px rgba(77, 159, 252, 0.12);
}

/* ===== Title + meta line ===== */
.header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-width: 0;
}

.book-detail-dialog-header .header-title {
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    color: var(--app-content-text);
    max-width: 90%;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.book-detail-dialog-header .header-asin {
    font-size: 0.78rem;
    color: #6c757d;
    font-family: monospace;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .book-detail-dialog-header .header-asin {
    color: #9e9e9e;
}

.header-meta-dot {
    font-size: 0.85rem;
    color: #9e9e9e;
    line-height: 1;
}

.header-meta .nav-counter {
    font-size: 0.78rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-theme="dark"] .header-meta .nav-counter {
    color: #9e9e9e;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .strip-thumb {
        transition: none;
    }
}

/* ===== Footer ===== */
.book-detail-dialog .e-footer-content {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--app-border-color);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .book-detail-dialog {
        width: 95vw !important;
        height: 90vh !important;
    }

    .strip-thumb {
        width: 38px;
        height: 52px;
    }

    .strip-thumb--active {
        width: 60px;
        height: 84px;
    }

    .header-thumbnail-strip {
        max-width: 300px;
        height: 111px;
    }

    .book-detail-dialog-header .header-title {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .header-meta .nav-counter {
        font-size: 0.72rem;
    }
}
/* ===== Book Keywords Grid =====
   Keywords a book ranks for, shown in the Keywords tab of the book detail row.
   Theme-aware through the --app-* / --surface-* variables in base/_variables.css. */

.book-detail-tabs .keywords-tab-content {
    min-height: 200px;
}

.book-keywords-grid {
    width: 100%;
}

.book-keywords-grid .keyword-filter-shell {
    padding: 8px 8px 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: keyword-filters;
}

.book-keywords-grid .keyword-filter-header {
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

.book-keywords-grid .keyword-filter-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    min-width: 0;
}

.book-keywords-grid .keyword-filter-count {
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

.book-keywords-grid .keyword-filter-fields {
    --metric-track-scale: 1;
    display: grid;
    grid-template-columns: minmax(0, calc(100% * var(--metric-track-scale)));
    gap: 32px;
    color: var(--app-content-text);
}

.book-keywords-grid .keyword-filter-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.book-keywords-grid .filter-actions {
    --filter-action-scale: 0.85;
}

.book-keywords-grid .filter-actions .app-icon--search-action {
    width: 23.8px;
    height: 23.8px;
}

.book-keywords-grid .filter-actions .app-icon--reset-action {
    width: 24.65px;
    height: 24.65px;
}

.book-keywords-grid .keyword-filter-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
}

.book-keywords-grid .keyword-filter-section,
.book-keywords-grid .keyword-filter-bounds > div {
    min-width: 0;
}

@container (max-width: 760px) {
    .book-keywords-grid .keyword-filter-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

.book-keywords-grid .keyword-filter-range {
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    border: 0;
}

/* Match Search's fading blue line and gold diamond between filter types.
   Position within the gap; stacked metrics use a horizontal divider. */
.book-keywords-grid .keyword-filter-section {
    container: keyword-metrics / inline-size;
    --metric-divider-color: rgba(10, 111, 232, 0.4);
}

[data-theme="dark"] .book-keywords-grid .keyword-filter-section {
    --metric-divider-color: rgba(77, 159, 252, 0.4);
}

.book-keywords-grid .keyword-filter-range + .keyword-filter-range {
    position: relative;
    --metric-line-inset: -16px 6% auto 6%;
    --metric-line-width: auto;
    --metric-line-height: 1px;
    --metric-line-direction: to right;
    --metric-diamond-top: -16px;
    --metric-diamond-left: 50%;
}

.book-keywords-grid .keyword-filter-range + .keyword-filter-range::before {
    content: "";
    position: absolute;
    inset: var(--metric-line-inset);
    width: var(--metric-line-width);
    height: var(--metric-line-height);
    background: linear-gradient(var(--metric-line-direction), transparent 0%,
        var(--metric-divider-color) 30%, var(--metric-divider-color) 70%, transparent 100%);
    pointer-events: none;
}

.book-keywords-grid .keyword-filter-range + .keyword-filter-range::after {
    content: "";
    position: absolute;
    top: var(--metric-diamond-top);
    left: var(--metric-diamond-left);
    width: 6px;
    height: 6px;
    background: #FFD700;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 2px var(--surface-card);
    pointer-events: none;
}

@container keyword-metrics (min-width: 392px) {
    .book-keywords-grid .keyword-filter-fields {
        grid-template-columns: repeat(2, minmax(0, calc((100% - 32px) / 2 * var(--metric-track-scale))));
    }

    .book-keywords-grid .keyword-filter-range:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@container keyword-metrics (min-width: 604px) {
    .book-keywords-grid .keyword-filter-fields:has(> .keyword-filter-range:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, calc((100% - 64px) / 3 * var(--metric-track-scale))));
    }

    .book-keywords-grid .keyword-filter-range:nth-child(3) {
        grid-column: auto;
    }
}

@container keyword-metrics (min-width: 392px) {
    .book-keywords-grid .keyword-filter-range:nth-child(2) {
        --metric-line-inset: 6% auto 6% -16px;
        --metric-line-width: 1px;
        --metric-line-height: auto;
        --metric-line-direction: to bottom;
        --metric-diamond-top: 50%;
        --metric-diamond-left: -16px;
    }
}

@container keyword-metrics (min-width: 604px) {
    .book-keywords-grid .keyword-filter-range:nth-child(3) {
        --metric-line-inset: 6% auto 6% -16px;
        --metric-line-width: 1px;
        --metric-line-height: auto;
        --metric-line-direction: to bottom;
        --metric-diamond-top: 50%;
        --metric-diamond-left: -16px;
    }
}

.book-keywords-grid .keyword-filter-section .keyword-filter-range > legend {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
    text-transform: none;
    letter-spacing: normal;
    display: block;
    max-width: 100%;
    white-space: normal;
}

.book-keywords-grid .keyword-filter-bounds {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.book-keywords-grid .keyword-filter-search {
    width: 42%;
    min-width: 0;
    box-sizing: border-box;
}

.book-keywords-grid .keyword-filter-text-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}

/* Compact the whole metric track, keeping the divider centred in the 32px gap. */
@container keyword-filters (min-width: 761px) {
    .book-keywords-grid .keyword-filter-fields {
        --metric-track-scale: 0.42;
    }
}

@container keyword-filters (max-width: 760px) {
    .book-keywords-grid .keyword-filter-search {
        width: 100%;
    }
}

/* Wide detail panels: all four sections on one row. Compact the sections
   themselves so the space beside each divider stays symmetric. */
@container keyword-filters (min-width: 1600px) {
    .book-keywords-grid .keyword-filter-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
    }

    .book-keywords-grid .keyword-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .book-keywords-grid .keyword-filter-fields:has(> .keyword-filter-range:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .book-keywords-grid .keyword-filter-range:nth-child(3) {
        grid-column: auto;
    }

    .book-keywords-grid .keyword-filter-range + .keyword-filter-range {
        --metric-line-inset: 6% auto 6% -16px;
        --metric-line-width: 1px;
        --metric-line-height: auto;
        --metric-line-direction: to bottom;
        --metric-diamond-top: 50%;
        --metric-diamond-left: -16px;
    }
}

.book-keywords-grid .keyword-filter-error {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--app-error);
}

.book-keywords-grid .keyword-text {
    font-weight: 500;
    word-break: break-word;
}

.book-keywords-grid .keyword-metric,
.book-keywords-grid .keyword-rank {
    font-variant-numeric: tabular-nums;
}

.book-keywords-grid .keyword-rank {
    font-weight: 600;
}

/* --app-warning (#ff9800) on white is ~2.1:1 and fails WCAG AA for small text,
   so the light theme darkens it; dark mode already has enough contrast. */
.book-keywords-grid .keyword-rank.paid {
    font-weight: 500;
    color: color-mix(in srgb, var(--app-warning) 75%, black);
}

/* An unknown metric renders as an em dash: NULL means "we do not know",
   never zero. Mute it so it does not read as a real value - but keep it legible:
   an invisible placeholder reads as an empty cell, which is the very ambiguity
   the em dash exists to remove. */
.book-keywords-grid .keyword-metric.na,
.book-keywords-grid .keyword-rank.na {
    color: var(--app-content-text);
    opacity: 0.45;
    font-weight: 400;
}

.book-keywords-grid .keyword-badges {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.book-keywords-grid .keyword-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.book-keywords-grid .keyword-badge.best-seller {
    background-color: var(--app-primary-light);
    color: var(--app-primary-dark);
}

.book-keywords-grid .keyword-badge.amazon-choice {
    /* Derived from the token, not the light-theme literal, so the tint follows the theme. */
    background-color: color-mix(in srgb, var(--app-warning) 15%, transparent);
    color: color-mix(in srgb, var(--app-warning) 75%, black);
}

.book-keywords-grid .keywords-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--app-content-text);
    opacity: 0.7;
}

.book-keywords-grid .keywords-loading {
    position: relative;
    min-height: 120px;
}

.book-keywords-grid .keywords-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--app-error);
}

/* Sample-data banner. Deliberately NOT .keywords-error: that one is red, centred and takes
   the grid's place because it means "the fetch failed". This is informational and sits
   above real content, so it has to read as a note, not as a failure. */
.book-keywords-grid .keywords-sandbox-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--app-warning);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--app-warning) 12%, transparent);
    color: color-mix(in srgb, var(--app-warning) 80%, black);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.book-keywords-grid .keyword-money,
.book-keywords-grid .keyword-score,
.book-keywords-grid .keyword-trend {
    font-variant-numeric: tabular-nums;
}

.book-keywords-grid .keyword-money {
    font-weight: 500;
}

/* Sign plus colour: the arrow of the number alone is easy to misread at this size. */
.book-keywords-grid .keyword-trend.up {
    color: var(--app-success);
}

.book-keywords-grid .keyword-trend.down {
    color: var(--app-error);
}

/* Column headers at 88% of the theme size (0.875rem -> 0.77rem), so the headers stay
   compact without becoming hard to read. The theme sets the size on .e-headercelldiv rather than on .e-headercell,
   so both are declared; the values are absolute and not em, because .e-headertext is
   nested inside .e-headercelldiv and a relative value would compound to 0.64. The frozen
   column's header uses the same .e-headercelldiv and is covered by this. Sort and filter
   icons carry their own font-size and are deliberately left alone. */
.book-keywords-grid .e-grid .e-headercell,
.book-keywords-grid .e-grid .e-headercell .e-headercelldiv,
.book-keywords-grid .e-grid .e-headercell .e-stackedheadercelldiv,
.book-keywords-grid .e-grid .e-headercell .e-headertext {
    font-size: 0.77rem;
    line-height: 1.2;
}

/* ===== Dark Theme Override =====
   On a dark ground --app-warning (#ffb74d) already clears WCAG AA, so the darkening
   applied for the light theme would only reduce contrast. Use the token as-is.
   Likewise --app-primary-dark is too close to the tinted background here. */
[data-theme="dark"] .book-keywords-grid .keyword-rank.paid,
[data-theme="dark"] .book-keywords-grid .keyword-badge.amazon-choice {
    color: var(--app-warning);
}

[data-theme="dark"] .book-keywords-grid .keyword-badge.best-seller {
    color: var(--app-primary);
}

[data-theme="dark"] .book-keywords-grid .keywords-sandbox-notice {
    color: var(--app-warning);
}
/* ===== Grid Loading Skeleton ===== */

.grid-loading-skeleton {
    background: var(--surface-card, #fff);
    border: 1px solid var(--app-border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    padding: 8px;
}

.skeleton-header-row {
    margin-bottom: 12px;
}

.skeleton-data-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--app-border-color, #e0e0e0);
}

.skeleton-data-row:last-child {
    border-bottom: none;
}

/* Skeleton cell size variants */
.skeleton-cell-sm {
    flex-shrink: 0;
}

.skeleton-cell-md {
    flex-shrink: 0;
}

.skeleton-cell-lg {
    flex: 1;
    min-width: 150px;
}

.skeleton-cell-img {
    flex-shrink: 0;
}
/* ===== Workspace Bar ===== */
/* Horizontal bar for Portfolio & Saved Search management above filters */

/* Container that wraps hint + bar */
.workspace-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
}

.workspace-container--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* Hint label above the workspace bar */
.workspace-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.workspace-hint .e-icons {
    font-size: 1rem;
    color: #FFD700;
}

[data-theme="dark"] .workspace-hint {
    opacity: 0.6;
}

.workspace-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Center the workspace bar in its parent */
.workspace-container .workspace-bar {
    display: flex;
    width: fit-content;
    margin: 0;
}

[data-theme="dark"] .workspace-bar {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(77, 159, 252, 0.25);
}

.workspace-bar:hover {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .workspace-bar:hover {
    border-color: rgba(77, 159, 252, 0.35);
    box-shadow: 0 2px 12px rgba(77, 159, 252, 0.15);
}

/* ===== Workspace Group ===== */

.workspace-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 360px;
}

.workspace-group--disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== Group Label ===== */

.workspace-group__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-primary-dark);
    white-space: nowrap;
    user-select: none;
}

[data-theme="dark"] .workspace-group__label {
    color: var(--app-primary);
}

.workspace-group__label .e-icons {
    font-size: 0.9rem;
    color: #FFD700;
}

/* ===== Group Dropdown ===== */

.workspace-group__dropdown {
    flex: 0 1 auto;
    min-width: 260px;
    max-width: 358px;
}

.workspace-group__dropdown .portfolio-dropdown,
.workspace-group__dropdown .saved-search-dropdown {
    min-width: 0;
    gap: 4px;
}

.workspace-group__dropdown .dropdown-label {
    display: none;
}

/* Make Syncfusion dropdown fill container */
.workspace-group__dropdown .e-ddl.e-input-group {
    width: 100% !important;
}

/* ===== Group Actions ===== */

.workspace-group__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
    /* Reserve fixed width to prevent layout shift when buttons appear/disappear.
       Portfolio group: 1 btn (create) or 2 btns (create + delete) = max 70px.
       Search group: 2 btns (new + save) or 3 btns (new + save + delete) = max 108px.
       Use the larger value; smaller groups just have trailing space. */
    min-width: 70px;
}

.workspace-group--search .workspace-group__actions {
    min-width: 108px;
}

/* Hidden but space-reserving: keeps layout stable when buttons appear/disappear */
.workspace-actions--hidden {
    visibility: hidden;
    pointer-events: none;
}

/* ===== Workspace Buttons ===== */

.workspace-btn.e-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.workspace-btn.e-btn .e-btn-icon {
    color: #ffffff !important;
    font-size: 13px;
    margin: 0;
}

.workspace-btn.e-btn .workspace-btn__icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0;
}

.workspace-btn.e-btn .workspace-btn__icon--delete {
    width: 28.75px;
    height: 28.75px;
}

.workspace-btn.e-btn:active {
    transform: scale(0.95);
}

/* Primary button */
.workspace-btn--primary.e-btn {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.workspace-btn--primary.e-btn:hover {
    background: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover) !important;
}

/* Danger button */
.workspace-btn--danger.e-btn {
    background: var(--app-error) !important;
    border-color: var(--app-error) !important;
}

.workspace-btn--danger.e-btn:hover {
    background: #d32f2f !important;
    border-color: #d32f2f !important;
}

[data-theme="dark"] .workspace-btn--danger.e-btn:hover {
    background: #e53935 !important;
    border-color: #e53935 !important;
}

/* ===== Workspace Divider (vertical, inside bar) ===== */

.workspace-divider {
    flex: 0 0 auto;
    width: 2px;
    height: 36px;
    background: rgba(10, 111, 232, 0.4);
    border-radius: 1px;
    margin: 0 12px;
}

[data-theme="dark"] .workspace-divider {
    background: rgba(77, 159, 252, 0.5);
}

/* ===== Workspace Separator (horizontal, below container) ===== */

.workspace-separator {
    width: 100%;
    max-width: 800px;
    height: 1px;
    margin: 4px auto 12px auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(10, 111, 232, 0.3) 20%,
        rgba(10, 111, 232, 0.5) 50%,
        rgba(10, 111, 232, 0.3) 80%,
        transparent 100%
    );
    border-radius: 1px;
}

[data-theme="dark"] .workspace-separator {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(77, 159, 252, 0.25) 20%,
        rgba(77, 159, 252, 0.4) 50%,
        rgba(77, 159, 252, 0.25) 80%,
        transparent 100%
    );
}

/* ===== Responsive: Stack on Mobile ===== */

@media (max-width: 900px) {
    .workspace-bar,
    .search-page > .workspace-bar {
        width: auto;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px;
    }

    .workspace-group {
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 8px;
        min-width: auto;
    }

    .workspace-group__dropdown {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: 100%;
    }

    .workspace-group__actions {
        margin-left: auto;
    }

    .workspace-divider {
        width: 100%;
        height: 1px;
        margin: 4px 0;
    }
}

@media (max-width: 480px) {
    .workspace-group {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-group__label {
        margin-bottom: 4px;
    }

    .workspace-group__dropdown {
        min-width: 100%;
    }

    .workspace-group__actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}
/* ===== CategoryCheckboxGrid Component Styles ===== */

/* Container */
.category-checkbox-grid {
    position: relative;
    border: 1px solid var(--app-border-color);
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-card);
    display: flex;
    flex-direction: column;
}

[data-theme="dark"] .category-checkbox-grid {
    border-color: #444444;
    background: #2d2d30;
}

/* ===== Loading State ===== */
.category-checkbox-grid__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    gap: 8px;
    color: #666666;
}

[data-theme="dark"] .category-checkbox-grid__loading {
    color: #999999;
}

.category-checkbox-grid__loading .e-icons {
    font-size: 24px;
    color: var(--app-primary);
}

/* ===== Empty State ===== */
.category-checkbox-grid__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    gap: 8px;
    color: #666666;
}

[data-theme="dark"] .category-checkbox-grid__empty {
    color: #999999;
}

.category-checkbox-grid__empty .e-icons {
    font-size: 32px;
    opacity: 0.5;
}

/* ===== Toolbar (Clear Button) ===== */
.category-checkbox-grid__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--app-border-color);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .category-checkbox-grid__toolbar {
    border-bottom-color: #444444;
    background: rgba(255, 255, 255, 0.03);
}

/* ===== Grid Content ===== */
.category-checkbox-grid__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 12px;
    overflow-y: auto;
    max-height: 400px;
}

/* ===== Individual Checkbox Item ===== */
.category-checkbox-grid__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
    position: relative;
}

.category-checkbox-grid__item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .category-checkbox-grid__item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.category-checkbox-grid__item.is-checked {
    background: var(--app-primary-light);
}

[data-theme="dark"] .category-checkbox-grid__item.is-checked {
    background: rgba(77, 159, 252, 0.12);
}

/* Hide native checkbox */
.category-checkbox-grid__item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom checkmark */
.category-checkbox-grid__checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    border: 2px solid var(--app-border-color);
    background: var(--surface-card);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

[data-theme="dark"] .category-checkbox-grid__checkmark {
    border-color: #555;
    background: #3d3d40;
}

.category-checkbox-grid__item:hover .category-checkbox-grid__checkmark {
    border-color: var(--app-primary);
}

/* Checked state */
.category-checkbox-grid__item.is-checked .category-checkbox-grid__checkmark {
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.category-checkbox-grid__item.is-checked .category-checkbox-grid__checkmark::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
}

/* Partial state (some descendants checked) - used by CategoryFilterBand */
.category-checkbox-grid__item.is-partial {
    background: var(--app-primary-light);
}

[data-theme="dark"] .category-checkbox-grid__item.is-partial {
    background: rgba(77, 159, 252, 0.12);
}

.category-checkbox-grid__item.is-partial .category-checkbox-grid__checkmark {
    background: var(--app-primary);
    border-color: var(--app-primary);
}

.category-checkbox-grid__item.is-partial .category-checkbox-grid__checkmark::after {
    content: '';
    display: block;
    width: 8px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

/* Focus state (keyboard accessibility) */
.category-checkbox-grid__item input[type="checkbox"]:focus-visible + .category-checkbox-grid__checkmark {
    box-shadow: 0 0 0 2px rgba(10, 111, 232, 0.25);
}

[data-theme="dark"] .category-checkbox-grid__item input[type="checkbox"]:focus-visible + .category-checkbox-grid__checkmark {
    box-shadow: 0 0 0 2px rgba(77, 159, 252, 0.35);
}

/* Label text */
.category-checkbox-grid__label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--app-content-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .category-checkbox-grid__label {
    color: #e0e0e0;
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1024px) {
    .category-checkbox-grid__content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .category-checkbox-grid__content {
        grid-template-columns: 1fr;
    }
}
/* ===== Category Filter Band + Overlay Panel ===== */
/* Horizontal macro-category band with a "full tree" button straddling its bottom edge,
   which opens the whole category tree as an overlay: a left-anchored drawer on desktop,
   a bottom sheet under 1000px. */

/* Accent for both title chips' icons and the "full tree" button's icon. Declared on both
   roots because the overlay panel is a sibling of the band, not a descendant. */
.category-band,
.category-panel {
    --category-accent: #ffd700;
}

/* The band itself - styled like the surrounding filter fieldsets. */
.category-band {
    position: relative;
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    /* Bottom padding clears the inner half of the button that straddles the edge. */
    padding: 10px 16px 32px;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    box-sizing: border-box;
    min-width: 0;
}

.category-band:hover {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .category-band {
    border-color: rgba(77, 159, 252, 0.18);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.03) 0%, rgba(5, 74, 158, 0.06) 100%);
}

.category-band__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.category-band__title,
.category-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--app-primary);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
}

.category-band__title .e-icons,
.category-panel__title .e-icons {
    color: var(--category-accent);
    font-size: 0.9rem;
}

/* Panel header: same chip as the band's, so the overlay reads as the same section
   opened deeper rather than a different screen. flex-shrink keeps it visible while
   the tree below takes the remaining height. */
.category-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* ===== "Full tree" button - the only opener for the panel ===== */
/* Straddles the box's bottom border, centred: half inside the macro box, half out.
   translateY(50%) puts the button's midpoint exactly on the edge. */
.category-band__footer {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: 1;
}

/* Same look as .filter-actions .btn-primary (the Search button), so the two read as the
   same class of control. The icon carries the header accent, like the title chip's. */
.category-band__viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* The 3px ring in the card surface keeps the button from merging into the
       border it overlaps. --surface-card already swaps per theme. */
    box-shadow: 0 0 0 3px var(--surface-card), 0 2px 8px rgba(10, 111, 232, 0.3);
}

/* The SVG inherits currentColor for its strokes, so override it explicitly. */
.category-band__viewall svg {
    color: var(--category-accent);
    flex-shrink: 0;
}

[data-theme="dark"] .category-band__viewall {
    background: linear-gradient(135deg, var(--app-primary) 0%, #4d9ffc 100%);
    box-shadow: 0 0 0 3px var(--surface-card), 0 2px 8px rgba(77, 159, 252, 0.35);
}

.category-band__viewall:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--surface-card), 0 4px 12px rgba(10, 111, 232, 0.4);
}

[data-theme="dark"] .category-band__viewall:hover {
    box-shadow: 0 0 0 3px var(--surface-card), 0 4px 12px rgba(77, 159, 252, 0.45);
}

.category-band__viewall:active,
.category-band__viewall.is-open {
    transform: translateY(0);
    box-shadow: 0 0 0 3px var(--surface-card), 0 2px 6px rgba(10, 111, 232, 0.25);
}

.category-band__viewall-badge {
    background: var(--category-accent);
    color: #3d2f00;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 10px;
}

.category-band__body {
    position: relative;
}

.category-band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 12px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Look comes from .category-checkbox-grid__item (components/_categoryCheckboxGrid.css).
   Only the band's differences live here: long names wrap instead of being truncated,
   with the checkbox pinned to the first line. */
.category-band__item {
    align-items: flex-start;
    min-width: 0;
}

.category-band__item .category-checkbox-grid__checkmark {
    margin-top: -1px;
}

.category-band__item .category-checkbox-grid__label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    min-width: 0;
}

.category-band__status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    font-size: 0.875rem;
    opacity: 0.7;
}

/* ===== Overlay panel ===== */
/* Positioned against the filters card, so it starts exactly at the card's left edge
   and never shifts the page beneath it. */
.filters-card {
    position: relative;
}

.category-panel-root {
    position: absolute;
    inset: 0;
    z-index: 60; /* above the search overlays (10-12), below .top-header (1001) */
    pointer-events: none;
}

.category-panel-root.is-open {
    pointer-events: auto;
}

.category-panel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}

.category-panel-root.is-open .category-panel__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.category-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px;
    background: var(--surface-card);
    border-right: 1px solid var(--app-border-color);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    /* Hidden by transform rather than display:none, so the SfTreeView keeps a valid layout
       box between openings. Note this only holds while the filters card is expanded: the
       card collapses with .filters-content-hidden { display: none }, which does hide the
       tree - same as before this refactor, when the tree lived directly in the card. */
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-panel-root.is-open .category-panel {
    transform: translateX(0);
}

[data-theme="dark"] .category-panel {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4);
}

/* The tree fills the panel and scrolls inside it. */
.category-panel .tree-view-checkbox {
    flex: 1;
    min-height: 0;
}

/* ===== Narrow screens: bottom sheet ===== */
/* Real viewport width, not device orientation. 999.98px avoids a double match with
   the desktop rule on fractional-pixel (scaled) displays. */
@media (max-width: 999.98px) {
    /* .page-content carries transform: translateX(0px), which would make it the
       containing block for the fixed-position sheet below. Drop the no-op transform
       while the panel is open so the sheet anchors to the viewport instead. */
    .page-content:has(.category-panel-root.is-open) {
        transform: none;
    }

    .category-panel-root {
        position: fixed;
        z-index: 1000;
    }

    .category-panel__backdrop {
        position: fixed;
    }

    .category-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(85vh, 100%);
        border-right: 0;
        border-top: 1px solid var(--app-border-color);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
        transform: translateY(100%);
    }

    .category-panel-root.is-open .category-panel {
        transform: translateY(0);
    }

    /* Keep the straddle, just shrink the pill: a full-width button cannot sit on an edge. */
    .category-band__viewall {
        padding: 10px 18px;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .category-panel,
    .category-panel__backdrop,
    .category-band__viewall {
        transition: none;
    }
}

/* ===== Disabled state (no marketplace selected) ===== */
/* Mirrors .fieldset-obscured, which only applies to .filter-fieldset elements. */
.category-band.is-obscured {
    pointer-events: none;
    opacity: 0.6;
    filter: grayscale(20%);
}

.category-band.is-obscured .category-band__title {
    background: #9e9e9e;
}

.category-band.is-obscured .category-band__title .e-icons {
    color: #e0e0e0;
}

.category-band.is-obscured .category-band__viewall {
    background: #bdbdbd;
    color: #757575;
    box-shadow: none;
}

.category-band.is-obscured .category-band__viewall svg,
.category-band.is-obscured .category-band__viewall-badge {
    color: #757575;
    background: none;
}

.category-band.is-obscured .category-band__viewall .app-icon {
    filter: grayscale(1);
}
/* ===== App Toast Notifications ===== */

.app-toast-container {
    position: fixed;
    top: calc(var(--header-height, 50px) + 16px);
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

.app-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 72px;
    border-radius: var(--radius-lg, 12px);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: toast-slide-in 0.3s ease-out forwards;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    will-change: transform, opacity;
    overflow: hidden;
    opacity: 0.85;
}

/* --- Logo Watermark (left background) --- */

.app-toast::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    background: url("../../images/NewLogoWhite.png") no-repeat center / contain;
    opacity: 0.2;
    pointer-events: none;
}

.app-toast--exit {
    /* Duration must match ExitAnimationMs in AppToast.razor */
    animation: toast-slide-out 0.3s ease-in forwards;
}

/* --- Type Gradients --- */

.app-toast--success {
    background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
}

.app-toast--error {
    background: linear-gradient(135deg, #e53935 0%, #ef5350 100%);
}

.app-toast--warning {
    background: linear-gradient(135deg, #f9a825 0%, #fdd835 100%);
}

.app-toast--info {
    background: linear-gradient(135deg, #0288d1 0%, #29b6f6 100%);
}

/* --- Dark Mode Gradients --- */

[data-theme="dark"] .app-toast--success {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
}

[data-theme="dark"] .app-toast--error {
    background: linear-gradient(135deg, #c62828 0%, #e53935 100%);
}

[data-theme="dark"] .app-toast--warning {
    background: linear-gradient(135deg, #f57f17 0%, #f9a825 100%);
}

[data-theme="dark"] .app-toast--info {
    background: linear-gradient(135deg, #01579b 0%, #0288d1 100%);
}

/* --- Icon (Syncfusion e-icons) --- */

.app-toast__icon {
    flex-shrink: 0;
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Message --- */

.app-toast__message {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* --- Close Button --- */

.app-toast__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: #fff;
    transition: background var(--transition-fast, 0.15s ease);
}

.app-toast__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.app-toast__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.app-toast__close .e-icons {
    font-size: 12px;
    color: #fff;
}

/* --- Animations --- */

@keyframes toast-slide-in {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* --- Responsive --- */

@media (max-width: 480px) {
    .app-toast-container {
        top: calc(var(--header-height, 50px) + 8px);
        right: 8px;
        left: 8px;
        max-width: none;
        width: auto;
    }
}
/* ===== Syncfusion Component Overrides ===== */

/* ===== Input/Dropdown Outlined Style ===== */
.e-input-group:not(.e-float-icon-left),
.e-input-group.e-control-wrapper:not(.e-float-icon-left) {
    border: 2px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: var(--input-bg);
}

[data-theme="dark"] .e-input-group:not(.e-float-icon-left),
[data-theme="dark"] .e-input-group.e-control-wrapper:not(.e-float-icon-left) {
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: var(--input-bg);
}

.e-input-group:not(.e-float-icon-left)::before,
.e-input-group:not(.e-float-icon-left)::after,
.e-input-group.e-control-wrapper:not(.e-float-icon-left)::before,
.e-input-group.e-control-wrapper:not(.e-float-icon-left)::after {
    display: none;
}

.e-input-group:not(.e-disabled):hover,
.e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: rgba(10, 111, 232, 0.5);
    border-width: 2px !important;
}

[data-theme="dark"] .e-input-group:not(.e-disabled):hover,
[data-theme="dark"] .e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: rgba(77, 159, 252, 0.5);
    border-width: 2px !important;
}

.e-input-group.e-input-focus:not(.e-disabled),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-disabled) {
    border-color: var(--app-primary);
    border-width: 2px !important;
    box-shadow: 0 0 0 1px var(--app-primary);
}

/* Fix: rimuove border-bottom-color di Syncfusion Material theme */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-input-group.e-disabled,
.e-input-group.e-control-wrapper.e-disabled {
    border-bottom-color: inherit !important;
}

/* ===== Primary Button ===== */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .e-btn.e-primary,
[data-theme="dark"] .e-css.e-btn.e-primary {
    color: #ffffff !important;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover) !important;
}

.e-btn.e-primary:focus,
.e-css.e-btn.e-primary:focus {
    box-shadow: 0 0 0 3px var(--app-primary-light) !important;
}

/* ===== Checkbox ===== */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.e-checkbox-wrapper:hover .e-frame.e-check {
    background: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover) !important;
}

/* ===== Dropdown Active Item ===== */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-hover {
    background: var(--app-primary-light) !important;
    color: var(--app-primary-dark) !important;
}

[data-theme="dark"] .e-dropdownbase .e-list-item.e-active,
[data-theme="dark"] .e-dropdownbase .e-list-item.e-hover {
    color: var(--app-primary) !important;
}

/* ===== ButtonGroup Selected State ===== */
.e-btn-group .e-btn.e-btn.selected-btn,
.e-btn-group .e-btn.e-btn.selected-btn:hover,
.e-btn-group .e-btn.e-btn.selected-btn:focus,
.e-btn-group .e-btn.e-btn.selected-btn:active,
.e-btn-group .e-btn.e-btn.selected-btn:not(:focus),
.e-btn-group .e-btn.e-btn.selected-btn:not(:hover),
.e-btn-group input:checked + label.e-btn,
.e-btn-group .e-btn.e-active,
.e-btn-group .e-btn[aria-pressed="true"] {
    background: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: var(--app-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

[data-theme="dark"] .e-btn-group .e-btn.selected-btn,
[data-theme="dark"] .e-btn-group input:checked + label.e-btn,
[data-theme="dark"] .e-btn-group .e-btn.e-active,
[data-theme="dark"] .e-btn-group .e-btn[aria-pressed="true"] {
    color: #000000 !important;
}

.e-btn-group .e-btn:hover:not(.selected-btn):not(.e-active) {
    background: var(--app-primary-light) !important;
    border-color: var(--app-primary) !important;
}

.e-btn-group .e-btn {
    text-transform: none;
}

/* ===== Grid ===== */
.e-grid {
    border: none !important;
    /* Ensure grid handles its own horizontal overflow */
    max-width: 100%;
}

/* Grid content area scrolls horizontally within container */
.e-grid .e-gridcontent {
    overflow-x: auto !important;
}

.e-grid .e-gridheader {
    overflow-x: auto !important;
}

[data-theme="dark"] .e-grid {
    background: #2d2d30 !important;
}

.e-grid .e-headercell {
    background: #f5f5f5 !important;
    font-weight: 600 !important;
    color: #1c1b1f !important;
}

[data-theme="dark"] .e-grid .e-headercell {
    background: #1a1a1a !important;
    color: #e6e1e5 !important;
}

.e-grid .e-headercelldiv {
    font-weight: 600 !important;
}

.e-grid .e-headercell .e-headercelldiv {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.e-grid .e-rowcell {
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

[data-theme="dark"] .e-grid .e-rowcell {
    background: #2d2d30 !important;
    color: #e6e1e5 !important;
}

.e-grid .e-row:hover .e-rowcell {
    background: var(--app-primary-light) !important;
}

[data-theme="dark"] .e-grid .e-row:hover .e-rowcell {
    background: rgba(255, 255, 255, 0.05) !important;
}

.e-grid .e-altrow {
    background: rgba(5, 74, 158, 0.02) !important;
}

[data-theme="dark"] .e-grid .e-altrow .e-rowcell {
    background: rgba(255, 255, 255, 0.02) !important;
}

.e-grid .e-pager {
    background: #f5f5f5 !important;
    border-top: 1px solid var(--app-border-color) !important;
}

[data-theme="dark"] .e-grid .e-pager {
    background: #1a1a1a !important;
}

.e-grid .e-pager .e-currentitem {
    background: var(--app-primary) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .e-grid .e-pager .e-currentitem {
    color: #000000 !important;
}

[data-theme="dark"] .e-grid .e-pager .e-numericitem,
[data-theme="dark"] .e-grid .e-pager .e-icons {
    color: #e6e1e5 !important;
}

.e-grid .e-filterbar {
    background: #f5f5f5 !important;
}

[data-theme="dark"] .e-grid .e-filterbar {
    background: #1a1a1a !important;
}

.e-grid .e-sortfilter .e-icons,
.e-grid .e-icon-ascending,
.e-grid .e-icon-descending {
    color: var(--app-primary-dark) !important;
}

[data-theme="dark"] .e-grid .e-sortfilter .e-icons,
[data-theme="dark"] .e-grid .e-icon-ascending,
[data-theme="dark"] .e-grid .e-icon-descending {
    color: var(--app-primary) !important;
}

/* Grid Selection */
.e-grid .e-selectionbackground,
.e-grid .e-row.e-selected .e-rowcell {
    background-color: var(--app-primary-light) !important;
}

/* ===== Stacked Headers ===== */
.e-grid .e-headercell.e-stackedheadercell {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important;
}

[data-theme="dark"] .e-grid .e-headercell.e-stackedheadercell {
    border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

/* Libro (Book) - Blue gradient */
.e-grid .e-headercell.stacked-header-book {
    background: linear-gradient(180deg, #e3f2fd 0%, #f5f5f5 100%) !important;
    color: #1565c0 !important;
    border-left: 3px solid #1565c0 !important;
}

[data-theme="dark"] .e-grid .e-headercell.stacked-header-book {
    background: linear-gradient(180deg, #1e3a5f 0%, #1a1a1a 100%) !important;
    color: #90caf9 !important;
    border-left: 3px solid #90caf9 !important;
}

/* Metriche (Metrics) - Blue gradient */
.e-grid .e-headercell.stacked-header-metrics {
    background: linear-gradient(180deg, #E8EAFC 0%, #f5f5f5 100%) !important;
    color: #054a9e !important;
    border-left: 3px solid #054a9e !important;
}

[data-theme="dark"] .e-grid .e-headercell.stacked-header-metrics {
    background: linear-gradient(180deg, #252a4d 0%, #1a1a1a 100%) !important;
    color: #4d9ffc !important;
    border-left: 3px solid #4d9ffc !important;
}

/* Finanza (Financial) - Green gradient */
.e-grid .e-headercell.stacked-header-financial {
    background: linear-gradient(180deg, #e8f5e9 0%, #f5f5f5 100%) !important;
    color: #2e7d32 !important;
    border-left: 3px solid #2e7d32 !important;
}

[data-theme="dark"] .e-grid .e-headercell.stacked-header-financial {
    background: linear-gradient(180deg, #1b3a1b 0%, #1a1a1a 100%) !important;
    color: #a5d6a7 !important;
    border-left: 3px solid #a5d6a7 !important;
}

/* Child column headers */
.e-grid .e-headercell.col-header-book {
    background: linear-gradient(180deg, rgba(227, 242, 253, 0.5) 0%, #f5f5f5 100%) !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-book {
    background: linear-gradient(180deg, rgba(30, 58, 95, 0.4) 0%, #1a1a1a 100%) !important;
}

.e-grid .e-headercell.col-header-metrics {
    background: linear-gradient(180deg, rgba(237, 231, 246, 0.5) 0%, #f5f5f5 100%) !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-metrics {
    background: linear-gradient(180deg, rgba(45, 37, 57, 0.4) 0%, #1a1a1a 100%) !important;
}

.e-grid .e-headercell.col-header-financial {
    background: linear-gradient(180deg, rgba(232, 245, 233, 0.5) 0%, #f5f5f5 100%) !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-financial {
    background: linear-gradient(180deg, rgba(27, 58, 27, 0.4) 0%, #1a1a1a 100%) !important;
}

/* First column borders */
.e-grid .e-headercell.col-header-book-first {
    border-left: 3px solid #1565c0 !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-book-first {
    border-left: 3px solid #90caf9 !important;
}

.e-grid .e-headercell.col-header-metrics-first {
    border-left: 3px solid #054a9e !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-metrics-first {
    border-left: 3px solid #4d9ffc !important;
}

.e-grid .e-headercell.col-header-financial-first {
    border-left: 3px solid #2e7d32 !important;
}

[data-theme="dark"] .e-grid .e-headercell.col-header-financial-first {
    border-left: 3px solid #a5d6a7 !important;
}

/* ===== DateRangePicker Clear Button Always Visible ===== */
.date-range-selector .e-input-group .e-clear-icon {
    display: flex !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.date-range-selector .e-input-group .e-clear-icon:hover {
    opacity: 1;
}

/* ===== DateRangePicker Popup Position Offset ===== */
.e-daterangepicker.e-popup.date-range-custom {
    margin-left: 80px;
}

/* ===== MonthYearSelector Clear Button Always Visible ===== */
.month-year-selector .e-input-group .e-clear-icon {
    display: flex !important;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.month-year-selector .e-input-group .e-clear-icon:hover {
    opacity: 1;
}

/* ===== Slider Customizations ===== */
.bsr-range-selector .e-slider-container .e-slider-track,
.rating-range-selector .e-slider-container .e-slider-track,
.royalty-range-selector .e-slider-container .e-slider-track,
.month-since-publication-selector .e-slider-container .e-slider-track {
    background: var(--app-primary-light) !important;
}

/* Slider range bar - brand blue in both themes (lighter blue on dark) */
.bsr-range-selector .e-slider-container .e-range,
.rating-range-selector .e-slider-container .e-range,
.royalty-range-selector .e-slider-container .e-range,
.month-since-publication-selector .e-slider-container .e-range {
    background: var(--app-primary) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .bsr-range-selector .e-slider-container .e-range,
[data-theme="dark"] .rating-range-selector .e-slider-container .e-range,
[data-theme="dark"] .royalty-range-selector .e-slider-container .e-range,
[data-theme="dark"] .month-since-publication-selector .e-slider-container .e-range {
    background: #4d9ffc !important;
    box-shadow: none !important;
}

/* Slider handles - Oval shape */
.bsr-range-selector .e-slider-container .e-handle,
.rating-range-selector .e-slider-container .e-handle,
.royalty-range-selector .e-slider-container .e-handle,
.month-since-publication-selector .e-slider-container .e-handle {
    height: 25px !important;
    width: 8px !important;
    top: calc(50% - 12.5px) !important;
    border-radius: 15px !important;
    background: var(--app-primary) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .bsr-range-selector .e-slider-container .e-handle,
[data-theme="dark"] .rating-range-selector .e-slider-container .e-handle,
[data-theme="dark"] .royalty-range-selector .e-slider-container .e-handle,
[data-theme="dark"] .month-since-publication-selector .e-slider-container .e-handle {
    background: #4d9ffc !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.bsr-range-selector .e-slider-container .e-handle:hover,
.bsr-range-selector .e-slider-container .e-handle:focus,
.rating-range-selector .e-slider-container .e-handle:hover,
.rating-range-selector .e-slider-container .e-handle:focus,
.royalty-range-selector .e-slider-container .e-handle:hover,
.royalty-range-selector .e-slider-container .e-handle:focus,
.month-since-publication-selector .e-slider-container .e-handle:hover,
.month-since-publication-selector .e-slider-container .e-handle:focus {
    background: var(--app-primary-dark) !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .bsr-range-selector .e-slider-container .e-handle:hover,
[data-theme="dark"] .bsr-range-selector .e-slider-container .e-handle:focus,
[data-theme="dark"] .rating-range-selector .e-slider-container .e-handle:hover,
[data-theme="dark"] .rating-range-selector .e-slider-container .e-handle:focus,
[data-theme="dark"] .royalty-range-selector .e-slider-container .e-handle:hover,
[data-theme="dark"] .royalty-range-selector .e-slider-container .e-handle:focus,
[data-theme="dark"] .month-since-publication-selector .e-slider-container .e-handle:hover,
[data-theme="dark"] .month-since-publication-selector .e-slider-container .e-handle:focus {
    background: #7ab8ff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ===== Chart ===== */
.price-breakdown-chart .e-accumulationchart {
    background: transparent !important;
}

/* ===== Chart Tooltip ===== */
.chart-tooltip-box {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #1c1b1f;
}

[data-theme="dark"] .chart-tooltip-box {
    background: rgba(45, 45, 48, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: #e6e1e5;
}

.chart-tooltip-date {
    font-weight: bold;
    margin-bottom: 4px;
}

.chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-tooltip-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ===== Detail Template Icons ===== */
.e-grid .e-icon-grightarrow::before,
.e-grid .e-icon-gdownarrow::before {
    content: "\e826" !important;
    color: #2196F3 !important;
}

.e-grid .e-detailrowcollapse:hover .e-icon-grightarrow::before,
.e-grid .e-detailrowexpand:hover .e-icon-gdownarrow::before {
    color: #1976D2 !important;
}

/* ===== Chart Filters Fieldset ===== */
.chart-filters-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
}

[data-theme="dark"] .chart-filters-fieldset {
    border: 1px solid rgba(77, 159, 252, 0.15);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
}

.chart-filters-fieldset legend {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-primary-dark);
    padding: 0 8px;
}

[data-theme="dark"] .chart-filters-fieldset legend {
    color: var(--app-primary);
}

.chart-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.chart-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-filter-item.chart-filter-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.chart-filter-item .selector-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-content-text, #1c1b1f);
}

[data-theme="dark"] .chart-filter-item .selector-label {
    color: var(--app-content-text, #e6e1e5);
}

.chart-filter-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text-secondary);
}

[data-theme="dark"] .chart-filter-label {
    color: var(--app-text-secondary);
}

.chart-filter-separator {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, transparent, var(--app-border-color), transparent);
    align-self: center;
}

/* ===== Chart Mode Toggle ===== */
.chart-mode-toggle {
    font-size: 0.8rem;
}

.chart-mode-toggle .e-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 0.8rem;
}

.chart-mode-toggle .e-btn .e-icons {
    font-size: 14px;
}

/* ===== Accordion Header Subtle Gradient ===== */
.e-accordion .e-acrdn-item .e-acrdn-header,
.e-accordion .e-acrdn-item.e-select > .e-acrdn-header,
.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header,
.e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease;
}

.e-accordion .e-acrdn-item .e-acrdn-header:hover {
    background: linear-gradient(135deg, #e8ecf2 0%, #dce2ea 100%);
}

/* Dark Theme */
[data-theme="dark"] .e-accordion .e-acrdn-item .e-acrdn-header,
[data-theme="dark"] .e-accordion .e-acrdn-item.e-select > .e-acrdn-header,
[data-theme="dark"] .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header,
[data-theme="dark"] .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header {
    background: linear-gradient(135deg, rgba(10,111,232,0.08) 0%, rgba(255,255,255,0.03) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .e-accordion .e-acrdn-item .e-acrdn-header:hover {
    background: linear-gradient(135deg, rgba(10,111,232,0.12) 0%, rgba(255,255,255,0.05) 100%);
}

/* ===== Tooltip ===== */
.e-control.e-tooltip.e-lib,
.e-control.e-tooltip.e-lib .e-tip-content {
    font-size: 14px !important;
}

/* ===== Search Page Base Styles ===== */

.search-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    /* Prevent horizontal overflow from grid */
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== Search Page Header - Title + Workspace (compact) ===== */

.search-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--app-border-color);
    margin-bottom: 0;
}

.search-page-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;

    background: linear-gradient(
        135deg,
        var(--app-primary) 0%,
        color-mix(in srgb, var(--app-primary) 70%, #1e3a5f) 50%,
        var(--app-primary-dark) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(10, 111, 232, 0.08));
}

[data-theme="dark"] .search-page-header h1 {
    background: linear-gradient(
        135deg,
        #5ba3f5 0%,
        var(--app-primary) 50%,
        #7fc0ff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(91, 163, 245, 0.15));
}

.search-page-header .header-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    margin: 4px 0 20px 0;
    letter-spacing: 0.01em;
}

[data-theme="light"] .search-page-header .header-subtitle {
    color: #1a1a1a;
}

[data-theme="dark"] .search-page-header .header-subtitle {
    color: #d0d0d0;
}

/* Hide the old workspace-hint inside the component */
.search-page-header .workspace-hint {
    display: none;
}

.search-page-header .workspace-container {
    margin-bottom: 0;
}

/* Brief usage hint below the workspace bar */
.search-page-header .header-workspace-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0 0;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 6px;
}

.search-page-header .header-workspace-hint .hint-icon {
    flex-shrink: 0;
    font-size: 15px;
}

[data-theme="light"] .search-page-header .header-workspace-hint {
    color: #1565c0;
    background: rgba(10, 111, 232, 0.07);
    border: 1px solid rgba(10, 111, 232, 0.2);
}

[data-theme="light"] .search-page-header .header-workspace-hint .hint-icon {
    color: #1976d2;
}

[data-theme="dark"] .search-page-header .header-workspace-hint {
    color: #ffffff;
    background: rgba(77, 159, 252, 0.1);
    border: 1px solid rgba(77, 159, 252, 0.25);
}

[data-theme="dark"] .search-page-header .header-workspace-hint .hint-icon {
    color: #64b5f6;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 100;
    min-height: 300px;
    border-radius: 12px;
}

[data-theme="dark"] .loading-overlay {
    background: rgba(30, 30, 30, 0.9);
}

/* Filters Container */
.filters-container {
    background: var(--surface-card);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 1400px;
}

[data-theme="dark"] .filters-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

.filters-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border-color);
}

/* Filter Fieldsets (legacy) */
.bsr-filters-fieldset,
.book-type-filters-fieldset,
.rating-filters-fieldset,
.keyword-filters-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .bsr-filters-fieldset,
[data-theme="dark"] .book-type-filters-fieldset,
[data-theme="dark"] .rating-filters-fieldset,
[data-theme="dark"] .keyword-filters-fieldset {
    border: 1px solid rgba(77, 159, 252, 0.15);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
}

.bsr-filters-fieldset:hover,
.book-type-filters-fieldset:hover,
.rating-filters-fieldset:hover,
.keyword-filters-fieldset:hover {
    border-color: rgba(10, 111, 232, 0.25);
}

[data-theme="dark"] .bsr-filters-fieldset:hover,
[data-theme="dark"] .book-type-filters-fieldset:hover,
[data-theme="dark"] .rating-filters-fieldset:hover,
[data-theme="dark"] .keyword-filters-fieldset:hover {
    border-color: rgba(77, 159, 252, 0.28);
}

.bsr-filters-fieldset legend,
.book-type-filters-fieldset legend,
.rating-filters-fieldset legend,
.keyword-filters-fieldset legend {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-primary-dark);
    padding: 0 10px;
}

[data-theme="dark"] .bsr-filters-fieldset legend,
[data-theme="dark"] .book-type-filters-fieldset legend,
[data-theme="dark"] .rating-filters-fieldset legend,
[data-theme="dark"] .keyword-filters-fieldset legend {
    color: var(--app-primary);
}

/* Rating fieldset - keeps column layout */
.rating-filters-fieldset .fieldset-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Horizontal Row Container (legacy) */
.filters-row-horizontal {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 16px;
}

/* Vertical Column Container */
.filters-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Filter Separator */
.filter-separator {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--app-border-color), transparent);
    margin: 0 12px;
    align-self: center;
}

.keyword-filter-selector {
    width: 100%;
}

.keyword-filter-selector .selector-label {
    color: #1c1b1f;
}

[data-theme="dark"] .keyword-filter-selector .selector-label {
    color: #e6e1e5 !important;
}

/* Hide dropdown popup */
.keyword-multiselect.e-popup,
.keyword-multiselect + .e-popup {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

.keyword-filter-selector .e-multi-select-wrapper input.e-dropdownbase {
    color: #1c1b1f !important;
}

[data-theme="dark"] .keyword-filter-selector .e-multi-select-wrapper input.e-dropdownbase {
    color: #e6e1e5 !important;
}

/* Purple chips styling */
.keyword-filter-selector .e-multi-select-wrapper .e-chips {
    background: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary-hover) !important;
}

.keyword-filter-selector .e-multi-select-wrapper .e-chips .e-chipcontent {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .keyword-filter-selector .e-multi-select-wrapper .e-chips .e-chipcontent {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.keyword-filter-selector .e-multi-select-wrapper .e-chips .e-chips-close::before {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .keyword-filter-selector .e-multi-select-wrapper .e-chips .e-chips-close::before {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Search Progress Bar */
.search-progress-container {
    margin-top: 16px;
}

.search-progress-container .progress-label {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--app-content-text);
    opacity: 0.8;
}

/* Results Container */
.results-container {
    min-height: 100px;
    /* Contain grid overflow within this container */
    max-width: 100%;
    overflow-x: auto;
}

.results-info {
    background: var(--surface-card);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .results-info {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.filter-summary .filter-item {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.9;
}

.filter-summary .filter-item strong {
    font-weight: 600;
    color: var(--app-primary-dark);
    opacity: 1;
}

[data-theme="dark"] .filter-summary .filter-item strong {
    color: var(--app-primary);
}

.filter-summary .filter-separator {
    width: 1px;
    height: 16px;
    background: linear-gradient(to bottom, transparent, var(--app-border-color), transparent);
    margin: 0 8px;
    align-self: center;
    flex-shrink: 0;
}

.filter-summary .results-count {
    font-weight: 600;
}

.filter-summary .results-count strong {
    font-weight: 700;
    color: var(--app-primary);
    font-size: 1.125rem;
}

.results-hint {
    font-size: 0.9rem;
    opacity: 0.7;
    font-style: italic;
}

/* Country Selector */
.country-selector {
    margin-bottom: 8px;
}

.country-selector-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-content-text);
    margin-bottom: 8px;
}

.country-selector-loading {
    padding: 12px 16px;
    color: var(--app-content-text);
    opacity: 0.7;
    font-style: italic;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
}

.country-item .fi,
.country-selected .fi {
    font-size: 0.95rem;
    line-height: 1;
}

.country-name {
    flex: 1;
    font-weight: 500;
}

.country-bsr {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--app-primary-dark);
    background: var(--app-primary-light);
    padding: 2px 8px;
    border-radius: 10px;
}

[data-theme="dark"] .country-bsr {
    color: var(--app-primary);
}

.country-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0 8px;
}

/* Country Selector Dropdown */
.country-selector .e-ddl {
    border-radius: 50px;
}

.country-selector .e-ddl .e-input {
    padding-left: 16px;
}

.country-selector .e-input-group:not(.e-disabled) .e-input-group-icon:hover {
    background: var(--app-primary-light);
    border-radius: 50%;
}

.country-selector .e-ddl.e-input-group.e-control-wrapper {
    border-radius: 50px;
}

.country-selector .e-ddl .e-input-group-icon {
    border-radius: 0 50px 50px 0;
}

/* BSR Type Selector */
.bsr-type-selector {
    margin-bottom: 0;
}

.bsr-type-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--app-content-text);
    margin-bottom: 6px;
}

.bsr-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.bsr-type-options .e-radio-wrapper {
    margin: 0;
}

.bsr-type-options .e-radio + label {
    color: var(--app-content-text);
}

.bsr-type-options .e-radio:checked + label::after {
    background-color: var(--app-primary);
}

.bsr-type-options .e-radio:checked + label::before {
    border-color: var(--app-primary);
}

/* BSR Range Selector */
.bsr-range-selector {
    padding: 8px 12px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
}

.bsr-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 10px;
}

.bsr-range-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--app-content-text);
    flex: 1;
}

.bsr-range-values {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bsr-range-spacer {
    flex: 1;
}

.bsr-value-separator,
.rating-value-separator,
.royalty-value-separator,
.month-value-separator {
    color: var(--app-content-text);
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Compact value badges in fieldsets */
.filter-fieldset .bsr-value-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.bsr-slider-container {
    padding: 4px 8px;
}

/* Rating Range Selector */
.rating-range-selector {
    padding: 8px 12px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 350px;
}

.rating-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 8px;
}

.rating-range-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--app-content-text);
}

.rating-range-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rating-value-badge .star {
    color: #FFD700;
    margin-left: 2px;
}

.rating-slider-container {
    padding: 4px 0;
}

/* Compact Rating in fieldset */
.rating-filters-fieldset .rating-range-selector {
    padding: 8px 12px;
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: 8px;
    min-width: 280px;
    max-width: 350px;
}

.rating-filters-fieldset .rating-range-header {
    margin-bottom: 6px;
}

.rating-filters-fieldset .rating-range-label {
    font-size: 0.8rem;
}

.rating-filters-fieldset .rating-value-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.rating-filters-fieldset .rating-slider-container {
    padding: 4px 0;
}

.rating-filters-fieldset .reviews-range-selector {
    padding: 8px 0;
    background: transparent;
    border: none;
}

.rating-filters-fieldset .reviews-label {
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.rating-filters-fieldset .review-input-group {
    width: 80px;
    flex-shrink: 0;
}

.rating-filters-fieldset .reviews-inputs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

/* Country Selector Buttons */
.country-selector-buttons .e-btn-group .country-btn {
    background: #ffffff;
    border-color: var(--app-border-color);
    color: var(--app-content-text);
    transition: all var(--transition-fast);
}

[data-theme="dark"] .country-selector-buttons .e-btn-group .country-btn {
    background: #2a2a2e;
    border-color: rgba(155, 166, 255, 0.2);
}

.country-selector-buttons .e-btn-group .country-btn:hover {
    background: var(--app-primary-light);
    border-color: var(--app-primary);
}

[data-theme="dark"] .country-selector-buttons .e-btn-group .country-btn:hover {
    background: rgba(77, 159, 252, 0.15);
}

.country-selector-buttons .e-btn-group .country-btn.selected-btn {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #ffffff;
}

[data-theme="dark"] .country-selector-buttons .e-btn-group .country-btn.selected-btn {
    color: #000000;
}

.country-selector-buttons .e-btn-group .country-btn.selected-btn:hover {
    background: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

.country-selector-buttons .e-btn-group .country-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== KeywordFilterSelectorV2 Styles (ChipList + TextBox) ===== */

/* Container principale */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
    min-height: 40px;
    min-width: 0;
}

[data-theme="dark"] .tag-input-container {
    background-color: #2a2a2e;
    border-color: rgba(155, 166, 255, 0.2);
}

/* Border superiore della textbox - solo se ci sono chip */
.tag-input-container .e-input-group.keyword-textbox,
.tag-input-container .keyword-textbox {
    border: none !important;
    box-shadow: none !important;
    flex-grow: 1;
    min-width: 150px;
}

/* Mostra il border solo quando ci sono chip attivi con gap sopra */
.tag-input-container:has(.e-chip) .e-input-group.keyword-textbox,
.tag-input-container:has(.e-chip) .keyword-textbox {
    border-top: 2px solid rgba(10, 111, 232, 0.4) !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
}

[data-theme="dark"] .tag-input-container:has(.e-chip) .e-input-group.keyword-textbox,
[data-theme="dark"] .tag-input-container:has(.e-chip) .keyword-textbox {
    border-top-color: rgba(77, 159, 252, 0.5) !important;
}

.keyword-textbox.e-input-group:not(.e-success):not(.e-warning):not(.e-error) {
    border: none;
}


/* Input row: textbox + add button */
.keyword-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-grow: 1;
    min-width: 150px;
    width: 100%;
}

.keyword-input-row .keyword-textbox {
    flex-grow: 1;
}

.keyword-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 2px solid #0a6fe8;
    border-radius: 6px;
    background: #0a6fe8;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.keyword-add-btn:hover {
    background: #0858bd;
    border-color: #0858bd;
}

.keyword-add-btn:active {
    background: #064a9e;
    border-color: #064a9e;
    transform: scale(0.94);
}

.keyword-add-btn .e-icons {
    font-size: 14px;
    font-weight: 700;
}

[data-theme="dark"] .keyword-add-btn {
    border-color: #4d9ffc;
    background: #4d9ffc;
    color: #0d0d12;
}

[data-theme="dark"] .keyword-add-btn:hover {
    background: #6db3ff;
    border-color: #6db3ff;
}

[data-theme="dark"] .keyword-add-btn:active {
    background: #3a8de6;
    border-color: #3a8de6;
}

/* Riga per i filtri keywords - affiancati */
.keywords-filters-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.keywords-filters-row .filter-group {
    flex: 1 1 calc(50% - 12px);
    min-width: 200px;
}

/* Hint quando non ci sono keyword */
.keyword-empty-hint {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 600;
    padding: 12px 10px;
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
}

[data-theme="dark"] .keyword-empty-hint {
    color: #9ba6b8;
}

/* Stile specifico per i chip */
.keyword-chiplist {
    padding: 0 !important;
}

/* Chip con gradiente blu e testo bianco (uguale per Include ed Exclude) - dimensione ridotta 20% */
.keyword-include .e-chip,
.keyword-exclude .e-chip {
    background: linear-gradient(135deg, #0a6fe8 0%, #054a9e 100%) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    padding: 6px 11px !important;
    height: auto !important;
    min-height: 29px !important;
    border-radius: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(10, 111, 232, 0.25) !important;
}

/* Testo del chip bianco - forza il colore su tutti gli elementi */
.keyword-include .e-chip *,
.keyword-exclude .e-chip * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.keyword-include .e-chip .e-chip-text,
.keyword-exclude .e-chip .e-chip-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.76rem !important;
}

/* Bottone di delete bianco */
.keyword-include .e-chip .e-chip-delete,
.keyword-exclude .e-chip .e-chip-delete {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 0.9;
    font-size: 0.88rem !important;
    margin-left: 6px !important;
}

.keyword-include .e-chip .e-chip-delete:hover,
.keyword-exclude .e-chip .e-chip-delete:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
}

/* Dark theme - stesso gradiente e testo bianco */
[data-theme="dark"] .keyword-include .e-chip,
[data-theme="dark"] .keyword-exclude .e-chip {
    background: linear-gradient(135deg, #0a6fe8 0%, #054a9e 100%) !important;
    background-color: transparent !important;
    box-shadow: 0 2px 6px rgba(77, 159, 252, 0.3) !important;
}

[data-theme="dark"] .keyword-include .e-chip *,
[data-theme="dark"] .keyword-exclude .e-chip * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .keyword-include .e-chip .e-chip-text,
[data-theme="dark"] .keyword-exclude .e-chip .e-chip-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .keyword-include .e-chip .e-chip-delete,
[data-theme="dark"] .keyword-exclude .e-chip .e-chip-delete {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .keyword-include .e-chip .e-chip-delete:hover,
[data-theme="dark"] .keyword-exclude .e-chip .e-chip-delete:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Shared Search card / keyword accordion appearance ===== */
.filters-card,
.e-accordion.filter-panel {
    background-color: var(--surface-card);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    /* Prevent overflow from filter summary */
    max-width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .filters-card,
[data-theme="dark"] .e-accordion.filter-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.filters-card:hover,
.e-accordion.filter-panel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .filters-card:hover,
[data-theme="dark"] .e-accordion.filter-panel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Remove focus and tap highlight from filters card and its children */
.filters-card,
.filters-card * {
    -webkit-tap-highlight-color: transparent !important;
}

.filters-card:focus,
.filters-card:focus-within,
.filters-card:focus-visible {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .filters-card:focus,
[data-theme="dark"] .filters-card:focus-within,
[data-theme="dark"] .filters-card:focus-visible {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.filters-card *:focus,
.filters-card *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.filters-card .e-card-header,
.e-accordion.filter-panel .e-acrdn-item > .e-acrdn-header {
    padding: 18px 24px;
    background: linear-gradient(180deg, rgba(10, 111, 232, 0.04) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .filters-card .e-card-header,
[data-theme="dark"] .e-accordion.filter-panel .e-acrdn-item > .e-acrdn-header {
    background: linear-gradient(180deg, rgba(77, 159, 252, 0.04) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filters-card-header,
.keyword-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    cursor: pointer;
    user-select: none;
}

.filters-card-header {
    /* Ensure the entire Search card header area is clickable */
    margin: -18px -24px;
    padding: 18px 24px;
}

.filters-card-header:hover .filters-card-toggle,
.e-accordion.filter-panel .e-acrdn-header:hover .filters-card-toggle {
    background: var(--app-primary-hover);
    box-shadow: 0 2px 6px rgba(10, 111, 232, 0.3);
}

[data-theme="dark"] .filters-card-header:hover .filters-card-toggle,
[data-theme="dark"] .e-accordion.filter-panel .e-acrdn-header:hover .filters-card-toggle {
    background: var(--app-primary-hover);
    box-shadow: 0 2px 6px rgba(77, 159, 252, 0.3);
}

.filters-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--app-content-text);
    margin: 0;
}

.filters-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-primary);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

[data-theme="dark"] .filters-card-toggle {
    background: var(--app-primary);
}

.filters-card-toggle:hover {
    background: var(--app-primary-hover);
    box-shadow: 0 2px 6px rgba(10, 111, 232, 0.3);
}

[data-theme="dark"] .filters-card-toggle:hover {
    background: var(--app-primary-hover);
    box-shadow: 0 2px 6px rgba(77, 159, 252, 0.3);
}

.filters-card-toggle .toggle-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #ffffff;
    margin-right: 6px;
}

.filters-card-toggle .e-icons,
.e-accordion.filter-panel .filters-card-toggle .e-icons {
    font-size: 14px;
    color: #ffffff;
}

.filters-card .e-card-content,
.e-accordion.filter-panel .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    background-color: var(--surface-card);
    padding: 24px;
}

/* Accordion-only structural adapters; visual rules above remain shared. */
.e-accordion.filter-panel .e-acrdn-item {
    border: 0;
    background: transparent;
}

.e-accordion.filter-panel .e-acrdn-item > .e-acrdn-header {
    height: auto;
    line-height: normal;
}

.e-accordion.filter-panel .e-acrdn-header .e-acrdn-header-content {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
}

.e-accordion.filter-panel .e-acrdn-header > .e-toggle-icon {
    display: none;
}

/* Syncfusion's selected-item :focus rules have higher specificity and add a
   black box-shadow. Suppress it in every focus state of this filter panel. */
.e-accordion.filter-panel .e-acrdn-item.e-focused > .e-acrdn-header,
.e-accordion.filter-panel .e-acrdn-item > .e-acrdn-header:focus,
.e-accordion.filter-panel .e-acrdn-item > .e-acrdn-header:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.filters-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Hide content when collapsed - preserves component state */
.filters-content-hidden {
    display: none !important;
}

/* ===== Filter Summary in Header (collapsed state) ===== */
.filter-summary-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.filter-summary-header .filter-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--app-content-text);
    opacity: 0.9;
    white-space: nowrap;
}

.filter-summary-header .filter-item strong {
    font-weight: 600;
    color: var(--app-primary-dark);
    opacity: 1;
}

[data-theme="dark"] .filter-summary-header .filter-item strong {
    color: var(--app-primary);
}

.filter-summary-header .filter-separator {
    width: 1px;
    height: 22px;
    background: var(--app-border-color);
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
}

.filter-summary-header .filter-summary-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.filter-summary-header .fi {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 2px;
}

.filter-summary-header .results-count {
    font-weight: 600;
}

.filter-summary-header .results-count strong {
    font-weight: 700;
    color: var(--app-primary);
    font-size: 1rem;
}
/* ===== Filter Fieldsets ===== */

/* Grid layout for filter fieldsets (legacy - keeping for compatibility) */
.filters-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1200px) {
    .filters-grid-row {
        grid-template-columns: 1fr;
    }
}

/* Base filter fieldset style */
.filter-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .filter-fieldset {
    border: 1px solid rgba(77, 159, 252, 0.15);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
}

.filter-fieldset:hover {
    border-color: rgba(10, 111, 232, 0.25);
}

[data-theme="dark"] .filter-fieldset:hover {
    border-color: rgba(77, 159, 252, 0.2);
}

/* Fieldset legend styling */
.filter-fieldset legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    padding: 4px 12px;
    background: var(--app-primary);
    border-radius: 4px;
}

[data-theme="dark"] .filter-fieldset legend {
    background: var(--app-primary-dark);
    color: #ffffff;
}

/* ===== COLLAPSE FUNCTIONALITY DISABLED - keeping for future use =====
   To re-enable: uncomment this section and the state variables in Search.razor

.filter-fieldset legend {
    cursor: pointer;
    user-select: none;
}

.filter-fieldset legend:hover {
    filter: brightness(1.1);
}

.filter-fieldset legend .fieldset-toggle {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.filter-fieldset.collapsed .fieldset-content {
    display: none;
}

.filter-fieldset.collapsed {
    padding-bottom: 0;
}

===== END COLLAPSE FUNCTIONALITY ===== */

/* Legend icons - gold color */
.filter-fieldset legend .e-icons,
.filter-fieldset legend .legend-icon-star,
.filter-fieldset legend .legend-icon-currency {
    color: #FFD700;
}

.filter-fieldset legend .e-icons {
    font-size: 0.9rem;
}

.filter-fieldset legend .legend-icon-star {
    font-size: 1rem;
    line-height: 1;
}

.filter-fieldset legend .legend-icon-currency {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Fieldset badge for counts - gold background */
.fieldset-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

[data-theme="dark"] .fieldset-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a;
}

/* Fieldset tooltip info icon - white on blue circular badge */
.filter-fieldset legend .fieldset-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    cursor: help;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-fieldset legend .fieldset-info-icon:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .filter-fieldset legend .fieldset-info-icon {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .filter-fieldset legend .fieldset-info-icon:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 8px rgba(77, 159, 252, 0.4);
}

/* Legacy alias for backward compatibility */
.filter-fieldset legend .royalty-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    cursor: help;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-fieldset legend .royalty-info-icon:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .filter-fieldset legend .royalty-info-icon {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .filter-fieldset legend .royalty-info-icon:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 8px rgba(77, 159, 252, 0.4);
}

/* Fieldset content - BASE RULE */
.filter-fieldset .fieldset-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.filter-fieldset .fieldset-content .filter-group {
    margin-bottom: 0;
}

/* ===== HORIZONTAL FIELDSET LAYOUTS ===== */
/* These override the base column layout for specific fieldsets */

/* BSR Filters: one row = BSR type | (month picker, historical only) | margin | BSR range.
   gap is 0: the horizontal rhythm comes from each divider's padding-left below, so the
   spacing stays symmetric around every divider. stretch lets the dividers span the row. */
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row {
    display: flex;
    flex-wrap: nowrap; /* never wrap above the breakpoint: the sliders shrink instead */
    gap: 0;
    align-items: stretch;
}

/* ----- Divider between filters -----
   A pseudo-element pair on every item that follows another, so it appears and disappears
   with the conditional month picker without extra markup. The line fades out at both ends,
   and the small gold diamond echoes the legend icons. 29px = 14px + 1px line + 14px. */
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group {
    position: relative;
    padding-left: 29px;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 6%;
    bottom: 6%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(10, 111, 232, 0.4) 30%,
        rgba(10, 111, 232, 0.4) 70%,
        transparent 100%);
    pointer-events: none;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group::after {
    content: "";
    position: absolute;
    left: 12px; /* centres the 6px diamond on the 1px line at 14px */
    top: 50%;
    width: 6px;
    height: 6px;
    background: #FFD700;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 0 2px var(--surface-card); /* a halo that cuts the line around it */
    pointer-events: none;
}

[data-theme="dark"] .filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group::before {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(77, 159, 252, 0.4) 30%,
        rgba(77, 159, 252, 0.4) 70%,
        transparent 100%);
}

/* Dropdowns keep a fixed width: they neither shrink nor grow. The basis includes the
   divider padding, hence +29px on the month picker, which always follows another item. */
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-type-filter,
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.date-range-filter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    box-sizing: border-box;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-type-filter {
    flex: 0 0 190px;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.date-range-filter {
    flex: 0 0 239px;
}

/* .bsr-type-selector is width: fit-content by default, which is circular against the
   SfDropDownList's own Width="100%": pin both selectors to the flex track instead. */
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .bsr-type-selector,
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .month-year-selector {
    width: 100%;
    gap: 4px;
}

/* The two sliders are the elastic items and share the leftover space, BSR slightly more.
   flex-basis 0 (not auto, not a percentage) keeps the split independent of their content
   and of the parent width, so the reflow when the month picker appears is predictable.
   The min-widths are real floors rather than 0, otherwise in this nowrap row the BSR
   slider would shrink until its tick labels overlap. Both include the 29px divider padding.
   BSR is ~30% wider than a 1:1 split (grow 1.82, floor 390px, cap 676px of slider) and
   relies on Search passing TargetTicks="5" (~6-7 labels of ~26px): at 20 ticks it needed
   ~650px and had to sit on a row of its own. Raising TargetTicks means raising the floor. */
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.royalty-inline-filter {
    flex: 1 1 0;
    min-width: 249px;
    max-width: 429px;
    box-sizing: border-box;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-range-inline-filter {
    flex: 1.82 1 0;
    min-width: 419px;
    max-width: 705px;
    box-sizing: border-box;
}

.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .royalty-range-selector,
.filter-fieldset.bsr-filters-fieldset .bsr-filters-row .bsr-range-selector {
    height: 100%;
}

/* Rating Filters: Reviews + Rating Slider on same row */
.filter-fieldset.rating-filters-fieldset .fieldset-content {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    align-items: center;
}

.filter-fieldset.rating-filters-fieldset .filter-group.reviews-filter {
    flex: 0 0 auto;
}

.filter-fieldset.rating-filters-fieldset .filter-group.rating-filter {
    flex: 1 1 auto;
    min-width: 320px;
    max-width: 450px;
}

/* Book Type Filters: Publisher type + Month slider, always on one row.
   nowrap, not wrap: the two together measured ~736px against ~730px of inner width once
   this fieldset moved into .filters-top-row, so wrapping dropped the slider onto its own
   line over a 6px shortfall. The slider shrinks instead - see its min-width below. The
   1200px breakpoint in _search-layout.css restores wrapping, where the slider is
   deliberately given a full line. */
.filter-fieldset.book-type-filters-fieldset .fieldset-content {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    align-items: center;
}

.filter-fieldset.book-type-filters-fieldset .filter-group.publisher-type-filter {
    flex: 0 0 auto;
}

/* Width depends on the viewport only, never on the siblings. SfSlider's JS stores handle and
   range-bar positions in px and recomputes them only on window "resize": a fluid width
   (flex: 1 1 auto) shrank when the siblings finished laying out after init, leaving the
   range bar past the track end. Caps at 320px; the 200px floor keeps the 11 tick labels
   (0, 6, 12 ... 60, ~16px each) from overlapping.
   NOTE: _search-layout.css declares a lower-specificity twin of this rule (3 classes vs
   4), so this one wins; keep the two in sync. */
.filter-fieldset.book-type-filters-fieldset .filter-group.month-publication-filter {
    flex: 0 0 clamp(200px, 17.6vw, 320px);
}

/* Keyword Filters: Include + Exclude 50/50 split */
.filter-fieldset.keyword-filters-fieldset .fieldset-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: stretch;
}

.filter-fieldset.keyword-filters-fieldset .filter-group {
    flex: 1 1 calc(50% - 12px);
    min-width: 250px;
}

/* Inline filter row for side-by-side components */
.filter-row-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.filter-row-inline .filter-group {
    flex: 0 0 auto;
}

/* Category content specific styles */
.filter-fieldset .fieldset-content.category-content {
    min-height: 200px;
}

.filter-fieldset .fieldset-content.category-content .category-tree-filter {
    width: 100%;
}

.filter-fieldset .categories-info {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--app-content-text);
    opacity: 0.8;
}

.filter-fieldset .categories-info .selected-count {
    font-weight: 600;
    color: var(--app-primary-dark);
}

[data-theme="dark"] .filter-fieldset .categories-info .selected-count {
    color: var(--app-primary);
}

/* Royalty content specific styles */
.filter-fieldset .fieldset-content.royalty-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    overflow: visible;
    padding-bottom: 4px;
}

.filter-fieldset .royalty-options-row {
    display: contents;
}

.filter-fieldset .royalty-scenario-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.filter-fieldset .royalty-scenario-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--app-content-text);
    min-width: 50px;
}

.filter-fieldset .royalty-scenario-slider {
    flex: 1 1 auto;
    min-width: 350px;
    margin-top: 0;
}

/* Override interior and vat selectors inside fieldset */
.filter-fieldset .interior-type-selector {
    flex-direction: row;
    gap: 0;
}

.filter-fieldset .interior-type-selector .selector-label {
    display: none;
}

.filter-fieldset .interior-type-selector .e-btn-group .e-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.filter-fieldset .vat-type-selector {
    flex-direction: row;
    gap: 0;
}

.filter-fieldset .vat-type-selector .selector-label {
    display: none;
}

.filter-fieldset .vat-type-selector .e-btn-group .e-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ===== Royalty range selector: compact inline variant =====
   Scoped to .filter-fieldset so the taller default used by the royalty calculator
   (pages/_royalty-calculator.css) is left untouched. Rendered without ticks, so none
   of the overflow escapes that the tick scale needs are required here. */
.filter-fieldset .royalty-range-selector {
    padding: 4px 10px 2px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 0; /* must shrink inside the nowrap BSR row */
    box-sizing: border-box;
}

.filter-fieldset .royalty-range-header {
    margin-bottom: 0;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.filter-fieldset .royalty-range-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.filter-fieldset .royalty-range-display {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.filter-fieldset .royalty-value-badge {
    font-size: 0.72rem;
    padding: 1px 5px;
    white-space: nowrap;
}

/* The theme places tick labels at bottom: -20px, i.e. outside the slider box, so the
   scale only shows if the ancestors let it overflow and the container reserves the room. */
.filter-fieldset .royalty-slider-container {
    padding-bottom: 16px;
    min-height: 0;
    overflow: visible !important;
}

.filter-fieldset .royalty-slider-container .e-scale,
.filter-fieldset .royalty-slider-container .e-slider-container,
.filter-fieldset .royalty-slider-container .e-slider-container .e-slider,
.filter-fieldset .royalty-slider-container .e-slider-container .e-slider-track,
.filter-fieldset .royalty-range-selector .e-control-wrapper {
    overflow: visible !important;
}

/* 48px -> 32px. 32px is the floor: .e-slider is 32px tall and its children are placed
   with calc(50% - N) against it, so at 32px the offset resolves to 0 and nothing else
   needs overriding. The scale is absolutely positioned, so it follows without help. */
.filter-fieldset .royalty-slider-container .e-control-wrapper.e-slider-container.e-horizontal {
    height: 32px;
}

.filter-fieldset .royalty-slider-container .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
    top: 0;
}

/* Smaller tick labels: the inline slider is a fraction of its old width */
.filter-fieldset .royalty-slider-container .e-scale .e-tick .e-tick-value {
    font-size: 0.68rem;
}

/* ===== BSR range selector: compact inline variant =====
   Mirrors the royalty variant above so the two boxes read as a pair on the shared row.
   Scoped to .filter-fieldset: CategorySearch's min-only BSR slider sits outside one. */
.filter-fieldset .bsr-range-selector {
    padding: 4px 10px 2px;
    min-width: 0;
    box-sizing: border-box;
}

.filter-fieldset .bsr-range-selector .bsr-range-header {
    margin-bottom: 0;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.filter-fieldset .bsr-range-selector .bsr-range-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.filter-fieldset .bsr-range-selector .bsr-range-values {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
}

.filter-fieldset .bsr-range-selector .bsr-range-spacer {
    display: none;
}

.filter-fieldset .bsr-range-selector .bsr-slider-container {
    padding: 0 0 16px;
    overflow: visible !important;
}

.filter-fieldset .bsr-range-selector .bsr-slider-container .e-scale,
.filter-fieldset .bsr-range-selector .bsr-slider-container .e-slider-container,
.filter-fieldset .bsr-range-selector .bsr-slider-container .e-slider-container .e-slider,
.filter-fieldset .bsr-range-selector .bsr-slider-container .e-slider-container .e-slider-track {
    overflow: visible !important;
}

.filter-fieldset .bsr-range-selector .bsr-slider-container .e-control-wrapper.e-slider-container.e-horizontal {
    height: 32px;
}

.filter-fieldset .bsr-range-selector .bsr-slider-container .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
    top: 0;
}

.filter-fieldset .bsr-range-selector .bsr-slider-container .e-scale .e-tick .e-tick-value {
    font-size: 0.68rem;
}

/* Wrap point: the full row (190 + 239 + 249 + 419px of floors) is ~1100px of fieldset
   content, which the card stops offering around 1500px of viewport. Below that the
   dropdowns share a line and each slider takes a full line; the dividers would then sit at
   the start of a line with nothing to separate, so they go. The sliders re-measure
   themselves via Syncfusion's own window-resize handler. */
@media (max-width: 1500px) {
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group {
        padding-left: 0;
    }

    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group::before,
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row > .filter-group + .filter-group::after {
        display: none;
    }

    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-type-filter,
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.date-range-filter {
        flex: 1 1 160px;
        max-width: 260px;
    }

    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.royalty-inline-filter,
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-range-inline-filter {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none; /* the caps must not fight the full line they get here */
    }
}

@media (max-width: 768px) {
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.bsr-type-filter,
    .filter-fieldset.bsr-filters-fieldset .bsr-filters-row .filter-group.date-range-filter {
        max-width: none;
    }
}
/* ===== Search Page Layout Grid System ===== */

/* Main grid: Left column + Categories sidebar */
.filters-main-grid {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 450px);
    gap: 20px;
    align-items: start;
    /* Prevent grid overflow */
    max-width: 100%;
    overflow: hidden;
}

/* Left column vertical stacking */
.filters-left-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* one shared rhythm between macro sections, matched by .filters-sub-grid */
    /* Prevent children from overflowing */
    min-width: 0;
    max-width: 100%;
}

/* Top row: Marketplace + Rating */
.filters-top-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 32px;
    align-items: stretch;
}

/* Responsive: wrap on smaller screens */
@media (max-width: 1200px) {
    .filters-top-row {
        flex-wrap: wrap;
    }

    .filters-top-row .marketplace-fieldset,
    .filters-top-row .rating-filters-compact,
    .filters-top-row .book-type-filters-fieldset {
        flex: 1 1 auto;
    }

    .filters-top-row .rating-filters-compact .rating-range-selector {
        max-width: 400px;
    }
}

/* Marketplace fieldset standalone */
.marketplace-fieldset {
    flex: 0 0 auto;
}

/* Country selector on two rows for the Search page. A fixed column count, not wrapping:
   `flex-wrap: wrap` would give one row whenever the space happens to allow it, and the
   row count would drift with the container width. 4 columns splits the current 7
   marketplaces into 4 + 3; retune this if the marketplace list changes size. */
.marketplace-fieldset .country-selector-buttons .e-btn-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.marketplace-fieldset .country-selector-buttons .e-btn-group .country-btn {
    padding: 6px 10px;
    min-width: 50px;
}

/* ===== Rating Filters Compact in Top Row ===== */
.filters-top-row .rating-filters-compact {
    flex: 0 0 auto;
    padding: 8px 12px;
}

.filters-top-row .rating-filters-compact .fieldset-content {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px 16px;
    align-items: center;
}

.filters-top-row .rating-filters-compact .filter-group {
    margin-bottom: 0;
}

.filters-top-row .rating-filters-compact .reviews-range-selector {
    padding: 6px 8px;
    min-width: 220px;
}

.filters-top-row .rating-filters-compact .reviews-inputs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.filters-top-row .rating-filters-compact .review-input-group {
    width: 80px;
    flex-shrink: 0;
}

.filters-top-row .rating-filters-compact .rating-range-selector {
    min-width: 320px;
    max-width: 400px;
    padding: 6px 10px;
}

/* Sub-grid for fieldsets - SINGLE COLUMN for horizontal internal layout */
.filters-sub-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* BSR fieldset - more compact */
.filters-sub-grid .bsr-filters-fieldset {
    min-width: 0;
}

/* Book Type fieldset (Pub Details) now shares .filters-top-row with Marketplace and
   Ratings, which are both `flex: 0 0 auto`, so this is the item that takes the remainder.
   min-width: 0 is required: a flex item's default min-width: auto would refuse to shrink
   below its content and push the row past the card. */
.filters-top-row .book-type-filters-fieldset {
    flex: 1 1 auto;
    min-width: 0;
}

.book-type-filters-fieldset .filter-group.publisher-type-filter {
    flex: 0 0 auto;
}

/* Lower-specificity twin of the rule in _search-fieldsets.css (3 classes vs 4), which
   therefore wins. Kept in sync so the two do not read as a contradiction. */
.book-type-filters-fieldset .filter-group.month-publication-filter {
    flex: 0 0 clamp(200px, 17.6vw, 320px);
}

.book-type-filters-fieldset .e-btn-group {
    flex-wrap: wrap;
    gap: 0;
}

.book-type-filters-fieldset .e-btn-group .e-btn {
    padding: 6px 14px;
}

/* Month Since Publication slider - more compact */
.book-type-filters-fieldset .month-publication-filter {
    margin-top: 0;
}

/* Month Since Publication Selector - compact box */
.filter-fieldset .month-since-publication-selector {
    padding: 8px 12px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 250px;
}

.filter-fieldset .month-range-header {
    margin-bottom: 6px;
}

.filter-fieldset .month-range-label {
    font-size: 0.8rem;
    font-weight: 600;
}

.filter-fieldset .month-value-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.filter-fieldset .month-slider-container {
    padding: 4px 0 20px 0;
}

/* Categories with rowspan effect - stretches full height */
.filters-main-grid > .filter-fieldset.category-filters-fieldset {
    align-self: stretch;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    /* CRITICAL: contain all content within grid cell */
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0; /* Allow shrinking in grid */
}

/* Category content - flex container with hidden overflow */
.filters-main-grid > .filter-fieldset.category-filters-fieldset > .fieldset-content.category-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TreeView scrollable container - this is where scroll happens */
.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter {
    flex: 1;
    min-height: 0;
    overflow: auto;
    /* Force scrollbar to always show when content overflows */
    scrollbar-gutter: stable;
}

/* TreeView internal elements - allow natural width for horizontal scroll */
.filters-main-grid > .filter-fieldset.category-filters-fieldset .e-treeview {
    width: fit-content;
    min-width: 100%;
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .e-treeview .e-ul {
    width: fit-content;
    min-width: 100%;
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .e-treeview .e-list-item,
.filters-main-grid > .filter-fieldset.category-filters-fieldset .e-treeview .e-text-content {
    white-space: nowrap;
}

/* Categories info - ALWAYS visible at bottom (not sticky, just fixed position in flex) */
.filters-main-grid > .filter-fieldset.category-filters-fieldset .categories-info {
    flex-shrink: 0;
    padding: 12px 0 4px 0;
    margin-top: auto;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.04) 0%, rgba(5, 74, 158, 0.06) 100%);
    border-top: 1px solid rgba(10, 111, 232, 0.2);
    border-radius: 0 0 6px 6px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -8px;
    padding-left: 12px;
    padding-right: 12px;
}

[data-theme="dark"] .filters-main-grid > .filter-fieldset.category-filters-fieldset .categories-info {
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.06) 0%, rgba(5, 74, 158, 0.08) 100%);
    border-top: 1px solid rgba(77, 159, 252, 0.2);
}

/* Custom scrollbar for categories */
.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 4px;
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

.filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-corner {
    background: transparent;
}

[data-theme="dark"] .filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-thumb {
    background: rgba(77, 159, 252, 0.5);
}

[data-theme="dark"] .filters-main-grid > .filter-fieldset.category-filters-fieldset .category-tree-filter::-webkit-scrollbar-thumb:hover {
    background: rgba(77, 159, 252, 0.7);
}

/* Responsive: stack on smaller screens */
@media (max-width: 1200px) {
    .filters-main-grid {
        grid-template-columns: 1fr;
    }

    /* Tighter marketplace grid: 3 columns instead of 4. Declared in THIS 1200px block and
       not the earlier one, which precedes the base rule in this file and so would lose the
       cascade at equal specificity. */
    .marketplace-fieldset .country-selector-buttons .e-btn-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filters-main-grid > .filter-fieldset.category-filters-fieldset {
        max-height: 400px;
        width: 100%;
        order: -1; /* Categories first on mobile */
    }

    .filters-sub-grid,
    .filters-sub-grid:has(.bsr-filters-fieldset) {
        grid-template-columns: 1fr;
    }

    /* ===== Responsive: Fieldset Horizontal Wrap ===== */
    /* BSR: slider va a capo */
    .filter-fieldset.bsr-filters-fieldset .filter-group.bsr-filter {
        flex-basis: 100%;
        min-width: 100%;
    }

    /* Book Type: slider va a capo. flex-basis: 100% needs wrapping back on - the base
       rule is nowrap, under which a 100% basis would overflow the fieldset instead. */
    .filter-fieldset.book-type-filters-fieldset .fieldset-content {
        flex-wrap: wrap;
    }

    .filter-fieldset.book-type-filters-fieldset .filter-group.month-publication-filter {
        flex-basis: 100%;
        min-width: 100%;
        max-width: none; /* the 400px cap must not fight the full line it gets here */
    }

    /* Royalty: slider va a capo */
    .filter-fieldset .royalty-scenario-slider {
        flex-basis: 100%;
        min-width: 100%;
    }

    /* Keywords: stack verticale */
    .filter-fieldset.keyword-filters-fieldset .filter-group.include-keywords-filter,
    .filter-fieldset.keyword-filters-fieldset .filter-group.exclude-keywords-filter {
        flex-basis: 100%;
        min-width: 100%;
    }
}

/* ===== RESPONSIVE RATING FILTERS COMPACT ===== */

/* Medium screens: stack marketplace and rating vertically */
@media (max-width: 1600px) {
    /* Force vertical stacking on medium/small screens */
    .filters-top-row {
        flex-direction: column !important;
        gap: 32px;
    }

    .filters-top-row .marketplace-fieldset,
    .filters-top-row .rating-filters-compact,
    .filters-top-row .book-type-filters-fieldset {
        width: 100%;
        flex: 1 1 auto;
    }

    /* Allow wrapping inside rating fieldset */
    .filters-top-row .rating-filters-compact .fieldset-content {
        flex-wrap: wrap;
    }

    .filters-top-row .rating-filters-compact .rating-range-selector {
        min-width: 250px;
        max-width: 100%;
    }

    .filters-top-row .rating-filters-compact .reviews-range-selector {
        min-width: 180px;
    }
}

/* Small screens and high zoom: full responsive */
@media (max-width: 768px) {
    .filters-top-row .rating-filters-compact .fieldset-content {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
        align-items: stretch;
    }

    .filters-top-row .rating-filters-compact .reviews-range-selector {
        min-width: 0;
        width: 100%;
    }

    .filters-top-row .rating-filters-compact .reviews-inputs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filters-top-row .rating-filters-compact .review-input-group {
        width: 70px;
        min-width: 70px;
    }

    .filters-top-row .rating-filters-compact .rating-range-selector {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

/* ===== Search page: single column ===== */
/* The categories sidebar was replaced by the full-width CategoryFilterBand, so the
   two-column split would otherwise leave an empty 300-450px track on the right.
   CategorySearch keeps the two-column layout through its own scoped override. */
.search-page .filters-main-grid {
    grid-template-columns: 1fr;
}

/* Shared search and keyword-filter actions: centered, ~15% larger buttons.
   Specificity (0,3,0) ties with [data-theme] .filter-actions .btn-* in components/_buttons.css,
   and this file is bundled after it, so these win. */
.search-page .filter-actions,
.category-search-page .filter-actions,
.filter-actions.filter-actions--centered {
    justify-content: center;
    flex-wrap: wrap;
}

.search-page .filter-actions .btn-primary,
.search-page .filter-actions .btn-secondary,
.category-search-page .filter-actions .btn-primary,
.category-search-page .filter-actions .btn-secondary,
.filter-actions.filter-actions--centered .btn-primary,
.filter-actions.filter-actions--centered .btn-secondary {
    padding: calc(14px * var(--filter-action-scale, 1)) calc(28px * var(--filter-action-scale, 1));
    font-size: calc(1.078rem * var(--filter-action-scale, 1));
}
/* ===== Obscured/Disabled Fieldset State ===== */
/* Used when marketplace is not selected - prevents interaction with elegant visual feedback */

.filter-fieldset.fieldset-obscured {
    position: relative;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    filter: grayscale(15%);
    transition: opacity 0.3s ease,
                filter 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Override hover effect when obscured */
.filter-fieldset.fieldset-obscured:hover {
    border-color: rgba(10, 111, 232, 0.15);
    box-shadow: none;
}

[data-theme="dark"] .filter-fieldset.fieldset-obscured:hover {
    border-color: rgba(77, 159, 252, 0.15);
    box-shadow: none;
}

/* Subtle overlay effect */
.filter-fieldset.fieldset-obscured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(128, 128, 128, 0.08) 0%,
        rgba(128, 128, 128, 0.12) 100%
    );
    border-radius: 10px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 10;
}

[data-theme="dark"] .filter-fieldset.fieldset-obscured::after {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Legend styling when obscured - keep visible but muted */
.filter-fieldset.fieldset-obscured legend {
    position: relative;
    z-index: 11;
    background: linear-gradient(135deg, #8a8a8a 0%, #6a6a6a 100%);
    transition: background 0.3s ease;
}

[data-theme="dark"] .filter-fieldset.fieldset-obscured legend {
    background: linear-gradient(135deg, #5a5a5a 0%, #4a4a4a 100%);
}

/* Legend icons when obscured */
.filter-fieldset.fieldset-obscured legend .e-icons,
.filter-fieldset.fieldset-obscured legend .legend-icon-star,
.filter-fieldset.fieldset-obscured legend .legend-icon-currency {
    color: #b0a800;
    opacity: 0.7;
}

.filter-fieldset.fieldset-obscured legend .app-icon {
    filter: grayscale(1);
    opacity: 0.7;
}

/* Disabled message indicator (optional - shows when .show-disabled-message is added) */
.filter-fieldset.fieldset-obscured.show-disabled-message::before {
    content: attr(data-disabled-message);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-content-text);
    background: var(--surface-card);
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--app-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 12;
    white-space: nowrap;
    opacity: 0.95;
}

[data-theme="dark"] .filter-fieldset.fieldset-obscured.show-disabled-message::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Lock icon variant (optional - shows lock icon instead of text) */
.filter-fieldset.fieldset-obscured.show-lock-icon::before {
    content: '\e72e'; /* Syncfusion lock icon */
    font-family: 'e-icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: var(--app-primary);
    background: var(--surface-card);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(10, 111, 232, 0.3);
    box-shadow: 0 4px 12px rgba(10, 111, 232, 0.15);
    z-index: 12;
    opacity: 0.9;
}

[data-theme="dark"] .filter-fieldset.fieldset-obscured.show-lock-icon::before {
    border: 2px solid rgba(77, 159, 252, 0.3);
    box-shadow: 0 4px 12px rgba(77, 159, 252, 0.2);
}

/* Smooth transition back to enabled state */
.filter-fieldset:not(.fieldset-obscured) {
    transition: opacity 0.3s ease,
                filter 0.3s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.filter-fieldset:not(.fieldset-obscured)::after {
    opacity: 0;
}

/* Cursor indication when attempting to interact */
.filter-fieldset.fieldset-obscured * {
    cursor: not-allowed !important;
}

/* Ensure inputs and interactive elements are visually disabled */
.filter-fieldset.fieldset-obscured input,
.filter-fieldset.fieldset-obscured select,
.filter-fieldset.fieldset-obscured button,
.filter-fieldset.fieldset-obscured .e-input,
.filter-fieldset.fieldset-obscured .e-btn,
.filter-fieldset.fieldset-obscured .e-slider,
.filter-fieldset.fieldset-obscured .e-treeview,
.filter-fieldset.fieldset-obscured .e-ddl {
    opacity: 0.85;
}

/* Alternative: Blur effect variant (add .fieldset-blur class for subtle blur) */
.filter-fieldset.fieldset-obscured.fieldset-blur {
    filter: grayscale(30%) blur(1px);
}

.filter-fieldset.fieldset-obscured.fieldset-blur legend {
    filter: blur(0); /* Keep legend sharp */
}

/* Animation for attention when user tries to interact */
@keyframes fieldset-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.filter-fieldset.fieldset-obscured.fieldset-attention {
    animation: fieldset-shake 0.5s ease-in-out;
}

/* Tooltip hint on hover (using title attribute) */
.filter-fieldset.fieldset-obscured[title] {
    cursor: not-allowed;
}

/* ===== App Callout (Reusable Component) ===== */
.app-callout.e-tooltip-wrap {
    background: linear-gradient(135deg, #3B47CE 0%, #2D3699 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow:
        0 10px 40px rgba(59, 71, 206, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
    max-width: none !important;
    /* Animazione gestita da Syncfusion - nessuna animazione CSS custom */
}

/* Close button - elegant circular style */
.app-callout.e-tooltip-wrap .e-tooltip-close {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 24px !important;
    height: 24px !important;
    background: #ffffff !important;
    border: 2px solid #3B47CE !important;
    border-radius: 50% !important;
    color: #3B47CE !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
}

.app-callout.e-tooltip-wrap .e-tooltip-close:hover {
    background: #3B47CE !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.app-callout.e-tooltip-wrap .e-tip-content {
    padding: 0 !important;
    background: transparent !important;
}

/* Arrow tip - larger and softer */
.app-callout.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    height: 14px !important;
    width: 28px !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    height: 14px !important;
    width: 28px !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip-inner {
    color: #3B47CE !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #3B47CE !important;
    border-top-width: 14px !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #3B47CE !important;
    border-bottom-width: 14px !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: #3B47CE !important;
}

.app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-left-color: #3B47CE !important;
}

/* Callout content */
.callout-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
}

.callout-icon {
    font-size: 1.2rem;
    opacity: 0.95;
    animation: callout-bounce 2s ease-in-out infinite;
}

@keyframes callout-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.callout-text {
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Dark theme */
[data-theme="dark"] .app-callout.e-tooltip-wrap {
    background: linear-gradient(135deg, #4B5BD4 0%, #3B47CE 100%) !important;
    box-shadow:
        0 10px 40px rgba(75, 91, 212, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-tooltip-close {
    background: #1e1e2e !important;
    border-color: #4B5BD4 !important;
    color: #4B5BD4 !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-tooltip-close:hover {
    background: #4B5BD4 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-arrow-tip-inner {
    color: #4B5BD4 !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #4B5BD4 !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #4B5BD4 !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: #4B5BD4 !important;
}

[data-theme="dark"] .app-callout.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-left-color: #4B5BD4 !important;
}
/* ===== Books Page Styles ===== */

.books-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - 48px);
}

/* Action message toast */
.action-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8px;
    color: #2e7d32;
    font-weight: 500;
}

[data-theme="dark"] .action-message {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid #66bb6a;
    color: #81c784;
}

.action-message .close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #2e7d32;
    padding: 0 4px;
    line-height: 1;
}

[data-theme="dark"] .action-message .close-btn {
    color: #81c784;
}

.action-message .close-btn:hover {
    opacity: 0.7;
}

/* Chart Section */
.chart-section {
    margin-top: 32px;
}

.chart-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 8px 0;
}

.chart-description {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 16px 0;
}

.chart-hint {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.5;
    margin: 8px 0 0 0;
    font-style: italic;
    text-align: center;
}

/* Grid Container */
.grid-container {
    flex: 1;
    min-height: 400px;
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

[data-theme="dark"] .grid-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Book title styling */
.book-title-cell {
    display: flex;
    align-items: center;
}

.book-title {
    font-weight: 500;
    color: var(--app-content-text);
    line-height: 1.3;
}

/* ASIN link styling */
.asin-link {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--app-primary-dark);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

[data-theme="dark"] .asin-link {
    color: var(--app-primary);
}

.asin-link:hover {
    background: var(--app-primary-light);
    text-decoration: underline;
}

/* Rating cell styling */
.rating-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.rating-stars {
    color: #ff9800;
    font-size: 0.95rem;
    letter-spacing: -1px;
}

[data-theme="dark"] .rating-stars {
    color: #ffb74d;
}

.rating-value {
    font-weight: 500;
    color: var(--app-content-text);
    opacity: 0.8;
    font-size: 0.85rem;
}

/* Keep the search grid stars aligned, including fractional ratings. */
.book-search-grid-container .rating-stars {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
}

.book-search-grid-container .rating-stars-empty {
    display: block;
}

.book-search-grid-container .rating-stars-filled {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    white-space: nowrap;
}

.book-search-grid-container .rating-value {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Reviews count styling */
.reviews-count {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Book Search Grid Container */
.book-search-grid-container {
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 400px;
    /* Prevent grid from exceeding viewport */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .book-search-grid-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Image placeholder styling */
.image-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.image-placeholder.has-images {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

[data-theme="dark"] .image-placeholder.has-images {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.image-placeholder.no-images {
    background: rgba(158, 158, 158, 0.12);
    color: #9e9e9e;
}

[data-theme="dark"] .image-placeholder.no-images {
    background: rgba(158, 158, 158, 0.2);
    color: #757575;
}

.image-placeholder .e-icons {
    font-size: 16px;
}

/* Page count styling */
.page-count {
    white-space: nowrap;
}

/* Subcategory rank chips (BookSearchGrid) */
/* One chip per line: the row is already tall because of the cover image */
.subcat-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.subcat-chip {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-secondary);
    color: var(--app-content-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Cap very long names so the auto-fitted column stays reasonable; full name in the title tooltip */
    max-width: min(100%, 22rem);
}

[data-theme="dark"] .subcat-chip {
    background: rgba(255, 255, 255, 0.08);
}

.subcat-rank {
    font-weight: 600;
    color: var(--app-primary);
}

/* ── Financial Values: unified styling ── */
.financial-value {
    font-family: 'Instrument Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    color: #43a047;
}

.financial-value.royalty {
    color: #00897b;
}

.financial-value.estimate {
    color: #2e7d32;
}

.financial-value.estimate-monthly {
    color: #2e7d32;
    font-weight: 500;
}

.financial-value.price {
    color: #374151;
}

.financial-value.na {
    color: #9ca3af;
    font-family: inherit;
}

/* Dark mode */
[data-theme="dark"] .financial-value {
    color: #81c784;
}

[data-theme="dark"] .financial-value.royalty {
    color: #4db6ac;
}

[data-theme="dark"] .financial-value.estimate {
    color: #81c784;
}

[data-theme="dark"] .financial-value.estimate-monthly {
    color: #81c784;
    font-weight: 500;
}

[data-theme="dark"] .financial-value.price {
    color: #d1d5db;
}

[data-theme="dark"] .financial-value.na {
    color: #6b7280;
}

/* Publication date styling */
.pub-date {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.85;
    white-space: nowrap;
}


/* Results count styling */
.results-count {
    color: var(--app-primary-dark);
    font-weight: 500;
}

[data-theme="dark"] .results-count {
    color: var(--app-primary);
}

/* Book Thumbnail Styling */
.book-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 126px;
    max-height: 150px;
    border-radius: 4px;
    overflow: visible;
    background: transparent;
    margin: 0 auto;
}

.book-thumbnail img {
    max-width: 126px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}

.book-thumbnail.no-image {
    width: 80px;
    height: 100px;
    background: rgba(158, 158, 158, 0.12);
    color: #9e9e9e;
}

[data-theme="dark"] .book-thumbnail.no-image {
    background: rgba(158, 158, 158, 0.2);
    color: #757575;
}

.book-thumbnail .e-icons {
    font-size: 20px;
}

/* Clickable Book Thumbnail (for image carousel) */
.book-thumbnail.clickable {
    cursor: zoom-in;
    transition: transform var(--transition-fast, 0.15s ease);
    position: relative;
}

.book-thumbnail.clickable:hover {
    transform: scale(1.05);
}

.book-thumbnail.clickable:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    pointer-events: none;
}

[data-theme="dark"] .book-thumbnail.clickable:hover::after {
    background: rgba(255, 255, 255, 0.1);
}

/* Image count badge */
.book-thumbnail .image-count-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1;
    min-width: 18px;
    text-align: center;
}

[data-theme="dark"] .book-thumbnail .image-count-badge {
    background: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
}

/* Book cover wrapper with hint text */
.book-cover-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cover-expand-hint {
    font-size: 0.75rem;
    color: #495057;
    text-align: center;
    line-height: 1.2;
    max-width: 100px;
}

[data-theme="dark"] .cover-expand-hint {
    color: #dee2e6;
}

/* ── Action Buttons: Pill Style ── */
td.e-rowcell.e-templatecell.actions-column {
    position: relative !important;
    padding: 0 !important;
}

.actions-cell-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actions-column .grid-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 !important;
}

/* Base pill button */
.pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    border: 1.5px solid;
    background: transparent;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}

.pill-btn:active {
    transform: scale(0.94);
}

/* Pill colors */
.pill-btn {
    color: #2196F3;
    border-color: #2196F3;
}

.pill-btn:hover {
    background: #1976D2;
    color: #fff;
    border-color: #1976D2;
    box-shadow: 0 1px 6px rgba(33, 150, 243, 0.35);
}

[data-theme="dark"] .pill-btn {
    color: #64b5f6;
    border-color: #64b5f6;
}

[data-theme="dark"] .pill-btn:hover {
    background: #64b5f6;
    color: #1a1a1a;
    border-color: #64b5f6;
}

/* Favorite button - star toggle */
.favorite-btn.e-btn.e-flat,
.favorite-btn.e-btn.e-flat:hover,
.favorite-btn.e-btn.e-flat:focus,
.favorite-btn.e-btn.e-flat:active {
    background: transparent !important;
    box-shadow: none !important;
}

.favorite-btn .e-star-filled {
    color: #adb5bd !important;
    font-size: 22px !important;
    transition: color 0.2s ease, filter 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.favorite-btn:active .e-star-filled {
    transform: scale(0.82);
}

.favorite-btn:hover .e-star-filled {
    color: #f0c040 !important;
    filter: drop-shadow(0 0 4px rgba(240, 192, 64, 0.5));
    transform: scale(1.18);
}

.favorite-btn.is-favorite .e-star-filled {
    color: #ffb300 !important;
    filter: drop-shadow(0 0 5px rgba(255, 179, 0, 0.55));
    animation: favorite-pop 0.5s ease-out;
}

.favorite-btn.is-favorite:hover .e-star-filled {
    color: #ffa000 !important;
    filter: drop-shadow(0 0 7px rgba(255, 160, 0, 0.65));
    transform: scale(1.18);
}

/* Dark mode */
[data-theme="dark"] .favorite-btn .e-star-filled {
    color: #6c757d !important;
}

[data-theme="dark"] .favorite-btn:hover .e-star-filled {
    color: #f0c040 !important;
    filter: drop-shadow(0 0 4px rgba(240, 192, 64, 0.5));
}

[data-theme="dark"] .favorite-btn.is-favorite .e-star-filled {
    color: #ffd54f !important;
    filter: drop-shadow(0 0 5px rgba(255, 213, 79, 0.55));
}

[data-theme="dark"] .favorite-btn.is-favorite:hover .e-star-filled {
    color: #ffca28 !important;
    filter: drop-shadow(0 0 7px rgba(255, 202, 40, 0.65));
}

/* Favorite inline status label - appears & fades out */
.favorite-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.favorite-status-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    color: #2196F3;
    pointer-events: none;
    animation: favorite-label-fade 1.3s ease-out forwards;
}

[data-theme="dark"] .favorite-status-label {
    color: #64b5f6;
}

@keyframes favorite-label-fade {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Favorite add animation - pop & glow burst */
@keyframes favorite-pop {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(255, 179, 0, 0.2));
    }
    30% {
        transform: scale(1.5);
        filter: drop-shadow(0 0 14px rgba(255, 179, 0, 0.9));
    }
    55% {
        transform: scale(0.85);
        filter: drop-shadow(0 0 6px rgba(255, 179, 0, 0.5));
    }
    75% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 179, 0, 0.6));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 179, 0, 0.55));
    }
}


/* BSR History Chart */
.bsr-history-chart {
    position: relative;
    min-height: 200px;
    min-width: 300px;
    height: fit-content;
}

.bsr-history-chart .chart-loading-overlay {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .bsr-history-chart .chart-loading-overlay {
    background: rgba(30, 30, 30, 0.8);
}

.bsr-history-chart .chart-state-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #666;
}

[data-theme="dark"] .bsr-history-chart .chart-state-message {
    color: #aaa;
}

.bsr-history-chart .chart-state-message .e-icons {
    font-size: 32px;
}

.bsr-history-chart .chart-error .e-icons {
    color: #dc3545;
}

[data-theme="dark"] .bsr-history-chart .chart-error .e-icons {
    color: #f87171;
}

.bsr-history-chart .chart-no-data .e-icons {
    color: #e65100;
}

[data-theme="dark"] .bsr-history-chart .chart-no-data .e-icons {
    color: #a78bfa;
}

.bsr-history-chart .reset-zoom-container {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.bsr-history-chart .reset-zoom-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(255, 152, 0, 0.15);
    color: #f57c00;
    border: 1px solid #ff9800;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .bsr-history-chart .reset-zoom-btn {
    background: rgba(255, 183, 77, 0.2);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.5);
}

.bsr-history-chart .reset-zoom-btn:hover {
    background: rgba(255, 152, 0, 0.25);
    border-color: #f57c00;
}

[data-theme="dark"] .bsr-history-chart .reset-zoom-btn:hover {
    background: rgba(255, 183, 77, 0.35);
    border-color: #ffb74d;
}

.bsr-history-chart .reset-zoom-btn .e-icons {
    font-size: 14px;
}

/* Positioned right after the centered chart legend, with a left-pointing arrow */
.bsr-history-chart .chart-legend-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    color: #fff;
    background: #2196F3;
    border-radius: 5px;
    position: absolute;
    bottom: 20px;
    left: calc(50% + 62px);
    z-index: 5;
    opacity: 0.85;
}

.bsr-history-chart .chart-legend-hint::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #2196F3;
}

.bsr-history-chart .chart-legend-hint .e-icons {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

/* BSR Detail Container */
.bsr-detail-container {
    padding: 16px 24px;
    background: #fafafa;
    border-radius: 4px;
    margin: 8px 0;
}

[data-theme="dark"] .bsr-detail-container {
    background: #2d2d2d;
}

.bsr-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1c1b1f;
}

[data-theme="dark"] .bsr-detail-header {
    color: #e6e1e5;
}

.bsr-detail-header .e-icons {
    font-size: 18px;
    color: #e65100;
}

[data-theme="dark"] .bsr-detail-header .e-icons {
    color: #ff9800;
}

/* ===== Book Detail Tabs ===== */
.book-detail-tabs {
    padding: 8px 16px;
}

.book-detail-tabs .e-tab {
    background: transparent;
}

.book-detail-tabs .e-tab .e-tab-header {
    background: transparent;
    border-bottom: 1px solid var(--app-border-color, #e0e0e0);
}

[data-theme="dark"] .book-detail-tabs .e-tab .e-tab-header {
    border-bottom-color: #3d3d3d;
}

.book-detail-tabs .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 8px 16px;
}

.book-detail-tabs .e-tab .e-content {
    padding: 0;
}

.book-detail-tabs .tab-content {
    padding: 16px 0;
}

.book-detail-tabs .bsr-tab-content {
    min-height: 200px;
    display: flex;
    justify-content: center;
}

.book-detail-tabs .royalty-tab-content {
    min-height: 200px;
}

/* ===== Book Royalty Detail ===== */
.book-royalty-detail {
    width: 100%;
}

.book-royalty-detail .royalty-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-royalty-detail .royalty-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border-color, #e0e0e0);
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-header {
    border-bottom-color: #3d3d3d;
}

.book-royalty-detail .royalty-detail-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--app-content-text, #666);
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-message {
    background: rgba(255, 255, 255, 0.05);
    color: #b0b0b0;
}

.book-royalty-detail .royalty-detail-message .e-icons {
    font-size: 20px;
    color: #757575;
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-message .e-icons {
    color: #9e9e9e;
}

.book-royalty-detail .royalty-detail-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(244, 67, 54, 0.1);
    border-radius: 6px;
    color: #c62828;
    font-size: 0.9rem;
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-error {
    background: rgba(244, 67, 54, 0.15);
    color: #ef5350;
}

.book-royalty-detail .royalty-detail-error .e-icons {
    font-size: 18px;
}

.book-royalty-detail .royalty-detail-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 152, 0, 0.1);
    border-radius: 6px;
    color: #e65100;
    font-size: 0.9rem;
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-warning {
    background: rgba(255, 183, 77, 0.15);
    color: #ffb74d;
}

.book-royalty-detail .royalty-detail-warning .e-icons {
    font-size: 18px;
    color: #ff9800;
    flex-shrink: 0;
    margin-top: 1px;
}

[data-theme="dark"] .book-royalty-detail .royalty-detail-warning .e-icons {
    color: #ffb74d;
}

.book-royalty-detail .royalty-detail-warning .warning-messages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Compact RoyaltyResultsCard styling in grid context */
.book-royalty-detail .calculator-results {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.book-royalty-detail .results-card {
    margin: 0;
    box-shadow: none;
    border: 1px solid var(--app-border-color, #e0e0e0);
}

[data-theme="dark"] .book-royalty-detail .results-card {
    border-color: #3d3d3d;
}

/* ===== Book Detail Tab Control ===== */
.book-detail-tab-control {
    background: transparent;
}

.book-detail-tab-control .e-tab-header {
    background: transparent;
}

.book-detail-tab-control .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 8px 16px;
    border-radius: 6px 6px 0 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Active/Selected tab styling */
.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background-color: var(--app-primary, #7c4dff) !important;
    color: white !important;
}

.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .e-tab-wrap span,
.book-detail-tab-control .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-icons {
    color: white !important;
}

/* Hover state for non-active tabs */
.book-detail-tab-control .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
    background-color: var(--app-primary-light, rgba(124, 77, 255, 0.1));
}

/* Active tab indicator (bottom border) - hide since we use background */
.book-detail-tab-control .e-tab-header .e-indicator {
    display: none;
}

/* Tab header content with icon */
.tab-header-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Revenue tab content */
.revenue-tab-content {
    min-height: 200px;
}

.revenue-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background-color: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--app-content-text, #1c1b1f);
}

.revenue-disclaimer .disclaimer-icon {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--info-color, #2196f3);
    margin-top: 2px;
}

.revenue-disclaimer p {
    margin: 0;
}

.revenue-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--app-border-color, rgba(255, 255, 255, 0.1));
    align-items: flex-start;
}

.revenue-selectors > * {
    flex: 0 0 auto;
}

/* Revenue Breakdown Panel */
.revenue-breakdown-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.revenue-selectors--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--app-border-color, rgba(0, 0, 0, 0.12));
}

.revenue-selectors--compact > * {
    flex: 0 0 auto;
}

.revenue-disclaimer--inline {
    flex: 0 1 auto;
    margin: 0;
    padding: 8px 12px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.revenue-disclaimer--inline .disclaimer-icon {
    font-size: 14px;
}

/* Historical estimate banner */
.revenue-historical-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(33, 150, 243, 0.03) 100%);
    border: 1px solid rgba(33, 150, 243, 0.3);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--app-content-text, #1c1b1f);
}

.revenue-historical-banner .e-icons {
    font-size: 15px;
    color: var(--info-color, #2196f3);
    flex-shrink: 0;
}

[data-theme="dark"] .revenue-historical-banner {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.15) 0%, rgba(33, 150, 243, 0.06) 100%);
    border-color: rgba(66, 165, 245, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .revenue-historical-banner .e-icons {
    color: #42a5f5;
}

/* Revenue unavailable message */
.revenue-unavailable {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 152, 0, 0.03) 100%);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 10px;
}

.revenue-unavailable-icon {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--app-warning, #ff9800);
    margin-top: 2px;
}

.revenue-unavailable-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.revenue-unavailable-text strong {
    font-size: 0.95rem;
    color: var(--app-content-text, #1c1b1f);
}

.revenue-unavailable-text p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--app-content-text-secondary, #666);
}

[data-theme="dark"] .revenue-unavailable {
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.18) 0%, rgba(255, 152, 0, 0.08) 100%);
    border-color: rgba(255, 167, 38, 0.45);
}

[data-theme="dark"] .revenue-unavailable-icon {
    color: #ffa726;
}

[data-theme="dark"] .revenue-unavailable-text strong {
    color: #fff3e0;
}

[data-theme="dark"] .revenue-unavailable-text p {
    color: rgba(255, 255, 255, 0.7);
}

/* Footer with close button */
.detail-tabs-footer {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px 0;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    margin-top: 8px;
}

.close-detail-btn {
    text-transform: none !important;
    padding: 8px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.close-detail-btn:hover {
    background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

.close-detail-btn .e-btn-icon {
    font-size: 14px !important;
}

/* ===== Book Search Grid Font Sizes ===== */
.book-search-grid-container .e-grid .e-headercelldiv {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

.book-search-grid-container .e-grid .e-headercelldiv .e-control.e-tooltip,
.book-search-grid-container .e-grid .e-headercelldiv .e-control.e-tooltip span {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.book-search-grid-container .e-grid .e-rowcell {
    font-size: 0.9rem !important;
}

/* ===== Row Selection Styles ===== */

/* Rimuove focus border dalle celle - Override del selettore Syncfusion sf-grid */
.book-search-grid-container .e-grid.sf-grid :is(
    .e-groupdroparea,
    .e-groupdroparea .e-groupsort,
    .e-groupdroparea .e-ungroupbutton,
    .e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-headercontent td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-groupcaption:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordplusexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordpluscollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowcollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content th.e-detailcell:not(.e-menu-item):not(.e-editedbatchcell)
):is(:focus, :focus-visible) {
    box-shadow: none !important;
}

/* ===== Row Click Expansion Styles ===== */

/* Completely hide the detail expand/collapse column (official Syncfusion selectors) */
.book-search-grid-container .e-detailrowcollapse,
.book-search-grid-container .e-detailrowexpand,
.book-search-grid-container .e-detailindentcell,
.book-search-grid-container .e-detail-intent,
.book-search-grid-container .e-detailheadercell {
    display: none !important;
}

/* Cursor pointer on clickable rows (exclude detail rows) */
.book-search-grid-container .e-grid .e-row:not(.e-detailrow) {
    cursor: pointer;
}

/* Hover effect for clickable rows */
.book-search-grid-container .e-grid .e-row:not(.e-detailrow):hover {
    background-color: rgba(13, 110, 253, 0.04);
}

[data-theme="dark"] .book-search-grid-container .e-grid .e-row:not(.e-detailrow):hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Alt row hover */
.book-search-grid-container .e-grid .e-row.e-altrow:not(.e-detailrow):hover {
    background-color: rgba(13, 110, 253, 0.06);
}

[data-theme="dark"] .book-search-grid-container .e-grid .e-row.e-altrow:not(.e-detailrow):hover {
    background-color: rgba(255, 255, 255, 0.08);
}


/* ===== Royalty Calculator Page ===== */

.royalty-calculator-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.calculator-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Calculator Card */
.royalty-calculator-page .calculator-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .royalty-calculator-page .calculator-card {
    background:
        linear-gradient(145deg, rgba(55, 65, 85, 0.5) 0%, rgba(35, 40, 55, 0.6) 100%),
        var(--surface-card);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Disable hover effect on calculator card */
.royalty-calculator-page .calculator-card.e-card:hover,
.royalty-calculator-page .calculator-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: inherit;
}

[data-theme="dark"] .royalty-calculator-page .calculator-card.e-card:hover,
[data-theme="dark"] .royalty-calculator-page .calculator-card:hover,
[data-theme="dark"] .royalty-calculator-page .e-card.calculator-card:hover {
    background:
        linear-gradient(145deg, rgba(55, 65, 85, 0.5) 0%, rgba(35, 40, 55, 0.6) 100%),
        var(--surface-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Fieldsets Grid Layout */
.calculator-fieldsets-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fieldsets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .fieldsets-row {
        grid-template-columns: 1fr;
    }
}

/* Top row with marketplace + vat + book type */
.fieldsets-row.fieldsets-row-top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.fieldsets-row-top .marketplace-wrapper {
    flex: 0 0 auto;
}

/* VAT Type Fieldset */
.fieldsets-row-top .filter-fieldset.vat-fieldset {
    flex: 0 0 auto;
}

.filter-fieldset.vat-fieldset .fieldset-content.vat-content {
    display: flex;
    align-items: center;
}

.fieldsets-row-top .filter-fieldset.book-type-fieldset {
    flex: 1 1 auto;
    min-width: 300px;
}

@media (max-width: 768px) {
    .fieldsets-row.fieldsets-row-top {
        flex-direction: column;
    }

    .fieldsets-row-top .filter-fieldset.book-type-fieldset {
        min-width: unset;
    }
}

/* Book Type Fieldset Content */
.filter-fieldset.book-type-fieldset .fieldset-content.book-type-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.filter-fieldset.book-type-fieldset .filter-group {
    flex: 0 0 auto;
}

/* Book Specs Fieldset Content */
.filter-fieldset.book-specs-fieldset .fieldset-content.book-specs-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.filter-fieldset.book-specs-fieldset .filter-group.page-count-group {
    flex: 0 0 140px;
}

.filter-fieldset.book-specs-fieldset .filter-group.trim-size-group {
    flex: 1 1 auto;
    min-width: 280px;
}

/* Price Fieldset Content */
.filter-fieldset.price-fieldset .fieldset-content.price-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-fieldset.price-fieldset .price-input-group {
    max-width: 200px;
}

.filter-fieldset.price-fieldset .price-input {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Input Labels inside fieldsets */
.filter-fieldset .input-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

/* Input Hints inside fieldsets */
.filter-fieldset .input-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--app-content-text);
    opacity: 0.6;
    margin-top: 4px;
}

.filter-fieldset .input-hint.trim-category-hint strong {
    color: var(--app-primary-dark);
}

[data-theme="dark"] .filter-fieldset .input-hint.trim-category-hint strong {
    color: var(--app-primary);
}

/* Trim Size Inputs */
.filter-fieldset .trim-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-fieldset .trim-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-fieldset .trim-input .e-numeric {
    width: 90px;
}

.filter-fieldset .trim-separator {
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-content-text);
    opacity: 0.6;
}

.filter-fieldset .unit-label {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

/* Obscured fieldset state */
.filter-fieldset.fieldset-obscured {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(30%);
}

.filter-fieldset.fieldset-obscured legend {
    background: var(--app-border-color);
}

/* Calculator Actions */
.calculator-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px solid var(--app-border-color);
}

.calculator-actions .btn-primary,
.calculator-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.calculator-actions .btn-primary .e-icons,
.calculator-actions .btn-secondary .e-icons {
    font-size: 1rem;
}

.calculator-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error Message */
.royalty-calculator-page .error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    color: #c62828;
    font-size: 0.9rem;
    font-weight: 500;
}

[data-theme="dark"] .royalty-calculator-page .error-message {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.3);
    color: #ef5350;
}

.royalty-calculator-page .error-message .e-icons {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Results Header */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.results-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-content-text);
}

/* Results Sections */
.result-section {
    margin-bottom: 10px;
}

.result-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 6px 0;
    opacity: 0.8;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.breakdown-label {
    font-size: 0.9rem;
    color: var(--app-content-text);
}

.breakdown-value {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--app-content-text);
}

.breakdown-value.negative {
    color: #d32f2f;
}

[data-theme="dark"] .breakdown-value.negative {
    color: #ef5350;
}

.breakdown-row.total-row {
    font-weight: 600;
    border-top: 1px dashed var(--app-border-color);
    padding-top: 10px;
    margin-top: 4px;
}

.breakdown-row.net-price-row {
    font-weight: 500;
    border-top: 1px dashed var(--app-border-color);
    padding-top: 10px;
    margin-top: 4px;
}

.breakdown-divider {
    height: 1px;
    background: var(--app-border-color);
    margin: 8px 0;
}

.breakdown-divider.thick {
    height: 2px;
    background: #e65100;
}

[data-theme="dark"] .breakdown-divider.thick {
    background: var(--app-primary);
}

/* Royalty Section */
.royalty-section {
    background: rgba(230, 81, 0, 0.05);
    padding: 16px;
    border-radius: 8px;
    margin-top: 8px;
}

[data-theme="dark"] .royalty-section {
    background: rgba(255, 255, 255, 0.05);
}

.royalty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.royalty-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-content-text);
}

.royalty-value {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 1.5rem;
    font-weight: 700;
}

.royalty-row.positive .royalty-value {
    color: #2e7d32;
}

[data-theme="dark"] .royalty-row.positive .royalty-value {
    color: #81c784;
}

.royalty-row.negative .royalty-value {
    color: #d32f2f;
}

[data-theme="dark"] .royalty-row.negative .royalty-value {
    color: #ef5350;
}

.royalty-formula {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.6;
    margin-top: 8px;
    font-family: 'Roboto Mono', 'Consolas', monospace;
}

/* Full-width royalty section */
.royalty-section-full {
    background: rgba(230, 81, 0, 0.08);
    padding: 12px 24px;
    border-radius: 10px;
    margin-top: 12px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 1px solid rgba(230, 81, 0, 0.2);
}

[data-theme="dark"] .royalty-section-full {
    background: var(--app-primary-light);
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.royalty-section-full .royalty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.royalty-section-full .royalty-label {
    font-size: 1rem;
    font-weight: 700;
}

.royalty-section-full .royalty-value {
    font-size: 1.4rem;
    font-weight: 800;
}

.royalty-section-full .royalty-formula {
    text-align: center;
}

/* Result Metadata */
.result-metadata {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--app-border-color);
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.metadata-separator {
    opacity: 0.4;
}

/* Results Placeholder */
.results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: var(--app-content-text);
    opacity: 0.5;
}

[data-theme="dark"] .results-placeholder {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.results-placeholder svg {
    margin-bottom: 16px;
}

.results-placeholder p {
    font-size: 0.95rem;
    margin: 0;
}

/* Three-Column Layout (compact) */
.results-three-column {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.result-column {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 10px;
    border-right: 1px solid var(--app-border-color);
}

.result-column:first-child {
    padding-left: 0;
}

.result-column:last-child {
    border-right: none;
    padding-right: 0;
}

.result-column h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 4px 0;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.result-column .breakdown-row {
    padding: 1px 0;
}

.result-column .breakdown-label {
    font-size: 0.78rem;
}

.result-column .breakdown-value {
    font-size: 0.82rem;
}

/* Royalty Column */
.royalty-column .royalty-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(230, 81, 0, 0.08);
    border: 1px solid rgba(230, 81, 0, 0.2);
}

[data-theme="dark"] .royalty-column .royalty-result {
    background: var(--app-primary-light);
    border-color: rgba(255, 152, 0, 0.25);
}

.royalty-column .royalty-result .royalty-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-content-text);
}

.royalty-column .royalty-result .royalty-value {
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 700;
}

.royalty-column .royalty-result.positive .royalty-value {
    color: #2e7d32;
}

[data-theme="dark"] .royalty-column .royalty-result.positive .royalty-value {
    color: #81c784;
}

.royalty-column .royalty-result.negative .royalty-value {
    color: #d32f2f;
}

[data-theme="dark"] .royalty-column .royalty-result.negative .royalty-value {
    color: #ef5350;
}

/* Chart Column */
.chart-column {
    flex: 1 1 auto !important;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: none !important;
}

/* Price Breakdown Pie Chart */
.price-breakdown-chart {
    width: 100%;
    min-height: 180px;
}

/* Legacy Two-Column Layout */
.results-two-column {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.results-data-column {
    flex: 1;
    min-width: 280px;
}

.results-chart-column {
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid var(--app-border-color);
    padding-left: 16px;
}

.results-chart-column h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 4px 0;
    opacity: 0.8;
    text-align: center;
}

.negative-royalty-warning {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: 6px;
    color: #e65100;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

[data-theme="dark"] .negative-royalty-warning {
    background: rgba(255, 152, 0, 0.15);
    color: #ffcc80;
}

/* Royalty Scenario Fieldset */
.royalty-scenario-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.03) 0%, rgba(5, 74, 158, 0.05) 100%);
    width: fit-content;
    min-width: 280px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .royalty-scenario-fieldset {
    border: 1px solid rgba(77, 159, 252, 0.15);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.04) 0%, rgba(5, 74, 158, 0.06) 100%);
}

.royalty-scenario-fieldset:hover {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .royalty-scenario-fieldset:hover {
    border-color: rgba(77, 159, 252, 0.28);
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.1);
}

.royalty-scenario-fieldset legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-primary-dark);
    padding: 0 10px;
}

[data-theme="dark"] .royalty-scenario-fieldset legend {
    color: var(--app-primary);
}

.royalty-info-icon {
    font-size: 1.1rem;
    color: var(--app-primary);
    cursor: help;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.royalty-info-icon:hover {
    opacity: 1;
}

.royalty-scenario-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.royalty-scenario-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.royalty-scenario-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--app-content-text);
    min-width: 55px;
}

.royalty-scenario-slider {
    margin-top: 4px;
}

/* Compact overrides for components inside royalty-scenario */
.royalty-scenario-fieldset .interior-type-selector,
.royalty-scenario-fieldset .vat-type-selector {
    flex-direction: row;
    gap: 0;
}

.royalty-scenario-fieldset .interior-type-selector .selector-label,
.royalty-scenario-fieldset .vat-type-selector .selector-label {
    display: none;
}

.royalty-scenario-fieldset .interior-type-selector .e-btn-group .e-btn,
.royalty-scenario-fieldset .vat-type-selector .e-btn-group .e-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.royalty-scenario-fieldset .royalty-range-selector {
    padding: 0;
    background: transparent;
    border: none;
    min-width: auto;
}

.royalty-scenario-fieldset .royalty-range-header {
    margin-bottom: 8px;
}

.royalty-scenario-fieldset .royalty-range-label {
    font-size: 0.875rem;
}

.royalty-scenario-fieldset .royalty-value-badge {
    font-size: 0.9rem;
    padding: 4px 10px;
}

.filters-row-horizontal .royalty-scenario-fieldset {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Ink Type Selector */
.ink-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ink-type-selector .selector-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--app-content-text);
}

/* Binding Type Selector */
.binding-type-selector .selector-label {
    color: var(--app-content-text);
}

/* Month Since Publication Selector */
.month-since-publication-selector {
    padding: 16px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 350px;
}

.month-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.month-range-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-content-text);
}

.month-range-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-slider-container {
    padding: 8px 0;
}

/* Royalty Range Selector */
.royalty-range-selector {
    padding: 16px;
    background: var(--surface-card);
    border-radius: 8px;
    border: 1px solid var(--app-border-color);
    min-width: 350px;
}

.royalty-range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.royalty-range-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-content-text);
}

.royalty-range-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.royalty-slider-container {
    padding: 8px 0;
}
/* ===== Authentication Pages ===== */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 48px);
    padding: 24px;
}

.auth-container {
    background: var(--surface-card);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
}

[data-theme="dark"] .auth-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 8px 0;
}

.auth-header h1:focus,
.auth-header h1:focus-visible {
    outline: none !important;
}

.auth-header p {
    font-size: 0.95rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.remember-me-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forgot-password-link {
    font-size: 0.85rem;
    color: var(--app-primary-dark);
    text-decoration: none;
}

[data-theme="dark"] .forgot-password-link {
    color: var(--app-primary);
}

.forgot-password-link:hover {
    text-decoration: underline;
}

/* Terms acceptance checkbox */
.auth-form .form-checkbox {
    margin-top: 4px;
}

.auth-form .form-checkbox .checkbox-label {
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.5;
}

.auth-form .form-checkbox .checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.auth-form .form-checkbox .checkbox-label a {
    color: var(--app-primary-dark);
    text-decoration: none;
    font-weight: 500;
}

[data-theme="dark"] .auth-form .form-checkbox .checkbox-label a {
    color: var(--app-primary);
}

.auth-form .form-checkbox .checkbox-label a:hover {
    text-decoration: underline;
}

.auth-form .form-checkbox .validation-message {
    margin-top: 4px;
}

.auth-submit-btn {
    width: 100%;
    height: 44px;
    font-size: 1rem;
    font-weight: 500;
    background: var(--app-primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

[data-theme="dark"] .auth-submit-btn {
    color: #ffffff;
}

.auth-submit-btn:hover {
    background: var(--app-primary-hover);
}

.auth-submit-btn:active {
    background: var(--app-primary-dark);
}

.auth-error {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #ffebee;
    border: 1px solid #f44336;
    border-radius: 8px;
    color: #c62828;
    font-size: 0.9rem;
}

[data-theme="dark"] .auth-error {
    background: rgba(244, 67, 54, 0.15);
    color: #ef9a9a;
}

.auth-success {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 8px;
    color: #2e7d32;
    font-size: 0.9rem;
}

[data-theme="dark"] .auth-success {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid #66bb6a;
    color: #81c784;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--app-border-color);
}

.auth-footer p {
    font-size: 0.9rem;
    color: var(--app-content-text);
    margin: 0;
}

.auth-footer a {
    color: var(--app-primary-dark);
    font-weight: 500;
    text-decoration: none;
}

[data-theme="dark"] .auth-footer a {
    color: var(--app-primary);
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Auth Layout */
.auth-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--app-content-bg);
}

.auth-layout-header {
    height: var(--header-height);
    background: var(--app-header-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.auth-logo:hover {
    opacity: 0.85;
}

.auth-logo__img {
    height: 35px;
    width: auto;
    flex-shrink: 0;
}

.auth-layout-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

/* Not Found Page */
.not-found-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - 48px);
    padding: 24px;
}

.not-found-content {
    text-align: center;
    max-width: 400px;
}

.not-found-icon {
    color: var(--app-sidebar-active);
    margin-bottom: 24px;
}

.not-found-title {
    font-size: 6rem;
    font-weight: 700;
    color: var(--app-sidebar-active);
    margin: 0;
    line-height: 1;
}

.not-found-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 16px 0 8px 0;
}

.not-found-message {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 32px 0;
}

.not-found-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--app-sidebar-active);
    color: var(--app-sidebar-active-text);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.not-found-button:hover {
    background: var(--app-primary-hover);
    transform: translateY(-2px);
}

[data-theme="dark"] .not-found-button:hover {
    background: #e0e0e0;
}

.not-found-button:active {
    transform: translateY(0);
}

/* Dialogs */
.negative-royalty-dialog .e-dlg-header {
    color: var(--app-error);
    font-weight: 600;
}

.warning-dialog-content {
    text-align: center;
    padding: 1rem 0;
}

.warning-icon {
    color: var(--app-warning);
    margin-bottom: 1rem;
}

.warning-message {
    font-size: 1rem;
    color: var(--app-content-text);
    margin-bottom: 1.5rem;
}

.warning-details {
    background: var(--surface-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
}

.warning-details .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--app-border-color);
}

.warning-details .detail-row:last-child {
    border-bottom: none;
}

.warning-details .detail-row.negative span:last-child {
    color: var(--app-error);
    font-weight: 600;
}

.warning-details .detail-row.suggestion span:last-child {
    color: var(--app-success);
    font-weight: 600;
}

/* Confirm Dialog */
.confirm-dialog .e-dlg-header {
    font-weight: 600;
}

.confirm-dialog-content {
    text-align: center;
    padding: 1rem 0;
}

.confirm-dialog .dialog-icon {
    margin-bottom: 1rem;
}

.confirm-dialog .dialog-message {
    font-size: 1rem;
    color: var(--app-content-text);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.confirm-dialog .dialog-custom-content {
    margin-top: 1rem;
    text-align: left;
}

/* Icon color variants */
.confirm-dialog .icon-warning {
    color: #f59e0b;
}

[data-theme="dark"] .confirm-dialog .icon-warning {
    color: #fbbf24;
}

.confirm-dialog .icon-error {
    color: #dc2626;
}

[data-theme="dark"] .confirm-dialog .icon-error {
    color: #f87171;
}

.confirm-dialog .icon-info {
    color: #3b82f6;
}

[data-theme="dark"] .confirm-dialog .icon-info {
    color: #60a5fa;
}

.confirm-dialog .icon-success {
    color: #22c55e;
}

[data-theme="dark"] .confirm-dialog .icon-success {
    color: #4ade80;
}

.confirm-dialog .icon-question {
    color: #8b5cf6;
}

[data-theme="dark"] .confirm-dialog .icon-question {
    color: #a78bfa;
}

/* Dialog header variants */
.confirm-dialog-warning .e-dlg-header {
    color: #b45309;
}

[data-theme="dark"] .confirm-dialog-warning .e-dlg-header {
    color: #fbbf24;
}

.confirm-dialog-error .e-dlg-header {
    color: #dc2626;
}

[data-theme="dark"] .confirm-dialog-error .e-dlg-header {
    color: #f87171;
}

.confirm-dialog-info .e-dlg-header {
    color: #2563eb;
}

[data-theme="dark"] .confirm-dialog-info .e-dlg-header {
    color: #60a5fa;
}

.confirm-dialog-success .e-dlg-header {
    color: #16a34a;
}

[data-theme="dark"] .confirm-dialog-success .e-dlg-header {
    color: #4ade80;
}

.confirm-dialog-question .e-dlg-header {
    color: #7c3aed;
}

[data-theme="dark"] .confirm-dialog-question .e-dlg-header {
    color: #a78bfa;
}

/* Tooltip Styles */
.app-tooltip.e-tooltip-wrap {
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .app-tooltip.e-tooltip-wrap {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background-color: #3d3d3d;
}

.app-tooltip.e-tooltip-wrap .e-tip-content {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
}

[data-theme="dark"] .app-tooltip.e-tooltip-wrap .e-tip-content {
    color: #e6e1e5;
}

[data-theme="dark"] .app-tooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #3d3d3d;
}

[data-theme="dark"] .app-tooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #3d3d3d;
}

.app-tooltip-nowrap.e-tooltip-wrap .e-tip-content {
    white-space: nowrap;
}

.app-tooltip-rich.e-tooltip-wrap {
    max-width: 350px;
}

.app-tooltip-rich.e-tooltip-wrap .e-tip-content {
    padding: 12px 16px;
}

.app-tooltip-warning-border.e-tooltip-wrap {
    border: 2px solid #ff9800;
}

[data-theme="dark"] .app-tooltip-warning-border.e-tooltip-wrap {
    border: 2px solid #ffb74d;
}

/* Info tooltip variant */
.app-tooltip-info.e-tooltip-wrap {
    background-color: #1976D2;
}

.app-tooltip-info.e-tooltip-wrap .e-tip-content {
    color: #ffffff;
}

.app-tooltip-info.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #1976D2;
}

.app-tooltip-info.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #1976D2;
}

.app-tooltip-info.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: #1976D2;
}

.app-tooltip-info.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-left-color: #1976D2;
}

/* Warning tooltip variant */
.app-tooltip-warning.e-tooltip-wrap {
    background-color: #F57C00;
}

.app-tooltip-warning.e-tooltip-wrap .e-tip-content {
    color: #ffffff;
}

.app-tooltip-warning.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #F57C00;
}

.app-tooltip-warning.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #F57C00;
}

.app-tooltip-warning.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: #F57C00;
}

.app-tooltip-warning.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-left-color: #F57C00;
}

/* Success tooltip variant */
.app-tooltip-success.e-tooltip-wrap {
    background-color: #388E3C;
}

.app-tooltip-success.e-tooltip-wrap .e-tip-content {
    color: #ffffff;
}

.app-tooltip-success.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom-color: #388E3C;
}

.app-tooltip-success.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-top-color: #388E3C;
}

.app-tooltip-success.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: #388E3C;
}

.app-tooltip-success.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-left-color: #388E3C;
}

/* Info icons */
.bsr-info-icon,
.month-info-icon,
.binding-info-icon,
.publisher-info-icon {
    font-size: 14px;
    color: var(--app-primary-dark);
    margin-left: 4px;
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

[data-theme="dark"] .bsr-info-icon,
[data-theme="dark"] .month-info-icon,
[data-theme="dark"] .binding-info-icon,
[data-theme="dark"] .publisher-info-icon {
    color: var(--app-primary);
}

.bsr-info-icon:hover,
.month-info-icon:hover,
.binding-info-icon:hover,
.publisher-info-icon:hover {
    opacity: 1;
}
/* ===== Category Search Page Styles ===== */

.category-search-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

/* ===== Filters Layout ===== */
/* Row 1: Marketplace + BSR side by side; Categories full width below. */
.category-search-page .filters-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-search-page .category-top-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.category-search-page .category-top-row .marketplace-fieldset {
    flex: 0 0 auto;
}

.category-search-page .category-top-row .bsr-filter-fieldset {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== BSR Filter Fieldset ===== */
.category-search-page .filter-fieldset.bsr-filter-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-search-page .filter-fieldset.bsr-filter-fieldset:hover:not(.fieldset-obscured) {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .category-search-page .filter-fieldset.bsr-filter-fieldset {
    border-color: rgba(77, 159, 252, 0.2);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.04) 0%, rgba(45, 54, 153, 0.06) 100%);
}

[data-theme="dark"] .category-search-page .filter-fieldset.bsr-filter-fieldset:hover:not(.fieldset-obscured) {
    border-color: rgba(77, 159, 252, 0.35);
    box-shadow: 0 2px 12px rgba(77, 159, 252, 0.12);
}

.category-search-page .filter-fieldset.bsr-filter-fieldset legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    padding: 4px 12px;
    background: var(--app-primary);
    border-radius: 4px;
}

.category-search-page .filter-fieldset.bsr-filter-fieldset legend .e-icons {
    color: #FFD700;
    font-size: 0.9rem;
}

.category-search-page .filter-fieldset.bsr-filter-fieldset .fieldset-content {
    padding-top: 8px;
}

/* ===== Category Filters Fieldset (Right Column) ===== */
.category-search-page .filter-fieldset.category-filters-fieldset {
    border: 1px solid rgba(10, 111, 232, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.02) 0%, rgba(5, 74, 158, 0.04) 100%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.category-search-page .filter-fieldset.category-filters-fieldset:hover:not(.fieldset-obscured) {
    border-color: rgba(10, 111, 232, 0.25);
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.08);
}

[data-theme="dark"] .category-search-page .filter-fieldset.category-filters-fieldset {
    border-color: rgba(77, 159, 252, 0.2);
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.04) 0%, rgba(45, 54, 153, 0.06) 100%);
}

[data-theme="dark"] .category-search-page .filter-fieldset.category-filters-fieldset:hover:not(.fieldset-obscured) {
    border-color: rgba(77, 159, 252, 0.35);
    box-shadow: 0 2px 12px rgba(77, 159, 252, 0.12);
}

.category-search-page .filter-fieldset.category-filters-fieldset legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    padding: 4px 12px;
    background: var(--app-primary);
    border-radius: 4px;
}

.category-search-page .filter-fieldset.category-filters-fieldset legend .e-icons {
    color: #FFD700;
    font-size: 0.9rem;
}

.category-search-page .filter-fieldset.category-filters-fieldset legend .fieldset-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Category Content Area */
.category-search-page .fieldset-content.category-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    min-height: 0;
}

/* Category Tree Wrapper */
.category-search-page .category-tree-wrapper {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: var(--surface-card);
    overflow: hidden;
    min-height: 280px;
}

[data-theme="dark"] .category-search-page .category-tree-wrapper {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Categories Info */
.category-search-page .categories-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: var(--app-content-text);
}

[data-theme="dark"] .category-search-page .categories-info {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #c8c8c8;
}

.category-search-page .categories-info .selected-count {
    color: var(--app-primary);
    font-weight: 600;
}

[data-theme="dark"] .category-search-page .categories-info .selected-count {
    color: #4d9ffc;
}

/* Categories Placeholder */
.category-search-page .categories-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    color: var(--app-content-text);
    opacity: 0.6;
    min-height: 280px;
}

[data-theme="dark"] .category-search-page .categories-placeholder {
    background: rgba(255, 255, 255, 0.02);
}

.category-search-page .categories-placeholder .e-icons {
    font-size: 3rem;
    opacity: 0.4;
}

.category-search-page .categories-placeholder span:last-child {
    font-size: 0.9375rem;
    text-align: center;
    max-width: 250px;
}

/* ===== Fieldset Obscured State ===== */
.category-search-page .filter-fieldset.fieldset-obscured {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
    filter: grayscale(20%);
}

.category-search-page .filter-fieldset.fieldset-obscured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.08) 100%);
    border-radius: 10px;
    z-index: 10;
}

.category-search-page .filter-fieldset.fieldset-obscured legend {
    background: linear-gradient(135deg, #8a8a8a 0%, #6a6a6a 100%);
}

/* ===== Results Card ===== */
.category-search-page .results-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .category-search-page .results-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.category-search-page .results-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-search-page .results-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0;
}

[data-theme="dark"] .category-search-page .results-card-header h3 {
    color: #e8e8e8;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .category-search-page .category-top-row {
        flex-direction: column;
        gap: 20px;
    }

    .category-search-page .filter-fieldset.category-filters-fieldset {
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .category-search-page .filter-fieldset.category-filters-fieldset {
        min-height: 300px;
    }

    .category-search-page .categories-placeholder {
        padding: 32px 16px;
        min-height: 200px;
    }

    .category-search-page .categories-placeholder .e-icons {
        font-size: 2rem;
    }

    .category-search-page .filter-actions {
        flex-wrap: wrap;
    }
}
/* ===== FAQ Page ===== */
/* Editorial design with custom native accordions */

.faq-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ Content */
.faq-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ===== FAQ Sections ===== */
.faq-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--app-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--app-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--app-primary) 6%, transparent) 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

.section-icon svg {
    width: 20px;
    height: 20px;
    color: var(--app-primary);
    stroke-width: 2;
}

[data-theme="dark"] .section-icon {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--app-primary) 20%, transparent) 0%,
        color-mix(in srgb, var(--app-primary) 10%, transparent) 100%);
}

/* ===== Custom Accordion ===== */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Accordion Item */
.faq-item {
    position: relative;
    border: 1px solid var(--app-border-color);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 252, 255, 0.95) 100%),
        var(--surface-card);
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Subtle glow overlay */
.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 111, 232, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 111, 232, 0.03) 0%, transparent 40%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.faq-item:hover {
    border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border-color));
    box-shadow:
        0 4px 16px rgba(10, 111, 232, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.faq-item:hover::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 111, 232, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 111, 232, 0.06) 0%, transparent 40%);
}

.faq-item[open] {
    border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border-color));
    box-shadow:
        0 6px 20px rgba(10, 111, 232, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Dark theme */
[data-theme="dark"] .faq-item {
    background:
        linear-gradient(145deg, rgba(55, 65, 85, 0.5) 0%, rgba(35, 40, 55, 0.6) 100%),
        var(--surface-card);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .faq-item::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77, 159, 252, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(77, 159, 252, 0.05) 0%, transparent 40%);
}

[data-theme="dark"] .faq-item:hover {
    border-color: rgba(77, 159, 252, 0.25);
    box-shadow:
        0 4px 20px rgba(77, 159, 252, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .faq-item:hover::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77, 159, 252, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(77, 159, 252, 0.1) 0%, transparent 40%);
}

[data-theme="dark"] .faq-item[open] {
    border-color: rgba(77, 159, 252, 0.35);
    box-shadow:
        0 6px 24px rgba(77, 159, 252, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Accordion Header (Summary) */
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: linear-gradient(135deg, rgba(10, 111, 232, 0.03) 0%, rgba(10, 111, 232, 0.01) 100%);
    border-bottom: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

[data-theme="dark"] .faq-item summary {
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.06) 0%, rgba(77, 159, 252, 0.02) 100%);
}

.faq-item[open] summary {
    border-bottom-color: var(--app-border-color);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::marker {
    display: none;
}

.faq-item summary:hover {
    background: color-mix(in srgb, var(--app-primary) 4%, transparent);
}

[data-theme="dark"] .faq-item summary:hover {
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
}

.faq-item summary:focus {
    outline: none;
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
    border-radius: 10px;
}

/* Question Text */
.faq-question-text {
    font-size: 0.975rem;
    font-weight: 600;
    color: var(--app-content-text);
    line-height: 1.5;
    padding-right: 16px;
    flex: 1;
}

/* Chevron Icon */
.faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--app-content-text);
    opacity: 0.4;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.faq-item:hover .faq-chevron {
    opacity: 0.6;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
    color: var(--app-primary);
}

/* Accordion Content */
.faq-content-wrapper {
    overflow: hidden;
}

.faq-answer {
    padding: 4px 22px 22px 22px;
    font-size: 0.925rem;
    line-height: 1.75;
    color: var(--app-content-text);
    opacity: 0.85;
    animation: faq-slide-down 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes faq-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Answer Typography */
.faq-answer p {
    margin: 0 0 12px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
    margin: 12px 0;
    padding-left: 24px;
}

.faq-answer li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.faq-answer li:last-child {
    margin-bottom: 0;
}

.faq-answer li::marker {
    color: var(--app-primary);
}

.faq-answer strong {
    font-weight: 600;
    color: var(--app-content-text);
}

.faq-answer code {
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
    padding: 2px 8px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    color: var(--app-content-text);
}

[data-theme="dark"] .faq-answer code {
    background: color-mix(in srgb, var(--app-primary) 15%, transparent);
}

.faq-answer a {
    color: var(--app-primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.faq-answer a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .faq-page {
        padding: 0 8px;
    }

    .faq-content {
        gap: 32px;
    }

    .faq-section-title {
        font-size: 1rem;
        gap: 10px;
    }

    .section-icon {
        width: 32px;
        height: 32px;
    }

    .section-icon svg {
        width: 18px;
        height: 18px;
    }

    .faq-item summary {
        padding: 14px 16px;
    }

    .faq-question-text {
        font-size: 0.925rem;
    }

    .faq-answer {
        padding: 0 16px 16px 16px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .faq-section-title {
        font-size: 0.95rem;
    }

    .faq-question-text {
        font-size: 0.875rem;
    }

    .faq-answer {
        font-size: 0.875rem;
        line-height: 1.7;
    }
}
/* ===== Legal Pages (Privacy Policy, Terms of Service) ===== */

.legal-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.legal-page .page-meta {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.6;
    margin: 0;
}

/* Legal Content Container */
.legal-content {
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* Legal Sections */
.legal-section {
    margin-bottom: 32px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--app-border-color);
}

.legal-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 20px 0 12px 0;
}

.legal-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 16px 0 8px 0;
}

.legal-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--app-content-text);
    opacity: 0.85;
    margin: 0 0 12px 0;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section ul,
.legal-section ol {
    margin: 12px 0;
    padding-left: 24px;
}

.legal-section li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--app-content-text);
    opacity: 0.85;
    margin-bottom: 8px;
}

.legal-section li:last-child {
    margin-bottom: 0;
}

.legal-section strong {
    font-weight: 600;
    color: var(--app-content-text);
}

.legal-section a {
    color: var(--app-primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

/* Legal Tables */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9rem;
}

.legal-table thead {
    background: var(--surface-secondary);
}

.legal-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
}

.legal-table td {
    padding: 12px 16px;
    color: var(--app-content-text);
    opacity: 0.85;
    border: 1px solid var(--app-border-color);
}

.legal-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .legal-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Disclaimer Alert Box */
.disclaimer-alert {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 16px 0;
}

.disclaimer-alert p {
    margin: 0;
    opacity: 1;
}

[data-theme="dark"] .disclaimer-alert {
    background: rgba(255, 183, 77, 0.1);
    border-color: rgba(255, 183, 77, 0.3);
}

/* Disclaimer Section Special Styling */
.disclaimer-section h2 {
    color: var(--app-warning);
}

/* Loading State */
.legal-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Footer Links */
.legal-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--app-border-color);
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.legal-footer a {
    color: var(--app-primary);
    text-decoration: none;
}

.legal-footer a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-page {
        padding: 0 8px 24px 8px;
    }

    .legal-content {
        padding: 20px 16px;
    }

    .legal-section h2 {
        font-size: 1.15rem;
    }

    .legal-section h3 {
        font-size: 1.05rem;
    }

    .legal-section p,
    .legal-section li {
        font-size: 0.9rem;
    }

    .legal-table {
        font-size: 0.85rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .legal-table {
        display: block;
        overflow-x: auto;
    }
}
/* ===== Pricing Page ===== */

.pricing-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.pricing-header-section {
    text-align: center;
    margin-bottom: 48px;
}

.pricing-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin-bottom: 12px;
}

.pricing-subtitle {
    font-size: 1.1rem;
    color: var(--app-content-text);
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Pricing Grid ===== */
.pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    align-items: stretch;
}

.pricing-grid > * {
    flex: 0 1 340px;
    max-width: 380px;
}

/* ===== Pricing Card ===== */
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(77, 159, 252, 0.15),
        0 0 60px rgba(77, 159, 252, 0.08);
    border-color: rgba(77, 159, 252, 0.3);
}

[data-theme="dark"] .pricing-card:hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(77, 159, 252, 0.25),
        0 0 80px rgba(77, 159, 252, 0.15);
    border-color: rgba(77, 159, 252, 0.5);
}

/* Recommended Card Styling */
.pricing-card--recommended {
    border: 2px solid var(--app-primary);
    background: linear-gradient(180deg, var(--app-primary-light) 0%, var(--surface-card) 20%);
    transform: scale(1.02);
    z-index: 1;
}

[data-theme="dark"] .pricing-card--recommended {
    background: linear-gradient(180deg, rgba(77, 159, 252, 0.1) 0%, var(--surface-card) 20%);
}

.pricing-card--recommended:hover {
    transform: scale(1.02) translateY(-8px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.2),
        0 0 50px rgba(77, 159, 252, 0.3),
        0 0 100px rgba(77, 159, 252, 0.15);
}

[data-theme="dark"] .pricing-card--recommended:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(77, 159, 252, 0.4),
        0 0 120px rgba(77, 159, 252, 0.2);
}

/* Current Plan Styling */
.pricing-card--current {
    border: 2px solid var(--app-success);
}

/* Free Plan Styling - neutral/white theme */
.pricing-card--free.pricing-card--current {
    border: 2px solid var(--app-border-color);
}

.pricing-card--free .pricing-btn--current {
    background: var(--surface-secondary);
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
}

/* Badge */
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--app-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Header */
.pricing-header {
    text-align: center;
    margin-bottom: 24px;
}

.pricing-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin: 0 0 8px 0;
}

.pricing-description {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0;
    min-height: 2.5em;
}

/* Price Amount */
.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pricing-currency {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-content-text);
    align-self: flex-start;
    margin-top: 8px;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--app-content-text);
    line-height: 1;
}

.pricing-price--free {
    color: var(--app-content-text);
}

.pricing-period {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.6;
}

/* Save Badge */
.pricing-save-badge {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-success);
    background: rgba(76, 175, 80, 0.1);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
}

[data-theme="dark"] .pricing-save-badge {
    background: rgba(129, 199, 132, 0.15);
}

/* Features List */
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex-grow: 1;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--app-border-color);
    font-size: 0.9rem;
    color: var(--app-content-text);
}

.pricing-feature:last-child {
    border-bottom: none;
}

.pricing-feature--excluded {
    opacity: 0.5;
}

.pricing-feature--excluded .pricing-feature-icon {
    color: var(--app-error);
}

.pricing-feature-icon {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-success);
    width: 20px;
    text-align: center;
}

.pricing-feature-text {
    flex: 1;
}

/* Action Button */
.pricing-action {
    margin-top: auto;
}

.pricing-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pricing-btn--primary {
    background: var(--app-primary);
    color: #ffffff;
}

.pricing-btn--primary:hover:not(:disabled) {
    background: var(--app-primary-hover);
}

.pricing-btn--secondary {
    background: var(--surface-secondary);
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
}

.pricing-btn--secondary:hover:not(:disabled) {
    background: var(--app-primary-light);
}

.pricing-btn--current {
    background: var(--app-success);
    color: #ffffff;
    cursor: default;
}

.pricing-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Loading State */
.pricing-btn--loading {
    position: relative;
    pointer-events: none;
}

.pricing-btn--loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ===== Login Prompt ===== */
.pricing-login-prompt {
    text-align: center;
    margin-top: 32px;
    padding: 24px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
}

.pricing-login-prompt p {
    margin: 0 0 16px 0;
    color: var(--app-content-text);
}

.pricing-login-prompt a {
    color: var(--app-primary);
    text-decoration: none;
    font-weight: 600;
}

.pricing-login-prompt a:hover {
    text-decoration: underline;
}

/* ===== Error/Loading States ===== */
.pricing-loading,
.pricing-error {
    text-align: center;
    padding: 48px 24px;
}

.pricing-error {
    color: var(--app-error);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .pricing-page {
        padding: 24px 16px;
    }

    .pricing-grid {
        gap: 24px;
    }

    .pricing-grid > * {
        flex: 0 1 100%;
        max-width: 380px;
    }

    .pricing-card--recommended {
        transform: none;
        order: -1; /* Show recommended first on mobile */
    }

    .pricing-card--recommended:hover {
        transform: translateY(-8px);
    }

    .pricing-price {
        font-size: 2.75rem;
    }

    .pricing-title {
        font-size: 1.5rem;
    }

    .pricing-subtitle {
        font-size: 1rem;
    }
}
/* ===== Checkout Pages (Success/Cancel) ===== */

.checkout-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.checkout-container {
    max-width: 500px;
    width: 100%;
    text-align: center;
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
}

/* ===== Icon Styles ===== */
.checkout-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2.5rem;
    font-weight: 700;
}

.checkout-icon--success {
    background: rgba(76, 175, 80, 0.1);
    color: var(--app-success);
    border: 2px solid var(--app-success);
}

.checkout-icon--cancel {
    background: rgba(244, 67, 54, 0.1);
    color: var(--app-error);
    border: 2px solid var(--app-error);
}

.checkout-icon--warning {
    background: rgba(255, 152, 0, 0.1);
    color: var(--app-warning);
    border: 2px solid var(--app-warning);
}

[data-theme="dark"] .checkout-icon--success {
    background: rgba(129, 199, 132, 0.15);
}

[data-theme="dark"] .checkout-icon--cancel {
    background: rgba(239, 83, 80, 0.15);
}

[data-theme="dark"] .checkout-icon--warning {
    background: rgba(255, 183, 77, 0.15);
}

/* ===== Typography ===== */
.checkout-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin: 0 0 12px 0;
}

.checkout-message {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.8;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.checkout-submessage {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.6;
    margin: 0 0 24px 0;
}

/* ===== Subscription Details ===== */
.checkout-details {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 24px 0;
}

.checkout-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.checkout-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--app-border-color);
}

.checkout-detail-label {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.checkout-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-content-text);
}

/* ===== Actions ===== */
.checkout-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.checkout-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.checkout-btn--primary {
    background: var(--app-primary);
    color: #ffffff;
}

.checkout-btn--primary:hover {
    background: var(--app-primary-hover);
}

.checkout-btn--secondary {
    background: var(--surface-secondary);
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
}

.checkout-btn--secondary:hover {
    background: var(--app-primary-light);
}

/* ===== Help Section ===== */
.checkout-help {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--app-border-color);
}

.checkout-help p {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 8px 0;
}

.checkout-help a {
    color: var(--app-primary);
    text-decoration: none;
    font-weight: 600;
}

.checkout-help a:hover {
    text-decoration: underline;
}

/* ===== Loading State ===== */
.checkout-loading {
    padding: 40px 0;
}

.checkout-loading p {
    margin-top: 16px;
    color: var(--app-content-text);
    opacity: 0.7;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .checkout-page {
        padding: 24px 16px;
    }

    .checkout-container {
        padding: 32px 20px;
    }

    .checkout-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .checkout-title {
        font-size: 1.5rem;
    }
}
/* ===== Subscription Management Page ===== */

.subscription-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.subscription-header {
    margin-bottom: 32px;
}

.subscription-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin: 0 0 8px 0;
}

.subscription-header p {
    font-size: 1rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0;
}

.subscription-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Subscription Status Badge ===== */
.subscription-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    white-space: nowrap;
}

.subscription-badge--active {
    background: rgba(76, 175, 80, 0.15);
    color: var(--app-success);
}

.subscription-badge--cancelling {
    background: rgba(255, 152, 0, 0.15);
    color: var(--app-warning);
}

.subscription-badge--past-due {
    background: rgba(244, 67, 54, 0.15);
    color: var(--app-error);
}

.subscription-badge--cancelled,
.subscription-badge--expired {
    background: rgba(158, 158, 158, 0.15);
    color: #757575;
}

[data-theme="dark"] .subscription-badge--cancelled,
[data-theme="dark"] .subscription-badge--expired {
    color: #bdbdbd;
}

.subscription-badge--free {
    background: rgba(33, 150, 243, 0.15);
    color: #1976d2;
}

[data-theme="dark"] .subscription-badge--free {
    color: #64b5f6;
}

.subscription-badge--unknown {
    background: rgba(158, 158, 158, 0.15);
    color: #757575;
}

/* ===== Current Plan Card ===== */
.current-plan-card {
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.current-plan-header {
    margin-bottom: 20px;
}

.current-plan-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.current-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--app-content-text);
    margin: 0;
}

.current-plan-description {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0;
}

/* Plan Details */
.current-plan-details {
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.current-plan-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.current-plan-detail:not(:last-child) {
    border-bottom: 1px solid var(--app-border-color);
}

.detail-label {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
}

.detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-content-text);
}

.current-plan-detail--warning .detail-value {
    color: var(--app-warning);
}

/* Warning Banner */
.current-plan-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--app-warning);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--app-warning);
}

.warning-icon {
    font-size: 1.25rem;
}

/* Action Buttons */
.current-plan-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.plan-btn--primary {
    background: var(--app-primary);
    color: #ffffff;
}

.plan-btn--primary:hover:not(:disabled) {
    background: var(--app-primary-hover);
}

.plan-btn--secondary {
    background: var(--surface-secondary);
    color: var(--app-content-text);
    border: 1px solid var(--app-border-color);
}

.plan-btn--secondary:hover:not(:disabled) {
    background: var(--app-primary-light);
}

.plan-btn--outline {
    background: transparent;
    color: var(--app-primary);
    border: 1px solid var(--app-primary);
}

.plan-btn--outline:hover:not(:disabled) {
    background: var(--app-primary-light);
}

.plan-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Loading State */
.plan-btn--loading {
    position: relative;
    pointer-events: none;
}

.plan-btn--loading::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ===== Upgrade Prompt ===== */
.subscription-upgrade-prompt {
    background: linear-gradient(135deg, var(--app-primary-light) 0%, var(--surface-card) 100%);
    border: 1px solid var(--app-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
}

[data-theme="dark"] .subscription-upgrade-prompt {
    background: linear-gradient(135deg, rgba(77, 159, 252, 0.1) 0%, var(--surface-card) 100%);
}

.subscription-upgrade-prompt h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 16px 0;
}

.upgrade-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.upgrade-benefits li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 0.95rem;
    color: var(--app-content-text);
}

.upgrade-benefits li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--app-success);
    font-weight: 700;
}

/* ===== Help Section ===== */
.subscription-help {
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
}

.subscription-help h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 8px 0;
}

.subscription-help p {
    font-size: 0.9rem;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 12px 0;
}

.subscription-help a {
    color: var(--app-primary);
    text-decoration: none;
    font-weight: 600;
}

.subscription-help a:hover {
    text-decoration: underline;
}

/* ===== Loading/Error States ===== */
.subscription-loading,
.subscription-error {
    text-align: center;
    padding: 48px 24px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
}

.subscription-error {
    color: var(--app-error);
}

.subscription-error p {
    margin: 0 0 16px 0;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .subscription-page {
        padding: 24px 16px;
    }

    .current-plan-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .current-plan-actions {
        flex-direction: column;
    }

    .plan-btn {
        width: 100%;
    }
}
/* ===== Favorites Page ===== */

.favorites-page {
    padding: 24px;
    max-width: 1500px;
    margin: 0 auto;
}

/* ===== Page Header - Centered, gradient title (same style as Search) ===== */
.favorites-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--app-border-color);
    margin-bottom: 24px;
}

.favorites-page-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
    background: linear-gradient(
        135deg,
        var(--app-primary) 0%,
        #1565c0 50%,
        #0d47a1 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 2px rgba(10, 111, 232, 0.08));
}

[data-theme="dark"] .favorites-page-header h1 {
    background: linear-gradient(
        135deg,
        #5ba3f5 0%,
        var(--app-primary) 50%,
        #7fc0ff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(91, 163, 245, 0.15));
}

.favorites-page-header .header-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    margin: 4px 0 0 0;
    letter-spacing: 0.01em;
}

[data-theme="light"] .favorites-page-header .header-subtitle {
    color: #1a1a1a;
}

[data-theme="dark"] .favorites-page-header .header-subtitle {
    color: #d0d0d0;
}

/* ===== Marketplace Selector - Centered, fit content ===== */
.favorites-marketplace-section {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

/* ===== Favorites Count Badge - Centered ===== */
.favorites-count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    width: fit-content;
    margin: 0 auto 16px;
    background: var(--surface-secondary);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-content-text);
}

.favorites-count-badge .e-icons {
    color: #ffb300;
    font-size: 14px;
}

/* ===== Card Grid ===== */

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 20px;
}

/* ===== Favorite Book Card ===== */

.fav-card {
    display: flex;
    flex-direction: row;
    background: var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease;
}

.fav-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 179, 0, 0.15);
    border-color: rgba(255, 179, 0, 0.25);
}

[data-theme="dark"] .fav-card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 179, 0, 0.2);
    border-color: rgba(255, 179, 0, 0.35);
}

/* ===== Cover Section ===== */

.fav-card-cover {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface-secondary);
    gap: 8px;
}

.fav-cover-actions {
    display: flex;
    gap: 6px;
    align-self: stretch;
    justify-content: center;
}

.fav-card-cover img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.08);
}

.fav-card-cover .no-cover {
    width: 100px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-border-color);
    border-radius: var(--radius-sm);
    color: #999;
    font-size: 32px;
}

/* Cover Format Label */
.fav-cover-format {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--app-content-text);
    text-align: center;
    white-space: nowrap;
}

/* Cover Money Box (Price + Royalty) */
.fav-cover-money {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    background: var(--surface-card);
    border: 1px solid rgba(30, 142, 62, 0.25);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

[data-theme="dark"] .fav-cover-money {
    border-color: rgba(129, 199, 132, 0.25);
}

.fav-cover-money-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fav-cover-money-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
}

[data-theme="dark"] .fav-cover-money-label {
    color: #9e9e9e;
}

.fav-cover-money-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-content-text);
}

.fav-cover-money-royalty {
    color: #1e8e3e;
}

[data-theme="dark"] .fav-cover-money-royalty {
    color: #81c784;
}

/* ===== Content Section ===== */

.fav-card-content {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fav-card-title {
    font-size: 1.08rem;
    font-weight: 650;
    color: var(--app-content-text);
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0;
}

.fav-card-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fav-card-authors {
    font-size: 0.88rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

[data-theme="dark"] .fav-card-authors {
    color: #9e9e9e;
}

.fav-card-asin {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-family: monospace;
    color: #495057;
    background: var(--surface-secondary);
    border: 1px solid var(--app-border-color);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fav-card-asin:hover {
    background: var(--app-border-color);
    border-color: var(--app-primary);
    color: var(--app-primary);
}

[data-theme="dark"] .fav-card-asin {
    color: #d0d0d0;
}

.fav-asin-label {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

[data-theme="dark"] .fav-asin-label {
    color: #9e9e9e;
}

.fav-card-subtitle .fav-rating-stars {
    margin-left: 6px;
}

.fav-subtitle-reviews {
    font-size: 0.82rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .fav-subtitle-reviews {
    color: #9e9e9e;
}

/* Section Dividers — soft gradient fade */
.fav-card-metrics {
    border-top: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 15%,
        rgba(0, 0, 0, 0.1) 85%,
        transparent 100%
    ) 1;
}

[data-theme="dark"] .fav-card-metrics {
    border-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 15%,
        rgba(255, 255, 255, 0.1) 85%,
        transparent 100%
    ) 1;
}

/* Metrics Row */
.fav-card-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 10px;
    margin: 0 -10px;
    background: rgba(0, 0, 0, 0.015);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 0.86rem;
}

[data-theme="dark"] .fav-card-metrics {
    background: rgba(255, 255, 255, 0.02);
}

.fav-metric {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fav-metric-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.82rem;
}

[data-theme="dark"] .fav-metric-label {
    color: #9e9e9e;
}

.fav-metric-value {
    font-weight: 600;
    color: var(--app-content-text);
    font-variant-numeric: tabular-nums;
}

.fav-bsr-value {
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.fav-rating-stars {
    color: #ffb300;
    font-size: 0.86rem;
    letter-spacing: -0.5px;
}

/* Financial Row */
.fav-card-financial {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 0;
    font-size: 0.86rem;
}

.fav-section-divider {
    height: 1px;
    border: none;
    margin: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 15%,
        rgba(0, 0, 0, 0.1) 85%,
        transparent 100%
    );
}

[data-theme="dark"] .fav-section-divider {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 15%,
        rgba(255, 255, 255, 0.1) 85%,
        transparent 100%
    );
}

.fav-financial-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fav-financial-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.82rem;
}

[data-theme="dark"] .fav-financial-label {
    color: #9e9e9e;
}

.fav-monthly-value {
    color: #1e8e3e;
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .fav-monthly-value {
    color: #81c784;
}

/* Profit Estimate Section */
.fav-card-profit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 12px;
    background: rgba(30, 142, 62, 0.04);
    border: 1px solid rgba(30, 142, 62, 0.12);
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
}

[data-theme="dark"] .fav-card-profit {
    background: rgba(129, 199, 132, 0.06);
    border-color: rgba(129, 199, 132, 0.12);
}

.fav-profit-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fav-profit-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.82rem;
}

[data-theme="dark"] .fav-profit-label {
    color: #9e9e9e;
}

.fav-profit-value {
    color: #1e8e3e;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fav-profit-highlight {
    font-size: 1.05rem;
}

[data-theme="dark"] .fav-profit-value {
    color: #81c784;
}

/* ===== Card Icons ===== */

.fav-card-content svg.fav-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
}

.fav-card-content .e-icons.fav-icon {
    font-size: 15px;
    color: #6c757d;
    vertical-align: middle;
    margin-right: 3px;
}

[data-theme="dark"] .fav-card-content .e-icons.fav-icon {
    color: #9e9e9e;
}

.fav-card-content svg.fav-section-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

/* Book Details Row */
.fav-card-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.82rem;
    color: var(--app-content-text);
    margin-top: 4px;
    padding-bottom: 2px;
}

.fav-detail-label {
    color: #6c757d;
    font-weight: 500;
}

[data-theme="dark"] .fav-detail-label {
    color: #9e9e9e;
}

.fav-card-content .separator {
    color: #bbb;
    font-size: 0.7rem;
    user-select: none;
}

[data-theme="dark"] .fav-card-content .separator {
    color: #555;
}

/* ===== Cover Action Buttons ===== */

.fav-cover-action {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border-color);
    border-radius: 50%;
    background: var(--surface-card);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    color: var(--app-content-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fav-cover-action:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.fav-cover-action.fav-star {
    color: #ffb300;
    font-size: 16px;
}

.fav-cover-action.fav-star:hover {
    color: #ffa000;
    background: rgba(255, 179, 0, 0.1);
    border-color: rgba(255, 179, 0, 0.3);
}

.fav-cover-action.fav-view {
    color: var(--app-primary);
    font-size: 14px;
}

.fav-cover-action.fav-view:hover {
    background: rgba(10, 111, 232, 0.08);
    border-color: rgba(10, 111, 232, 0.3);
}

/* ===== Empty State ===== */

.favorites-empty-state {
    text-align: center;
    padding: 64px 24px;
    max-width: 420px;
    margin: 0 auto;
}

.favorites-empty-icon {
    margin-bottom: 16px;
}

.favorites-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 8px;
}

.favorites-empty-state p {
    font-size: 0.92rem;
    color: #6c757d;
    margin: 0 0 24px;
    line-height: 1.5;
}

[data-theme="dark"] .favorites-empty-state p {
    color: #9e9e9e;
}

.favorites-empty-cta,
.favorites-empty-cta:link,
.favorites-empty-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--app-primary);
    color: #fff !important;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.favorites-empty-cta:hover,
.favorites-empty-cta:active {
    background: var(--app-primary-hover);
    color: #fff !important;
    text-decoration: none;
}

/* ===== Select Marketplace Prompt ===== */

.favorites-select-prompt {
    text-align: center;
    padding: 48px 24px;
    color: #6c757d;
    font-size: 0.95rem;
}

[data-theme="dark"] .favorites-select-prompt {
    color: #9e9e9e;
}

/* ===== Loading Spinner ===== */

.favorites-loading {
    display: flex;
    justify-content: center;
    padding: 48px 24px;
}

/* ===== Responsive ===== */

@media (max-width: 700px) {
    .favorites-page {
        padding: 16px;
    }

    .favorites-grid {
        grid-template-columns: 1fr;
    }

    .fav-card {
        flex-direction: column;
    }

    .fav-card-cover {
        flex: none;
        flex-direction: row;
        padding: 12px 16px;
        gap: 12px;
    }

    .fav-card-cover img {
        max-height: 140px;
    }

    .fav-card-details {
        flex-wrap: wrap;
    }

    .fav-card-metrics {
        flex-wrap: wrap;
    }

    .fav-card-financial {
        flex-wrap: wrap;
    }

    .fav-card-profit {
        flex-wrap: wrap;
    }
}
/* ===== Home Page - Editorial Precision ===== */

.home-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ===== Hero Section ===== */

.home-hero {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    position: relative;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--app-primary), transparent);
    border-radius: 2px;
}

/* Hero logo - theme switching */
.home-logo {
    max-width: 700px;
    height: auto;
    margin: 0 auto 0.75rem;
    display: block;
}

.home-logo--light {
    display: block;
}

.home-logo--dark {
    display: none;
}

[data-theme="dark"] .home-logo--light {
    display: none;
}

[data-theme="dark"] .home-logo--dark {
    display: block;
}

/* Subtitle wrapper with decorative lines */
.home-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 750px;
    margin: 0.5rem auto 0;
}

.home-subtitle-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--app-primary), transparent);
    opacity: 0.35;
}

.home-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    color: #1a2744;
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

[data-theme="dark"] .home-subtitle {
    color: #b0bec5;
}

/* ===== Hero CTA Button ===== */

.home-hero-cta,
.home-hero-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.9rem 2.4rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--app-primary);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.25);
}

.home-hero-cta:hover {
    background: var(--app-primary-hover);
    box-shadow: 0 4px 16px rgba(10, 111, 232, 0.35);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.home-hero-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(10, 111, 232, 0.2);
}

.home-hero-cta .e-icons {
    font-size: 18px;
}

[data-theme="dark"] .home-hero-cta {
    box-shadow: 0 2px 8px rgba(77, 159, 252, 0.2);
}

[data-theme="dark"] .home-hero-cta:hover {
    box-shadow: 0 4px 16px rgba(77, 159, 252, 0.3);
}

/* ===== Section Headers ===== */

.home-section {
    margin-bottom: 2.5rem;
}

.home-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.home-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--app-primary);
    margin: 0;
}

.home-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--app-border-color), transparent);
}

/* ===== Feature Cards Grid ===== */

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Two-column variant for side-by-side cards */
.feature-cards--two-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .feature-cards--two-cols {
        grid-template-columns: 1fr;
    }
}

/* ===== Feature Card ===== */

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 252, 255, 0.95) 100%),
        var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    overflow: hidden;
}

/* Subtle glow overlay - always visible, intensifies on hover */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 111, 232, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 111, 232, 0.04) 0%, transparent 40%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 111, 232, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 111, 232, 0.08) 0%, transparent 40%);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border-color));
    box-shadow:
        0 8px 24px -8px rgba(10, 111, 232, 0.18),
        0 4px 12px -4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .feature-card {
    background:
        linear-gradient(145deg, rgba(55, 65, 85, 0.5) 0%, rgba(35, 40, 55, 0.6) 100%),
        var(--surface-card);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .feature-card::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77, 159, 252, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(77, 159, 252, 0.08) 0%, transparent 40%);
}

[data-theme="dark"] .feature-card:hover::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77, 159, 252, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(77, 159, 252, 0.12) 0%, transparent 40%);
}

[data-theme="dark"] .feature-card:hover {
    border-color: rgba(77, 159, 252, 0.35);
    box-shadow:
        0 8px 32px -8px rgba(77, 159, 252, 0.25),
        0 4px 16px -4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Card Icon */

.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-primary) 12%, transparent) 0%,
        color-mix(in srgb, var(--app-primary) 6%, transparent) 100%
    );
    color: var(--app-primary);
    transition:
        background 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
}

.feature-card:hover .feature-card-icon {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-primary) 18%, transparent) 0%,
        color-mix(in srgb, var(--app-primary) 10%, transparent) 100%
    );
    transform: scale(1.05);
}

[data-theme="dark"] .feature-card-icon {
    background: linear-gradient(
        135deg,
        rgba(91, 163, 245, 0.15) 0%,
        rgba(91, 163, 245, 0.08) 100%
    );
    color: #4d9ffc;
}

[data-theme="dark"] .feature-card:hover .feature-card-icon {
    background: linear-gradient(
        135deg,
        rgba(91, 163, 245, 0.22) 0%,
        rgba(91, 163, 245, 0.12) 100%
    );
}

/* Card Content */

.feature-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
    color: var(--app-content-text);
}

.feature-card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--app-content-text);
    opacity: 0.7;
    margin: 0 0 1rem 0;
    flex: 1;
}

[data-theme="dark"] .feature-card-description {
    opacity: 0.65;
}

/* Card Arrow Indicator */

.feature-card-arrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--app-primary);
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.feature-card-arrow svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

.feature-card:hover .feature-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.feature-card:hover .feature-card-arrow svg {
    transform: translateX(3px);
}

[data-theme="dark"] .feature-card-arrow {
    color: #4d9ffc;
}

/* ===== Quick Stats Banner (Optional Enhancement) ===== */

.home-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
}

.home-stat {
    text-align: center;
}

.home-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--app-primary);
}

[data-theme="dark"] .home-stat-value {
    color: #4d9ffc;
}

.home-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-content-text);
    opacity: 0.5;
    margin-top: 0.25rem;
}

/* ===== What's New / Changelog Section ===== */

.whats-new {
    position: relative;
    padding: 1.5rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 252, 255, 0.95) 100%),
        var(--surface-card);
    border: 1px solid var(--app-border-color);
    border-radius: 12px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.whats-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(10, 111, 232, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(10, 111, 232, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

[data-theme="dark"] .whats-new {
    background:
        linear-gradient(145deg, rgba(55, 65, 85, 0.5) 0%, rgba(35, 40, 55, 0.6) 100%),
        var(--surface-card);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .whats-new::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(77, 159, 252, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(77, 159, 252, 0.08) 0%, transparent 40%);
}

.whats-new-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border-color);
    position: relative;
}

.whats-new-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--app-primary);
    margin: 0;
}

.whats-new-title svg {
    width: 18px;
    height: 18px;
}

.whats-new-version {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    background: var(--app-primary-light);
    color: var(--app-primary);
    border-radius: 20px;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .whats-new-version {
    background: rgba(77, 159, 252, 0.15);
    color: #4d9ffc;
}

/* Timeline */
.changelog-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Timeline vertical line */
.changelog-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--app-border-color) 0%,
        color-mix(in srgb, var(--app-primary) 30%, var(--app-border-color)) 50%,
        var(--app-border-color) 100%
    );
    border-radius: 1px;
}

[data-theme="dark"] .changelog-timeline::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(77, 159, 252, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
}

/* Changelog Entry */
.changelog-entry {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-left: 1.5rem;
}

/* Timeline dot */
.changelog-entry::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface-card);
    border: 2px solid var(--app-border-color);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.changelog-entry:hover::before {
    transform: scale(1.2);
}

/* Type-specific dot colors */
.changelog-entry[data-type="feature"]::before {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.changelog-entry[data-type="improvement"]::before {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(10, 111, 232, 0.1);
}

.changelog-entry[data-type="fix"]::before {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] .changelog-entry::before {
    background: var(--surface-card);
}

[data-theme="dark"] .changelog-entry[data-type="feature"]::before {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .changelog-entry[data-type="improvement"]::before {
    box-shadow: 0 0 0 3px rgba(77, 159, 252, 0.15);
}

[data-theme="dark"] .changelog-entry[data-type="fix"]::before {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.changelog-content {
    flex: 1;
    min-width: 0;
}

.changelog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

/* Type Badge */
.changelog-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.changelog-badge svg {
    width: 10px;
    height: 10px;
}

.changelog-badge--feature {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.changelog-badge--improvement {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

.changelog-badge--fix {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

[data-theme="dark"] .changelog-badge--feature {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

[data-theme="dark"] .changelog-badge--improvement {
    background: rgba(77, 159, 252, 0.18);
    color: #4d9ffc;
}

[data-theme="dark"] .changelog-badge--fix {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.changelog-date {
    font-size: 0.7rem;
    color: var(--app-content-text);
    opacity: 0.5;
    letter-spacing: 0.01em;
}

.changelog-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-content-text);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.changelog-description {
    font-size: 0.8rem;
    color: var(--app-content-text);
    opacity: 0.65;
    margin: 0;
    line-height: 1.5;
}

[data-theme="dark"] .changelog-description {
    opacity: 0.6;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .home-hero {
        padding: 2rem 1rem 2rem;
    }

    .home-logo {
        max-width: 500px;
    }

    .home-subtitle-wrapper {
        gap: 0.75rem;
    }

    .home-subtitle {
        font-size: 0.85rem;
    }

    .home-subtitle-line {
        display: none;
    }

    .feature-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .home-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .whats-new {
        padding: 1.25rem;
    }

    .whats-new-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .changelog-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .home-hero::before {
        width: 80px;
    }

    .feature-card-icon {
        width: 42px;
        height: 42px;
    }

    .feature-card-icon svg {
        width: 20px;
        height: 20px;
    }
}
/* ================================================
   LANDING PAGE - BASE STYLES & TOKENS
   Light editorial theme: paper and mist grounds, navy ink,
   amber reserved for strokes and icons, blue for actions.
   The landing keeps this palette regardless of the app theme.
   ================================================ */
:root {
    /* Brand */
    --landing-navy: #0a1628;
    --landing-slate: #1e293b;
    --landing-amber: #ff9f1c;
    --landing-amber-deep: #e8890b;
    --landing-gold: #ffb84d;
    --landing-accent-gold: #b78b00; /* deep mustard: readable on white (~3:1), for display type only */
    --landing-blue: #0a6fe8;
    --landing-blue-dark: #054a9e;

    /* Light grounds and ink */
    --landing-paper: #ffffff;  /* surfaces: cards, mats, buttons */
    --landing-ground: #f8fafc; /* page ground: cool, a step below the surfaces */
    --landing-mist: #f3f6fa;
    --landing-mat: #eef2f7;
    --landing-ink: #0a1628;
    --landing-body: #475569;
    --landing-muted: #64748b;
    --landing-hairline: rgba(10, 22, 40, 0.08);
    --landing-hairline-strong: rgba(10, 22, 40, 0.18);

    /* Text on navy bands (CTA, footer) */
    --landing-text-light: #e2e8f0;
    --landing-text-muted: #94a3b8;
    --landing-border: rgba(255, 255, 255, 0.1);

    /* Navy-tinted elevation for white grounds */
    --landing-shadow-soft: 0 1px 2px rgba(10, 22, 40, 0.05), 0 8px 24px -12px rgba(10, 22, 40, 0.14);
    --landing-shadow-lift: 0 2px 4px rgba(10, 22, 40, 0.05), 0 20px 40px -18px rgba(10, 22, 40, 0.24);
    --landing-shadow-media:
        0 1px 2px rgba(10, 22, 40, 0.06),
        0 12px 28px -8px rgba(10, 22, 40, 0.16),
        0 32px 64px -24px rgba(10, 22, 40, 0.22);
    --landing-shadow-media-hover:
        0 2px 4px rgba(10, 22, 40, 0.06),
        0 18px 36px -10px rgba(10, 22, 40, 0.2),
        0 44px 80px -28px rgba(10, 22, 40, 0.28);

    /* Motion (design system easings) */
    --landing-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --landing-ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --landing-ease-decel: cubic-bezier(0.22, 1, 0.36, 1);

    /* Typography */
    --font-serif: 'Crimson Pro', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --landing-max: 1240px;
    --landing-hero-max: 1400px;
    --landing-nav-height: 88px;
}

/* ================================================
   BASE LANDING PAGE LAYOUT
   ================================================ */

/* Reset html/body for landing page layout - prevent double scrollbar */
html:has(.landing-page) {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    scroll-padding-top: var(--landing-nav-height);
}

body:has(.landing-page) {
    margin: 0;
    padding: 0;
    overflow: visible; /* Let html handle scrolling */
    height: auto;
    background: var(--landing-ground);
}

.landing-page {
    position: relative;
    background-color: var(--landing-ground);
    color: var(--landing-ink);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* No overflow here: html:has(.landing-page) handles scrolling and
       the sticky nav needs a non-clipping ancestor. */
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4 {
    color: var(--landing-ink);
}

/* ================================================
   RESET GLOBAL LINK COLOR OVERRIDE
   _typography.css forces a:not(.nav-item) to blue; anchors that set
   their own color use the ".landing-page a.class" form to win.
   ================================================ */
.landing-page a,
[data-theme="dark"] .landing-page a {
    color: inherit;
    text-decoration: none;
}

.landing-page a:hover,
[data-theme="dark"] .landing-page a:hover {
    color: inherit;
    text-decoration: none;
}

.landing-page a:focus-visible {
    outline: 2px solid var(--landing-blue);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ================================================
   SVG SIZING CONSTRAINTS
   ================================================ */
.landing-page svg:not(.highlight-icon) {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

.landing-page svg[viewBox]:not(.highlight-icon) {
    width: 100%;
    height: 100%;
}

/* ================================================
   SECTION BASE STYLES
   ================================================ */
.landing-section {
    padding: 5rem 2rem;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow-x: clip; /* Prevent horizontal scroll without creating scroll container */
}

.landing-page .landing-section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 22ch;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--landing-ink);
}

/* Section title keywords share the hero's mustard italic */
.landing-page .landing-section-title em {
    font-style: italic;
    color: var(--landing-accent-gold);
    padding-right: 0.06em;
}

/* ================================================
   ANIMATIONS - JavaScript-Triggered
   ================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Initial state - hidden before JavaScript animates */
.landing-feature-card {
    opacity: 0;
}

/* Features cards - staggered reveal triggered by JavaScript */
.landing-feature-card.animate-in {
    animation: featureCardReveal 0.7s var(--landing-ease-reveal) forwards;
}

.landing-feature-card:nth-child(2).animate-in {
    animation-delay: 0.15s;
}

.landing-feature-card:nth-child(3).animate-in {
    animation-delay: 0.3s;
}

@keyframes featureCardReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ================================================
   TOP NAV
   ================================================ */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--landing-ground);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-nav.is-scrolled {
    border-bottom-color: var(--landing-hairline);
    box-shadow: 0 10px 24px -20px rgba(10, 22, 40, 0.35);
}

/* Three tracks: empty spacer, centered logo, actions on the right */
.landing-nav__inner {
    max-width: var(--landing-hero-max);
    height: var(--landing-nav-height);
    margin: 0 auto;
    padding-inline: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.landing-nav__brand {
    display: inline-flex;
    align-items: center;
    justify-self: center;
}

.landing-nav__logo {
    display: block;
    height: 58px;
    width: auto;
}

.landing-nav__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
}

.landing-page a.landing-nav__login,
.landing-page a.landing-nav__register {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.landing-page a.landing-nav__login {
    color: var(--landing-ink);
}

.landing-page a.landing-nav__login:hover {
    color: var(--landing-ink);
    background: var(--landing-mist);
}

.landing-page a.landing-nav__register {
    color: #ffffff;
    background: linear-gradient(135deg, var(--landing-blue) 0%, var(--landing-blue-dark) 100%);
}

.landing-page a.landing-nav__register:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--landing-blue) 0%, var(--landing-blue-dark) 100%);
    box-shadow: 0 6px 16px -8px rgba(10, 111, 232, 0.45);
}

/* ================================================
   HERO SECTION
   Copy on the left, cover carousel on the right
   ================================================ */
.landing-section.landing-hero {
    background: var(--landing-ground);
    padding: clamp(1.5rem, 4vw, 3rem) 2rem clamp(3rem, 6vw, 5.5rem);
    overflow: clip;
}

/* Chart-paper grid behind the title, fading out before the covers */
.landing-section.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1; /* above the hero ground, below the content */
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(10, 22, 40, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 22, 40, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 18%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 65% 55% at 50% 18%, #000 25%, transparent 75%);
}

/* Warm gold light pooled behind the covers */
.landing-section.landing-hero::after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 75%;
    height: 85%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(183, 139, 0, 0.09), rgba(183, 139, 0, 0.03) 55%, transparent);
}

/* Title runs the full width; copy and covers share the row below */
/* No stacking context on the grid: the covers' multiply must reach the hero ground */
.landing-hero__grid {
    max-width: var(--landing-hero-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "copy  visual";
    align-items: center;
    column-gap: 3rem;
    row-gap: clamp(1rem, 2vw, 1.5rem);
}

.landing-hero__content {
    grid-area: copy;
    position: relative;
    z-index: 2;
    text-align: left;
}

.landing-page .landing-hero__title {
    grid-area: title;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6.6vw, 6.5rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--landing-ink);
    text-align: center;
    text-wrap: balance;
    margin: 0;
}

/* FocusOnNavigate focuses the h1 programmatically on load: not interactive, no ring */
.landing-page .landing-hero__title:focus,
.landing-page .landing-hero__title:focus-visible {
    outline: none;
}

/* Keywords in deep mustard gold, in the serif's italic cut */
.landing-page .landing-hero__title em {
    font-style: italic;
    font-weight: 600;
    color: var(--landing-accent-gold);
    padding-right: 0.06em; /* room for the italic overhang */
}

.landing-hero__subtitle em {
    font-style: normal;
}

.landing-hero__subtitle {
    font-family: var(--font-sans);
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--landing-body);
    margin: 0 0 2.25rem;
    max-width: 34rem;
}

/* The payoff word shares the title's gold; 700 keeps it in WCAG large-text range */
.landing-page .hero-highlight {
    font-weight: 700;
    font-style: italic;
    color: var(--landing-accent-gold);
}

.landing-hero__cta-group {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

/* Gradual first-load entrance for the hero copy and actions. */
.landing-hero__title,
.landing-hero__subtitle,
.landing-hero__cta-group {
    opacity: 0;
    animation: heroTextIn 1.4s var(--landing-ease-decel) forwards;
}

.landing-hero__title { animation-delay: 0.1s; }
.landing-hero__subtitle { animation-delay: 0.3s; }
.landing-hero__cta-group { animation-delay: 0.5s; }

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   HERO VISUAL - cover carousel
   .hero-covers carries the pointer tilt (set by landing.js),
   the inner picture carries the entrance, so they never fight.
   ================================================ */
.landing-hero__visual {
    grid-area: visual;
    position: relative;
    perspective: 1400px;
    /* The image has a baked-in white ground: multiply drops it onto the tinted hero */
    mix-blend-mode: multiply;
    /* Extend to the viewport edge (the image's own white margin absorbs the clip) */
    margin-right: calc((min(100vw - 4rem, var(--landing-hero-max)) - 100vw) / 2 - 1.5%);
}

.hero-covers {
    max-width: 1100px;
}

.hero-covers {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --shift-x: 0px;
    --shift-y: 0px;
    transform: translate3d(var(--shift-x), var(--shift-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 0.6s var(--landing-ease-decel);
    will-change: transform;
}

.hero-covers picture {
    display: block;
    transform-origin: 70% 60%;
    /* Slow, soft reveal: starts after the text settles */
    animation: coversEnter 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero-covers__img {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes coversEnter {
    0% {
        opacity: 0;
        transform: translateX(8%) scale(0.92) rotateY(-14deg);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
    }
}

/* ================================================
   HERO BUTTONS
   ================================================ */
.landing-page a.btn-primary-landing,
.landing-page a.btn-secondary-landing {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition:
        transform 0.3s var(--landing-ease-spring),
        box-shadow 0.3s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.landing-page a.btn-primary-landing {
    color: #ffffff;
    background: linear-gradient(135deg, var(--landing-blue) 0%, var(--landing-blue-dark) 100%);
    border: none;
    box-shadow: 0 4px 20px rgba(10, 111, 232, 0.28);
}

.landing-page a.btn-primary-landing:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10, 111, 232, 0.45);
}

.landing-page a.btn-secondary-landing {
    color: var(--landing-ink);
    background: var(--landing-paper);
    border: 1.5px solid var(--landing-hairline-strong);
}

.landing-page a.btn-secondary-landing:hover {
    color: var(--landing-ink);
    border-color: var(--landing-ink);
}

.btn-primary-landing .cta-arrow {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease;
}

.btn-primary-landing:hover .cta-arrow {
    transform: translateX(4px);
}

/* ================================================
   STATS BAR
   ================================================ */
.landing-section.landing-stats {
    background: var(--landing-mist);
    border-block: 1px solid var(--landing-hairline);
    padding: 3.25rem 2rem;
}

.landing-stats__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.landing-stats__item {
    text-align: center;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-stats__number,
.landing-stats__number-text {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--landing-ink);
    line-height: 1;
    height: 3.5rem;
    min-width: 7ch;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-stats__number--compact {
    min-width: 5ch;
}

.landing-stats__label {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--landing-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.landing-stats__divider {
    width: 1px;
    height: 60px;
    background: var(--landing-hairline-strong);
}
/* ================================================
   FEATURES / BENEFITS SECTION
   ================================================ */
.landing-section.landing-features {
    background: var(--landing-ground);
    padding: 6rem 2rem;
}

.landing-features__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.landing-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem 2.25rem;
    background: var(--landing-paper);
    border: 1px solid var(--landing-hairline);
    border-radius: 16px;
    box-shadow: var(--landing-shadow-soft);
    transition: transform 0.4s var(--landing-ease-reveal), border-color 0.4s ease, box-shadow 0.4s ease;
}

.landing-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 159, 28, 0.45);
    box-shadow: var(--landing-shadow-lift);
}

.landing-feature-card__icon {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 1.25rem;
    transition: transform 0.4s var(--landing-ease-spring);
}

.landing-feature-card:hover .landing-feature-card__icon {
    transform: scale(1.06);
}

.landing-page .landing-feature-card__title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--landing-ink);
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.landing-feature-card__desc {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--landing-body);
    margin: 0;
}

.landing-feature-card__desc strong {
    color: var(--landing-ink);
    font-weight: 600;
}

/* ================================================
   FAQ TEASER SECTION
   ================================================ */
.landing-section.landing-faq {
    background: var(--landing-ground);
    border-top: 1px solid var(--landing-hairline);
    padding: 5.5rem 2rem;
}

.landing-faq__track {
    max-width: var(--landing-max);
    margin: 0 auto 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.landing-faq__item {
    background: var(--landing-paper);
    border: 1px solid var(--landing-hairline);
    border-radius: 12px;
    box-shadow: var(--landing-shadow-soft);
    padding: 1.75rem 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-faq__item:hover {
    border-color: rgba(255, 159, 28, 0.45);
    box-shadow: var(--landing-shadow-lift);
    transform: translateY(-4px);
}

.landing-page .landing-faq__question {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--landing-ink);
    margin: 0 0 0.75rem;
    line-height: 1.25;
}

.landing-faq__answer {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--landing-body);
    line-height: 1.6;
    margin: 0;
}

.landing-faq__cta {
    text-align: center;
}

.landing-page a.landing-faq__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--landing-ink);
    background: var(--landing-paper);
    border: 1.5px solid var(--landing-hairline-strong);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.landing-page a.landing-faq__link:hover {
    color: var(--landing-ink);
    border-color: var(--landing-ink);
}

.landing-faq__link svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease;
}

.landing-faq__link:hover svg {
    transform: translateX(4px);
}

/* ================================================
   CTA SECTION (navy closing band)
   ================================================ */
.landing-section.landing-cta {
    position: relative;
    background: linear-gradient(135deg, var(--landing-slate) 0%, var(--landing-navy) 100%);
    padding: 6rem 2rem;
    overflow: clip;
}

.landing-cta__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.landing-page .landing-cta__title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 600;
    line-height: 1.08;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-wrap: balance;
}

/* On navy the mustard is too dark: switch to the logo gold with a warm sheen */
.landing-page .landing-cta__title em {
    font-style: italic;
    padding-right: 0.08em;
    color: #f2b632;
    background: linear-gradient(100deg, #ffd166 0%, #f2b632 45%, #e8890b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.landing-cta__subtitle {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    color: var(--landing-text-light);
    margin: 0 0 2.5rem;
    line-height: 1.55;
}

.landing-page a.landing-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.35rem 3.25rem;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--landing-blue) 0%, var(--landing-blue-dark) 100%);
    border-radius: 14px;
    box-shadow: 0 6px 30px rgba(10, 111, 232, 0.4);
    transition: transform 0.3s var(--landing-ease-spring), box-shadow 0.3s ease;
    margin-bottom: 2rem;
    animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 6px 30px rgba(10, 111, 232, 0.4);
    }
    50% {
        box-shadow: 0 6px 40px rgba(10, 111, 232, 0.7), 0 0 20px rgba(10, 111, 232, 0.3);
    }
}

.landing-page a.landing-cta__button:hover {
    color: #ffffff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 50px rgba(10, 111, 232, 0.6);
    animation: none;
}

.landing-cta__button .cta-arrow {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease;
}

.landing-cta__button:hover .cta-arrow {
    transform: translateX(6px);
}

.landing-cta__trust {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-cta__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--landing-text-light);
}

.landing-cta__trust-item svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    stroke: var(--landing-amber);
    stroke-width: 2.5;
}

.landing-cta__background {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.3;
    pointer-events: none;
}

.cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10, 111, 232, 0.3) 0%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

/* ================================================
   LANDING FOOTER (navy)
   ================================================ */
.landing-footer {
    position: relative;
    z-index: 1;
    background: var(--landing-navy);
    border-top: 1px solid var(--landing-border);
    padding: 1.25rem 2rem;
}

.landing-footer__content {
    max-width: var(--landing-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-footer__copyright {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--landing-text-muted);
}

.landing-footer__links {
    display: flex;
    gap: 1.5rem;
}

.landing-page .landing-footer__links a {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--landing-text-muted);
    transition: color 0.2s ease;
}

.landing-page .landing-footer__links a:hover {
    color: var(--landing-text-light);
}
/* ================================================
   STAT ICONS - Enhanced with animations
   ================================================ */

.stat-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base icon styles */
.stat-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effect on stats item */
.landing-stats__item:hover .stat-icon {
    transform: scale(1.1) translateY(-4px);
}

/* ================================================
   ICON-SPECIFIC ANIMATIONS
   ================================================ */

/* Books - Staggered layer reveal */
@keyframes bookLayerReveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-icon--books .book-layer {
    animation: bookLayerReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.stat-icon--books .book-layer:nth-child(3) { animation-delay: 0s; }
.stat-icon--books .book-layer:nth-child(4) { animation-delay: 0.1s; }
.stat-icon--books .book-layer:nth-child(5) { animation-delay: 0.2s; }
.stat-icon--books .book-layer:nth-child(6) { animation-delay: 0.3s; }

/* Marketplaces - Flag circles with overlap */
.stat-icon-wrapper--flags {
    width: auto;
    height: auto;
}

.flag-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flag-row .flag-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--landing-mist, #f3f6fa);
    margin-left: -6px;
    filter: drop-shadow(0 2px 6px rgba(10, 22, 40, 0.18));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: flagCircleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.flag-row .flag-circle:first-child {
    margin-left: 0;
}

.flag-row .flag-circle:nth-child(1) { animation-delay: 0s; z-index: 5; }
.flag-row .flag-circle:nth-child(2) { animation-delay: 0.08s; z-index: 4; }
.flag-row .flag-circle:nth-child(3) { animation-delay: 0.16s; z-index: 3; }
.flag-row .flag-circle:nth-child(4) { animation-delay: 0.24s; z-index: 2; }
.flag-row .flag-circle:nth-child(5) { animation-delay: 0.32s; z-index: 1; }

@keyframes flagCircleIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Categories - Tree growth animation */
@keyframes treeGrow {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes nodePopIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.stat-icon--categories .cat-branch {
    stroke-dasharray: 100;
    animation: treeGrow 0.8s ease-out forwards;
}

.stat-icon--categories .cat-node,
.stat-icon--categories .cat-leaf {
    animation: nodePopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: center;
}

.stat-icon--categories .cat-node:nth-of-type(1) { animation-delay: 0s; }
.stat-icon--categories .cat-node:nth-of-type(2) { animation-delay: 0.3s; }
.stat-icon--categories .cat-node:nth-of-type(3) { animation-delay: 0.3s; }
.stat-icon--categories .cat-leaf { animation-delay: 0.6s; }

/* Authors - Staggered figure reveal (center first, then sides) */
@keyframes authorFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-icon--authors .author-figure {
    animation: authorFadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

.stat-icon--authors .author-figure--main { animation-delay: 0s; }
.stat-icon--authors .author-figure--left { animation-delay: 0.2s; }
.stat-icon--authors .author-figure--right { animation-delay: 0.35s; }

/* Data Points - Network constellation reveal */
@keyframes dpEdgeDraw {
    from {
        stroke-dashoffset: 60;
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
}

@keyframes dpNodePop {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.stat-icon--datapoints .dp-edge {
    stroke-dasharray: 60;
    animation: dpEdgeDraw 0.6s ease-out forwards;
}

.stat-icon--datapoints .dp-edge:nth-child(1) { animation-delay: 0.1s; }
.stat-icon--datapoints .dp-edge:nth-child(2) { animation-delay: 0.15s; }
.stat-icon--datapoints .dp-edge:nth-child(3) { animation-delay: 0.2s; }
.stat-icon--datapoints .dp-edge:nth-child(4) { animation-delay: 0.25s; }
.stat-icon--datapoints .dp-edge:nth-child(5) { animation-delay: 0.3s; }
.stat-icon--datapoints .dp-edge:nth-child(6) { animation-delay: 0.35s; }
.stat-icon--datapoints .dp-edge:nth-child(7) { animation-delay: 0.4s; }
.stat-icon--datapoints .dp-edge:nth-child(8) { animation-delay: 0.45s; }

.stat-icon--datapoints .dp-node {
    animation: dpNodePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: center;
}

/* Row 1 nodes (top) */
.stat-icon--datapoints .dp-node:nth-of-type(1) { animation-delay: 0s; }
.stat-icon--datapoints .dp-node:nth-of-type(2) { animation-delay: 0.05s; }
.stat-icon--datapoints .dp-node:nth-of-type(3) { animation-delay: 0.1s; }
/* Row 2 nodes */
.stat-icon--datapoints .dp-node:nth-of-type(4) { animation-delay: 0.2s; }
.stat-icon--datapoints .dp-node:nth-of-type(5) { animation-delay: 0.25s; }
/* Row 3 nodes */
.stat-icon--datapoints .dp-node:nth-of-type(6) { animation-delay: 0.35s; }
.stat-icon--datapoints .dp-node:nth-of-type(7) { animation-delay: 0.4s; }
.stat-icon--datapoints .dp-node:nth-of-type(8) { animation-delay: 0.45s; }
/* Row 4 nodes (bottom) */
.stat-icon--datapoints .dp-node:nth-of-type(9) { animation-delay: 0.5s; }
.stat-icon--datapoints .dp-node:nth-of-type(10) { animation-delay: 0.55s; }

/* Updates - Clock rotation */
@keyframes clockTick {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes syncPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.stat-icon--updates .clock-hand--minute {
    transform-origin: 32px 32px;
    animation: clockTick 4s linear infinite;
}

.stat-icon--updates .sync-arrows {
    animation: syncPulse 2s ease-in-out infinite;
    transform-origin: 32px 32px;
}
/* ================================================
   FEATURE SHOWCASE SECTION
   Demo cards with text + animated GIF on alternating paper/mist bands
   ================================================ */
.landing-section.landing-showcase {
    padding: 5.5rem 0 0;
    background: var(--landing-ground);
    border-top: 1px solid var(--landing-hairline);
}

.landing-page .landing-showcase > .landing-section-title {
    padding: 0 2rem;
    margin-bottom: 0.5rem;
    font-size: clamp(2.4rem, 4.6vw, 3.4rem);
}

.landing-showcase > .landing-section-title.animate-in {
    animation: fadeInUp 0.8s var(--landing-ease-reveal) forwards;
}

.landing-showcase__container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ================================================
   SHOWCASE CARD
   ================================================ */
.showcase-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 2rem;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    position: relative;
}

.showcase-card__band {
    position: relative;
}

.showcase-card__band:nth-child(odd) {
    background: var(--landing-ground);
}

.showcase-card__band:nth-child(even) {
    background: var(--landing-mist);
    border-block: 1px solid var(--landing-hairline);
}

/* ================================================
   CARD HEADER (badge + title)
   ================================================ */
.showcase-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.showcase-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.45rem 0.95rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: linear-gradient(135deg, var(--landing-blue) 0%, var(--landing-blue-dark) 100%);
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(10, 111, 232, 0.3);
}

.landing-page .showcase-card__title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
    color: var(--landing-ink);
    text-wrap: balance;
}

.landing-page .showcase-card__title em {
    font-style: italic;
    color: var(--landing-accent-gold);
    padding-right: 0.06em;
}

/* ================================================
   CARD BODY (text + media side by side)
   ================================================ */
.showcase-card__body {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.showcase-card__body--reversed {
    flex-direction: row-reverse;
}

/* ================================================
   STACKED VARIANT (for wide GIFs)
   Header, full-width GIF, text below
   ================================================ */
.showcase-card__body--stacked {
    flex-direction: column;
    gap: 2.75rem;
    align-items: stretch;
}

.showcase-card__body--stacked .showcase-card__media {
    flex: none;
    width: 86%;
    margin-inline: auto;
}

.showcase-card__body--stacked .showcase-card__media--contained {
    width: 100%;
    max-width: 720px;
}

.showcase-card__body--stacked .showcase-card__text {
    flex: none;
    width: 100%;
    max-width: 68ch;
    margin: 0 auto;
    text-align: center;
}

.showcase-card__body--stacked .showcase-card__desc {
    margin-bottom: 2.5rem;
}

.showcase-card__body--stacked .showcase-card__highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: center;
}

.showcase-card__body--stacked .showcase-card__highlights li {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
    background: var(--landing-paper);
    border: 1px solid var(--landing-hairline);
    border-radius: 14px;
    box-shadow: var(--landing-shadow-soft);
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.showcase-card__body--stacked .showcase-card__highlights li:hover {
    background: var(--landing-paper);
    border-color: rgba(255, 159, 28, 0.45);
    transform: translateY(-3px);
    box-shadow: var(--landing-shadow-lift);
}

.showcase-card__body--stacked .highlight-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
}

/* ================================================
   TEXT SIDE
   ================================================ */
.showcase-card__text {
    flex: 1;
    min-width: 0;
}

.showcase-card__desc {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--landing-body);
    margin: 0 0 2rem;
}

.showcase-card__desc strong,
.showcase-card__highlights li strong {
    color: var(--landing-ink);
    font-weight: 600;
}

.showcase-card__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.showcase-card__highlights li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--landing-body);
    line-height: 1.55;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.showcase-card__highlights li:hover {
    background: var(--landing-mist);
    border-color: var(--landing-hairline);
}

.highlight-icon {
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.4s var(--landing-ease-spring);
}

.showcase-card__highlights li:hover .highlight-icon {
    transform: scale(1.1);
}

/* ================================================
   MEDIA SIDE (GIF container)
   A mat frame: tinted padding, hairline border and layered
   navy shadows so light UI recordings keep their edges on white.
   ================================================ */
.showcase-card__media {
    flex: 0.75;
    min-width: 0;
    position: relative;
    padding: 10px;
    background: var(--landing-mat);
    border: 1px solid rgba(10, 22, 40, 0.1);
    border-radius: 16px;
    box-shadow: var(--landing-shadow-media);
    transition: transform 0.5s var(--landing-ease-reveal), box-shadow 0.5s ease;
}

/* On mist bands the mat turns white to keep the step in tone */
.showcase-card__band:nth-child(even) .showcase-card__media {
    background: var(--landing-paper);
}

.showcase-card:hover .showcase-card__media {
    transform: translateY(-4px);
    box-shadow: var(--landing-shadow-media-hover);
}

.showcase-card__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(10, 22, 40, 0.08);
}

/* ================================================
   SCROLL-TRIGGERED ANIMATIONS
   ================================================ */
@keyframes showcaseReveal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.showcase-card.animate-in {
    animation: showcaseReveal 0.9s var(--landing-ease-reveal) forwards;
}
/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

/* FAQ: 2 columns below desktop width */
@media (max-width: 1100px) {
    .landing-faq__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Stats: 2-column stacked at <=1024px */
@media (max-width: 1024px) {
    .landing-section.landing-stats {
        overflow: visible;
        padding: 2rem 1rem;
    }

    .landing-stats__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
        justify-items: stretch;
    }

    .landing-stats__divider {
        display: none;
    }

    /* Horizontal layout: icon left, number+label right */
    .landing-stats__item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0 0.75rem;
        align-items: center;
        text-align: left;
        padding: 0;
    }

    .landing-stats__item .stat-icon-wrapper {
        grid-row: 1 / 3;
        grid-column: 1;
    }

    .stat-icon-wrapper {
        width: 54px;
        height: 54px;
        margin-bottom: 0;
    }

    .landing-stats__number,
    .landing-stats__number-text {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        height: auto;
        min-width: auto;
        margin-bottom: 0;
        justify-content: flex-start;
    }

    .landing-stats__label {
        font-size: 0.78rem;
    }

    .flag-row .flag-circle {
        width: 34px;
        height: 34px;
    }
}

/* Hero: single column, covers below the copy */
@media (max-width: 900px) {
    .landing-hero__grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "copy"
            "visual";
        row-gap: 1.75rem;
    }

    .landing-hero__content {
        max-width: 38rem;
    }

    .landing-hero__visual {
        margin-right: 0;
        margin-inline: -1rem;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .landing-section {
        padding: 4rem 1.5rem;
    }

    .landing-nav__inner {
        padding-inline: 1.5rem;
    }

    .landing-section.landing-hero {
        padding: 2rem 1.5rem 3.5rem;
    }

    .landing-page .landing-hero__title {
        font-size: clamp(2.6rem, 10.5vw, 3.6rem);
    }

    .landing-section.landing-features {
        padding: 4rem 1.5rem;
    }

    .landing-features__grid {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .landing-section.landing-stats {
        padding: 1.75rem 0.75rem;
    }

    .landing-stats__container {
        gap: 1.25rem 0.5rem;
    }

    /* Vertical centered layout: icon top, number, label */
    .landing-stats__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.5rem 0;
    }

    .landing-stats__item .stat-icon-wrapper {
        grid-row: unset;
        grid-column: unset;
    }

    .stat-icon-wrapper {
        width: 44px;
        height: 44px;
        margin-bottom: 0.5rem;
    }

    .landing-stats__number,
    .landing-stats__number-text {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 0.2rem;
        justify-content: center;
    }

    .landing-stats__label {
        font-size: 0.75rem;
    }

    .flag-row .flag-circle {
        width: 30px;
        height: 30px;
    }

    .landing-section.landing-faq {
        padding: 4rem 1.5rem;
    }

    .landing-section.landing-cta {
        padding: 4.5rem 1.5rem;
    }

    .landing-cta__trust {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .landing-footer__content {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .landing-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
    }

    /* Showcase: stack vertically on tablet */
    .showcase-card {
        padding: 3.5rem 1.5rem;
    }

    .showcase-card__body,
    .showcase-card__body--reversed {
        flex-direction: column;
        gap: 2rem;
    }

    .showcase-card__text,
    .showcase-card__media,
    .showcase-card__body--stacked .showcase-card__media {
        flex: none;
        width: 100%;
    }

    .showcase-card__body--stacked .showcase-card__highlights {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .landing-faq__track {
        grid-template-columns: 1fr;
    }

    /* Logo moves to the left, actions stay right */
    .landing-nav__inner {
        grid-template-columns: auto minmax(0, 1fr);
        height: 68px;
    }

    .landing-nav__spacer {
        display: none;
    }

    .landing-nav__brand {
        justify-self: start;
    }

    .landing-nav__logo {
        height: 40px;
    }

    html:has(.landing-page) {
        scroll-padding-top: 68px;
    }
}

@media (max-width: 480px) {
    .landing-section {
        padding: 3rem 1rem;
    }

    .landing-nav__inner {
        padding-inline: 1rem;
        gap: 0.5rem;
    }

    .landing-nav__logo {
        height: 32px;
    }

    .landing-page a.landing-nav__login,
    .landing-page a.landing-nav__register {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .landing-section.landing-hero {
        padding: 1.5rem 1rem 3rem;
    }

    .landing-hero__cta-group {
        flex-direction: column;
    }

    .landing-page a.btn-primary-landing,
    .landing-page a.btn-secondary-landing {
        width: 100%;
        justify-content: center;
    }

    .stat-icon-wrapper {
        width: 38px;
        height: 38px;
    }

    .landing-stats__number,
    .landing-stats__number-text {
        font-size: clamp(1.25rem, 5vw, 1.6rem);
    }

    .landing-stats__label {
        font-size: 0.68rem;
    }

    .flag-row .flag-circle {
        width: 24px;
        height: 24px;
        margin-left: -4px;
    }

    .flag-row .flag-circle:first-child {
        margin-left: 0;
    }

    .landing-feature-card {
        padding: 1.75rem 1.25rem;
    }

    .landing-page .landing-section-title {
        font-size: clamp(1.9rem, 7vw, 2.25rem);
        margin-bottom: 2.25rem;
    }

    .landing-page a.landing-cta__button {
        padding: 1.1rem 1.75rem;
        font-size: 1.05rem;
    }

    .showcase-card {
        padding: 3rem 1rem;
    }

    .showcase-card__body {
        gap: 1.5rem;
    }

    .landing-page .showcase-card__title {
        font-size: 1.6rem;
    }

    .showcase-card__desc {
        font-size: 1rem;
    }

    .showcase-card__media {
        padding: 6px;
        border-radius: 12px;
    }

    .showcase-card__media img {
        border-radius: 7px;
    }

    .showcase-card__body--stacked .showcase-card__highlights {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   ACCESSIBILITY
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    .landing-page *,
    .landing-page *::before,
    .landing-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .landing-hero__title,
    .landing-hero__subtitle,
    .landing-hero__cta-group,
    .hero-covers picture {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-covers {
        transform: none !important;
    }

    .stat-icon,
    .stat-icon * {
        animation: none !important;
        transition: none !important;
    }
}