/* =========================================
           CORE VARIABLES (AMOLED + data-theme)
           ========================================= */
        :root {
            --accent: #1ba1e2;
            --metro-easing: cubic-bezier(0.1, 0.9, 0.2, 1);
            --accent-green: #60a917;
            --accent-red: #ce352c;
            --accent-yellow: #e3a21a;
            --glass-line: rgba(255, 255, 255, 0.16);
        }

        :root,
        [data-theme="dark"] {
            color-scheme: dark;
            --bg: #000000;
            --surface: #111111;
            --surface-hover: #1a1a1a;
            --input-bg: #111111;
            --text: #ffffff;
            --text-main: #ffffff;
            --text-muted: rgba(255, 255, 255, 0.5);
            --text-dim: rgba(255, 255, 255, 0.4);
            --hero-bg-text: rgba(255, 255, 255, 0.055);
            --wallpaper-overlay: rgba(0, 0, 0, 0.65);
            --glass-line: rgba(255, 255, 255, 0.16);
            --accent-ink: #07131a;
            --accent-ink-muted: rgba(7, 19, 26, 0.76);
        }

        [data-theme="light"] {
            color-scheme: light;
            --bg: #ffffff;
            --surface: #f4f5f7;
            --surface-hover: #e6e9ed;
            --input-bg: #ffffff;
            --text: #000000;
            --text-main: #000000;
            --text-muted: #555b63;
            --text-dim: #555b63;
            --accent-green: #3f7412;
            --accent-yellow: #805500;
            --accent-red: #aa2b24;
            --hero-bg-text: rgba(0, 0, 0, 0.05);
            --wallpaper-overlay: rgba(255, 255, 255, 0.85);
            --glass-line: rgba(0, 0, 0, 0.12);
        }

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

        body,
        html {
            height: 100%;
            background-color: var(--bg) !important;
            color: var(--text-main) !important;
            font-family: "Segoe UI Light", "Segoe WP Light", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif !important;
            font-weight: 300;
            overflow: hidden;
            text-transform: lowercase;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.3s, color 0.3s;
        }

        button, input, select, textarea {
            text-transform: lowercase;
            font-family: inherit;
        }

        .dropdown-banner {
            width: 320px;
            height: 84px;
            background-position: center;
            background-size: cover;
            display: flex;
            align-items: flex-end;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }

        .dropdown-banner-inner {
            width: 100%;
            padding: 8px 12px;
            display: flex;
            gap: 10px;
            align-items: center;
            background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
        }

        a {
            color: var(--accent);
            text-decoration: none;
        }

        a:hover {
            color: var(--text-main);
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: var(--accent) transparent;
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%);
            border: 2px solid transparent;
            background-clip: padding-box;
            border-radius: 0;
        }

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

        .content-scroll::-webkit-scrollbar {
            width: 7px;
            display: block;
        }

        .content-scroll::-webkit-scrollbar-track {
            background: color-mix(in srgb, var(--surface) 55%, transparent);
        }

        .content-scroll::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%);
            border: 2px solid transparent;
            background-clip: padding-box;
            border-radius: 0;
        }

        .content-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        .content-scroll {
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%) transparent;
        }

        /* =========================================
           PANORAMA LAYOUT ENGINE
           ========================================= */
        .panorama-container {
            display: flex;
            height: 100vh;
            width: 100vw;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            position: relative;
            z-index: 5;
        }

        .panorama-container::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background:
                radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
                radial-gradient(circle at 5% 20%, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                radial-gradient(circle at 8% 35%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                radial-gradient(circle at 3% 50%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                radial-gradient(circle at 10% 65%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                radial-gradient(circle at 6% 80%, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                radial-gradient(circle at 12% 45%, rgba(255, 255, 255, 0.008) 1px, transparent 1px),
                radial-gradient(circle at 2% 30%, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
                radial-gradient(circle at 15% 55%, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
            pointer-events: none;
            z-index: 1;
        }

        .header-section {
            width: 85vw;
            flex: 0 0 85vw;
            height: 100vh;
            padding: 210px 40px 100px 60px;
            margin-right: 15vw;
            scroll-snap-align: start;
            display: flex;
            flex-direction: column;
        }
        .header-section.library-section { width:100vw; flex:0 0 100vw; margin-right:0; padding-right:60px; }

        /* MASSIVE BACKGROUND TEXT */
        .zune-hero-bg {
            position: fixed;
            top: 10px;
            left: 60px;
            font-size: clamp(100px, 20vw, 180px);
            font-weight: 100;
            color: var(--hero-bg-text);
            white-space: nowrap;
            z-index: 0;
            pointer-events: none;
            letter-spacing: -8px;
            line-height: 1;
            will-change: auto;
            transition: color 0.3s;
            width: calc(100vw - 60px);
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        }
        .zune-hero-track {
            display: flex;
            width: max-content;
            animation: hero-text-loop 90s linear infinite;
            will-change: transform;
        }
        .zune-hero-track span {
            display: block;
            flex: 0 0 auto;
            padding-right: 10vw;
        }
        @keyframes hero-text-loop {
            to { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            .zune-hero-track { animation: none; }
        }

        /* MASSIVE SECTION TITLES */
        .metro-huge-title {
            font-size: clamp(3rem, 8vw, 6.5rem);
            font-weight: 100;
            line-height: 0.8;
            margin: 0 0 30px 0;
            letter-spacing: -4px;
            color: var(--text-main);
            white-space: normal;
            word-wrap: break-word;
            flex-shrink: 0;
            z-index: 10;
        }

        /* PIVOT NAV */
        /* Flat Metro Top Bar - No Glass */
        .top-blur-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
            z-index: 50;
            pointer-events: none;
            transition: opacity 0.3s var(--metro-easing);
        }
        .top-blur-layer.blur-disabled {
            opacity: 0;
        }
        [data-theme="dark"] .top-blur-layer.anime-wallpaper-active { background: linear-gradient(to bottom, rgba(0,0,0,.34), transparent); }
        [data-theme="light"] .top-blur-layer.anime-wallpaper-active { background: linear-gradient(to bottom, rgba(255,255,255,.48), transparent); }

        .xbox-nav {
            position: fixed;
            top: 130px;
            left: 60px;
            z-index: 100;
            display: flex;
            gap: 30px;
            align-items: baseline;
            transition: transform 0.4s var(--metro-easing);
            will-change: transform;
        }

        .nav-item {
            font-size: 24px;
            font-weight: 300;
            color: var(--text-dim);
            cursor: pointer;
            transition: color 0.2s;
            white-space: nowrap;
        }

        .nav-item:hover {
            color: var(--text-main);
            opacity: 0.8;
        }

        .nav-item.active {
            font-size: 48px;
            font-weight: 200;
            color: var(--text-main);
            letter-spacing: -1px;
            opacity: 1;
            line-height: 1;
        }

        .top-right-nav {
            position: fixed;
            top: 20px;
            right: 40px;
            z-index: 1000;
            display: none;
            align-items: center;
            gap: 15px;
        }

        .ui-hidden {
            display: none !important;
        }

        .content-scroll {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 20px;
            padding-bottom: 100px;
            z-index: 10;
            position: relative;
            width: 100%;
        }

        /* TOP RIGHT NAV */
        .top-right-nav {
            position: fixed;
            top: 20px;
            right: 40px;
            z-index: 1000;
            display: none;
            align-items: center;
            gap: 15px;
        }

        .quick-search-container {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--surface);
            border: 2px solid var(--surface-hover);
            padding: 4px 12px;
            transition: border-color 0.2s;
        }

        .quick-search-container:focus-within {
            border-            color: var(--accent);
        }

        [data-icon-color="dark"] .xbox-nav .nav-item:not(.active) i,
        [data-icon-color="dark"] .mobile-bottom-nav .mobile-nav-item:not(.active) i {
            color: var(--text-dim) !important;
        }

        .xbox-nav .nav-item.active,
        .xbox-nav .nav-item.active i,
        .mobile-bottom-nav .mobile-nav-item.active,
        .mobile-bottom-nav .mobile-nav-item.active i {
            color: var(--accent) !important;
        }

        .quick-search-input {
            background: transparent;
            border: none;
            color: var(--text-main);
            font-size: 14px;
            font-family: inherit;
            outline: none;
            width: 120px;
            transition: width 0.3s var(--metro-easing);
        }

        .quick-search-container:focus-within .quick-search-input {
            width: 200px;
        }

        .quick-search-container i {
            color: var(--text-dim);
            cursor: pointer;
            font-size: 14px;
            transition: color 0.2s;
        }

        .quick-search-container i:hover {
            color: var(--accent);
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            width: 45px;
            height: 45px;
            object-fit: cover;
            border: 2px solid var(--surface-hover);
            background: var(--surface);
            cursor: pointer;
            transition: all 0.15s;
        }

        .dropbtn:hover {
            border-color: var(--accent);
            transform: scale(0.95);
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 55px;
            background-color: var(--surface);
            min-width: 220px;
            z-index: 1001;
            border: 2px solid var(--surface-hover);
        }

        .dropdown-content a {
            color: var(--text-dim);
            padding: 10px 16px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.5px;
            transition: background 0.1s, color 0.1s;
            border-bottom: 1px solid var(--surface-hover);
        }

        .dropdown-content a:last-child {
            border-bottom: none;
        }

        .dropdown-content a i {
            margin-right: 10px;
            width: 18px;
            text-align: center;
        }

        .dropdown-content a:hover {
            background-color: var(--accent);
            color: var(--accent-ink);
        }

        .dropdown-content a:active {
            transform: scale(0.98);
        }

        .dropdown.open .dropdown-content {
            display: block;
        }

        /* NAV ARROWS */
        .nav-arrows {
            position: fixed;
            bottom: 40px;
            right: 40px;
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        .nav-arrow-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid var(--text-dim);
            background: transparent;
            color: var(--text-dim);
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.1s, border-color 0.2s, color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-arrow-btn:hover {
            transform: scale(1.08);
            border-color: var(--accent);
            color: var(--accent);
        }

        .nav-arrow-btn:active {
            transform: scale(0.88);
        }

        /* Home button - next to arrow keys */
        .home-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: transparent;
            color: var(--accent);
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.1s, border-color 0.2s, color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .home-btn:hover {
            transform: scale(1.05);
            border-color: var(--accent-ink);
        }

        #controller-hud {
            position: fixed;
            left: 50%;
            bottom: 88px;
            z-index: 11000;
            display: none;
            align-items: center;
            gap: 14px;
            max-width: calc(100vw - 32px);
            padding: 9px 14px;
            border: 1px solid var(--glass-line);
            border-radius: 999px;
            background: color-mix(in srgb, var(--surface) 92%, transparent);
            color: var(--text-main);
            box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
            transform: translateX(-50%);
            font: 500 12px/1.2 "Segoe UI", system-ui, sans-serif;
            white-space: nowrap;
            pointer-events: none;
            backdrop-filter: blur(12px);
        }

        #controller-hud.is-visible { display: flex; }
        .controller-hud-prompt { display: inline-flex; align-items: center; gap: 6px; }
        .controller-hud-button {
            min-width: 22px;
            height: 22px;
            padding: 0 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--text-dim);
            border-radius: 6px;
            color: var(--text-main);
            font: 600 11px/1 "Segoe UI", system-ui, sans-serif;
        }
        .controller-hud-status { color: var(--text-dim); }
        .gamepad-focused {
            outline: 3px solid var(--accent) !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent) !important;
            position: relative;
            z-index: 2;
        }

        @media (max-width: 700px) {
            #controller-hud { bottom: 88px; gap: 8px; padding: 8px 10px; font-size: 10px; }
            #controller-hud .controller-hud-status:last-child { display: none; }
        }

        /* =========================================
           START SCREEN GRID
           ========================================= */
        .start-screen-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-auto-rows: clamp(76px, 6vw, 104px);
            grid-auto-flow: dense;
            gap: clamp(8px, 1vw, 14px);
            padding-bottom: 18px;
            width: 100%;
            max-width: none;
            justify-content: start;
        }

        .header-section:first-of-type .content-scroll {
            flex: 0 1 auto;
            max-height: calc(100vh - 250px);
        }

        @media (max-width: 1100px) and (min-width: 769px) {
            .start-screen-grid {
                grid-template-columns: repeat(8, minmax(0, 1fr));
            }
        }

        .start-screen-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .start-tile-editor {
            display: none;
            width: 100%;
            max-width: none;
            margin: 0 0 24px;
            padding: 18px;
            background: var(--surface);
            border-left: 3px solid var(--accent);
            animation: slideInRight .25s var(--metro-easing);
        }
        .start-tile-editor.open { display: block; }
        .start-tile-editor-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
        }
        .start-tile-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
        .start-tile-editor-title { font-size: 1.4rem; color: var(--text-main); }
        .start-tile-editor-sub { color: var(--text-dim); font-size: .85rem; }
        .start-tile-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 8px;
        }
        .start-tile-option {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            padding: 12px;
            border: 2px solid transparent;
            background: var(--surface-hover);
            color: var(--text-main);
            text-align: left;
            cursor: pointer;
            font: inherit;
        }
        .start-tile-option:hover,
        .start-tile-option.is-added {
            border-color: var(--accent);
        }
        .start-tile-option i { color: var(--accent); }
        .start-tile-size-select {
            margin-left: auto;
            min-width: 82px;
            padding: 4px 6px;
            background: var(--surface);
            color: var(--text-main);
            border: 1px solid var(--surface-hover);
            font: inherit;
            text-transform: lowercase;
        }

        .start-tile-edit-help {
            color: var(--text-dim);
            font-size: .85rem;
            opacity: 0;
            transition: opacity .2s var(--metro-easing);
        }

        .start-screen-grid.reordering + .start-tile-edit-help,
        .start-screen-toolbar:has(+ .start-screen-grid.reordering) .start-tile-edit-help {
            opacity: 1;
        }

        .metro-tile-start {
            background-color: var(--accent);
            color: var(--accent-ink);
            position: relative;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 12px;
            perspective: 1000px;
            transition: transform 0.1s var(--metro-easing);
            border: none;
            border-radius: 0;
        }

        .metro-tile-start.live-start-tile { padding: 0; }
        .live-tile-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.7s var(--metro-easing);
        }
        .live-start-tile.live-flipped .live-tile-inner { transform: rotateY(180deg); }
        .live-tile-front,
        .live-tile-back {
            position: absolute;
            inset: 0;
            overflow: hidden;
            backface-visibility: hidden;
        }
        .live-tile-front {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 12px;
        }
        .live-tile-back {
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 18px;
            color: #fff;
            background: #18202b;
            text-align: left;
        }
        .live-tile-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.66;
        }
        .live-tile-back::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.12) 85%);
            pointer-events: none;
        }
        .live-tile-copy { position: relative; z-index: 1; }
        .live-tile-heading {
            font-size: clamp(1rem, 2vw, 1.35rem);
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .live-tile-detail {
            color: rgba(255,255,255,.78);
            font-size: .9rem;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        #anime-hover-wallpaper {
            position: fixed;
            inset: 0;
            z-index: 1;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1.2s ease;
        }
        #anime-hover-wallpaper.is-active { opacity: 1; }
        #anime-hover-wallpaper img {
            position: absolute;
            left: -5%;
            top: -5%;
            width: 110%;
            height: 110%;
            object-fit: cover;
            transform: scale(1.04);
            animation: anime-banner-glide 42s ease-in-out infinite alternate;
            will-change: transform;
        }
        #anime-hover-wallpaper::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.28) 55%, rgba(0,0,0,.55));
        }
        @keyframes anime-banner-glide {
            from { transform: translate3d(-2.5%, 0, 0) scale(1.04); }
            to { transform: translate3d(2.5%, 0, 0) scale(1.04); }
        }
        @media (prefers-reduced-motion: reduce) {
            #anime-hover-wallpaper img { animation: none; transform: scale(1.04); }
            #anime-hover-wallpaper { transition: none; }
            .live-tile-inner { transition: none; }
        }

        .metro-tile-start:active {
            transform: scale(0.95);
        }

        .metro-tile-start[draggable="true"] {
            cursor: grab;
        }

        .metro-tile-start.is-dragging {
            opacity: 0.45;
            cursor: grabbing;
        }

        .metro-tile-start.drag-over {
            outline: 3px dashed var(--accent);
            outline-offset: -3px;
        }

        .start-screen-grid.reordering .metro-tile-start:active {
            transform: none;
        }

        .metro-tile-start.small {
            grid-column: span 1;
            grid-row: span 1;
        }

        .metro-tile-start.medium {
            grid-column: span 2;
            grid-row: span 2;
        }

        .metro-tile-start.wide {
            grid-column: span 4;
            grid-row: span 2;
        }

        .metro-tile-start.large {
            grid-column: span 4;
            grid-row: span 4;
        }

        .start-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            opacity: 0.9;
        }

        .start-title {
            font-family: 'Segoe UI Light', 'Segoe UI', sans-serif;
            font-size: 1.1rem;
            font-weight: 300;
            z-index: 2;
            color: var(--accent-ink);
        }

        [data-icon-color="dark"] .xbox-nav i,
        [data-icon-color="dark"] .mobile-bottom-nav i,
        [data-icon-color="dark"] .start-icon,
        [data-icon-color="dark"] .nav-arrow-btn i,
        [data-icon-color="dark"] .home-btn i {
            color: #000;
        }

        [data-icon-color="white"] .xbox-nav i,
        [data-icon-color="white"] .mobile-bottom-nav i,
        [data-icon-color="white"] .start-icon,
        [data-icon-color="white"] .nav-arrow-btn i,
        [data-icon-color="white"] .home-btn i {
            color: #fff;
        }

        .metro-tile-start[hidden] {
            display: none;
        }

        .profile-tile img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.6;
        }

        .profile-tile .start-title {
            position: relative;
            z-index: 2;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
            font-weight: 400;
            color: #fff;
        }

        /* =========================================
           BUTTONS & INPUTS
           ========================================= */
        .metro-btn {
            background: var(--surface);
            color: var(--text-main);
            border: 2px solid transparent;
            padding: 12px 30px;
            font-size: 18px;
            font-weight: 400;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }

        .metro-btn:hover,
        .metro-btn:active {
            background: var(--accent);
            color: var(--accent-ink);
        }

        .metro-btn.primary {
            background: var(--accent);
            color: var(--accent-ink);
        }

        .metro-btn.primary:hover {
            filter: brightness(1.2);
        }

        .metro-input {
            background: var(--input-bg);
            border: 2px solid transparent;
            color: var(--text);
            padding: 12px 16px;
            font-size: 24px;
            font-family: inherit;
            font-weight: 300;
            width: 100%;
            max-width: 600px;
            margin-bottom: 20px;
            outline: none;
            transition: all 0.2s;
        }

        .metro-input:focus {
            border-color: var(--accent);
        }

        .pivot-headers,
        .feed-tabs {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .pivot-item,
        .feed-tab {
            font-size: 24px;
            font-weight: 300;
            color: var(--text-dim);
            cursor: pointer;
            transition: color 0.2s;
        }

        .pivot-item.active,
        .feed-tab.active {
            color: var(--text);
            font-weight: 400;
        }

        .media-type-switch {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .mts-btn {
            background: transparent;
            border: 2px solid var(--surface-hover);
            color: var(--text-dim);
            padding: 8px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }

        .mts-btn.active,
        .mts-btn:hover {
            background: var(--accent);
            color: var(--accent-ink);
            border-color: var(--accent);
        }

        .load-more-btn {
            background: transparent;
            border: 2px solid var(--surface-hover);
            color: var(--text-main);
            padding: 12px;
            display: block;
            width: 100%;
            text-align: center;
            font-family: inherit;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 10px;
            margin-bottom: 30px;
            transition: all 0.2s;
            text-transform: lowercase;
        }

        .load-more-spinner {
            display: block;
            width: 100%;
            text-align: center;
            padding: 8px 0 28px;
        }

        .load-more-spinner .spinner {
            width: 28px;
            height: 28px;
            margin: 0 auto;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.12);
            border-top-color: var(--accent);
            animation: spin 1s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .load-more-btn:hover,
        .load-more-btn:active {
            border-color: var(--accent);
            background: var(--surface);
        }

        /* =========================================
           TILES & 3D FLIPPING
           ========================================= */
        .tile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            grid-auto-rows: 180px;
            gap: 10px;
        }

        /* Beta library: compact list navigation with independently collapsible shelves. */
        .library-explorer { display:grid; grid-template-columns:minmax(190px,230px) minmax(0,1fr); gap:clamp(16px,2.2vw,28px); min-height:0; width:100%; max-width:100%; align-items:start; box-sizing:border-box; }
        .library-sidebar { display:flex; flex-direction:column; gap:18px; color:var(--text-dim); font-size:14px; }
        .library-sidebar input, .library-sidebar select { width:100%; min-width:0; background:var(--surface); color:var(--text-main); border:1px solid var(--surface-hover); border-radius:3px; padding:10px 12px; font:inherit; }
        .library-sidebar input:focus, .library-sidebar select:focus { outline:2px solid var(--accent); outline-offset:1px; }
        .library-sidebar-heading { margin:0 0 8px; color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
        .library-list-nav { display:flex; flex-direction:column; gap:3px; max-height:35vh; overflow:auto; }
        .library-list-nav button { width:100%; text-align:left; padding:8px 10px; color:var(--text-dim); background:transparent; border:0; border-radius:3px; cursor:pointer; font:inherit; text-transform:none; }
        .library-list-nav button:hover, .library-list-nav button.active { color:var(--text-main); background:var(--surface); }
        .library-list-nav .library-list-count { float:right; color:var(--text-dim); font-size:12px; }
        .library-list-manager-trigger { width:100%; margin-top:10px; text-align:left; }
        .library-main, #library-grid, .library-sidebar { min-width:0; max-width:100%; }
        #library-grid { overflow:hidden; }
        .library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 20px; }
        .library-toolbar .media-type-switch { margin:0; }
        .library-layout-toggle { display:flex; gap:4px; }
        .library-layout-toggle button { border:1px solid var(--surface-hover); background:var(--surface); color:var(--text-dim); padding:8px 10px; cursor:pointer; }
        .library-layout-toggle button.active { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
        .library-group { margin:0 0 30px; border-top:1px solid var(--surface-hover); }
        .library-group summary { list-style:none; display:flex; align-items:center; gap:10px; padding:14px 2px; cursor:pointer; color:var(--text-main); font-size:20px; }
        .library-group summary::-webkit-details-marker { display:none; }
        .library-group summary::before { content:'›'; color:var(--accent); font-size:24px; line-height:1; transition:transform .16s; }
        .library-group[open] summary::before { transform:rotate(90deg); }
        .library-group-count { color:var(--text-dim); font-size:13px; }
        .library-group .tile-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); grid-auto-rows:245px; gap:16px; }
        .library-group .load-more-btn { grid-column:1/-1; }
        .library-explorer[data-layout="compact"] .library-group .tile-grid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); grid-auto-rows:185px; gap:10px; }
        .library-explorer[data-layout="list"] .library-group .tile-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); grid-auto-rows:110px; gap:10px; }
        .library-explorer[data-layout="list"] .flip-tile-front img { width:100%; height:100%; object-fit:cover; opacity:.76; }
        .library-explorer[data-layout="list"] .flip-tile-front::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.2) 80%); }
        .library-explorer[data-layout="list"] .tile-label { top:50%; bottom:auto; left:84px; right:10px; transform:translateY(-50%); background:transparent; padding:0; font-size:13px; }
        .library-empty { color:var(--text-dim); padding:10px 0 20px; }
        .login-required-card { max-width:560px; margin:12px 0; padding:22px; border:1px solid var(--surface-hover); border-left:3px solid var(--accent); border-radius:4px; background:var(--surface); color:var(--text-main); }
        .login-required-card p { margin:8px 0 16px; color:var(--text-dim); line-height:1.5; }
        .library-manager-overlay { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
        .library-manager-overlay.open { display:flex; }
        .library-manager-dialog { width:min(560px,100%); max-height:85vh; overflow:auto; padding:22px; border:1px solid var(--surface-hover); border-radius:8px; background:var(--bg); color:var(--text-main); box-shadow:0 18px 70px rgba(0,0,0,.4); }
        .library-manager-head, .library-manager-row { display:flex; align-items:center; gap:10px; }
        .library-manager-head { justify-content:space-between; margin-bottom:16px; }
        .library-manager-list { display:grid; gap:8px; margin:16px 0; }
        .library-manager-row { min-width:0; padding:9px 10px; border:1px solid var(--surface-hover); border-radius:4px; background:var(--surface); }
        .library-manager-row-label { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .library-manager-row-kind { color:var(--text-dim); font-size:11px; text-transform:uppercase; }
        .library-manager-row button { min-width:34px; padding:5px; }
        .library-manager-add { display:flex; gap:8px; }
        .library-manager-add input { min-width:0; flex:1; padding:10px; color:var(--text-main); background:var(--surface); border:1px solid var(--surface-hover); border-radius:4px; font:inherit; }
        .library-manager-note { min-height:1.4em; color:var(--text-dim); font-size:13px; }
        .studio-detail-shell { max-width:1080px; margin:54px auto 0; padding:24px; }
        .studio-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); gap:24px; align-items:center; margin:0 0 28px; }
        .studio-detail-title { margin:0 0 8px; color:var(--accent); font-size:clamp(2.2rem,5vw,3.6rem); font-weight:300; line-height:1.05; }
        .studio-detail-meta { color:var(--text-dim); font-size:14px; }
        .studio-preview-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
        .studio-preview-gallery img { width:100%; height:120px; object-fit:cover; border-radius:4px; background:var(--surface); }
        .studio-work-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-auto-rows:245px; gap:14px; }
        .studio-work-card { position:relative; min-width:0; overflow:hidden; border-radius:4px; background:var(--surface); cursor:pointer; text-align:left; }
        .studio-work-card img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
        .studio-work-card:hover img { transform:scale(1.04); }
        .studio-work-caption { position:absolute; inset:auto 0 0; padding:34px 12px 12px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.9)); }
        .studio-work-title { display:block; font-size:14px; line-height:1.3; }
        .studio-work-subtitle { display:block; margin-top:5px; color:rgba(255,255,255,.78); font-size:11px; }
        @media(max-width:700px) { .studio-detail-hero { grid-template-columns:1fr; } .studio-preview-gallery img { height:90px; } .studio-work-grid { grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); grid-auto-rows:205px; } }
        @media (max-width:900px) {
            .library-explorer { grid-template-columns:1fr; gap:18px; }
            .library-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
            .library-sidebar-search, .library-sidebar-lists { grid-column:1/-1; }
            .library-list-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); max-height:180px; }
            .library-group .tile-grid { grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); grid-auto-rows:210px; gap:10px; }
        }
        @media (max-width:520px) { .library-sidebar { grid-template-columns:1fr; } .library-sidebar-search, .library-sidebar-lists { grid-column:auto; } }

        .tile-grid.zoom-in > *,
        .prog-list.zoom-in > *,
        .char-grid.zoom-in > *,
        .anime-grid-mini.zoom-in > * {
            animation: tileZoomIn 0.3s var(--metro-easing) both;
        }

        @keyframes tileZoomIn {
            from {
                transform: scale(1.15);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .tile {
            background: transparent;
            perspective: 1000px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.2s, transform 0.1s;
        }

        .tile:hover {
            border-color: var(--text-main);
        }

        .tile:active {
            transform: scale(0.92);
        }

        .tile-label {
            position: absolute;
            bottom: 8px;
            left: 10px;
            right: 10px;
            font-size: 11px;
            font-weight: 400;
            z-index: 2;
            line-height: 1.2;
            color: #fff;
            background: rgba(0, 0, 0, 0.8);
            padding: 4px;
        }

        .tile-badge,
        .tile-score {
            position: absolute;
            font-size: 12px;
            font-weight: 400;
            z-index: 2;
            padding: 2px 6px;
            color: #fff;
        }

        .tile-badge {
            top: 8px;
            right: 8px;
            background: var(--accent);
            color: var(--accent-ink);
        }

        .tile-score {
            top: 8px;
            left: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: var(--accent);
        }

        .score-high {
            color: var(--accent-green) !important;
        }

        .score-mid {
            color: var(--accent-yellow) !important;
        }

        .score-low {
            color: var(--accent-red) !important;
        }

        .flip-tile-inner {
            width: 100%;
            height: 100%;
            transition: transform 0.6s var(--metro-easing);
            transform-style: preserve-3d;
            position: relative;
        }

        .tile:hover .flip-tile-inner,
        .tile.flipped .flip-tile-inner {
            transform: rotateY(180deg);
        }

        .flip-tile-front,
        .flip-tile-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            top: 0;
            left: 0;
            overflow: hidden;
            background: var(--surface);
        }

        .flip-tile-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .tile:hover .flip-tile-front img {
            opacity: 1;
        }

        .flip-tile-back {
            transform: rotateY(180deg);
            background: var(--accent);
            color: var(--accent-ink);
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .tile-back-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .tile-back-rating {
            font-size: 1.5rem;
            font-weight: 300;
        }

        /* Scrollbars */
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-track {
            background: color-mix(in srgb, var(--surface) 55%, transparent);
        }

        ::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%);
            border: 2px solid transparent;
            background-clip: padding-box;
            border-radius: 0;
        }

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

        body,
        .content-scroll,
        .metro-subview,
        .prog-list,
        .trending-row,
        .tile-grid,
        .airing-calendar {
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%) transparent;
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--surface) 38%) transparent;
        }

        /* Trending row */
        .trending-row {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
            margin-bottom: 40px;
            scroll-snap-type: x mandatory;
        }

        .trending-row::-webkit-scrollbar {
            display: none;
        }

        .trending-tile {
            scroll-snap-align: start;
            flex-shrink: 0;
            width: 130px;
            height: 180px;
            position: relative;
        }

        .trending-rank {
            position: absolute;
            top: 5px;
            left: 5px;
            font-size: 12px;
            font-weight: 400;
            color: var(--accent-ink);
            background: var(--accent);
            padding: 2px 6px;
            z-index: 5;
        }

        /* Wide info tiles */
        .wide-info-tile {
            background: var(--surface);
            padding: 15px;
            min-width: 280px;
            flex-shrink: 0;
            border-left: 4px solid var(--accent);
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .wide-info-tile:hover {
            background: var(--surface-hover);
        }

        .wide-info-title {
            font-size: 1.2rem;
            color: var(--text-main);
            font-weight: 300;
            margin-bottom: 5px;
        }

        .wide-info-sub {
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        .tag-bar-container {
            display: flex;
            height: 8px;
            background: var(--surface-hover);
            margin-top: 10px;
            overflow: hidden;
        }

        .tag-bar-segment {
            height: 100%;
        }

        /* =========================================
           INBOX (WP STYLE)
           ========================================= */
        .inbox-list {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        .inbox-item {
            display: flex;
            gap: 15px;
            align-items: center;
            cursor: pointer;
            padding: 12px 10px;
            transition: background 0.2s;
            border-bottom: 1px solid transparent;
        }

        .inbox-item:hover,
        .inbox-item:active {
            background: var(--surface-hover);
        }

        .inbox-avatar {
            width: 55px;
            height: 55px;
            background: var(--surface);
            flex-shrink: 0;
        }

        .inbox-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .inbox-content {
            flex-grow: 1;
            overflow: hidden;
        }

        .inbox-sender {
            font-size: 1.4rem;
            color: var(--text-main);
            margin-bottom: -2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 400;
        }

        .inbox-preview {
            font-size: 1rem;
            color: var(--text-dim);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .inbox-time {
            font-size: 0.9rem;
            color: var(--accent);
            padding-left: 10px;
            align-self: flex-start;
            margin-top: 5px;
        }

        /* =========================================
           ACTIVITY & COMMUNITY
           ========================================= */
        .prog-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 10px;
            max-width: 1000px;
        }

        .prog-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px;
            background: var(--surface);
            transition: background 0.1s, border-color 0.1s;
            border: 2px solid transparent;
        }

        .prog-item:hover,
        .prog-item:active {
            background: var(--surface-hover);
            border-color: var(--accent);
        }

        /* Timeline (GitHub-like) for user activity */
        #user-activity-list {
            display: block;
            width: 100%;
            max-width: none;
        }

        .timeline-item {
            display: flex;
            gap: 14px;
            padding: 12px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            align-items: flex-start;
        }

        .timeline-marker {
            width: 10px;
            min-width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent);
            margin-top: 8px;
            box-shadow: 0 0 0 4px rgba(27,161,226,0.06);
        }

        .timeline-content {
            flex: 1;
        }

        .timeline-header { color: var(--text-dim); font-size: 13px; margin-bottom:6px; }
        .timeline-title { color: var(--text); font-size: 16px; font-weight:300; cursor:pointer; }
        .timeline-body { color: var(--text-main); margin-top:8px; font-size:14px; }
        .timeline-actions { margin-top:10px; display:flex; gap:8px; }

        .prog-thumb,
        .prog-avatar {
            width: 50px;
            height: 70px;
            object-fit: cover;
            background: var(--surface-hover);
            flex-shrink: 0;
            cursor: pointer;
        }

        .prog-avatar {
            width: 45px;
            height: 45px;
        }

        .prog-info {
            flex: 1;
            min-width: 0;
        }

        .prog-user {
            font-size: 14px;
            color: var(--accent);
            font-weight: 400;
            margin-bottom: 2px;
            cursor: pointer;
            display: inline-block;
        }

        .prog-user:hover {
            text-decoration: underline;
        }

        .prog-status {
            font-size: 14px;
            color: var(--text-dim);
            line-height: 1.3;
        }

        .prog-status span {
            color: var(--text);
            font-weight: 400;
            cursor: pointer;
            transition: color 0.1s;
        }

        .prog-status span:hover {
            color: var(--accent);
        }

        .prog-time {
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 4px;
        }

        .reply-box {
            display: none;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
        }

        .reply-box.active {
            display: flex;
        }

        .reply-input {
            min-height: 70px;
            resize: vertical;
        }

        .metro-btn.small {
            font-size: 12px;
            padding: 6px 10px;
        }

        .progress-stepper {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .progress-display {
            min-width: 90px;
            text-align: center;
            padding: 10px 12px;
            background: var(--surface-hover);
            color: var(--text-main);
        }

        .search-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .filter-chip {
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            background: var(--surface);
            color: var(--text-dim);
            transition: all 0.15s;
            border: 2px solid transparent;
            font-family: inherit;
        }

        .filter-chip:hover,
        .filter-chip.active {
            background: var(--accent);
            color: var(--accent-ink);
            border-color: var(--accent);
        }

        /* =========================================
           DETAIL PANELS
           ========================================= */
        #login-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10%;
            transition: background-color 0.3s;
        }

        #detail-panel {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 5000;
            display: none;
            overflow-y: auto;
            padding: 60px 40px;
            transition: background-color 0.3s;
            animation: slideUp 0.3s var(--metro-easing);
        }

        #detail-panel.open {
            display: block;
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .detail-close {
            position: fixed;
            top: 20px;
            right: 40px;
            font-size: 40px;
            font-weight: 100;
            cursor: pointer;
            color: var(--text-dim);
            transition: color 0.2s;
            z-index: 5001;
        }

        .detail-close:hover {
            color: var(--accent);
        }

        .status-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            margin-top: 5px;
        }

        .status-btn {
            background: var(--surface);
            color: var(--text-main);
            border: 2px solid transparent;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.1s;
        }
        }

        .status-btn:hover {
            border-color: var(--accent);
        }

        .status-btn.active {
            background: var(--accent);
            color: var(--accent-ink);
        }

        .status-btn.full {
            grid-column: 1 / -1;
        }

        /* Metro hub for detail panel */
        .metro-hub-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .metro-hub {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-auto-rows: 150px;
            gap: 10px;
            transition: transform 0.3s var(--metro-easing);
            background: var(--surface-hover);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            padding: 20px;
        }

        .metro-subview {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--bg);
            /* Ensure subviews (video, editors) appear above other overlays */
            z-index: 10001;
            padding: 40px;
            transform: translateX(100%);
            transition: transform 0.3s var(--metro-easing);
            overflow-y: auto;
        }

        .metro-subview.active {
            transform: translateX(0);
            opacity: 1;
            display: block;
        }

        .metro-hub.hidden {
            transform: translateX(-100%);
            pointer-events: none;
        }

        .subview-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--surface);
        }

        .btn-back {
            background: var(--surface);
            border: 2px solid transparent;
            color: var(--text-main);
            width: 45px;
            height: 45px;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-back:hover {
            border-color: var(--accent);
            background: var(--accent);
            color: var(--accent-ink);
        }

        .btn-back-text {
            background: var(--bg);
            color: var(--text-dim);
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 10px 0;
            margin-bottom: 20px;
            transition: color 0.2s;
            font-family: inherit;
            position: sticky;
            top: 0;
            z-index: 100;
            display: block;
            width: 100%;
            text-align: left;
        }

        .btn-back-text:hover {
            color: var(--accent);
        }

        .subview-title {
            font-size: 40px;
            font-weight: 200;
            color: var(--accent);
        }

        .streaming-service-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:12px; margin:20px 0 28px; }
        .streaming-service-card { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; padding:16px; border:1px solid var(--surface-hover); border-left:3px solid var(--accent); background:var(--surface); color:var(--text-main); text-decoration:none; }
        .streaming-service-card:hover { border-color:var(--accent); background:var(--surface-hover); }
        .streaming-service-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .streaming-service-meta { color:var(--text-dim); font-size:12px; }
        .streaming-episode-list { display:grid; gap:8px; }
        .streaming-episode-card { display:flex; align-items:center; gap:12px; min-width:0; padding:8px; border:1px solid var(--surface-hover); background:var(--surface); color:var(--text-main); text-decoration:none; }
        .streaming-episode-card img { width:96px; height:54px; flex:0 0 auto; object-fit:cover; background:var(--surface-hover); }
        .streaming-episode-card:hover { border-color:var(--accent); }

        .metro-tile {
            background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%), var(--surface);
            position: relative;
            overflow: hidden;
            transition: transform 0.1s, box-shadow 0.1s;
        }
        .metro-tile:hover {
            transform: scale(0.98);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }

        .metro-tile:hover {
            transform: scale(0.96);
            outline: 2px solid rgba(255, 255, 255, 0.3);
            outline-offset: -2px;
        }

        .metro-tile:active {
            transform: scale(0.92);
        }

        .metro-tile.large {
            grid-column: span 2;
            grid-row: span 2;
        }

        .metro-tile.wide {
            grid-column: span 2;
            grid-row: span 1;
        }

        .metro-tile-title {
            font-size: 20px;
            font-weight: 400;
            z-index: 2;
            position: relative;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        }

        .metro-tile-subtitle {
            font-size: 13px;
            opacity: 0.8;
            z-index: 2;
            position: relative;
            margin-top: 5px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
            line-height: 1.4;
        }

        .tile-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }

        .tile-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
            z-index: 1;
        }

        .tile-label {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            z-index: 2;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 400;
            color: #fff;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.2s;
        }

        .metro-tile:hover .tile-label,
        .flip-tile:hover .tile-label { overflow:visible; }
        .tile-label.is-scrolling { width:max-content; right:auto; text-overflow:clip; animation:marquee 4s linear infinite alternate; }
        .tile.title-scroll-active:hover .flip-tile-inner { transform:none; }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% { transform:translateX(calc(0px - var(--marquee-distance, 20%))); }
        }

        /* Character / staff / review grids */
        .char-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 14px;
        }

        .char-card {
            display: grid;
            grid-template-columns: 100px 1fr;
            min-height: 110px;
            background: var(--surface);
            overflow: hidden;
            transition: transform 0.2s var(--metro-easing), border-color 0.2s;
            border: 2px solid transparent;
        }

        .char-card:hover {
            transform: translateY(-3px) scale(1.01);
            border-color: rgba(255, 255, 255, 0.12);
        }

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

        .char-info {
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }

        .char-name {
            font-size: 1rem;
            color: var(--text-main);
            font-weight: 500;
            margin-bottom: 4px;
        }

        .char-role {
            font-size: 0.85rem;
            color: var(--text-dim);
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        /* =========================================
           AIRING METRO REDESIGN
           ========================================= */
        .airing-toolbar {
            display: grid;
            grid-template-columns: 1fr 280px;
            gap: 20px;
            align-items: start;
            margin-bottom: 30px;
        }

        .airing-main-col {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .airing-calendar-panel {
            background: var(--surface);
            padding: 15px;
            border: 2px solid var(--surface-hover);
            max-width: 400px;
        }

        .airing-calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .airing-month-label {
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--text-main);
            text-transform: lowercase;
        }

        .airing-calendar {
            width: 100%;
            background: var(--bg);
            padding: 6px;
            display: grid;
            grid-template-columns: repeat(7, minmax(28px, 36px));
            gap: 3px;
            border: 2px solid var(--surface);
            justify-content: center;
        }

        .airing-calendar .day-cell {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--surface);
            color: var(--text-dim);
            cursor: pointer;
            transition: all 0.2s var(--metro-easing);
            font-weight: 300;
            font-size: 0.8rem;
        }

        .airing-calendar .day-cell:hover {
            background: var(--surface-hover);
            color: var(--text-main);
        }

        .airing-calendar .day-cell.selected {
            background: var(--accent);
            color: var(--accent-ink);
        }

        .airing-calendar .day-cell.today {
            border: 2px solid var(--accent);
            color: var(--text-main);
        }

        .airing-calendar .day-cell.weekday {
            color: var(--accent);
            font-weight: 400;
            cursor: default;
            background: transparent;
            font-size: 0.85rem;
        }

        .discover-month-grid.airing-calendar { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:8px; }
        .discover-month-grid .month-cell { min-height:50px; aspect-ratio:auto; border:0; border-radius:2px; font-family:inherit; font-size:14px; text-transform:lowercase; }
        .discover-month-grid .month-cell.selected.today { color:var(--accent-ink); border:2px solid var(--accent-ink); }
        .discover-month-year { max-width:150px; padding:5px 24px 5px 8px; border:0; outline:none; background:var(--surface); color:var(--text-main); text-align:center; text-transform:lowercase; cursor:pointer; }
        .discover-month-year:focus-visible { outline:2px solid var(--accent); }

        .airing-date-panel {
            background: var(--accent);
            color: var(--accent-ink);
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .airing-date-label {
            color: var(--accent-ink-muted);
            text-transform: lowercase;
            font-size: 0.85rem;
        }

        .airing-date-value {
            font-size: 2rem;
            font-weight: 100;
            line-height: 1;
            margin-bottom: 8px;
        }

        .airing-meta-badge {
            background: rgba(0, 0, 0, 0.82);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.16);
            padding: 6px 10px;
            font-size: 0.85rem;
            margin-bottom: 4px;
        }

        .airing-nav {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .airing-nav .metro-btn {
            background: var(--surface-hover);
            color: var(--text-main);
            border: none;
            flex: 1;
            padding: 8px 12px;
            font-size: 0.9rem;
        }

        .airing-list-wrapper {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 20px;
            align-items: start;
        }

        .airing-timeline {
            background: var(--surface);
            padding: 15px;
            border: 2px solid var(--surface-hover);
            max-height: 600px;
            overflow-y: auto;
        }

        .timeline-item {
            padding: 10px 0;
            border-bottom: 1px solid var(--surface-hover);
            display: flex;
            gap: 10px;
            align-items: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .timeline-item:hover {
            background: var(--surface-hover);
        }

        .airing-timeline-title {
            font-size: 1.2rem;
            font-weight: 300;
            color: var(--accent);
            margin-bottom: 15px;
            text-transform: lowercase;
        }

        .timeline-item {
            display: flex;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid var(--surface-hover);
            cursor: pointer;
            transition: background 0.15s;
        }

        .timeline-item:hover {
            background: var(--surface-hover);
        }

        .timeline-item:last-child {
            border-bottom: none;
        }

        .timeline-time {
            font-size: 0.85rem;
            font-weight: 300;
            color: var(--accent);
            min-width: 55px;
        }

        .timeline-dot {
            width: 8px;
            height: 8px;
            background: var(--accent);
            margin-top: 5px;
            flex-shrink: 0;
        }

        .timeline-info {
            flex: 1;
            min-width: 0;
        }

        .timeline-title {
            font-size: 0.9rem;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .timeline-ep {
            font-size: 0.8rem;
            color: var(--text-dim);
        }

        /* Airing List as Tiles */
        .airing-tile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 15px;
        }

        .airing-tile {
            background: var(--surface);
            position: relative;
            cursor: pointer;
            transition: transform 0.1s var(--metro-easing);
            aspect-ratio: 4/3;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 15px;
        }

        .airing-tile:active {
            transform: scale(0.95);
        }

        .airing-tile img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
            filter: brightness(.78) saturate(.88);
            z-index: 1;
            transition: opacity 0.3s, filter 0.3s, transform 0.3s;
        }

        .airing-tile::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.1) 72%);
        }

        .airing-tile:hover img {
            opacity: .88;
            filter: brightness(.68) saturate(.92);
            transform: scale(1.025);
        }

        .airing-tile-content {
            z-index: 3;
            position: relative;
            margin: 0 -15px -15px;
            padding: 10px 15px 13px;
            background: rgba(0,0,0,.9);
            border-left: 3px solid var(--accent);
            border-radius:0 3px 3px 0;
        }

        .airing-tile-time {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff !important;
            display: block;
            line-height:1.2;
            text-shadow:0 2px 5px rgba(0,0,0,.95);
        }

        .airing-tile-title {
            font-size: 1.1rem;
            color: #fff !important;
            font-weight: 400;
            line-height: 1.2;
        }

        .airing-tile-ep {
            font-size: 0.8rem;
            color: rgba(255,255,255,.94) !important;
        }

        .youtube-iframe-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            overflow: hidden;
        }

        .youtube-iframe-wrapper iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        #trailer-tile {
            min-height: 240px;
        }

        #trailer-tile .tile-bg {
            transition: transform 0.4s ease;
        }

        #trailer-tile:hover .tile-bg {
            transform: scale(1.04);
        }

        .grid-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
        }

        .panel {
            background: var(--surface);
            padding: 25px;
            border-left: 4px solid transparent;
            transition: all 0.3s;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .panel:hover {
            border-color: var(--accent);
        }

        .heatmap {
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            gap: 4px;
        }

        .heat-dot {
            width: 10px;
            height: 10px;
            background: var(--bg);
        }

        .heat-dot.active {
            background: var(--accent);
        }

        .anime-grid-mini {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
        }

        .anime-poster {
            width: 100%;
            aspect-ratio: 2/3;
            background: var(--surface);
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .anime-poster:hover {
            border-color: var(--accent);
        }

        /* Blur 18+ content */
        .blur-adult {
            filter: blur(8px);
            transition: filter 0.3s;
            pointer-events: auto;
        }

        .blur-adult.unblurred {
            filter: blur(0);
        }

        /* Review card */
        .review-card {
            background: var(--surface);
            padding: 20px;
            margin-bottom: 15px;
            border-left: 4px solid var(--accent);
        }

        .user-hero {
            display: grid;
            grid-template-columns: 140px minmax(0, 1fr);
            gap: 24px;
            align-items: end;
            margin-bottom: 26px;
        }

        .user-avatar-shell {
            width: 140px;
            height: 140px;
            background: var(--surface);
            overflow: hidden;
            border: 2px solid var(--surface-hover);
        }

        .user-avatar-shell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 20px;
            flex-wrap: wrap;
        }

        .user-quick-links {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .user-stat-strip {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 26px;
        }

        .user-stat-tile {
            min-height: 112px;
            background: var(--surface);
            padding: 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-top: 2px solid transparent;
        }

        .user-stat-tile.accent {
            background: var(--accent);
            color: var(--accent-ink);
        }

        .user-stat-value {
            font-size: 2.4rem;
            font-weight: 100;
            line-height: 0.9;
            color: var(--text-main);
        }

        .user-stat-tile.accent .user-stat-value,
        .user-stat-tile.accent .user-stat-label,
        .user-stat-tile.accent .user-stat-sub {
            color: var(--accent-ink);
        }

        .user-stat-label {
            font-size: 0.85rem;
            color: var(--text-dim);
            letter-spacing: 0.08em;
            text-transform: lowercase;
        }

        .user-stat-sub {
            font-size: 0.85rem;
            color: var(--accent);
        }

        .user-overview-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
            gap: 18px;
            align-items: start;
            margin-bottom: 26px;
        }

        .user-stack {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .user-section-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .user-section-title {
            font-size: 2rem;
            font-weight: 200;
            color: var(--text-main);
            line-height: 1;
        }

        .user-section-kicker {
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        .user-activity-heatmap {
            display: grid;
            grid-template-columns: repeat(18, minmax(0, 1fr));
            gap: 6px;
        }

        .heat-cell {
            aspect-ratio: 1;
            background: var(--bg);
            border: 1px solid var(--surface-hover);
        }

        .heat-cell.l1 { background: rgba(27, 161, 226, 0.28); }
        .heat-cell.l2 { background: rgba(27, 161, 226, 0.5); }
        .heat-cell.l3 { background: rgba(27, 161, 226, 0.72); }
        .heat-cell.l4 { background: var(--accent); }

        .user-mini-legend {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            color: var(--text-dim);
            font-size: 0.85rem;
        }

        .user-mini-legend-scale {
            display: flex;
            gap: 4px;
        }

        .user-mini-legend-scale span {
            width: 12px;
            height: 12px;
            background: var(--surface-hover);
        }

        .genre-overview-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .genre-overview-item {
            display: grid;
            grid-template-columns: 120px minmax(0, 1fr) 56px;
            gap: 12px;
            align-items: center;
        }

        .genre-overview-name {
            font-size: 1rem;
            color: var(--text-main);
        }

        .genre-overview-track {
            height: 12px;
            background: var(--bg);
            position: relative;
            overflow: hidden;
        }

        .genre-overview-fill {
            position: absolute;
            inset: 0 auto 0 0;
            background: var(--accent);
        }

        .genre-overview-count {
            text-align: right;
            color: var(--text-dim);
            font-size: 0.9rem;
        }

        .user-activity-feed {
            display: grid;
            gap: 10px;
        }

        .user-activity-card {
            display: grid;
            grid-template-columns: 54px minmax(0, 1fr);
            gap: 12px;
            background: var(--surface);
            padding: 12px;
            border-left: 2px solid transparent;
        }

        .user-activity-card:hover {
            border-color: var(--accent);
        }

        .user-activity-card img {
            width: 54px;
            height: 72px;
            object-fit: cover;
            background: var(--surface-hover);
        }

        .user-activity-line {
            font-size: 1rem;
            color: var(--text-main);
            line-height: 1.35;
        }

        .user-activity-time {
            margin-top: 8px;
            font-size: 0.85rem;
            color: var(--text-dim);
        }

        .user-favorites-band {
            display: grid;
            gap: 18px;
            margin-bottom: 32px;
        }

        .user-favorites-row {
            background: var(--surface);
            padding: 18px;
        }

        .favorite-strip-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
            gap: 10px;
        }

        .favorite-strip-tile {
            position: relative;
            aspect-ratio: 2 / 3;
            background: var(--bg);
            overflow: hidden;
            cursor: pointer;
        }

        .favorite-strip-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.92;
        }

        .favorite-strip-label {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 6px 8px;
            background: rgba(0, 0, 0, 0.84);
            color: #fff;
            font-size: 0.78rem;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-empty {
            color: var(--text-dim);
            font-size: 0.95rem;
        }

        /* =========================================
           MEDIA EDITOR OVERLAY
           ========================================= */
        #media-editor-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 6000;
            display: none;
            overflow-y: auto;
            padding: 60px 40px;
            transition: background-color 0.3s;
        }

        #media-editor-overlay.open {
            display: block;
        }

        .editor-close {
            position: fixed;
            top: 20px;
            right: 40px;
            font-size: 40px;
            font-weight: 100;
            cursor: pointer;
            color: var(--text-dim);
            transition: color 0.2s;
            z-index: 6001;
        }

        .editor-close:hover {
            color: var(--accent);
        }

        .editor-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .editor-header {
            display: flex;
            gap: 20px;
            align-items: flex-end;
            margin-bottom: 40px;
        }

        .editor-cover {
            width: 150px;
            height: 200px;
            object-fit: cover;
            border: 4px solid var(--surface-hover);
        }

        .editor-title {
            font-size: 3rem;
            font-weight: 100;
            color: var(--accent);
            line-height: 0.9;
            letter-spacing: -2px;
        }

        .editor-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }

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

        .form-label {
            font-size: 14px;
            color: var(--text-dim);
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .editor-input {
            background: var(--input-bg);
            border: 2px solid transparent;
            color: var(--text);
            padding: 12px 16px;
            font-size: 18px;
            font-family: inherit;
            outline: none;
            transition: all 0.2s;
        }

        .editor-input:focus {
            border-color: var(--accent);
        }

        .editor-select {
            background: var(--input-bg);
            border: 2px solid transparent;
            color: var(--text);
            padding: 12px 16px;
            font-size: 18px;
            font-family: inherit;
            outline: none;
            transition: all 0.2s;
        }

        .editor-select:focus {
            border-color: var(--accent);
        }

        .editor-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
        }

        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .wp-setting-item {
            cursor: pointer;
            transition: transform 0.1s;
            display: block;
            padding: 10px 0;
        }

        .wp-setting-item:active {
            transform: scale(0.98);
            background: var(--surface-hover);
        }

        .wp-setting-title {
            font-size: 2.2rem;
            font-weight: 300;
            line-height: 1.1;
            color: var(--text-main);
            margin-bottom: 2px;
            transition: color 0.2s;
        }

        .wp-setting-sub {
            font-size: 1rem;
            color: var(--accent);
            font-weight: 400;
        }

        .settings-subview {
            display: none;
            max-width: 800px;
            animation: slideInRight 0.3s var(--metro-easing);
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .settings-subview.active {
            display: block;
        }

        input[type="color"].color-swatch {
            width: 44px;
            height: 44px;
            padding: 0;
            outline: none;
            background: none;
            cursor: pointer;
            border: none;
        }

        /* Color Wheel */
        .color-wheel-wrap {
            position: relative;
            display: inline-block;
            margin: 10px 0;
        }

        .color-wheel-crosshair {
            position: absolute;
            width: 14px;
            height: 14px;
            border: 2px solid #fff;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .color-preview-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
        }

        .color-preview-box {
            width: 48px;
            height: 48px;
            border: 2px solid var(--surface-hover);
            cursor: pointer;
            transition: transform 0.1s;
        }

        .color-preview-box:hover {
            transform: scale(0.95);
        }

        .color-hex {
            font-size: 20px;
            font-weight: 300;
            color: var(--text-main);
            font-family: monospace;
        }

        select.metro-select {
            background-color: var(--surface);
            color: var(--text-main);
            border: 2px solid var(--text-dim);
            padding: 10px;
            font-size: 1.2rem;
            font-family: inherit;
            width: 100%;
            max-width: 400px;
            margin-top: 10px;
        }

        select.metro-select:focus {
            border-color: var(--accent);
            outline: none;
        }

        #advanced-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        #advanced-filters .metro-select {
            width: auto;
            min-width: 140px;
            max-width: 200px;
            margin: 0;
            padding: 8px 12px;
            font-size: 0.9rem;
        }

        /* Toggle switch - Metro style (no slider, flat on/off) */
        .switch {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .switch input {
            display: none;
        }

        .toggle-track {
            width: 40px;
            height: 22px;
            background: var(--surface);
            border: 2px solid var(--surface-hover);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, border-color 0.2s;
        }

        .toggle-track::after {
            content: "";
            width: 6px;
            height: 6px;
            background: var(--text-dim);
            transition: background 0.2s;
        }

        input:checked+.toggle-track {
            background: var(--accent);
            border-color: var(--accent);
        }

        input:checked+.toggle-track::after {
            background: #fff;
        }

        .switch:active .toggle-track {
            transform: scale(0.95);
        }

        .switch+.toggle-label {
            display: inline-block;
            margin-left: 12px;
            font-size: 0.95rem;
            color: var(--text-dim);
            vertical-align: middle;
        }

        /* Metro checkboxes */
        .metro-checkbox {
            appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--surface);
            border: 2px solid var(--surface-hover);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, border-color 0.2s;
        }

        .metro-checkbox::before {
            content: "";
            width: 10px;
            height: 10px;
            background: var(--accent);
            display: none;
        }

        .metro-checkbox:checked {
            background: var(--accent);
            border-color: var(--accent);
        }

        .metro-checkbox:checked::before {
            display: block;
        }

        .metro-checkbox:active {
            transform: scale(0.9);
        }

        .wallpaper-controls {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .wallpaper-button {
            min-width: 180px;
        }

        .wallpaper-preview {
            margin-top: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
            display: grid;
            grid-template-rows: 140px auto;
        }

        .wallpaper-preview-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-dim);
            font-size: 0.9rem;
            text-align: center;
            padding: 12px;
            min-height: 140px;
            background-size: cover;
            background-position: center;
        }

        .wallpaper-preview-inner.has-image {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.35);
        }

        .wallpaper-preview-label {
            padding: 12px;
            font-size: 0.95rem;
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.03);
        }

        /* =========================================
           MEDIA EDITOR OVERLAY
           ========================================= */
        #media-editor-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 6000;
            display: none;
            overflow-y: auto;
            padding: 60px 40px;
            transition: background-color 0.3s;
        }

        #media-editor-overlay.open {
            display: block;
        }

        .editor-close {
            position: fixed;
            top: 20px;
            right: 40px;
            font-size: 40px;
            font-weight: 100;
            cursor: pointer;
            color: var(--text-dim);
            transition: color 0.2s;
            z-index: 6001;
        }

        .editor-close:hover {
            color: var(--accent);
        }

        .editor-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .editor-header {
            display: flex;
            gap: 20px;
            align-items: flex-end;
            margin-bottom: 40px;
        }

        .editor-cover {
            width: 150px;
            height: 200px;
            object-fit: cover;
            border: 4px solid var(--surface-hover);
        }

        .editor-title {
            font-size: 3rem;
            font-weight: 100;
            color: var(--accent);
            line-height: 0.9;
            letter-spacing: -2px;
        }

        .editor-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }

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

        .form-label {
            font-size: 14px;
            color: var(--text-dim);
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .editor-input {
            background: var(--input-bg);
            border: 2px solid transparent;
            color: var(--text);
            padding: 12px 16px;
            font-size: 18px;
            font-family: inherit;
            outline: none;
            transition: all 0.2s;
        }

        .editor-input:focus {
            border-color: var(--accent);
        }

        .editor-select {
            background: var(--input-bg);
            border: 2px solid transparent;
            color: var(--text);
            padding: 12px 16px;
            font-size: 18px;
            font-family: inherit;
            outline: none;
            transition: all 0.2s;
        }

        .editor-select:focus {
            border-color: var(--accent);
        }

        .editor-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
        }

        /* Settings item block (gemini file 2 style) */
        .settings-item {
            padding: 10px 0;
        }

        .settings-item-header {
            font-size: 1.5rem;
            color: var(--text-main);
            font-weight: 300;
            margin-bottom: 5px;
        }

        .settings-item-sub {
            font-size: 1rem;
            color: var(--text-dim);
            margin-bottom: 10px;
        }

        /* Toast */
        #toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--accent);
            color: var(--accent-ink);
            padding: 15px 30px;
            font-size: 16px;
            z-index: 9000;
            opacity: 0;
            transition: all 0.3s;
            pointer-events: none;
        }

        #toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* TABLET */
        @media (min-width: 769px) and (max-width: 1024px) {
            .header-section {
                width: 95vw;
                flex: 0 0 95vw;
                padding: 190px 30px 90px 40px;
                margin-right: 5vw;
            }

            .metro-huge-title {
                font-size: clamp(4rem, 8vw, 6rem);
            }

            .zune-hero-bg {
                font-size: clamp(100px, 15vw, 160px);
                left: 40px;
            }

            .xbox-nav {
                top: 110px;
                left: 40px;
                gap: 20px;
            }

            .nav-item {
                font-size: 22px;
            }

            .nav-item.active {
                font-size: 40px;
            }

            .start-screen-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .tile-grid {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }
        }

        /* MOBILE BOTTOM NAVIGATION (Metro UI v4 Style) */
        .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--surface); border-top: 2px solid var(--glass-line); display: flex; justify-content: space-around; align-items: center; z-index: 999; padding: 0; }
        .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--text-dim); flex: 1; height: 100%; transition: color 0.15s; font-size: 10px; font-weight: 400; text-transform: lowercase; position: relative; }
        .mobile-nav-item i { font-size: 22px; transition: font-size 0.15s; }
        .mobile-nav-item.active { color: var(--accent); }
        .mobile-nav-item.active i { font-size: 24px; }
        .mobile-nav-item span { line-height: 1; }
        .mobile-nav-item:active { opacity: 0.6; }
        @media (min-width: 769px) {
            .mobile-bottom-nav { display: none !important; }
        }
        @media (max-width: 768px) {
            .panorama-container { padding-bottom: 56px; }
            .content-scroll {
                min-width: 0;
                max-width: 100%;
                overflow-x: hidden;
            }
            .header-section,
            .settings-item,
            .settings-subview,
            .settings-list,
            .user-activity-feed {
                min-width: 0;
                max-width: 100%;
            }
            .user-stat-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }
            .user-stat-tile {
                min-width: 0;
            }
        }
        
        /* MOBILE */
        @media (max-width: 768px) {
            .header-section {
                width: 100vw;
                flex: 0 0 100vw;
                padding: 160px 20px 70px 20px;
                margin-right: 0;
            }
            .header-section.library-section { padding:160px 20px 70px; }

            .metro-huge-title {
                font-size: clamp(3rem, 12vw, 5rem);
                margin-bottom: 20px;
                letter-spacing: -2px;
            }

            .zune-hero-bg {
                font-size: clamp(60px, 20vw, 100px);
                top: 10px;
                left: 20px;
                letter-spacing: -4px;
            }

            .xbox-nav {
                top: 90px;
                left: 20px;
                gap: 12px;
            }

            .nav-item {
                font-size: 18px;
            }

            .nav-item.active {
                font-size: 28px;
            }

            .content-scroll {
                padding-right: 0;
                padding-bottom: 120px;
            }

            .top-right-nav {
                top: 15px;
                right: 15px;
            }

            .nav-arrows {
                display: none;
            }

            #detail-panel {
                padding: 50px 15px;
            }

            .detail-close {
                top: 15px;
                right: 15px;
                font-size: 32px;
            }

            .start-screen-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: clamp(120px, calc((100vw - 48px) / 2), 220px);
                gap: 8px;
                width: 100%;
                min-width: 0;
            }
            .start-tile-editor { max-width: none; }

            .metro-tile-start.wide {
                grid-column: span 2;
                grid-row: span 1;
            }

            .metro-tile-start.medium {
                grid-column: span 1;
                grid-row: span 1;
            }

            .metro-tile-start.large {
                grid-column: span 2;
                grid-row: span 2;
            }

            .tile-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                grid-auto-rows: 100px;
                gap: 8px;
            }

            .grid-layout {
                grid-template-columns: 1fr;
            }

            .metro-hub {
                grid-template-columns: 1fr;
            }

            .metro-tile.large,
            .metro-tile.wide {
                grid-column: span 1;
                grid-row: span 1;
            }

            .char-grid {
                grid-template-columns: 1fr;
            }

            .prog-list {
                grid-template-columns: 1fr;
            }

            .trending-row {
                gap: 8px;
            }

            .trending-tile {
                width: 100px;
                height: 150px;
            }

            .xbox-nav {
                transform: scale(0.9);
                transform-origin: left center;
            }

            .airing-toolbar {
                grid-template-columns: 1fr;
            }

            .airing-list-wrapper {
                grid-template-columns: 1fr;
            }

            .airing-date-panel {
                order: -1;
            }

            .pivot-headers {
                overflow-x: auto;
            }

            .pivot-item {
                font-size: 18px;
            }

            .settings-list {
                gap: 0;
            }

            .wp-setting-title {
                font-size: 1.8rem;
            }

            .metro-input {
                font-size: 18px;
            }

            .metro-btn {
                padding: 10px 20px;
                font-size: 16px;
                max-width: 100%;
            }

            .anime-grid-mini {
                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            }
        }

        /* =========================================
           NEW FEATURE: TAG / GENRE MULTI-SELECT, CHARTS, BROWSES
           ========================================= */
        .multi-select-overlay {
            position: fixed; inset: 0; background: var(--bg); z-index: 8000;
            padding: 40px; overflow-y: auto; display: none;
        }
        .multi-select-overlay.open { display: block; }
        .multi-select-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 6px; margin: 20px 0;
        }
        .multi-select-chip {
            padding: 8px 12px; background: var(--surface); color: var(--text-dim);
            cursor: pointer; transition: all 0.15s; border: 2px solid transparent;
            font-family: inherit; font-size: 13px; text-align: left;
        }
        .multi-select-chip:hover { border-color: var(--accent); }
        .multi-select-chip.selected { background: var(--accent); color: var(--accent-ink); }
        .multi-select-category { font-size: 14px; color: var(--accent); font-weight: 400; margin: 16px 0 8px; }
        .range-slider-wrap { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
        .range-value { font-size: 14px; color: var(--accent); text-align: right; font-weight: 400; }
        /* Tag selector range slider - Metro flat style */
        .range-slider-wrap input[type="range"] {
            -webkit-appearance: none; appearance: none; outline: none; border: none;
            height: 20px; width: 100px; background: transparent; cursor: pointer; margin: 0; padding: 0;
        }
        .range-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
            height: 4px; background: var(--surface-hover); border: none;
        }
        .range-slider-wrap input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 14px; height: 14px;
            background: var(--accent); cursor: pointer; border: none;
            margin-top: -5px;
        }
        .range-slider-wrap input[type="range"]::-moz-range-track {
            height: 4px; background: var(--surface-hover); border: none;
        }
        .range-slider-wrap input[type="range"]::-moz-range-thumb {
            width: 14px; height: 14px; background: var(--accent); cursor: pointer; border: none;
        }
        .range-slider-wrap input[type="range"]::-ms-track {
            height: 4px; background: transparent; border-color: transparent; color: transparent;
        }
        .range-slider-wrap input[type="range"]::-ms-thumb {
            width: 14px; height: 14px; background: var(--accent); cursor: pointer; border: none;
        }
        /* Search filter row improvements */
        #filter-row-scores { border-bottom: 1px solid var(--glass-line); margin-bottom: 6px; }
        .metro-toggle-btn {
            width: 44px;
            height: 22px;
            background: var(--surface-hover);
            border: none;
            cursor: pointer;
            position: relative;
            transition: background 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .metro-toggle-btn.active {
            background: var(--accent);
        }
        .metro-toggle-btn::after {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--text-dim);
            transition: background 0.2s;
        }
        .metro-toggle-btn.active::after {
            background: #fff;
        }
        .metro-select-wrap { position: relative; display: inline-block; }
        .metro-select-btn {
            background: var(--surface);
            color: var(--text-main);
            border: 1px solid var(--surface-hover);
            padding: 6px 12px;
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 120px;
            transition: background 0.2s;
        }
        .metro-select-btn:hover { background: var(--surface-hover); }
        .metro-select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: var(--surface);
            border: 1px solid var(--surface-hover);
            border-top: none;
            z-index: 1000;
            display: none;
            max-height: 250px;
            overflow-y: auto;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .metro-select-dropdown.open { display: block; }
        .metro-select-opt {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-main);
            transition: background 0.1s;
        }
        .metro-select-opt:hover { background: var(--accent); color: var(--accent-ink); }

        /* =========================================
           FLUENT 1 (WINDOWS 11) DESIGN SYSTEM
           Authentic Fluent design overrides
           ========================================= */
        [data-ui="fluent"] {
            --fluent-radius-xs: 4px;
            --fluent-radius-sm: 6px;
            --fluent-radius-md: 8px;
            --fluent-radius-lg: 12px;
            --fluent-radius-xl: 16px;
            --fluent-radius-pill: 9999px;

            --fluent-acrylic-bg: rgba(28, 28, 34, 0.78);
            --fluent-acrylic-nav: rgba(18, 18, 22, 0.88);
            --fluent-acrylic-card: rgba(36, 36, 44, 0.74);
            --fluent-acrylic-modal: rgba(24, 24, 30, 0.94);

            --fluent-border: rgba(255, 255, 255, 0.09);
            --fluent-border-light: rgba(255, 255, 255, 0.16);
            --fluent-border-hover: rgba(255, 255, 255, 0.26);

            --fluent-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
            --fluent-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.36), 0 1px 4px rgba(0, 0, 0, 0.2);
            --fluent-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.26);
            --fluent-shadow-flyout: 0 20px 50px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.35);

            --fluent-font: 'Segoe UI Variable Display', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        /* 1. Global Typography & Atmosphere in Fluent Mode */
        [data-ui="fluent"] body,
        [data-ui="fluent"] html {
            font-family: var(--fluent-font) !important;
            letter-spacing: -0.01em;
        }
        [data-ui="fluent"] .metro-huge-title {
            font-family: var(--fluent-font) !important;
            font-weight: 600 !important;
            text-transform: none !important;
            letter-spacing: -0.03em !important;
        }
        [data-ui="fluent"] .nav-item,
        [data-ui="fluent"] .pivot-item,
        [data-ui="fluent"] .settings-item-header,
        [data-ui="fluent"] .settings-title,
        [data-ui="fluent"] .button,
        [data-ui="fluent"] .metro-btn,
        [data-ui="fluent"] .status-btn,
        [data-ui="fluent"] .mts-btn,
        [data-ui="fluent"] .toggle-label,
        [data-ui="fluent"] h1, [data-ui="fluent"] h2, [data-ui="fluent"] h3, [data-ui="fluent"] h4 {
            text-transform: none !important;
        }

        /* 2. Tiles, Cards, Grid Items */
        [data-ui="fluent"] .metro-tile-start,
        [data-ui="fluent"] .tile,
        [data-ui="fluent"] .metro-tile,
        [data-ui="fluent"] .wide-info-tile,
        [data-ui="fluent"] .user-stat-tile,
        [data-ui="fluent"] .airing-tile,
        [data-ui="fluent"] .browse-card,
        [data-ui="fluent"] .char-card,
        [data-ui="fluent"] .prog-item,
        [data-ui="fluent"] .trending-tile,
        [data-ui="fluent"] .inbox-item,
        [data-ui="fluent"] .media-card,
        [data-ui="fluent"] .calendar-day-cell {
            border-radius: var(--fluent-radius-md) !important;
            background: var(--fluent-acrylic-card) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid var(--fluent-border) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, background-color 0.2s !important;
        }

        [data-ui="fluent"] .metro-tile-start:hover,
        [data-ui="fluent"] .tile:hover,
        [data-ui="fluent"] .metro-tile:hover,
        [data-ui="fluent"] .wide-info-tile:hover,
        [data-ui="fluent"] .user-stat-tile:hover,
        [data-ui="fluent"] .airing-tile:hover,
        [data-ui="fluent"] .browse-card:hover,
        [data-ui="fluent"] .char-card:hover,
        [data-ui="fluent"] .prog-item:hover,
        [data-ui="fluent"] .trending-tile:hover,
        [data-ui="fluent"] .inbox-item:hover {
            transform: translateY(-3px) scale(1.01) !important;
            box-shadow: var(--fluent-shadow-md) !important;
            border-color: var(--fluent-border-hover) !important;
            background: rgba(48, 48, 58, 0.84) !important;
        }

        [data-ui="fluent"] .metro-tile-start:active,
        [data-ui="fluent"] .tile:active,
        [data-ui="fluent"] .metro-tile:active,
        [data-ui="fluent"] .browse-card:active {
            transform: scale(0.98) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
        }

        /* 3. Panels & Subviews */
        [data-ui="fluent"] .panel,
        [data-ui="fluent"] .settings-item,
        [data-ui="fluent"] .settings-subview,
        [data-ui="fluent"] .metro-panel,
        [data-ui="fluent"] .feed-item,
        [data-ui="fluent"] .reply-box,
        [data-ui="fluent"] .wallpaper-preview {
            border-radius: var(--fluent-radius-lg) !important;
            background: var(--fluent-acrylic-bg) !important;
            backdrop-filter: blur(24px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
            border: 1px solid var(--fluent-border) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
        }

        /* 4. Interactive Buttons */
        [data-ui="fluent"] .button,
        [data-ui="fluent"] button.button,
        [data-ui="fluent"] .metro-btn,
        [data-ui="fluent"] .status-btn,
        [data-ui="fluent"] .load-more-btn,
        [data-ui="fluent"] .mts-btn,
        [data-ui="fluent"] .btn-back,
        [data-ui="fluent"] .btn-back-text,
        [data-ui="fluent"] .wallpaper-button {
            border-radius: var(--fluent-radius-sm) !important;
            border: 1px solid var(--fluent-border) !important;
            background: rgba(255, 255, 255, 0.06) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
            font-weight: 500 !important;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        [data-ui="fluent"] .button:hover,
        [data-ui="fluent"] button.button:hover,
        [data-ui="fluent"] .metro-btn:hover,
        [data-ui="fluent"] .status-btn:hover,
        [data-ui="fluent"] .load-more-btn:hover,
        [data-ui="fluent"] .mts-btn:hover,
        [data-ui="fluent"] .btn-back:hover,
        [data-ui="fluent"] .btn-back-text:hover,
        [data-ui="fluent"] .wallpaper-button:hover {
            background: rgba(255, 255, 255, 0.12) !important;
            border-color: var(--fluent-border-hover) !important;
            transform: translateY(-1px) !important;
            box-shadow: var(--fluent-shadow-md) !important;
        }

        [data-ui="fluent"] .button:active,
        [data-ui="fluent"] button.button:active,
        [data-ui="fluent"] .metro-btn:active,
        [data-ui="fluent"] .status-btn:active,
        [data-ui="fluent"] .mts-btn:active {
            transform: scale(0.97) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
        }

        [data-ui="fluent"] .button.primary,
        [data-ui="fluent"] .metro-btn.primary,
        [data-ui="fluent"] .mts-btn.active {
            background: var(--accent) !important;
            color: var(--accent-ink) !important;
            border-color: rgba(255, 255, 255, 0.25) !important;
            box-shadow: 0 2px 10px rgba(var(--accent-rgb, 27, 161, 226), 0.45) !important;
        }
        [data-ui="fluent"] .button.primary:hover,
        [data-ui="fluent"] .metro-btn.primary:hover {
            filter: brightness(1.1);
            box-shadow: 0 4px 16px rgba(var(--accent-rgb, 27, 161, 226), 0.6) !important;
        }

        /* 5. Inputs, Selects, and Dropdowns */
        [data-ui="fluent"] input[type="text"],
        [data-ui="fluent"] input[type="search"],
        [data-ui="fluent"] input[type="password"],
        [data-ui="fluent"] input[type="number"],
        [data-ui="fluent"] textarea,
        [data-ui="fluent"] select,
        [data-ui="fluent"] .metro-input,
        [data-ui="fluent"] .metro-select,
        [data-ui="fluent"] .metro-select-btn {
            border-radius: var(--fluent-radius-sm) !important;
            background: rgba(24, 24, 28, 0.75) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid var(--fluent-border) !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
            padding: 8px 14px !important;
        }

        [data-ui="fluent"] input:focus,
        [data-ui="fluent"] textarea:focus,
        [data-ui="fluent"] select:focus,
        [data-ui="fluent"] .metro-input:focus,
        [data-ui="fluent"] .metro-select:focus {
            border-bottom: 2px solid var(--accent) !important;
            border-color: var(--fluent-border-hover) !important;
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 27, 161, 226), 0.25) !important;
            outline: none !important;
        }

        /* 6. Filter Chips & Badges */
        [data-ui="fluent"] .filter-chip,
        [data-ui="fluent"] .genre-chip,
        [data-ui="fluent"] .studio-chip,
        [data-ui="fluent"] .badge,
        [data-ui="fluent"] .status-chip {
            border-radius: var(--fluent-radius-pill) !important;
            background: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid var(--fluent-border) !important;
            padding: 6px 14px !important;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        [data-ui="fluent"] .filter-chip:hover,
        [data-ui="fluent"] .genre-chip:hover,
        [data-ui="fluent"] .studio-chip:hover {
            background: rgba(255, 255, 255, 0.14) !important;
            border-color: var(--fluent-border-hover) !important;
            transform: translateY(-1px) !important;
        }

        [data-ui="fluent"] .filter-chip.active,
        [data-ui="fluent"] .genre-chip.active,
        [data-ui="fluent"] .studio-chip.active {
            background: var(--accent) !important;
            color: var(--accent-ink) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 2px 8px rgba(var(--accent-rgb, 27, 161, 226), 0.4) !important;
        }

        /* 7. Fluent Toggle Buttons & Switches */
        [data-ui="fluent"] .metro-toggle-btn,
        [data-ui="fluent"] .toggle-track {
            border-radius: var(--fluent-radius-pill) !important;
            border: 1px solid var(--fluent-border) !important;
            background: rgba(255, 255, 255, 0.16) !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        [data-ui="fluent"] .metro-toggle-btn::after,
        [data-ui="fluent"] .toggle-track::after {
            border-radius: 50% !important;
            background: #ffffff !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        [data-ui="fluent"] .metro-toggle-btn.active,
        [data-ui="fluent"] input:checked + .toggle-track {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 2px 8px rgba(var(--accent-rgb, 27, 161, 226), 0.4) !important;
        }

        /* 8. Top Navigation & Nav Items */
        [data-ui="fluent"] #main-nav {
            background: var(--fluent-acrylic-nav) !important;
            backdrop-filter: blur(28px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
            border-bottom: 1px solid var(--fluent-border) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
        }

        [data-ui="fluent"] .nav-item {
            border-radius: var(--fluent-radius-sm) !important;
            padding: 8px 18px !important;
            margin: 0 2px !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
            font-size: 1.15rem !important;
        }

        [data-ui="fluent"] .nav-item:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
        }

        [data-ui="fluent"] .nav-item.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 -2px 0 var(--accent) !important;
        }

        [data-ui="fluent"] #top-right-nav {
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
        }

        /* 9. Section Navigation Arrows */
        [data-ui="fluent"] #main-arrows button,
        [data-ui="fluent"] .section-nav-arrow {
            border-radius: 50% !important;
            background: rgba(30, 30, 36, 0.8) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
            border: 1px solid var(--fluent-border) !important;
            box-shadow: var(--fluent-shadow-md) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        [data-ui="fluent"] #main-arrows button:hover,
        [data-ui="fluent"] .section-nav-arrow:hover {
            transform: scale(1.1) !important;
            background: rgba(45, 45, 54, 0.95) !important;
            border-color: var(--fluent-border-hover) !important;
            box-shadow: var(--fluent-shadow-lg) !important;
        }

        /* 10. Detail View & Flyouts & Modals */
        [data-ui="fluent"] #detail-panel,
        [data-ui="fluent"] .detail-panel,
        [data-ui="fluent"] #media-editor-overlay,
        [data-ui="fluent"] #bulk-edit-modal-content,
        [data-ui="fluent"] .dropdown-content,
        [data-ui="fluent"] .metro-select-dropdown,
        [data-ui="fluent"] #video-subview {
            border-radius: var(--fluent-radius-xl) !important;
            background: var(--fluent-acrylic-modal) !important;
            backdrop-filter: blur(36px) saturate(190%) !important;
            -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
            border: 1px solid var(--fluent-border-light) !important;
            box-shadow: var(--fluent-shadow-flyout) !important;
        }

        [data-ui="fluent"] .detail-close,
        [data-ui="fluent"] .editor-close {
            border-radius: 50% !important;
            background: rgba(255, 255, 255, 0.08) !important;
            width: 40px !important;
            height: 40px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.18s !important;
        }
        [data-ui="fluent"] .detail-close:hover,
        [data-ui="fluent"] .editor-close:hover {
            background: rgba(255, 255, 255, 0.18) !important;
            transform: rotate(90deg) !important;
        }

        /* 11. Posters & Media Images */
        [data-ui="fluent"] .anime-poster,
        [data-ui="fluent"] .poster-img,
        [data-ui="fluent"] .char-card img,
        [data-ui="fluent"] .tile img,
        [data-ui="fluent"] .detail-cover {
            border-radius: var(--fluent-radius-sm) !important;
            box-shadow: var(--fluent-shadow-sm) !important;
        }

        /* 12. Progress Bars */
        [data-ui="fluent"] .progress-bar,
        [data-ui="fluent"] .prog-bar-fill,
        [data-ui="fluent"] .volume-bar {
            border-radius: var(--fluent-radius-xs) !important;
        }

        /* 13. Mobile Bottom Navigation */
        [data-ui="fluent"] .mobile-bottom-nav {
            background: var(--fluent-acrylic-nav) !important;
            backdrop-filter: blur(28px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
            border-top: 1px solid var(--fluent-border) !important;
        }
        [data-ui="fluent"] .mobile-bottom-nav .button {
            border-radius: var(--fluent-radius-pill) !important;
        }

        /* 14. Smooth Fluent Scrollbars */
        [data-ui="fluent"] ::-webkit-scrollbar-thumb {
            border-radius: var(--fluent-radius-pill) !important;
            background: rgba(255, 255, 255, 0.22) !important;
            border: 2px solid transparent !important;
            background-clip: padding-box !important;
        }
        [data-ui="fluent"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.38) !important;
        }

        /* Keep Fluent mode coherent while leaving Metro mode untouched. */
        [data-ui="fluent"] body { background:#101319 !important; }
        [data-ui="fluent"] .header-section { padding-top:110px; padding-left:36px; padding-right:36px; }
        [data-ui="fluent"] .metro-huge-title { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1; margin-bottom:24px; }
        [data-ui="fluent"] .zune-hero-bg { top:8px; left:24px; width:calc(100vw - 48px); opacity:.48; font-size:clamp(70px,14vw,130px); }
        [data-ui="fluent"] .zune-hero-track { animation-duration:140s; }
        [data-ui="fluent"] .xbox-nav { top:0; left:0; right:0; width:100%; min-height:64px; padding:0 250px 0 24px; gap:4px; align-items:center; transform:none !important; transition:none; background:rgba(22,25,31,.94); border-bottom:1px solid var(--fluent-border); box-shadow:var(--fluent-shadow-sm); }
        [data-ui="fluent"] .xbox-nav .nav-item { padding:10px 14px !important; margin:0 !important; font-size:14px !important; font-weight:500; border-radius:6px !important; }
        [data-ui="fluent"] #top-right-nav { top:8px; right:20px; border:1px solid var(--fluent-border); border-radius:8px; background:rgba(30,34,42,.92); box-shadow:var(--fluent-shadow-sm); }
        [data-ui="fluent"] .metro-btn, [data-ui="fluent"] .mts-btn, [data-ui="fluent"] .metro-select-btn, [data-ui="fluent"] .library-sidebar input, [data-ui="fluent"] .library-sidebar select { border-radius:6px !important; font-size:14px; }
        [data-ui="fluent"] .metro-tile-start, [data-ui="fluent"] .tile, [data-ui="fluent"] .metro-tile, [data-ui="fluent"] .wide-info-tile, [data-ui="fluent"] .user-stat-tile, [data-ui="fluent"] .airing-tile, [data-ui="fluent"] .browse-card, [data-ui="fluent"] .char-card, [data-ui="fluent"] .prog-item, [data-ui="fluent"] .trending-tile, [data-ui="fluent"] .inbox-item, [data-ui="fluent"] .media-card, [data-ui="fluent"] .calendar-day-cell { background:rgba(34,38,46,.96) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
        [data-ui="fluent"] .metro-select-dropdown { border:1px solid var(--fluent-border-light) !important; border-radius:0 0 8px 8px !important; overflow:hidden; }
        [data-ui="fluent"] .metro-select-opt { padding:10px 12px; }
        [data-ui="fluent"] .metro-select-opt.selected, [data-ui="fluent"] .metro-select-opt:hover { background:var(--accent); color:var(--accent-ink); }
        [data-ui="fluent"] .library-group { border-color:var(--fluent-border); }
        [data-ui="fluent"] .library-group summary { font-size:18px; font-weight:600; }
        [data-ui="fluent"] .login-required-card, [data-ui="fluent"] .library-manager-dialog { border-radius:12px; box-shadow:var(--fluent-shadow-flyout); }
        @media (max-width:900px) { [data-ui="fluent"] .header-section { padding:96px 20px 90px; } [data-ui="fluent"] .xbox-nav { display:none !important; } }

        /* Light theme keeps Fluent surfaces light while retaining its dark navigation bar. */
        [data-theme="light"][data-ui="fluent"] {
            --fluent-acrylic-bg: rgba(255,255,255,.9);
            --fluent-acrylic-card: rgba(255,255,255,.94);
            --fluent-acrylic-modal: rgba(255,255,255,.98);
            --fluent-border: rgba(15,23,42,.12);
            --fluent-border-light: rgba(15,23,42,.18);
            --fluent-border-hover: rgba(15,23,42,.28);
            --fluent-shadow-sm: 0 2px 8px rgba(15,23,42,.08);
            --fluent-shadow-md: 0 6px 20px rgba(15,23,42,.12), 0 1px 4px rgba(15,23,42,.08);
            --fluent-shadow-lg: 0 12px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.1);
            --fluent-shadow-flyout: 0 20px 50px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.1);
        }
        [data-theme="light"][data-ui="fluent"] body { background:#f3f5f8 !important; }
        [data-theme="light"][data-ui="fluent"] .metro-tile-start { background:var(--accent) !important; color:var(--accent-ink) !important; }
        [data-theme="light"][data-ui="fluent"] .tile,
        [data-theme="light"][data-ui="fluent"] .metro-tile,
        [data-theme="light"][data-ui="fluent"] .wide-info-tile,
        [data-theme="light"][data-ui="fluent"] .user-stat-tile,
        [data-theme="light"][data-ui="fluent"] .browse-card,
        [data-theme="light"][data-ui="fluent"] .char-card,
        [data-theme="light"][data-ui="fluent"] .prog-item,
        [data-theme="light"][data-ui="fluent"] .inbox-item,
        [data-theme="light"][data-ui="fluent"] .media-card,
        [data-theme="light"][data-ui="fluent"] .calendar-day-cell {
            background:var(--fluent-acrylic-card) !important;
            color:var(--text-main) !important;
        }
        [data-theme="light"][data-ui="fluent"] input,
        [data-theme="light"][data-ui="fluent"] textarea,
        [data-theme="light"][data-ui="fluent"] select,
        [data-theme="light"][data-ui="fluent"] .metro-select-btn {
            background:#fff !important;
            color:var(--text-main) !important;
            border-color:var(--fluent-border) !important;
            border-bottom-color:var(--fluent-border-hover) !important;
        }
        [data-theme="light"][data-ui="fluent"] #main-arrows button,
        [data-theme="light"][data-ui="fluent"] .section-nav-arrow { color:#fff !important; }
        [data-theme="light"][data-ui="fluent"] .nav-item,
        [data-theme="light"][data-ui="fluent"] .mobile-nav-item { color:rgba(255,255,255,.78) !important; }
        [data-theme="light"][data-ui="fluent"] .nav-item.active,
        [data-theme="light"][data-ui="fluent"] .mobile-nav-item.active { color:#fff !important; }
        [data-theme="light"][data-ui="fluent"] .mobile-nav-item.active { box-shadow:inset 0 -2px 0 var(--accent) !important; }
        [data-theme="light"][data-ui="fluent"] .quick-search-container > i { color:#fff !important; }

        /* Browse page tiles */
        .browse-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px; margin-bottom: 30px;
        }
        .browse-card {
            background: var(--surface); padding: 20px; cursor: pointer;
            transition: background 0.15s, transform 0.1s; border-left: 4px solid var(--accent);
        }
        .browse-card:hover { background: var(--surface-hover); transform: scale(0.97); }
        .browse-card-title { font-size: 1.3rem; color: var(--text-main); font-weight: 300; }
        .browse-card-sub { font-size: 0.9rem; color: var(--text-dim); margin-top: 4px; }

        /* Charts */
        .chart-bar-wrap { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
        .chart-bar-label { min-width: 80px; font-size: 13px; color: var(--text-dim); }
        .chart-bar-track { flex: 1; height: 14px; background: var(--surface-hover); position: relative; }
        .chart-bar-fill { height: 100%; background: var(--accent); transition: width 0.4s var(--metro-easing); }
        .chart-bar-value { min-width: 40px; text-align: right; font-size: 13px; color: var(--accent); }

        /* Infinite scroll sentinel */
        .scroll-sentinel { height: 1px; width: 100%; }

        /* Compact list view */
        .compact-list-item {
            display: grid; grid-template-columns: 40px 1fr auto; gap: 10px;
            padding: 6px 8px; cursor: pointer; transition: background 0.1s; align-items: center;
        }
        .compact-list-item:hover { background: var(--surface-hover); }
        .compact-list-cover { width: 28px; height: 38px; object-fit: cover; }
        .compact-list-title { font-size: 14px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .compact-list-meta { font-size: 12px; color: var(--text-dim); text-align: right; }

        /* Offline banner */
        .offline-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
            background: var(--accent-yellow); color: #000; text-align: center;
            padding: 4px; font-size: 12px; font-weight: 400; display: none;
        }
        .offline-banner.show { display: block; }

        /* NSFW blur override controls */
        .nsfw-options { display: flex; gap: 10px; margin: 10px 0; }
        .nsfw-option { padding: 6px 14px; background: var(--surface); cursor: pointer; font-size: 13px; transition: background 0.1s; }
        .nsfw-option.active { background: var(--accent); color: var(--accent-ink); }

        /* Timeline chart */
        .timeline-chart { display: flex; gap: 2px; align-items: flex-end; height: 100px; margin: 20px 0; }
        .timeline-bar { flex: 1; background: var(--accent); min-height: 2px; transition: height 0.3s var(--metro-easing); position: relative; }
        .timeline-bar:hover { opacity: 0.7; }

        /* SMALL MOBILE */
        @media (max-width: 400px) {
            .header-section {
                padding: 140px 15px 60px 15px;
            }
            .header-section.library-section { padding:140px 15px 60px; }

            .metro-huge-title {
                font-size: 2.5rem;
            }

            .zune-hero-bg {
                font-size: 50px;
            }

            .start-screen-grid {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .metro-tile-start {
                min-height: 80px;
            }

            .tile-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* FINAL MOBILE CONTRACT
           Metro UI is mobile-first: one viewport-wide panel, then contained
           vertical content. Keep this block last so legacy breakpoints cannot
           restore desktop-sized children on small screens. */
        @media (max-width: 768px) {
            html,
            body {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .panorama-container {
                width: 100vw;
                max-width: 100vw;
                height: 100dvh;
                min-height: 0;
                padding-bottom: calc(58px + env(safe-area-inset-bottom));
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-snap-stop: always;
                scroll-padding-inline: 0;
                overscroll-behavior-x: contain;
            }

            .header-section,
            .header-section.library-section {
                width: 100vw !important;
                min-width: 0 !important;
                max-width: 100vw !important;
                flex: 0 0 100vw !important;
                height: 100%;
                min-height: 0;
                margin: 0 !important;
                padding: clamp(126px, 24vw, 160px) clamp(14px, 5vw, 24px)
                    calc(78px + env(safe-area-inset-bottom));
                overflow: hidden;
            }

            .content-scroll {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                min-height: 0;
                height: 100%;
                padding: 0 0 calc(82px + env(safe-area-inset-bottom));
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior-x: none;
            }

            .metro-huge-title {
                max-width: 100%;
                font-size: clamp(2.35rem, 13vw, 4.5rem);
                line-height: .9;
                letter-spacing: -2px;
                overflow-wrap: anywhere;
            }

            .zune-hero-bg {
                left: 14px;
                width: calc(100vw - 28px);
                max-width: calc(100vw - 28px);
                font-size: clamp(46px, 18vw, 96px);
                letter-spacing: -4px;
            }

            .xbox-nav {
                display: none !important;
            }

            .mobile-bottom-nav {
                height: calc(58px + env(safe-area-inset-bottom));
                padding: 0 2px env(safe-area-inset-bottom);
                padding-bottom: env(safe-area-inset-bottom);
            }

            .mobile-nav-item {
                min-width: 0;
                overflow: hidden;
                font-size: clamp(8px, 2.4vw, 10px);
            }

            .mobile-nav-item span {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .start-screen-grid,
            .tile-grid,
            .browse-grid,
            .char-grid,
            .prog-list,
            .trending-row,
            .anime-grid-mini {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            .start-screen-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: clamp(112px, 31vw, 190px);
                gap: clamp(6px, 2vw, 10px);
            }

            .start-screen-toolbar,
            .start-tile-editor-header {
                align-items: flex-start;
                flex-wrap: wrap;
            }

            .start-tile-editor {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            .start-tile-options {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .start-tile-option {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .user-hero,
            .user-overview-grid,
            .user-favorites-band {
                grid-template-columns: 1fr;
                width: 100%;
                min-width: 0;
            }

            .user-hero {
                grid-template-columns: 1fr;
                gap: 14px;
                align-items: start;
            }

            .user-avatar-shell {
                width: clamp(88px, 28vw, 128px);
                height: clamp(88px, 28vw, 128px);
            }

            .user-meta-row,
            .user-quick-links,
            .user-section-head {
                width: 100%;
                min-width: 0;
                align-items: flex-start;
            }

            .user-meta-row {
                flex-direction: column;
                gap: 12px;
            }

            .user-quick-links {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                margin-bottom: 8px;
            }

            .user-quick-links .metro-btn {
                width: 100%;
            }

            .user-stat-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }

            .user-stat-tile {
                min-width: 0;
                min-height: 92px;
                padding: 12px;
            }

            .user-stat-value {
                font-size: clamp(1.7rem, 8vw, 2.4rem);
            }

            .user-section-head {
                flex-wrap: wrap;
                gap: 6px;
            }

            .user-section-title {
                font-size: clamp(1.45rem, 7vw, 2rem);
            }

            .user-activity-heatmap {
                grid-template-columns: repeat(12, minmax(0, 1fr));
                gap: 3px;
            }

            .genre-overview-item {
                grid-template-columns: minmax(70px, .7fr) minmax(0, 1fr) 36px;
                gap: 7px;
            }

            .favorite-strip-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 6px;
            }

            .library-explorer {
                display: flex;
                flex-direction: column;
                width: 100%;
                min-width: 0;
                gap: 12px;
            }

            .library-sidebar {
                display: grid;
                grid-template-columns: 1fr;
                width: 100%;
                min-width: 0;
                max-height: none;
                gap: 10px;
            }

            .library-sidebar-search,
            .library-sidebar-lists {
                grid-column: auto;
            }

            .library-list-nav {
                max-height: 28vh;
            }

            .library-main,
            #library-grid {
                width: 100%;
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .library-toolbar {
                align-items: stretch;
                flex-direction: column;
                gap: 8px;
            }

            .library-toolbar .media-type-switch,
            .library-layout-toggle {
                width: 100%;
            }

            .library-layout-toggle button {
                flex: 1;
            }

            .library-group .tile-grid,
            .library-explorer[data-layout="compact"] .library-group .tile-grid,
            .library-explorer[data-layout="list"] .library-group .tile-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: clamp(170px, 54vw, 245px);
                gap: 8px;
            }

            .library-explorer[data-layout="list"] .library-group .tile-grid {
                grid-template-columns: 1fr;
                grid-auto-rows: 96px;
            }

            .search-filters,
            .pivot-headers {
                max-width: 100%;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 4px;
            }

            .search-filters .filter-chip,
            .pivot-headers .pivot-item {
                flex: 0 0 auto;
            }

            .browse-grid {
                grid-template-columns: 1fr;
            }

            .airing-toolbar,
            .airing-list-wrapper,
            .studio-detail-hero,
            .editor-form {
                grid-template-columns: 1fr;
            }

            .settings-list,
            .settings-subview,
            .settings-item,
            .settings-item > *,
            .metro-input,
            .metro-select,
            .color-preview-row,
            .wallpaper-controls {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }

            .settings-item {
                overflow-wrap: anywhere;
            }

            .color-wheel-wrap,
            #color-wheel-canvas {
                max-width: 100%;
            }

            .color-wheel-wrap {
                transform-origin: left top;
                transform: scale(min(1, calc((100vw - 28px) / 200)));
                margin-bottom: calc(-200px + min(200px, (100vw - 28px)));
            }

            .detail-panel-content,
            .metro-subview,
            .multi-select-overlay,
            .library-manager-dialog {
                max-width: 100vw;
                overflow-x: hidden;
            }

            .metro-btn,
            button,
            input,
            select,
            textarea {
                max-width: 100%;
            }
        }

        .xbox-nav .nav-item {
            color: var(--text-dim);
        }

        .xbox-nav .nav-item i,
        .mobile-bottom-nav .mobile-nav-item i {
            color: var(--text-dim);
            opacity: 1;
        }

        .xbox-nav .nav-item.active {
            color: var(--accent);
        }

        .xbox-nav .nav-item.active i,
        .mobile-bottom-nav .mobile-nav-item.active i {
            color: var(--accent);
            opacity: 1;
        }

        .mobile-bottom-nav .mobile-nav-item {
            color: var(--text-dim);
        }

        .mobile-bottom-nav .mobile-nav-item.active {
            color: var(--accent);
        }

        .nav-arrow-btn,
        .nav-arrow-btn i,
        .nav-arrow-btn:hover,
        .nav-arrow-btn:hover i,
        .home-btn,
        .home-btn i,
        .home-btn:hover,
        .home-btn:hover i {
            color: #808080 !important;
        }

        @media (max-width: 768px) {
            .xbox-nav {
                display: flex !important;
                top: 88px !important;
                left: 20px !important;
                right: 20px !important;
                max-width: calc(100vw - 40px);
                overflow-x: auto;
                overflow-y: hidden;
                gap: 14px;
                align-items: baseline;
                padding-bottom: 4px;
                scrollbar-width: none;
            }

            .xbox-nav::-webkit-scrollbar {
                display: none;
            }

            .xbox-nav .nav-item {
                flex: 0 0 auto;
            }
        }

        .start-screen-grid {
            grid-auto-flow: dense;
            align-content: start;
        }