/* =====================================================
   OTAKIROKU USER PAGE - COMPREHENSIVE MOBILE OVERHAUL
   ===================================================== */

/* =====================================================
   768px BREAKPOINT - TABLET / SMALL LAPTOP
   ===================================================== */
@media (max-width: 768px) {

    /* === HIDE DESKTOP NAVBAR, FOOTER, AND BULK ACTION BAR ON MOBILE === */
    .navbar,
    .navbar .nav-links,
    .navbar .nav-auth,
    .navbar .nav-content,
    .hamburger-btn,
    .mobile-menu-overlay,
    .mobile-nav-links,
    footer.footer,
    .footer,
    .footer-container,
    .footer-main,
    .footer-bottom,
    .footer-links,
    .bulk-action-bar {
        display: none !important;
    }

    /* === BANNER === */
    .user-banner {
        height: 180px !important;
        margin-top: -50px !important;
        padding-top: 50px !important;
    }

    /* === PROFILE INFO BAR - Complete Restructure === */
    .profile-info-bar {
        padding: 0 !important;
    }

    .profile-info-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        height: auto !important;
        padding: 0 16px 12px !important;
        gap: 12px !important;
        max-width: 100% !important;
    }

    /* Avatar - Centered, smaller */
    .profile-avatar-wrap {
        margin-top: -50px !important;
        order: 0 !important;
    }

    .user-avatar {
        width: 100px !important;
        height: 100px !important;
    }

    /* Username + Badge - stack vertically, center username independently */
    .profile-info-main {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .profile-info-main .profile-name-wrap {
        justify-content: center !important;
        width: 100% !important;
    }

    .profile-info-main h1 {
        font-size: 1.3rem !important;
        text-align: center !important;
    }

    .profile-info-main .profile-supporter-badge {
        margin-top: 4px !important;
    }

    /* Social Stats - Row under username */
    .profile-social-stats {
        order: 2 !important;
        margin-left: 0 !important;
        gap: 16px !important;
    }

    .social-stat-btn {
        flex-direction: row !important;
        gap: 6px !important;
        padding: 6px 12px !important;
    }

    .social-stat-btn .stat-count {
        font-size: 1rem !important;
    }

    .social-stat-btn .stat-label {
        font-size: 0.7rem !important;
    }

    /* Actions (Follow/Signout) */
    .profile-actions {
        order: 3 !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
    }

    /* Tab Navigation - Icon only on mobile */
    .profile-tabs-inline {
        order: 4 !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 4px 0 !important;
        overflow-x: visible !important;
        justify-content: center !important;
        gap: 12px !important;
        border-top: none !important;
        background: transparent !important;
    }

    .profile-tabs-inline .profile-tab {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
    }

    /* Show only icons on mobile */
    .profile-tabs-inline .profile-tab svg {
        display: block !important;
        width: 27px !important;
        height: 27px !important;
    }

    .profile-tabs-inline .profile-tab span {
        display: none !important;
    }

    /* Active tab with subtle background like desktop */
    .profile-tabs-inline .profile-tab.active {
        color: var(--primary) !important;
        background: var(--primary-subtle) !important;
    }

    .profile-tabs-inline .profile-tab:not(.active) {
        color: var(--text-secondary) !important;
    }

    /* === MAIN CONTENT AREA === */
    .profile-main {
        padding: 16px 12px 20px !important;
        max-width: 100% !important;
    }

    /* === OVERVIEW TAB === */

    /* Stats row - 4 stats in a row at top */
    .overview-stats-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .overview-stat {
        padding: 10px 6px !important;
        text-align: center !important;
    }

    .overview-stat-value {
        font-size: 1.1rem !important;
    }

    .overview-stat-label {
        font-size: 0.6rem !important;
    }

    /* === OVERVIEW PANELS - MOBILE REDESIGN === */
    .overview-top-three {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Reset all the :has() grid column spans for mobile */
    .overview-top-three:has(#aboutSection:not([style*="display: none"])):has(#favoritesPanel:not([style*="display: none"])),
    .overview-top-three:has(#aboutSection[style*="display: none"]):has(#favoritesPanel:not([style*="display: none"])),
    .overview-top-three:has(#aboutSection:not([style*="display: none"])):has(#favoritesPanel[style*="display: none"]) {
        display: flex !important;
        flex-direction: column !important;
    }

    .overview-top-three .recent-activity-panel {
        grid-column: auto !important;
    }

    .overview-bottom-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Panel base styles */
    .panel {
        padding: 14px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-height: none !important;
    }

    .panel-title {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }

    .panel-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    .panel-link {
        font-size: 0.75rem !important;
        color: var(--primary) !important;
    }

    /* === ABOUT PANEL - FULL SIZE, FIRST === */
    .about-panel {
        order: -1 !important; /* Move to top */
        max-height: none !important;
        overflow: visible !important;
    }

    .about-panel .about-content {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* === FAVORITES PANEL - HORIZONTAL SCROLL === */
    #favoritesPanel {
        max-height: none !important;
        overflow: visible !important;
    }

    #favoritesPanel .panel-title {
        margin-bottom: 10px !important;
    }

    .overview-top-three #favoritesPanel .favorites-grid,
    .favorites-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        margin: 0 -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .favorites-grid::-webkit-scrollbar {
        display: none !important;
    }

    .favorites-grid .favorite-card,
    .favorites-grid .favorite-item {
        flex-shrink: 0 !important;
        width: 80px !important;
        aspect-ratio: 2/3 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .favorites-grid .favorite-img,
    .favorites-grid .favorite-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .favorites-grid .favorite-overlay {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 6px !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important;
    }

    .favorites-grid .favorite-title {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* === RECENT ACTIVITY PANEL - COMPACT CARDS === */
    .recent-activity-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    .recent-activity-panel .panel-header {
        margin-bottom: 10px !important;
    }

    .activity-list,
    #recentActivity {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .activity-item {
        display: flex !important;
        align-items: center !important;
        padding: 8px 10px !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
    }

    .activity-item:hover {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .activity-item .activity-cover,
    .activity-item .cover,
    .activity-item img:first-child {
        width: 36px !important;
        height: 50px !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .activity-item .activity-info,
    .activity-item .info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .activity-item .activity-title,
    .activity-item .title {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .activity-item .activity-meta,
    .activity-item .meta {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.7rem !important;
    }

    .activity-item .status-badge {
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-size: 0.6rem !important;
        font-weight: 500 !important;
    }

    .activity-item .activity-date,
    .activity-item .activity-time,
    .activity-item .time {
        font-size: 0.65rem !important;
        color: var(--text-muted) !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* === ACTIVITY HISTORY (Heatmap) === */
    .activity-graph {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }

    .activity-graph::-webkit-scrollbar {
        height: 4px !important;
    }

    /* Activity heatmap tooltip - smaller for mobile */
    .activity-tooltip {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        max-width: 130px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .activity-tooltip strong {
        font-size: 0.8rem !important;
    }

    .activity-tooltip span {
        font-size: 0.65rem !important;
    }

    /* === GENRE BARS === */
    .genre-bars-compact {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .genre-bars-compact .genre-row {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .genre-bars-compact .genre-name {
        width: 80px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .genre-bars-compact .bar-container {
        flex: 1 !important;
        height: 6px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 3px !important;
        overflow: hidden !important;
    }

    .genre-bars-compact .bar {
        height: 100% !important;
        background: var(--primary) !important;
        border-radius: 3px !important;
    }

    .genre-bars-compact .genre-count {
        font-size: 0.7rem !important;
        color: var(--text-muted) !important;
        min-width: 30px !important;
        text-align: right !important;
    }

    /* === ANIME LIST TAB === */
    /* Condense to 2 rows: Row 1 = list type + view controls, Row 2 = status + search */

    /* Hide the controls bar wrapper - we'll position its children elsewhere */
    .list-controls-bar {
        display: none !important;
    }

    /* Make list-type-switcher the main row with all controls */
    .list-type-switcher {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        width: 100% !important;
    }

    /* Status/Custom list buttons - icon only on mobile */
    #tab-animelist .list-type-switcher .list-type-btn,
    .list-type-switcher .list-type-btn {
        padding: 4px !important;
        font-size: 0 !important; /* Hide text */
        flex-shrink: 0 !important;
        gap: 0 !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    #tab-animelist .list-type-switcher .list-type-btn svg,
    .list-type-switcher .list-type-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Hide count on very compact view */
    .list-type-switcher .list-type-count {
        display: none !important;
    }

    /* Mobile view controls - grouped on right */
    #tab-animelist .mobile-view-controls,
    .mobile-view-controls {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Hide grid/list view toggle when in series mode - only list view on mobile */
    #tab-animelist:has(.view-mode-btn[data-mode="series"].active) .mobile-view-controls .list-view-toggle,
    #tab-animelist:has(.view-mode-btn[data-mode="series"].active) .list-view-toggle {
        display: none !important;
    }

    #tab-animelist .mobile-view-controls .list-view-toggle,
    #tab-animelist .mobile-view-controls .list-view-mode,
    .mobile-view-controls .list-view-toggle,
    .mobile-view-controls .list-view-mode {
        display: flex !important;
        gap: 2px !important;
        padding: 3px !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
    }

    #tab-animelist .mobile-view-controls .view-btn,
    #tab-animelist .mobile-view-controls .view-mode-btn,
    .mobile-view-controls .view-btn,
    .mobile-view-controls .view-mode-btn {
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #tab-animelist .mobile-view-controls .view-btn svg,
    #tab-animelist .mobile-view-controls .view-mode-btn svg,
    .mobile-view-controls .view-btn svg,
    .mobile-view-controls .view-mode-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    #tab-animelist .mobile-view-controls .more-menu-btn,
    .mobile-view-controls .more-menu-btn {
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
    }

    #tab-animelist .mobile-view-controls .more-menu-btn svg,
    .mobile-view-controls .more-menu-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* More menu dropdown - hidden by default, show when open */
    .mobile-view-controls .more-menu-dropdown {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background: var(--bg-deep, #16162a) !important;
        border: 1px solid rgba(var(--primary-rgb, 139, 92, 246), 0.3) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        z-index: 200 !important;
        min-width: 150px !important;
        margin-top: 4px !important;
    }

    .mobile-view-controls .more-menu-dropdown.open,
    .mobile-view-controls .more-menu-dropdown.show,
    .mobile-view-controls .list-more-menu.open .more-menu-dropdown {
        display: block !important;
    }

    .mobile-view-controls .list-more-menu {
        position: relative !important;
    }

    /* More menu items — tap/active colors */
    .mobile-view-controls .more-menu-item:active {
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.2) !important;
    }

    .mobile-view-controls .more-menu-btn:active {
        color: var(--primary) !important;
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.15) !important;
    }

    /* Position search in status-filter-row area */
    .list-type-switcher .list-search {
        position: fixed !important;
        display: none !important; /* Will be shown/positioned by status-filter-row */
    }

    /* Hide sort dropdown on mobile - sort button is in search field */
    .list-sort {
        display: none !important;
    }

    /* Sort button inside search input - matches advanced-search-btn style */
    .search-sort-btn {
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg-elevated, #1e1e3a) !important;
        border: 1px solid var(--border, #2d2d4a) !important;
        border-radius: 10px !important;
        color: var(--text-secondary, #9ca3af) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

    .search-sort-btn:active {
        background: var(--primary, #8b5cf6) !important;
        border-color: var(--primary, #8b5cf6) !important;
        color: white !important;
    }

    .search-sort-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Adjust search input padding for sort button */
    .list-type-switcher .list-search .list-search-input {
        padding-right: 44px !important;
    }

    /* Mobile sort dropdown */
    .mobile-sort-dropdown {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 0 !important;
        background: var(--bg-deep, #16162a) !important;
        border: 1px solid rgba(var(--primary-rgb, 139, 92, 246), 0.3) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        z-index: 100 !important;
        display: none !important;
        min-width: 160px !important;
        overflow: hidden !important;
    }

    .mobile-sort-dropdown.open {
        display: block !important;
    }

    .mobile-sort-option {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
        color: var(--text-primary, #fff) !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }

    .mobile-sort-option:active {
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.2) !important;
    }

    .list-view-toggle,
    .list-view-mode {
        flex-shrink: 0 !important;
    }

    /* Add border to card/list toggle to match entries/series toggle */
    .list-view-toggle {
        border: 1px solid var(--border) !important;
    }

    .view-btn,
    .view-mode-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* === CUSTOM LISTS - Force list view on mobile === */

    /* Hide grid/list view toggle when custom lists tab is active */
    #tab-animelist:has(.list-type-btn[data-list-type="custom"].active) .list-view-toggle {
        display: none !important;
    }

    /* Hide view mode toggle when custom lists tab is active */
    #tab-animelist:has(.list-type-btn[data-list-type="custom"].active) .list-view-mode {
        display: none !important;
    }

    /* Hide search on mobile for custom lists */
    #tab-animelist:has(.list-type-btn[data-list-type="custom"].active) .list-search {
        display: none !important;
    }

    /* Hide original create list button on mobile - we use a JS-created one instead */
    #btnCreateListInline {
        display: none !important;
    }

    /* Mobile Create List button - placed in .list-actions via JS */
    /* Note: display is controlled via JS - don't use !important here */
    .mobile-create-list-btn {
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: var(--primary) !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--primary) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: all 0.2s !important;
    }

    .mobile-create-list-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mobile-create-list-btn:active {
        background: var(--primary-subtle) !important;
    }

    /* Force list view layout regardless of grid-view class */
    .custom-lists-grid,
    .custom-lists-grid.grid-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .custom-list-card {
        width: 100% !important;
    }

    .list-card-header {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    /* Fix list card icons - folder icon */
    .list-card-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05)) !important;
        border-radius: 8px !important;
    }

    .list-card-icon svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        stroke: #8b5cf6 !important;
        fill: none !important;
    }

    .list-card-icon svg path {
        stroke: #8b5cf6 !important;
    }

    /* List info */
    .list-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .list-name {
        font-size: 0.9rem !important;
    }

    .list-count {
        font-size: 0.75rem !important;
    }

    /* Visibility icon (public/private) */
    .list-visibility svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        fill: none !important;
    }

    .list-visibility.public svg {
        stroke: #8b5cf6 !important;
    }

    .list-visibility.private svg {
        stroke: #ef4444 !important;
    }

    /* Show actions always on mobile */
    .list-card-actions {
        opacity: 1 !important;
        display: flex !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    /* Action buttons - edit, delete */
    .list-action-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .list-action-btn svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        stroke: #9ca3af !important;
        fill: none !important;
    }

    .list-action-btn.danger svg {
        stroke: #ef4444 !important;
    }

    /* Expand button */
    .list-expand-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .list-expand-btn svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        stroke: #9ca3af !important;
        fill: none !important;
    }

    /* Custom list anime grid */
    .list-anime-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .list-anime-item {
        position: relative !important;
    }

    .list-anime-item img {
        width: 100% !important;
        border-radius: 6px !important;
    }

    /* Always show edit button on custom list anime cards - copy of status list styling */
    .list-anime-item {
        position: relative !important;
    }

    .list-anime-edit {
        display: flex !important;
        position: absolute !important;
        top: unset !important;
        bottom: 50px !important;
        right: 6px !important;
        left: unset !important;
        width: 32px !important;
        height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        border-radius: 6px !important;
        opacity: 1 !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

    .list-anime-edit svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        color: white !important;
        stroke: white !important;
        fill: none !important;
    }

    .list-anime-edit svg path {
        stroke: white !important;
        stroke-width: 2 !important;
    }

    /* === SERIES VIEW - Mobile styling === */

    /* Series grid view - show as vertical list on mobile */
    .series-grid-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    /* Series list view */
    .series-list-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Style series grid cards as list items on mobile */
    .series-grid-card,
    .series-grid-card.fanout-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        background: var(--bg-card) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    /* Disable fanout hover effects on mobile */
    .fanout-card:has(.series-hover-zone:hover) {
        transform: none !important;
        z-index: 1 !important;
    }

    .series-grid-view:has(.series-hover-zone:hover) .fanout-card {
        filter: none !important;
        opacity: 1 !important;
    }

    /* Series fanout container - show as simple row of covers */
    .series-fanout-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        aspect-ratio: unset !important;
        height: auto !important;
        margin-bottom: 0 !important;
        overflow-x: auto !important;
    }

    .series-fanout-img {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        width: 50px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }

    .series-hover-zone {
        display: none !important;
    }

    /* Series info section */
    .series-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .series-title {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .series-meta {
        font-size: 0.75rem !important;
        color: var(--text-secondary) !important;
    }

    .series-card {
        display: block !important;
    }

    /* Series card mobile styling */
    .series-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .series-cover-wrap {
        flex-shrink: 0 !important;
    }

    .series-cover-single {
        width: 60px !important;
        height: 85px !important;
    }

    .series-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .series-title {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .series-meta {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .series-stats {
        display: none !important;
    }

    .series-progress-bar {
        width: 100% !important;
        order: 10 !important;
    }

    /* Series expand button icon fix */
    .series-expand-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .series-expand-btn svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        color: #9ca3af !important;
        stroke: #9ca3af !important;
        fill: none !important;
    }

    .series-expand-btn svg path {
        stroke: #9ca3af !important;
        stroke-width: 2 !important;
    }

    /* Series entry cards */
    .series-entries {
        padding: 8px !important;
    }

    .series-entry-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    .entry-cover {
        width: 44px !important;
        height: 62px !important;
    }

    .entry-title {
        font-size: 0.85rem !important;
    }

    .entry-meta {
        font-size: 0.7rem !important;
        gap: 6px !important;
    }

    /* Series entry edit button icon fix */
    .series-entry-card .edit-btn {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(var(--primary-rgb), 0.2) !important;
        border-radius: 6px !important;
    }

    .series-entry-card .edit-btn svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        color: #8b5cf6 !important;
        stroke: #8b5cf6 !important;
        fill: none !important;
    }

    .series-entry-card .edit-btn svg path {
        stroke: #8b5cf6 !important;
    }

    /* Add button for not-in-list entries */
    .series-entry-card .add-btn {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .series-entry-card .add-btn svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        color: #22c55e !important;
        stroke: #22c55e !important;
        fill: none !important;
    }

    .series-entry-card .add-btn svg path {
        stroke: #22c55e !important;
    }

    /* === CUSTOM LIST EDIT MODAL === */
    #customListModal .modal,
    #customListModal .shared-modal {
        max-width: 320px !important;
        border-radius: 12px !important;
    }

    #customListModal .modal-header {
        padding: 14px !important;
        gap: 10px !important;
    }

    #customListModal .modal-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #customListModal .modal-icon svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        stroke: #8b5cf6 !important;
        fill: none !important;
    }

    #customListModal .modal-header h3 {
        font-size: 1rem !important;
        flex: 1 !important;
    }

    #customListModal .modal-close {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(239, 68, 68, 0.2) !important;
        border: 1px solid rgba(239, 68, 68, 0.4) !important;
        border-radius: 8px !important;
        color: #ef4444 !important;
    }

    #customListModal .modal-close svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        color: #ef4444 !important;
        stroke: #ef4444 !important;
        fill: none !important;
    }

    #customListModal .modal-close svg path {
        stroke: #ef4444 !important;
        stroke-width: 2 !important;
    }

    #customListModal .modal-body {
        padding: 14px !important;
    }

    #customListModal .form-group {
        margin-bottom: 14px !important;
    }

    #customListModal .form-group label {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    #customListModal input[type="text"],
    #customListModal textarea {
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }

    /* Checkbox styling */
    #customListModal .checkbox-group {
        margin-bottom: 0 !important;
    }

    #customListModal .checkbox-label {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #customListModal .checkbox-label input[type="checkbox"],
    #customListPublic {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        background: #151519 !important;
        border: 2px solid #374151 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        position: relative !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    #customListModal .checkbox-label input[type="checkbox"]:checked,
    #customListPublic:checked {
        background: #8b5cf6 !important;
        border-color: #8b5cf6 !important;
    }

    #customListModal .checkbox-label input[type="checkbox"]:checked::after,
    #customListPublic:checked::after {
        content: '' !important;
        position: absolute !important;
        left: 6px !important;
        top: 2px !important;
        width: 6px !important;
        height: 12px !important;
        border: solid white !important;
        border-width: 0 2px 2px 0 !important;
        transform: rotate(45deg) !important;
    }

    #customListModal .checkbox-label span {
        font-size: 0.9rem !important;
        line-height: 22px !important;
    }

    #customListModal .modal-footer {
        padding: 14px !important;
        gap: 10px !important;
    }

    #customListModal .modal-footer button {
        flex: 1 !important;
        min-height: 44px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    #customListModal .btn-primary,
    #customListModal .btn-primary:hover,
    #customListModal .btn-primary:active,
    #customListModal .btn-primary:focus {
        box-shadow: none !important;
    }

    /* List type tabs (Anime/Manga) */
    .list-type-switcher {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 8px !important;
        position: relative !important;
    }

    /* Move search input to be beside dropdown */
    .list-type-switcher .list-search {
        position: absolute !important;
        top: 100% !important;
        left: 155px !important;
        right: 12px !important;
        width: auto !important;
        margin-top: 16px !important;
        z-index: 60 !important;
    }

    .list-type-switcher .list-search .list-search-input {
        height: 42px !important;
        pointer-events: auto !important;
    }

    /* Status tabs - horizontal scroll */
    .list-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 12px 8px !important;
        gap: 4px !important;
    }

    .list-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .list-tab {
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    /* List items - compact */
    .list-entry {
        padding: 10px !important;
        gap: 10px !important;
    }

    .list-entry .cover {
        width: 50px !important;
        height: 70px !important;
    }

    .list-entry .title {
        font-size: 0.9rem !important;
    }

    .list-entry .meta {
        font-size: 0.75rem !important;
    }

    /* Hide increment button on mobile, keep only edit button */
    .item-actions .btn-increment {
        display: none !important;
    }

    /* Ensure item-actions doesn't shrink and title doesn't overflow under it */
    .item-actions {
        flex-shrink: 0 !important;
    }

    /* Title should truncate instead of going under buttons */
    .item-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .item-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Status tabs - Row 2: Status dropdown + Search */
    .status-filter-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
        border-bottom: none !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: visible !important;
    }


    /* Mobile search container in status-filter-row */
    .mobile-search-container {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        padding: 0 8px !important;
        height: 36px !important;
        margin-left: 10% !important;
    }

    .mobile-search-container > svg {
        width: 16px !important;
        height: 16px !important;
        color: var(--text-secondary) !important;
        flex-shrink: 0 !important;
    }

    .mobile-search-input {
        flex: 1 !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
        color: var(--text-primary) !important;
        outline: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.4 !important;
        -webkit-user-select: text !important;
        user-select: text !important;
    }

    .mobile-search-input:empty::before {
        content: attr(data-placeholder) !important;
        color: var(--text-secondary) !important;
        pointer-events: none !important;
    }

    /* Sort button in mobile search */
    .mobile-search-container .search-sort-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 4px !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .mobile-search-container .search-sort-btn:hover {
        background: transparent !important;
        color: var(--text-secondary) !important;
    }

    .mobile-search-container .search-sort-btn:active {
        color: var(--primary) !important;
    }

    .mobile-search-container .search-sort-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mobile-search-container .mobile-sort-dropdown {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 0 !important;
        background: var(--bg-deep, #16162a) !important;
        border: 1px solid rgba(var(--primary-rgb, 139, 92, 246), 0.3) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        z-index: 100 !important;
        display: none !important;
        min-width: 160px !important;
        overflow: hidden !important;
    }

    .mobile-search-container .mobile-sort-dropdown.open {
        display: block !important;
    }

    /* Status tabs container */
    .status-filter-row .status-tabs {
        position: relative !important;
        flex-shrink: 0 !important;
        z-index: 100 !important;
        overflow: visible !important;
    }

    /* Hide all tabs by default */
    .status-filter-row .status-tab {
        display: none !important;
    }

    /* Show only the active tab as the button */
    .status-filter-row .status-tab.active {
        display: flex !important;
        align-items: center !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.15) !important;
        border: 1px solid rgba(var(--primary-rgb, 139, 92, 246), 0.4) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    /* Dropdown arrow */
    .status-filter-row .status-tab.active::after {
        content: '' !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 4px solid #9ca3af !important;
        margin-left: 5px !important;
    }

    /* When dropdown is open */
    .status-filter-row .status-tabs.dropdown-open {
        z-index: 200 !important;
    }

    /* Rotate arrow when open */
    .status-filter-row .status-tabs.dropdown-open .status-tab.active::after {
        border-top: none !important;
        border-bottom: 4px solid #9ca3af !important;
    }

    /* Dropdown menu - hidden by default */
    .status-dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        margin-top: 4px !important;
        min-width: 150px !important;
        background: var(--bg-deep, #16162a) !important;
        border: 1px solid rgba(var(--primary-rgb, 139, 92, 246), 0.3) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        z-index: 250 !important;
        overflow: hidden !important;
    }

    /* Show dropdown menu when open */
    .status-filter-row .status-tabs.dropdown-open .status-dropdown-menu {
        display: block !important;
    }

    /* Dropdown items */
    .status-dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
        color: #e5e7eb !important;
        cursor: pointer !important;
        transition: background 0.15s !important;
    }

    .status-dropdown-item:hover {
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.15) !important;
    }

    .status-dropdown-item.active {
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.25) !important;
    }

    .status-dropdown-item .dropdown-count {
        background: rgba(var(--primary-rgb, 139, 92, 246), 0.3) !important;
        padding: 2px 6px !important;
        border-radius: 10px !important;
        font-size: 0.65rem !important;
        color: var(--primary, #c4b5fd) !important;
    }

    .status-filter-row .tab-count {
        padding: 2px 5px !important;
        font-size: 0.65rem !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
    }

    /* === ROULETTE BUTTON - Mobile === */
    .roulette-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .roulette-wheel-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .roulette-tooltip {
        display: none !important;
    }

    .roulette-modal {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    /* Card/Grid view - 3 cards side by side */
    .anime-grid-view {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .grid-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-card-cover {
        border-radius: 8px !important;
    }

    .grid-card-info {
        padding: 6px 2px !important;
    }

    .grid-card-title {
        font-size: 0.7rem !important;
    }

    .grid-card-score {
        top: 4px !important;
        left: 4px !important;
        font-size: 0.65rem !important;
        padding: 2px 5px !important;
    }

    .grid-card-status {
        bottom: 8px !important;
        left: 4px !important;
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }

    /* Grid card - always show edit button on mobile */
    .grid-card-overlay {
        opacity: 1 !important;
        background: transparent !important;
        position: absolute !important;
        inset: auto 0 0 auto !important;
        padding: 6px !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
    }

    .btn-edit-small {
        width: 32px !important;
        height: 32px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        border-radius: 6px !important;
    }

    .btn-edit-small svg {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        color: white !important;
        stroke: white !important;
        fill: none !important;
    }

    .btn-edit-small svg path {
        stroke: white !important;
        stroke-width: 2 !important;
    }

    /* Hide other overlay elements, show only edit button */
    .grid-card-overlay .grid-card-notes {
        display: none !important;
    }

    /* Progress controls */
    .progress-controls {
        gap: 6px !important;
    }

    .progress-controls button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .progress-text {
        font-size: 0.8rem !important;
    }

    /* === STATS TAB === */

    /* Stats layout - single column, sidebar becomes top tabs */
    .stats-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .stats-sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        text-align: center !important;
    }

    .stats-nav {
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background: var(--bg-surface) !important;
        border-radius: 10px !important;
        padding: 6px !important;
        max-width: 100% !important;
    }

    .stats-nav::-webkit-scrollbar {
        display: none !important;
    }

    .stats-nav-item {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }

    .stats-content {
        width: 100% !important;
    }

    /* Stats page header */
    .stats-page-header {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .stats-page-header h2 {
        font-size: 1.2rem !important;
    }

    .stats-section-header {
        font-size: 0.75rem !important;
        margin: 20px 0 12px !important;
    }

    /* Chart toggle groups */
    .chart-toggle-group {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .chart-toggle-group.mini {
        width: auto !important;
    }

    .chart-toggle {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
    }

    /* Stats rows - default column layout */
    .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ===== PRIMARY STATS - 4 Columns Side by Side ===== */
    .stats-row.primary-stats {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .stats-row.primary-stats .stat-box {
        padding: 10px 4px !important;
        border-radius: 8px !important;
        text-align: center !important;
    }

    .stats-row.primary-stats .stat-box-value {
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: block !important;
    }

    .stats-row.primary-stats .stat-box-label {
        font-size: 0.5rem !important;
        display: block !important;
        opacity: 0.7 !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
    }

    .stat-box {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .stat-box-value {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        display: block !important;
    }

    .stat-box-label {
        font-size: 0.6rem !important;
        display: block !important;
        opacity: 0.7 !important;
        margin-top: 2px !important;
    }

    /* ===== CHARTS ROW - Stacked ===== */
    .stats-row.charts-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .stats-charts-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ===== SECONDARY STATS - 3x2 Grid ===== */
    .stats-row.secondary-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .stats-row.secondary-stats .stat-box {
        padding: 10px 6px !important;
    }

    .stats-row.secondary-stats .stat-box-value {
        font-size: 1rem !important;
    }

    .stats-row.secondary-stats .stat-box-label {
        font-size: 0.5rem !important;
    }

    .stats-secondary-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .stats-secondary-box {
        padding: 10px 6px !important;
    }

    .stats-secondary-box .stat-value {
        font-size: 1rem !important;
    }

    .stats-secondary-box .stat-label {
        font-size: 0.55rem !important;
    }

    /* Stats cards */
    .stats-card {
        padding: 12px !important;
        border-radius: 10px !important;
        overflow: visible !important;
    }

    .stats-card h4 {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }

    .card-header-with-toggle {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* ===== DONUT CHARTS - 3 Column Grid ===== */
    .stats-row.donuts-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .donut-card {
        padding: 10px 6px !important;
        text-align: center !important;
    }

    .donut-card h4 {
        font-size: 0.6rem !important;
        margin-bottom: 6px !important;
        text-transform: uppercase !important;
    }

    .donut-wrap {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 6px !important;
    }

    .donut-wrap canvas {
        width: 60px !important;
        height: 60px !important;
    }

    .donut-center {
        font-size: 0.7rem !important;
    }

    .donut-legend {
        font-size: 0.5rem !important;
        gap: 2px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .donut-legend-item {
        gap: 3px !important;
        justify-content: center !important;
    }

    .donut-legend-color {
        width: 6px !important;
        height: 6px !important;
    }

    /* Chart containers */
    .chart-container,
    .donut-chart-container {
        padding: 12px !important;
    }

    .chart-container canvas,
    .donut-chart-container canvas {
        max-height: 160px !important;
    }

    /* Vertical bar charts */
    .vertical-bar-chart {
        min-height: 200px !important;
        height: 220px !important;
        width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 2px !important;
        padding: 32px 4px 24px !important;
    }

    .vbar-col {
        min-width: 0 !important;
        flex: 1 !important;
        max-width: none !important;
    }

    .vbar-bar {
        width: 100% !important;
        min-width: 8px !important;
    }

    .vbar-label {
        font-size: 0.45rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .vbar-count {
        font-size: 0.5rem !important;
    }

    /* Score distribution */
    .score-distribution {
        gap: 3px !important;
    }

    .score-bar-container {
        min-height: 80px !important;
    }

    /* ===== PATTERNS ROW - Stacked ===== */
    .stats-row.patterns-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .stats-patterns-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Episode distribution */
    .episode-dist {
        gap: 3px !important;
    }

    .episode-dist .dist-row {
        font-size: 0.6rem !important;
    }

    /* Season chart */
    .season-chart {
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .season-chart canvas {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
    }

    .season-legend {
        font-size: 0.6rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* Source chart */
    .source-chart {
        gap: 3px !important;
    }

    .source-chart .source-row {
        font-size: 0.6rem !important;
    }

    /* ===== SERIES OVERVIEW - 5 Column Grid ===== */
    .stats-row.series-overview-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    .stats-row.series-overview-row .stat-box {
        padding: 10px 2px !important;
        min-width: 0 !important;
    }

    .stats-row.series-overview-row .stat-box-value {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .stats-row.series-overview-row .stat-box-label {
        font-size: 0.4rem !important;
        opacity: 0.8 !important;
        line-height: 1.1 !important;
    }

    .series-stats-row {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
    }

    /* ===== SERIES DETAILS - Stacked ===== */
    .stats-row.series-details-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .series-progress-panel {
        padding: 12px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .progress-ring-wrap {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
    }

    .progress-ring {
        width: 50px !important;
        height: 50px !important;
    }

    .progress-ring-value {
        font-size: 0.7rem !important;
    }

    .progress-panel-info {
        flex: 1 !important;
    }

    .progress-panel-info h4 {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }

    .progress-panel-stats {
        font-size: 0.7rem !important;
    }

    .progress-panel-meta {
        font-size: 0.6rem !important;
        opacity: 0.7 !important;
    }

    .series-ranking-card {
        padding: 12px !important;
    }

    .series-ranking-list {
        gap: 4px !important;
    }

    .series-rank-item {
        padding: 6px 8px !important;
        gap: 8px !important;
    }

    .series-rank-name {
        font-size: 0.7rem !important;
    }

    .series-rank-count {
        font-size: 0.65rem !important;
    }

    /* ===== TIME ROW - 5 Column Grid ===== */
    .stats-page .stats-row.time-row,
    .stats-content .stats-row.time-row,
    .stats-row.time-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.time-row > .time-box,
    .time-row .time-box {
        padding: 10px 2px !important;
        border-radius: 8px !important;
        text-align: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .time-row .time-box .time-value,
    .stats-row.time-row .time-value {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        display: block !important;
    }

    .time-row .time-box .time-label,
    .stats-row.time-row .time-label {
        font-size: 0.4rem !important;
        line-height: 1.1 !important;
        display: block !important;
        white-space: nowrap !important;
    }

    /* ===== SOCIAL ROW - 5 Column Grid ===== */
    .stats-page .stats-row.social-row,
    .stats-content .stats-row.social-row,
    .stats-row.social-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.social-row > .stat-box,
    .social-row .stat-box,
    .stats-row.social-row .stat-box.accent-purple,
    .stats-row.social-row .stat-box.accent-green,
    .stats-row.social-row .stat-box.accent-red,
    .stats-row.social-row .stat-box.accent-blue,
    .stats-row.social-row .stat-box.accent-teal {
        padding: 10px 2px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .social-row .stat-box .stat-box-value,
    .stats-row.social-row .stat-box-value {
        font-size: 0.9rem !important;
        display: block !important;
    }

    .social-row .stat-box .stat-box-label,
    .stats-row.social-row .stat-box-label {
        font-size: 0.4rem !important;
        line-height: 1.1 !important;
        display: block !important;
        white-space: nowrap !important;
    }

    /* Year chart - allow tooltip overflow */
    .stats-card.full-width {
        width: 100% !important;
        overflow: visible !important;
    }

    .year-chart {
        width: 100% !important;
        overflow: visible !important;
    }

    .year-timeline {
        width: 100% !important;
        height: 160px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .year-timeline::-webkit-scrollbar {
        height: 3px !important;
    }

    .year-timeline-bars {
        display: flex !important;
        align-items: flex-end !important;
        gap: 2px !important;
        height: calc(100% - 30px) !important;
        margin-top: 30px !important;
        padding: 0 4px 4px !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* Hide grid lines on mobile */
    .year-timeline-bars::before,
    .year-timeline-bars::after {
        display: none !important;
    }

    .year-range {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .ytl-bar {
        min-width: 4px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 100% !important;
        position: relative !important;
    }

    .ytl-fill {
        width: 100% !important;
        min-width: 10px !important;
        border-radius: 2px 2px 0 0 !important;
        margin-top: auto !important;
        z-index: 1 !important;
        position: relative !important;
    }

    .ytl-label {
        font-size: 0.5rem !important;
        white-space: nowrap !important;
        margin-top: 2px !important;
    }

    /* Year timeline tooltip - use vbar-tooltip for consistency */
    .ytl-bar .vbar-tooltip {
        font-size: 0.65rem !important;
        padding: 4px 6px !important;
        z-index: 9999 !important;
        position: absolute !important;
        bottom: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-bottom: 6px !important;
        pointer-events: none !important;
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .ytl-bar:hover .vbar-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .ytl-bar .vbar-value {
        font-size: 0.5rem !important;
        position: absolute !important;
        top: -26px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        white-space: nowrap !important;
        z-index: 100 !important;
        color: var(--text-primary) !important;
    }

    /* Summary rows (Genres/Tags/Studios pages) - 4 cards side by side */
    .section-summary-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .summary-stat {
        padding: 12px 10px !important;
    }

    .summary-value {
        font-size: 1.1rem !important;
    }

    .summary-label {
        font-size: 0.65rem !important;
    }

    /* Top items grid - 3 items side by side */
    .top-items-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* Show first 3 items, hide 4th and beyond */
    .top-items-grid .top-item-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        min-width: 0 !important;
    }

    .top-items-grid .top-item-card:nth-child(n+4) {
        display: none !important;
    }

    .top-item-rank {
        position: static !important;
        font-size: 0.75rem !important;
        padding: 2px 6px !important;
        margin-bottom: 6px !important;
        align-self: flex-start !important;
    }

    .top-item-name {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .top-item-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .top-item-stat {
        font-size: 0.7rem !important;
        padding: 2px 4px !important;
    }

    .top-item-stat-value {
        font-size: 0.7rem !important;
    }

    /* Full bar chart */
    .chart-filter-row {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .chart-filter-title {
        font-size: 0.8rem !important;
    }

    .chart-search {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .full-bar-chart {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* Stat detail modal - 3 cards per row */
    .stat-detail-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .stat-detail-card-info {
        padding: 8px !important;
    }

    .stat-detail-card-title {
        font-size: 0.75rem !important;
    }

    .stat-detail-card-meta {
        font-size: 0.6rem !important;
    }

    .bar-row {
        gap: 8px !important;
    }

    .bar-name {
        width: 80px !important;
        font-size: 0.7rem !important;
    }

    .bar-value {
        font-size: 0.7rem !important;
        min-width: 40px !important;
    }

    /* === SOCIAL TAB === */
    /* Toggle buttons - smaller and side by side */
    .social-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .social-tab {
        flex: 1 !important;
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        gap: 6px !important;
    }

    .social-tab svg {
        width: 14px !important;
        height: 14px !important;
    }

    .social-count {
        padding: 2px 6px !important;
        font-size: 0.65rem !important;
    }

    /* Reviews */
    .review-card {
        flex-direction: column !important;
    }

    .review-card .anime-image {
        width: 100% !important;
        height: 120px !important;
    }

    .review-content {
        padding: 12px !important;
    }

    .review-title {
        font-size: 0.95rem !important;
    }

    .review-excerpt {
        font-size: 0.8rem !important;
        -webkit-line-clamp: 3 !important;
    }

    /* Forum activity */
    .forum-activity-section {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .forum-post-item,
    .forum-thread-item {
        padding: 12px !important;
    }

    /* Social tab - threads and posts side by side */
    .forum-activity {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* Remove container styling - just headers */
    .forum-section {
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Add separator between threads and posts */
    .forum-section:last-child {
        padding-left: 16px !important;
        border-left: 1px solid var(--border) !important;
    }

    .forum-section h3 {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        padding: 0 0 8px 0 !important;
        background: transparent !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 8px !important;
    }

    .user-thread-item,
    .user-post-item {
        padding: 8px 10px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Thread/post link content */
    .thread-item-link,
    .post-item-link {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .thread-item-title,
    .post-item-thread {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .thread-item-meta,
    .post-item-meta {
        flex-wrap: wrap !important;
        gap: 4px !important;
        font-size: 0.65rem !important;
    }

    /* Category tags fix */
    .thread-category {
        display: inline-block !important;
        padding: 2px 5px !important;
        font-size: 0.6rem !important;
        border-radius: 3px !important;
        white-space: nowrap !important;
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .thread-stats,
    .thread-date,
    .post-date {
        font-size: 0.6rem !important;
        white-space: nowrap !important;
    }

    .post-item-content {
        font-size: 0.65rem !important;
        -webkit-line-clamp: 1 !important;
    }

    /* Action buttons - always visible on mobile */
    .item-actions-row {
        opacity: 1 !important;
        display: flex !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
    }

    .btn-action-small {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Fix SVG icons inside action buttons */
    .btn-action-small svg {
        width: 14px !important;
        height: 14px !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Remove scroll - allow infinite loading */
    .user-threads-list,
    .user-posts-list {
        max-height: none !important;
        overflow: visible !important;
    }

    /* === NOTIFICATIONS TAB === */
    .notifications-container {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: calc(66dvh - 100px) !important;
        max-height: calc(66dvh - 100px) !important;
        overflow: hidden !important;
    }

    .notifications-header {
        padding: 10px 12px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .notifications-header h2 {
        font-size: 1rem !important;
        margin: 0 !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .notifications-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        width: auto !important;
        flex-shrink: 0 !important;
        justify-content: flex-end !important;
    }

    .btn-notif-action {
        flex: none !important;
        width: fit-content !important;
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        min-height: 30px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        background: rgba(var(--primary-rgb), 0.1) !important;
        border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
    }

    /* Clear button - red styling */
    .btn-notif-action.btn-notif-clear {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.1) !important;
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
    }

    .btn-notif-action.btn-notif-clear:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        color: #dc2626 !important;
    }

    /* Notifications tab - prevent page scroll */
    #tab-notifications {
        overflow: hidden !important;
        max-height: calc(100dvh - 180px) !important;
    }

    /* Notifications list - scrollable area fills remaining space */
    .notifications-list {
        flex: 1 !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        min-height: 0 !important;
    }

    .notifications-list .notification-item {
        padding: 10px !important;
        gap: 10px !important;
    }

    .notifications-list .notification-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .notifications-list .notification-content h5 {
        font-size: 0.85rem !important;
    }

    .notifications-list .notification-content p {
        font-size: 0.75rem !important;
    }

    .notifications-list .notification-time {
        font-size: 0.65rem !important;
    }

    /* === SETTINGS TAB === */
    .settings-container {
        padding: 0 !important;
    }

    .settings-section {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .settings-section-title {
        font-size: 0.75rem !important;
        margin-bottom: 14px !important;
    }

    .setting-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .setting-info {
        width: 100% !important;
    }

    .setting-heading {
        font-size: 0.9rem !important;
    }

    .setting-description {
        font-size: 0.75rem !important;
    }

    .setting-control {
        width: 100% !important;
    }

    .setting-control input[type="text"],
    .setting-control input[type="email"],
    .setting-control input[type="password"],
    .setting-control select,
    .setting-control textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 44px !important;
    }

    /* Toggle switches - larger for touch */
    .toggle-switch {
        width: 52px !important;
        height: 28px !important;
    }

    .toggle-slider {
        border-radius: 28px !important;
    }

    .toggle-slider::before {
        width: 22px !important;
        height: 22px !important;
        left: 2px !important;
        bottom: 2px !important;
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(24px) !important;
    }

    /* Profile images */
    .profile-images-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .avatar-upload,
    .banner-upload {
        width: 100% !important;
    }

    .avatar-preview {
        width: 100px !important;
        height: 100px !important;
    }

    .banner-preview {
        height: 100px !important;
    }

    /* About editor */
    .about-editor-container {
        flex-direction: column !important;
    }

    .about-editor,
    .about-preview {
        width: 100% !important;
        min-height: 150px !important;
    }

    /* Settings buttons */
    .btn-save-settings,
    .btn-change-password,
    .btn-delete-account {
        width: 100% !important;
        padding: 14px !important;
        font-size: 0.9rem !important;
        min-height: 48px !important;
    }

}

/* =====================================================
   600px BREAKPOINT - MOBILE
   ===================================================== */
@media (max-width: 600px) {

    /* === BANNER === */
    .user-banner {
        height: 140px !important;
    }

    /* === PROFILE HEADER === */
    .profile-info-content {
        padding: 0 12px 10px !important;
        gap: 10px !important;
    }

    .profile-avatar-wrap {
        margin-top: -40px !important;
    }

    .user-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-info-main h1 {
        font-size: 1.15rem !important;
    }

    .profile-social-stats {
        gap: 12px !important;
    }

    .social-stat-btn {
        padding: 4px 8px !important;
    }

    .social-stat-btn .stat-count {
        font-size: 0.9rem !important;
    }

    .social-stat-btn .stat-label {
        font-size: 0.65rem !important;
    }

    .profile-tabs-inline {
        margin: 6px 0 0 !important;
        padding: 6px 0 !important;
        width: 100% !important;
    }

    .profile-tabs-inline .profile-tab svg {
        width: 27px !important;
        height: 27px !important;
    }

    /* === MAIN CONTENT === */
    .profile-main {
        padding: 12px 10px 20px !important;
    }

    /* === OVERVIEW === */

    /* Stats - keep 4 columns but smaller */
    .overview-stats-row {
        gap: 6px !important;
    }

    .overview-stat {
        padding: 8px 4px !important;
    }

    .overview-stat-value {
        font-size: 1rem !important;
    }

    .overview-stat-label {
        font-size: 0.55rem !important;
    }

    .panel {
        padding: 12px !important;
    }

    .panel-title {
        font-size: 0.9rem !important;
    }

    /* About panel - still full size */
    .about-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    .about-panel .about-content {
        font-size: 0.85rem !important;
    }

    /* Favorites - smaller cards */
    .favorites-grid {
        gap: 8px !important;
        margin: 0 -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .favorites-grid .favorite-card,
    .favorites-grid .favorite-item {
        width: 70px !important;
    }

    .favorites-grid .favorite-title {
        font-size: 0.6rem !important;
    }

    /* Recent activity - smaller */
    .activity-item {
        padding: 6px 8px !important;
        gap: 8px !important;
    }

    .activity-item .activity-cover,
    .activity-item .cover,
    .activity-item img:first-child {
        width: 32px !important;
        height: 45px !important;
    }

    .activity-item .activity-title,
    .activity-item .title {
        font-size: 0.75rem !important;
    }

    .activity-item .activity-meta,
    .activity-item .meta {
        font-size: 0.65rem !important;
    }

    .activity-item .status-badge {
        padding: 1px 5px !important;
        font-size: 0.55rem !important;
    }

    .activity-item .activity-date {
        font-size: 0.6rem !important;
    }

    /* Genre bars */
    .genre-bars-compact .genre-name {
        width: 70px !important;
        font-size: 0.7rem !important;
    }

    .genre-bars-compact .bar-container {
        height: 5px !important;
    }

    /* === ANIME LIST === */
    .list-entry .cover {
        width: 45px !important;
        height: 63px !important;
    }

    .list-entry .title {
        font-size: 0.85rem !important;
    }

    .progress-controls button {
        width: 30px !important;
        height: 30px !important;
    }

    /* Status tabs dropdown - smaller sizes */
    .status-filter-row .status-tab {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Card view - 3 cards */
    .anime-grid-view {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .grid-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-card-title {
        font-size: 0.65rem !important;
    }

    .grid-card-score {
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
    }

    .grid-card-status {
        font-size: 0.5rem !important;
        padding: 2px 5px !important;
    }

    /* === STATS === */
    .stats-nav-item {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    .stats-section-header {
        font-size: 0.7rem !important;
        margin: 16px 0 10px !important;
    }

    /* Primary stats - 4 columns, smaller */
    .stats-row.primary-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
    }

    .stats-row.primary-stats .stat-box {
        padding: 8px 3px !important;
    }

    .stats-row.primary-stats .stat-box-value {
        font-size: 0.9rem !important;
    }

    .stats-row.primary-stats .stat-box-label {
        font-size: 0.45rem !important;
    }

    .stat-box-value {
        font-size: 1.15rem !important;
    }

    .stat-box-label {
        font-size: 0.55rem !important;
    }

    /* Secondary stats */
    .stats-row.secondary-stats {
        gap: 5px !important;
    }

    .stats-secondary-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Donuts - horizontal compact cards */
    .stats-row.donuts-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .donut-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        position: relative !important;
    }

    .donut-card h4 {
        position: absolute !important;
        top: 10px !important;
        left: 12px !important;
        font-size: 0.7rem !important;
    }

    .donut-wrap {
        width: 60px !important;
        height: 60px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        margin-top: 16px !important;
    }

    .donut-wrap canvas {
        width: 60px !important;
        height: 60px !important;
    }

    .donut-legend {
        flex: 1 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 16px !important;
        font-size: 0.6rem !important;
    }

    /* Series overview - 5 columns */
    .stats-row.series-overview-row {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
    }

    .stats-row.series-overview-row .stat-box {
        padding: 8px 2px !important;
        min-width: 0 !important;
    }

    .stats-row.series-overview-row .stat-box-value {
        font-size: 0.8rem !important;
    }

    .stats-row.series-overview-row .stat-box-label {
        font-size: 0.35rem !important;
    }

    /* Time row - 5 columns */
    .stats-page .stats-row.time-row,
    .stats-content .stats-row.time-row,
    .stats-row.time-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.time-row > .time-box,
    .time-row .time-box {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 8px 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .time-row .time-box .time-value,
    .stats-row.time-row .time-value {
        font-size: 0.85rem !important;
    }

    .time-row .time-box .time-label,
    .stats-row.time-row .time-label {
        font-size: 0.35rem !important;
        white-space: nowrap !important;
    }

    /* Social row - 5 columns */
    .stats-page .stats-row.social-row,
    .stats-content .stats-row.social-row,
    .stats-row.social-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.social-row > .stat-box,
    .social-row .stat-box,
    .stats-row.social-row .stat-box.accent-purple,
    .stats-row.social-row .stat-box.accent-green,
    .stats-row.social-row .stat-box.accent-red,
    .stats-row.social-row .stat-box.accent-blue,
    .stats-row.social-row .stat-box.accent-teal {
        padding: 8px 2px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .social-row .stat-box .stat-box-value,
    .stats-row.social-row .stat-box-value {
        font-size: 0.8rem !important;
    }

    .social-row .stat-box .stat-box-label,
    .stats-row.social-row .stat-box-label {
        font-size: 0.35rem !important;
        white-space: nowrap !important;
    }

    /* Progress panels smaller */
    .series-progress-panel {
        padding: 10px !important;
        gap: 10px !important;
    }

    .progress-ring-wrap {
        width: 50px !important;
        height: 50px !important;
    }

    .progress-ring-value {
        font-size: 0.7rem !important;
    }

    .progress-panel-info h4 {
        font-size: 0.75rem !important;
    }

    .progress-panel-stats {
        font-size: 0.7rem !important;
    }

    .progress-panel-meta {
        font-size: 0.6rem !important;
    }

    .section-summary-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .top-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .top-items-grid .top-item-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px !important;
        min-width: 0 !important;
    }

    .top-items-grid .top-item-card:nth-child(n+4) {
        display: none !important;
    }

    .top-item-rank {
        position: static !important;
        font-size: 0.7rem !important;
        padding: 2px 5px !important;
        margin-bottom: 4px !important;
    }

    .top-item-name {
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .top-item-stat {
        font-size: 0.65rem !important;
    }

    .full-bar-chart {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .stat-detail-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .bar-name {
        width: 70px !important;
        font-size: 0.65rem !important;
    }

    .chart-container canvas,
    .donut-chart-container canvas {
        max-height: 180px !important;
    }

    /* === SOCIAL === */
    .social-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }

    .social-tab {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        gap: 5px !important;
    }

    .social-tab svg {
        width: 12px !important;
        height: 12px !important;
    }

    .social-count {
        padding: 2px 5px !important;
        font-size: 0.6rem !important;
    }

    .review-card .anime-image {
        height: 100px !important;
    }

    .review-title {
        font-size: 0.9rem !important;
    }

    /* Forum activity - keep side by side at 600px */
    .forum-activity {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Remove container styling - just headers */
    .forum-section {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Add separator between threads and posts */
    .forum-section:last-child {
        padding-left: 12px !important;
        border-left: 1px solid var(--border) !important;
    }

    .forum-section h3 {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        padding: 0 0 6px 0 !important;
        background: transparent !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 6px !important;
    }

    .user-thread-item,
    .user-post-item {
        padding: 6px 8px !important;
    }

    .thread-item-title,
    .post-item-thread {
        font-size: 0.7rem !important;
    }

    .thread-item-meta,
    .post-item-meta {
        font-size: 0.6rem !important;
    }

    .thread-category {
        font-size: 0.55rem !important;
        padding: 1px 4px !important;
        max-width: 70px !important;
    }

    .btn-action-small {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }

    .btn-action-small svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Remove scroll - allow infinite loading */
    .user-threads-list,
    .user-posts-list {
        max-height: none !important;
        overflow: visible !important;
    }

    /* === NOTIFICATIONS === */
    .notifications-container {
        height: calc(66dvh - 80px) !important;
        max-height: calc(66dvh - 80px) !important;
    }

    .notifications-header {
        flex-wrap: nowrap !important;
    }

    .notifications-header h2 {
        font-size: 0.95rem !important;
        width: auto !important;
    }

    .btn-notif-action {
        flex: none !important;
        width: fit-content !important;
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
        min-height: 28px !important;
    }

    /* Clear button - red styling */
    .btn-notif-action.btn-notif-clear {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.1) !important;
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
    }

    /* Notifications tab - prevent page scroll */
    #tab-notifications {
        overflow: hidden !important;
        max-height: calc(100dvh - 160px) !important;
    }

    .notifications-list .notification-icon {
        width: 34px !important;
        height: 34px !important;
    }

    .notifications-list .notification-content h5 {
        font-size: 0.8rem !important;
    }

    .notifications-list .notification-content p {
        font-size: 0.7rem !important;
    }

    /* === SETTINGS === */
    .settings-section {
        padding: 14px !important;
    }

    .toggle-switch {
        width: 50px !important;
        height: 26px !important;
    }

    .toggle-slider {
        border-radius: 26px !important;
    }

    .toggle-slider::before {
        width: 20px !important;
        height: 20px !important;
        left: 2px !important;
        bottom: 2px !important;
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(24px) !important;
    }

}

/* =====================================================
   480px BREAKPOINT - SMALL MOBILE
   ===================================================== */
@media (max-width: 480px) {

    /* === BANNER === */
    .user-banner {
        height: 120px !important;
    }

    /* === PROFILE HEADER === */
    .profile-info-content {
        padding: 0 10px 8px !important;
        gap: 8px !important;
    }

    .profile-avatar-wrap {
        margin-top: -35px !important;
    }

    .user-avatar {
        width: 70px !important;
        height: 70px !important;
    }

    .profile-info-main h1 {
        font-size: 1.05rem !important;
    }

    .social-stat-btn .stat-count {
        font-size: 0.85rem !important;
    }

    .social-stat-btn .stat-label {
        font-size: 0.6rem !important;
    }

    .profile-actions {
        top: 8px !important;
        right: 8px !important;
    }

    .btn-signout {
        width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
    }

    .profile-tabs-inline {
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 4px 0 !important;
    }

    .profile-tabs-inline .profile-tab {
        padding: 6px 2px !important;
    }

    .profile-tabs-inline .profile-tab svg {
        width: 27px !important;
        height: 27px !important;
    }

    /* === MAIN CONTENT === */
    .profile-main {
        padding: 10px 8px 20px !important;
    }

    /* === OVERVIEW === */

    /* Stats - 4 columns, even more compact */
    .overview-stats-row {
        gap: 4px !important;
    }

    .overview-stat {
        padding: 6px 2px !important;
    }

    .overview-stat-value {
        font-size: 0.9rem !important;
    }

    .overview-stat-label {
        font-size: 0.5rem !important;
    }

    .overview-top-three,
    .overview-bottom-row {
        gap: 10px !important;
    }

    .panel {
        padding: 10px !important;
        border-radius: 8px !important;
    }

    .panel-title {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
    }

    /* About - still full size */
    .about-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    .about-panel .about-content {
        font-size: 0.8rem !important;
    }

    /* Favorites - horizontal scroll, smaller cards */
    .overview-top-three #favoritesPanel .favorites-grid,
    .favorites-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin: 0 -10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .favorites-grid .favorite-card,
    .favorites-grid .favorite-item {
        flex-shrink: 0 !important;
        width: 60px !important;
        border-radius: 6px !important;
    }

    .favorites-grid .favorite-overlay {
        padding: 4px !important;
    }

    .favorites-grid .favorite-title {
        font-size: 0.55rem !important;
    }

    /* Recent activity - compact cards, smaller */
    .activity-list,
    #recentActivity {
        gap: 6px !important;
    }

    .activity-item {
        padding: 6px 8px !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 6px !important;
    }

    .activity-item .activity-cover,
    .activity-item .cover,
    .activity-item img:first-child {
        width: 28px !important;
        height: 40px !important;
        border-radius: 3px !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .activity-item .activity-title,
    .activity-item .title {
        font-size: 0.7rem !important;
    }

    .activity-item .activity-meta,
    .activity-item .meta {
        font-size: 0.6rem !important;
        gap: 4px !important;
    }

    .activity-item .status-badge {
        padding: 1px 4px !important;
        font-size: 0.5rem !important;
    }

    .activity-item .activity-date,
    .activity-item .activity-time,
    .activity-item .time {
        font-size: 0.55rem !important;
    }

    /* Genre bars - tighter */
    .genre-bars-compact .genre-row {
        gap: 8px !important;
    }

    .genre-bars-compact .genre-name {
        width: 55px !important;
        font-size: 0.65rem !important;
    }

    .genre-bars-compact .bar-container {
        height: 4px !important;
    }

    .genre-bars-compact .genre-count {
        font-size: 0.6rem !important;
        min-width: 24px !important;
    }

    /* === ANIME LIST === */
    .list-controls-bar {
        display: none !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    /* Even more compact list-type-switcher at 480px */
    #tab-animelist .list-type-switcher,
    .list-type-switcher {
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    #tab-animelist .list-type-switcher .list-type-btn,
    .list-type-switcher .list-type-btn {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 2px !important;
    }

    #tab-animelist .list-type-switcher .list-type-btn svg,
    .list-type-switcher .list-type-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    #tab-animelist .mobile-view-controls,
    .mobile-view-controls {
        gap: 6px !important;
    }

    #tab-animelist .mobile-view-controls .view-btn,
    #tab-animelist .mobile-view-controls .view-mode-btn,
    .mobile-view-controls .view-btn,
    .mobile-view-controls .view-mode-btn {
        width: 22px !important;
        height: 22px !important;
    }

    #tab-animelist .mobile-view-controls .view-btn svg,
    #tab-animelist .mobile-view-controls .view-mode-btn svg,
    .mobile-view-controls .view-btn svg,
    .mobile-view-controls .view-mode-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    #tab-animelist .mobile-view-controls .more-menu-btn,
    .mobile-view-controls .more-menu-btn {
        width: 22px !important;
        height: 22px !important;
    }

    /* Compact status dropdown for 480px */
    .status-filter-row {
        gap: 6px !important;
        padding: 6px 8px !important;
    }

    .mobile-search-container {
        height: 36px !important;
        padding: 0 8px !important;
    }

    .list-sort select {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }

    .view-btn,
    .view-mode-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .list-tab {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    .list-entry {
        padding: 8px !important;
        gap: 8px !important;
    }

    .list-entry .cover {
        width: 40px !important;
        height: 56px !important;
    }

    .list-entry .title {
        font-size: 0.8rem !important;
    }

    .list-entry .meta {
        font-size: 0.7rem !important;
    }

    .progress-controls button {
        width: 28px !important;
        height: 28px !important;
    }

    .progress-text {
        font-size: 0.75rem !important;
    }

    /* Status tabs dropdown - smallest sizes */
    .status-filter-row .status-tabs {
        min-width: 140px !important;
    }

    .status-filter-row .status-tab {
        padding: 8px 10px !important;
        font-size: 0.7rem !important;
    }

    /* Card view - 3 cards */
    .anime-grid-view {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .grid-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-card-info {
        padding: 4px 2px !important;
    }

    .grid-card-title {
        font-size: 0.6rem !important;
    }

    .grid-card-score {
        top: 3px !important;
        left: 3px !important;
        font-size: 0.55rem !important;
        padding: 1px 3px !important;
    }

    .grid-card-status {
        bottom: 6px !important;
        left: 3px !important;
        font-size: 0.45rem !important;
        padding: 1px 4px !important;
    }

    /* Edit button on cards - smaller at 480px */
    .grid-card-overlay {
        padding: 4px !important;
    }

    .btn-edit-small {
        width: 26px !important;
        height: 26px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        color: white !important;
        border-radius: 5px !important;
    }

    .btn-edit-small svg {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        min-height: 11px !important;
        color: white !important;
        stroke: white !important;
        fill: none !important;
    }

    .btn-edit-small svg path {
        stroke: white !important;
        stroke-width: 2 !important;
    }

    /* === STATS === */
    .stats-nav {
        padding: 4px !important;
        gap: 2px !important;
    }

    .stats-nav-item {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }

    .stats-section-header {
        font-size: 0.6rem !important;
        margin: 12px 0 8px !important;
    }

    .stats-page-header h2 {
        font-size: 1rem !important;
    }

    .stats-card {
        padding: 8px !important;
        overflow: visible !important;
    }

    .stats-card h4 {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

    /* Primary stats - 4 columns, most compact */
    .stats-row.primary-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
    }

    .stats-row.primary-stats .stat-box {
        padding: 6px 2px !important;
    }

    .stats-row.primary-stats .stat-box-value {
        font-size: 0.8rem !important;
    }

    .stats-row.primary-stats .stat-box-label {
        font-size: 0.4rem !important;
        line-height: 1 !important;
    }

    .stat-box-value {
        font-size: 1rem !important;
    }

    .stat-box-label {
        font-size: 0.5rem !important;
    }

    /* Secondary stats - 3x2 */
    .stats-row.secondary-stats {
        gap: 4px !important;
    }

    .stats-secondary-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .stats-secondary-box {
        padding: 8px 4px !important;
    }

    .stats-secondary-box .stat-value {
        font-size: 0.9rem !important;
    }

    .stats-secondary-box .stat-label {
        font-size: 0.5rem !important;
    }

    /* Donuts even more compact */
    .donut-card {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .donut-card h4 {
        font-size: 0.65rem !important;
    }

    .donut-wrap {
        width: 50px !important;
        height: 50px !important;
        margin-top: 14px !important;
    }

    .donut-wrap canvas {
        width: 50px !important;
        height: 50px !important;
    }

    .donut-center {
        font-size: 0.7rem !important;
    }

    .donut-legend {
        font-size: 0.5rem !important;
        gap: 2px !important;
        margin-top: 14px !important;
    }

    /* Series overview - 5 columns, most compact */
    .stats-row.series-overview-row {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px !important;
    }

    .stats-row.series-overview-row .stat-box {
        padding: 6px 1px !important;
        min-width: 0 !important;
    }

    .stats-row.series-overview-row .stat-box-value {
        font-size: 0.7rem !important;
    }

    .stats-row.series-overview-row .stat-box-label {
        font-size: 0.3rem !important;
        line-height: 1 !important;
    }

    /* Time row - 5 columns, most compact */
    .stats-page .stats-row.time-row,
    .stats-content .stats-row.time-row,
    .stats-row.time-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.time-row > .time-box,
    .time-row .time-box {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 6px 1px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .time-row .time-box .time-value,
    .stats-row.time-row .time-value {
        font-size: 0.75rem !important;
    }

    .time-row .time-box .time-label,
    .stats-row.time-row .time-label {
        font-size: 0.3rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Social row - 5 columns, most compact */
    .stats-page .stats-row.social-row,
    .stats-content .stats-row.social-row,
    .stats-row.social-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px !important;
        grid-auto-rows: 1fr !important;
        flex-direction: row !important;
    }

    .stats-row.social-row > .stat-box,
    .social-row .stat-box,
    .stats-row.social-row .stat-box.accent-purple,
    .stats-row.social-row .stat-box.accent-green,
    .stats-row.social-row .stat-box.accent-red,
    .stats-row.social-row .stat-box.accent-blue,
    .stats-row.social-row .stat-box.accent-teal {
        padding: 6px 1px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        grid-column: span 1 !important;
    }

    .social-row .stat-box .stat-box-value,
    .stats-row.social-row .stat-box-value {
        font-size: 0.7rem !important;
    }

    .social-row .stat-box .stat-box-label,
    .stats-row.social-row .stat-box-label {
        font-size: 0.3rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Progress panels */
    .series-progress-panel {
        padding: 8px !important;
        gap: 8px !important;
    }

    .progress-ring-wrap {
        width: 45px !important;
        height: 45px !important;
    }

    .progress-ring {
        width: 45px !important;
        height: 45px !important;
    }

    .progress-ring-value {
        font-size: 0.65rem !important;
    }

    .progress-panel-info h4 {
        font-size: 0.7rem !important;
    }

    .progress-panel-stats {
        font-size: 0.65rem !important;
    }

    .progress-panel-meta {
        font-size: 0.55rem !important;
    }

    /* Vertical bar charts - compact */
    .vertical-bar-chart {
        min-height: 180px !important;
        height: 200px !important;
        overflow: visible !important;
        gap: 1px !important;
        padding: 28px 2px 22px !important;
    }

    .vbar-col {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .vbar-bar {
        min-width: 6px !important;
    }

    .vbar-label {
        font-size: 0.4rem !important;
    }

    .vbar-count {
        font-size: 0.4rem !important;
    }

    /* Year chart - compact */
    .year-timeline {
        height: 150px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .year-timeline-bars {
        width: 100% !important;
        overflow: visible !important;
        gap: 1px !important;
        height: calc(100% - 28px) !important;
        margin-top: 28px !important;
        padding: 0 2px 3px !important;
        position: relative !important;
    }

    /* Hide grid lines on mobile */
    .year-timeline-bars::before,
    .year-timeline-bars::after {
        display: none !important;
    }

    .ytl-bar {
        min-width: 3px !important;
        flex: 1 !important;
    }

    .ytl-fill {
        min-width: 6px !important;
        z-index: 1 !important;
        position: relative !important;
    }

    .ytl-label {
        font-size: 0.35rem !important;
    }

    /* Year timeline tooltip - use vbar-tooltip for consistency */
    .ytl-bar .vbar-tooltip {
        font-size: 0.55rem !important;
        padding: 3px 5px !important;
        z-index: 9999 !important;
        position: absolute !important;
        bottom: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-bottom: 4px !important;
        pointer-events: none !important;
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border) !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .ytl-bar:hover .vbar-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .ytl-bar .vbar-value {
        font-size: 0.4rem !important;
        position: absolute !important;
        top: -24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        white-space: nowrap !important;
        z-index: 100 !important;
        color: var(--text-primary) !important;
    }

    .year-range {
        font-size: 0.55rem !important;
    }

    /* Summary row - 4 cards side by side */
    .section-summary-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    .top-items-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .top-items-grid .top-item-card {
        display: flex !important;
        flex-direction: column !important;
        padding: 6px !important;
        min-width: 0 !important;
    }

    .top-items-grid .top-item-card:nth-child(n+4) {
        display: none !important;
    }

    .top-item-rank {
        position: static !important;
        font-size: 0.6rem !important;
        padding: 2px 4px !important;
        margin-bottom: 3px !important;
    }

    .top-item-name {
        font-size: 0.65rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin-bottom: 4px !important;
    }

    .top-item-stat {
        font-size: 0.55rem !important;
        gap: 2px !important;
    }

    .top-item-stat-value {
        font-size: 0.55rem !important;
    }

    .full-bar-chart {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .stat-detail-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .summary-stat {
        padding: 8px 6px !important;
    }

    .summary-value {
        font-size: 0.9rem !important;
    }

    .summary-label {
        font-size: 0.5rem !important;
    }

    /* Bar chart */
    .bar-name {
        width: 55px !important;
        font-size: 0.55rem !important;
    }

    .bar-value {
        font-size: 0.55rem !important;
        min-width: 32px !important;
    }

    .chart-container,
    .donut-chart-container {
        padding: 8px !important;
    }

    .chart-container canvas,
    .donut-chart-container canvas {
        max-height: 140px !important;
    }

    /* Chart toggle */
    .chart-toggle {
        padding: 4px 8px !important;
        font-size: 0.6rem !important;
    }

    .year-timeline {
        height: 120px !important;
    }

    /* === SOCIAL === */
    .social-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }

    .social-tab {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
        gap: 4px !important;
    }

    .social-tab svg {
        width: 10px !important;
        height: 10px !important;
    }

    .social-count {
        padding: 1px 4px !important;
        font-size: 0.55rem !important;
    }

    .review-card .anime-image {
        height: 80px !important;
    }

    .review-content {
        padding: 10px !important;
    }

    .review-title {
        font-size: 0.85rem !important;
    }

    .review-excerpt {
        font-size: 0.75rem !important;
    }

    .forum-post-item,
    .forum-thread-item {
        padding: 10px !important;
    }

    /* Forum activity - keep side by side at 480px with more compact styling */
    .forum-activity {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Remove container styling - just headers */
    .forum-section {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Add separator between threads and posts */
    .forum-section:last-child {
        padding-left: 10px !important;
        border-left: 1px solid var(--border) !important;
    }

    .forum-section h3 {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        padding: 0 0 5px 0 !important;
        background: transparent !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 5px !important;
    }

    .user-thread-item,
    .user-post-item {
        padding: 5px 6px !important;
        gap: 6px !important;
    }

    .thread-item-title,
    .post-item-thread {
        font-size: 0.65rem !important;
    }

    .thread-item-meta,
    .post-item-meta {
        font-size: 0.55rem !important;
        gap: 3px !important;
    }

    .thread-category {
        font-size: 0.5rem !important;
        padding: 1px 3px !important;
        max-width: 60px !important;
    }

    .thread-stats,
    .thread-date,
    .post-date {
        font-size: 0.5rem !important;
    }

    .post-item-content {
        font-size: 0.55rem !important;
    }

    .btn-action-small {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .btn-action-small svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Remove scroll - allow infinite loading */
    .user-threads-list,
    .user-posts-list {
        max-height: none !important;
        overflow: visible !important;
    }

    /* === NOTIFICATIONS === */
    .notifications-container {
        height: calc(66dvh - 60px) !important;
        max-height: calc(66dvh - 60px) !important;
    }

    .notifications-header {
        padding: 8px !important;
        flex-wrap: nowrap !important;
    }

    .notifications-header h2 {
        font-size: 0.9rem !important;
        width: auto !important;
    }

    .btn-notif-action {
        flex: none !important;
        width: fit-content !important;
        padding: 4px 6px !important;
        font-size: 0.6rem !important;
        min-height: 26px !important;
    }

    /* Clear button - red styling */
    .btn-notif-action.btn-notif-clear {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.1) !important;
        border: 1px solid rgba(239, 68, 68, 0.2) !important;
    }

    /* Notifications tab - prevent page scroll */
    #tab-notifications {
        overflow: hidden !important;
        max-height: calc(100dvh - 140px) !important;
    }

    .notifications-list .notification-item {
        padding: 8px !important;
        gap: 8px !important;
    }

    .notifications-list .notification-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .notifications-list .notification-content h5 {
        font-size: 0.75rem !important;
    }

    .notifications-list .notification-content p {
        font-size: 0.65rem !important;
    }

    .notifications-list .notification-time {
        font-size: 0.6rem !important;
    }

    /* === SETTINGS === */
    .settings-section {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .settings-section-title {
        font-size: 0.7rem !important;
    }

    .setting-heading {
        font-size: 0.85rem !important;
    }

    .setting-description {
        font-size: 0.7rem !important;
    }

    .toggle-switch {
        width: 48px !important;
        height: 24px !important;
    }

    .toggle-slider {
        border-radius: 24px !important;
    }

    .toggle-slider::before {
        width: 18px !important;
        height: 18px !important;
        left: 2px !important;
        bottom: 2px !important;
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(24px) !important;
    }

    .avatar-preview {
        width: 80px !important;
        height: 80px !important;
    }

    .banner-preview {
        height: 80px !important;
    }

    .about-editor,
    .about-preview {
        min-height: 120px !important;
    }

    .btn-save-settings,
    .btn-change-password,
    .btn-delete-account {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }

}

/* =====================================================
   FOLLOW/FOLLOWERS MODAL - MOBILE
   ===================================================== */
@media (max-width: 768px) {
    .follow-modal .modal-content {
        width: 95vw !important;
        max-width: none !important;
        max-height: 80vh !important;
        margin: 10vh auto !important;
    }

    .follow-modal .modal-header {
        padding: 14px 16px !important;
    }

    .follow-modal .modal-title {
        font-size: 1.1rem !important;
    }

    .follow-modal .user-list {
        padding: 8px !important;
    }

    .follow-modal .user-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    .follow-modal .user-avatar {
        width: 44px !important;
        height: 44px !important;
    }

    .follow-modal .username {
        font-size: 0.9rem !important;
    }

    .follow-modal .btn-follow-small {
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
    }
}

@media (max-width: 480px) {
    .follow-modal .modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .follow-modal .user-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .follow-modal .username {
        font-size: 0.85rem !important;
    }
}

/* =====================================================
   HIDE FLOATING NAV WHEN MODALS OPEN
   ===================================================== */
body.modal-open .floating-nav {
    display: none !important;
}

/* =====================================================
   TOUCH OPTIMIZATIONS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch */
    .overview-stat:hover,
    .panel:hover,
    .list-entry:hover,
    .notification-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Ensure tap targets are large enough */
    button:not(.modal-close-float):not(.btn-remove-icon),
    a,
    .list-tab,
    .profile-tab,
    .social-tab,
    .view-btn,
    .toggle-switch {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Remove hover-only elements */
    .list-entry .actions {
        opacity: 1 !important;
        visibility: visible !important;
    }
}