/* Tema base - paleta neutra (slate/graphite) */
:root {
    --desktop-base: #d6e2ef;
    --primary: #2f6fb2;
    --primary-dark: #1f568f;
    --primary-light: #d8e7f8;
    --artist-header-start: #143a66;
    --artist-header-mid: #2f6fb2;
    --artist-header-end: #6ea5df;
    --artist-header-text: #f5faff;
    --like: #d93764;
    --like-hover: #b3274c;
    --window-bg: #f3f7fb;
    --window-header-bg: #e8eef5;
    --taskbar-bg: rgba(234, 242, 250, 0.9);
    --text-color: #132131;
    --text-light: #5b7189;
    --border-color: #c2d1e2;
    --shadow-color: rgba(18, 40, 66, 0.14);
    --button-bg: #e1e9f3;
    --button-hover-bg: #d1deed;
    --progress-bg: #d4deec;
    --progress-fill: var(--primary);
    --radioactive-glow: rgba(47, 111, 178, 0.24);
    --playing-bg: rgba(47, 111, 178, 0.12);
    --focus-ring: rgba(47, 111, 178, 0.3);
    --taskbar-brightness: 1;
    --artist-header-overlay: linear-gradient(to bottom, transparent 0%, rgba(8, 37, 67, 0.16) 100%);
    --track-blur-filter: blur(8px) brightness(1.35) saturate(0.7);
    --album-blur-filter: blur(14px) brightness(1.65) saturate(0.6);
    --album-blur-opacity: 0.16;
    --album-blur-hover-filter: blur(16px) brightness(1.75) saturate(0.56);
    --album-blur-hover-opacity: 0.2;
    --album-cover-surface: #dce7f3;
    --album-cover-border: #b8cadf;
    --album-cover-shadow: 0 3px 10px rgba(14, 40, 68, 0.16);
    --search-item-border: #c5d5e8;
    --modal-overlay: rgba(15, 23, 42, 0.52);
    --app-background: radial-gradient(circle at 18% 12%,
            color-mix(in srgb, var(--desktop-base) 70%, #ffffff 30%) 0%,
            color-mix(in srgb, var(--desktop-base) 88%, #eef5fb 12%) 42%,
            color-mix(in srgb, var(--desktop-base) 86%, #b7c9dc 14%) 100%);
    --desktop-overlay: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(232, 241, 250, 0.1) 100%);
    --reactive-nebula-a: rgba(56, 118, 180, 0.2);
    --reactive-nebula-b: rgba(88, 176, 208, 0.14);
    --reactive-orb-a: rgba(88, 150, 206, 0.24);
    --reactive-orb-b: rgba(78, 166, 155, 0.2);
    --reactive-grid-line: rgba(102, 141, 176, 0.1);
    --reactive-noise-opacity: 0.045;
    --reactive-particle: #5f8cb9;
    --reactive-particle-alt: #57a9b2;
    --reactive-link: rgba(95, 142, 186, 0.28);
    --reactive-glow: rgba(134, 188, 227, 0.24);
    --chromatic-hue: 0deg;
    --ui-font-family: 'Inter', 'Segoe UI', sans-serif;
    --ui-font-scale: 1;
    --ui-font-weight: 500;
    --ui-motion-multiplier: 1;
    --ui-glass-level: 0.7;
    --ui-shadow-level: 0.65;
    --ui-noise-level: 0.2;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --desktop-base: #0f1722;
    --primary: #86c7ff;
    --primary-dark: #4d9ee4;
    --primary-light: #b8dcff;
    --artist-header-start: #0b223a;
    --artist-header-mid: #1e4f80;
    --artist-header-end: #4d9ee4;
    --artist-header-text: #edf6ff;
    --like: #ff7f9e;
    --like-hover: #d84f75;
    --window-bg: #0f1722;
    --window-header-bg: #172132;
    --taskbar-bg: rgba(9, 14, 21, 0.88);
    --text-color: #e6f0fb;
    --text-light: #96afc9;
    --border-color: #273a52;
    --shadow-color: rgba(2, 8, 16, 0.62);
    --button-bg: rgba(134, 199, 255, 0.14);
    --button-hover-bg: rgba(134, 199, 255, 0.24);
    --progress-bg: #22354b;
    --radioactive-glow: rgba(134, 199, 255, 0.34);
    --playing-bg: rgba(134, 199, 255, 0.19);
    --focus-ring: rgba(134, 199, 255, 0.4);
    --taskbar-brightness: 0.88;
    --artist-header-overlay: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.24) 100%);
    --track-blur-filter: blur(8px) brightness(0.42);
    --album-blur-filter: blur(12px);
    --album-blur-opacity: 0.7;
    --album-blur-hover-filter: blur(16px);
    --album-blur-hover-opacity: 0.8;
    --album-cover-surface: #141e2d;
    --album-cover-border: rgba(134, 199, 255, 0.22);
    --album-cover-shadow: 0 6px 16px rgba(0, 0, 0, 0.52);
    --search-item-border: rgba(134, 199, 255, 0.2);
    --modal-overlay: rgba(2, 6, 23, 0.72);
    --app-background: radial-gradient(circle at 18% 12%,
            color-mix(in srgb, var(--desktop-base) 72%, #2a3f57 28%) 0%,
            color-mix(in srgb, var(--desktop-base) 92%, #111e2d 8%) 42%,
            color-mix(in srgb, var(--desktop-base) 88%, #050a11 12%) 100%);
    --desktop-overlay: linear-gradient(155deg, rgba(138, 196, 255, 0.08) 0%, rgba(138, 196, 255, 0.015) 100%);
    --reactive-nebula-a: rgba(72, 132, 196, 0.24);
    --reactive-nebula-b: rgba(74, 182, 158, 0.18);
    --reactive-orb-a: rgba(84, 156, 216, 0.3);
    --reactive-orb-b: rgba(68, 188, 162, 0.24);
    --reactive-grid-line: rgba(126, 170, 214, 0.14);
    --reactive-noise-opacity: 0.06;
    --reactive-particle: #8db6dc;
    --reactive-particle-alt: #78d5c2;
    --reactive-link: rgba(136, 186, 224, 0.34);
    --reactive-glow: rgba(142, 206, 238, 0.28);
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--ui-font-family, 'Inter', sans-serif);
    color: var(--text-color);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--app-background);
    touch-action: manipulation;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

#desktop-container {
    flex-grow: 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        var(--desktop-overlay),
        var(--desktop-base);
}

#desktop-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: calc(0.11 * var(--ui-noise-level, 0.2));
    background-image:
        radial-gradient(circle at 25% 22%, rgba(255, 255, 255, 0.16) 0.8px, transparent 1px),
        radial-gradient(circle at 78% 58%, rgba(255, 255, 255, 0.12) 0.8px, transparent 1px);
    background-size: 3px 3px, 4px 4px;
    mix-blend-mode: soft-light;
}

#settings-background-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.35s ease, filter 0.35s ease, background-image 0.35s ease;
    pointer-events: none;
}

#settings-background-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--settings-bg-dim, 0.22));
}

#settings-background-layer.is-visible {
    opacity: 1;
}

#reactive-background {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    filter: saturate(1.02) contrast(1.01);
    transition: opacity 0.26s ease;
}

#reactive-background.is-muted {
    opacity: var(--reactive-muted-opacity, 0.26);
}

#reactive-background::before {
    content: "";
    position: absolute;
    inset: -14%;
    background:
        radial-gradient(circle at 14% 8%, var(--reactive-nebula-a) 0%, transparent 42%),
        radial-gradient(circle at 86% 84%, var(--reactive-nebula-b) 0%, transparent 40%);
    filter: blur(4px);
    opacity: 0.16;
    z-index: 1;
}

#reactive-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

:root[data-theme="dark"] #reactive-background {
    filter: saturate(1.03) contrast(1.02);
}

:root[data-theme="dark"] #reactive-background::before {
    opacity: 0.2;
}

#desktop {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 4;
    padding: 20px;
    overflow: hidden;
    min-width: 1200px;
    min-height: 700px;
}

#taskbar {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: var(--taskbar-bg);
    backdrop-filter: blur(calc(4px + 12px * var(--ui-glass-level, 0.7))) brightness(var(--taskbar-brightness));
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

#start-button-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

#start-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--button-bg) 72%, transparent) 0%,
            color-mix(in srgb, var(--window-header-bg) 82%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#start-button i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

#start-button:hover,
#start-button.active {
    background-color: var(--button-hover-bg);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color) 58%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color) 65%, transparent);
}

#start-button.active i.fa-radiation {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent) inset;
    background: color-mix(in srgb, var(--primary) 22%, transparent);
}

#start-button:active {
    transform: translateY(1px);
}

#start-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 78%, #fff 22%);
    outline-offset: 2px;
}

#start-menu {
    position: absolute;
    bottom: 62px;
    left: 0;
    width: 300px;
    padding: 10px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--window-header-bg) 82%, transparent) 0%,
            color-mix(in srgb, var(--window-bg) 92%, transparent) 100%);
    backdrop-filter: blur(calc(8px + 10px * var(--ui-glass-level, 0.7)));
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-radius: 14px;
    box-shadow:
        0 20px 42px color-mix(in srgb, var(--shadow-color) 78%, transparent),
        0 1px 0 color-mix(in srgb, #ffffff 14%, transparent) inset;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 9999;
    overflow: hidden;
}

#start-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}

#start-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
}

.start-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
}

.start-menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.start-menu-brand i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    transition: transform 0.3s ease;
}

#start-menu.is-open .start-menu-brand i.fa-radiation {
    animation: start-radiation-spin 4.6s linear infinite reverse;
}

.start-menu-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.start-menu-brand-text strong {
    font-size: 13px;
    line-height: 1.1;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.start-menu-brand-text small {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-light);
}

.start-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    font: inherit;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.14s ease;
    position: relative;
}

.start-menu-item::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, var(--border-color) 46%, transparent);
    opacity: 0.6;
}

.start-menu-item i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--primary) 82%, var(--text-color) 18%);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    flex-shrink: 0;
}

.start-menu-item:hover {
    background-color: var(--button-hover-bg);
    border-color: color-mix(in srgb, var(--border-color) 74%, transparent);
    transform: translateX(3px);
}

.start-menu-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 72%, #fff 28%);
    outline-offset: -1px;
}

.start-menu-footer {
    margin-top: 8px;
    padding: 10px 8px 6px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    min-height: 38px;
    display: flex;
    align-items: center;
}

.start-menu-terminal {
    width: 100%;
    display: inline-flex;
    align-items: center;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #05080d 90%, transparent) 0%,
            color-mix(in srgb, #090f18 92%, transparent) 100%);
    color: color-mix(in srgb, var(--primary) 82%, #d6ffe4 18%);
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 35%, transparent);
}

.start-menu-terminal::after {
    content: "";
    width: 7px;
    height: 12px;
    margin-left: 6px;
    border-radius: 1px;
    background: currentColor;
    animation: start-menu-terminal-cursor 1s steps(1, end) infinite;
}

.start-menu-terminal.is-refreshing {
    filter: brightness(1.08) saturate(1.08);
}

@keyframes start-radiation-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes start-menu-terminal-cursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

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

    #start-menu,
    .start-menu-item,
    #start-button {
        transition: none;
    }

    #start-button.active i.fa-radiation,
    #start-menu.is-open .start-menu-brand i.fa-radiation,
    .start-menu-terminal::after {
        animation: none;
    }
}

#taskbar-icons {
    display: flex;
    height: 100%;
    gap: 5px;
    align-items: center;
}

.taskbar-icon {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.taskbar-icon:hover {
    background-color: var(--button-hover-bg);
}

.taskbar-icon.active {
    background-color: var(--button-bg);
    border-bottom-color: var(--primary);
}

.taskbar-icon i {
    font-size: 18px;
    color: var(--primary);
}

#clock {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    color: var(--text-color);
}

#time {
    font-size: 14px;
    font-weight: 500;
}

#theme-toggle {
    all: unset;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

#theme-toggle:hover {
    background: var(--button-hover-bg);
    color: var(--primary);
}

#theme-toggle:active {
    transform: translateY(1px);
}

#theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.window {
    position: absolute;
    display: none;
    flex-direction: column;
    overflow: hidden;
    min-width: 340px;
    min-height: 500px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 140px);
    resize: none;
    background-color: var(--window-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px calc(10px + 20px * var(--ui-shadow-level, 0.65)) var(--shadow-color);
    transition:
        box-shadow calc(0.2s * var(--ui-motion-multiplier, 1)) ease,
        transform calc(0.2s * var(--ui-motion-multiplier, 1)) ease;
    contain: content;
}

.window.minimized {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.window.active {
    box-shadow: 0 8px calc(16px + 28px * var(--ui-shadow-level, 0.65)) var(--shadow-color);
}

.window-header {
    height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--window-header-bg);
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.window-header:active {
    cursor: grabbing;
}

.window-controls {
    display: flex;
    gap: 5px;
}

.window-button {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-color);
    background-color: var(--button-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.window-button.minimize:hover {
    background-color: #ffc107;
    color: #000;
}

.window-button.close:hover {
    background-color: #dc3545;
    color: white;
}

.window-button:hover {
    color: var(--text-color);
}

.window-body {
    padding: 20px;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.player-artist-header {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-grow: 0;
    background: transparent;
}

.player-artist-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            var(--artist-header-start, var(--primary)) 0%,
            var(--artist-header-mid, var(--primary-dark)) 50%,
            var(--artist-header-end, var(--primary)) 100%);
    opacity: 0.9;
    z-index: 1;
}

.player-artist-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--artist-header-overlay);
    z-index: 2;
    pointer-events: none;
}

.player-artist-header .artist-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    z-index: 3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--artist-header-text, #ffffff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.artist-name.glitch {
    animation: cyber-glitch-fix 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2 !important;
    position: relative !important;
    display: inline-block !important;
    /* Garantir contraste durante o efeito glitch */
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.player-artist-header .scanline {
    display: none;
}

#player-window-instance,
.window[data-window-id="player-window"] {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    height: auto !important;
    resize: none !important;
    overflow: hidden !important;
}

#player-window-instance .window-body,
.window[data-window-id="player-window"] .window-body {
    padding: 16px;
    text-align: center;
    contain: content;
    min-height: 520px !important;
    max-height: calc(100vh - 170px) !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.player-main-view {
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;
}

.player-main-view.blur {
    filter: blur(2px);
    pointer-events: none;
}

.cover-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 16px;
    background-color: var(--progress-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow-color);
    cursor: pointer;
    transition:
        border-radius 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
        border-color 220ms ease,
        box-shadow 280ms ease;
    will-change: border-radius;
    position: relative;
}

.cover-container:hover {
    border-color: var(--primary);
}

.cover-container.vinyl-mode {
    border-radius: 50%;
    border: 3px solid var(--primary);
    box-shadow:
        0 0 16px var(--radioactive-glow),
        inset 0 0 16px rgba(0, 0, 0, 0.18);
}

.cover-container.vinyl-leave {
    border-radius: 12px;
}

.cover-container.vinyl-mode.vinyl-leave {
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 20px var(--shadow-color);
}

.cover {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: var(--cover-image, none);
    position: relative;
    transition:
        border-radius 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 260ms ease,
        opacity 220ms ease;
    transform: rotate(0deg);
    transform-origin: center center;
    will-change: transform, border-radius;
}

.cover-container.vinyl-mode .cover {
    border-radius: 50%;
    filter: saturate(0.96) contrast(1.04);
    animation: vinylSpinOn 9.4s linear infinite;
    animation-play-state: running;
}

.cover-container.vinyl-mode.vinyl-paused .cover {
    animation-play-state: paused;
}

.cover-container.vinyl-transitioning {
    pointer-events: none;
}

.cover-container.vinyl-mode.vinyl-leave .cover {
    border-radius: 12px;
    filter: saturate(1) contrast(1);
    animation: none !important;
    transition:
        border-radius 380ms cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 260ms ease,
        opacity 220ms ease;
}

.cover-container.vinyl-mode .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 0 22%, rgba(0, 0, 0, 0.07) 23% 100%),
        repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0.08) 1px 3.6px),
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.12), transparent 40%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 280ms ease;
}

.cover-container.vinyl-mode .cover::before,
.cover-container.vinyl-leave .cover::before {
    opacity: 0.58;
}

.cover-container.vinyl-mode.vinyl-leave .cover::before {
    opacity: 0.06;
}

.info {
    margin-bottom: 12px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 8px;
}

.title-container {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 8px;
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 26px !important;
    max-height: 26px !important;
    height: 26px !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    margin: 0 auto 8px !important;
}

.title-wrapper {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.title-normal {
    font-weight: 700;
    font-size: 22px;
    color: var(--text-color);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.title-marquee {
    font-weight: 700;
    font-size: 22px;
    color: var(--text-color);
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;
    animation: title-marquee-scroll 15s linear infinite;
    animation-play-state: running;
}

.title-marquee.paused {
    animation-play-state: paused;
}

.title-wrapper:hover .title-marquee {
    animation-play-state: paused;
}

.title-fade-left,
.title-fade-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 30px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.title-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--window-bg) 0%, transparent 100%);
}

.title-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--window-bg) 0%, transparent 100%);
}

.title-marquee:not(.paused)~.title-fade-left,
.title-marquee:not(.paused)~.title-fade-right {
    opacity: 1;
}

.progress-container {
    margin: 14px auto 0;
    width: min(100%, 292px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#player-window-instance .progress-container,
.window[data-window-id="player-window"] .progress-container {
    width: 260px !important;
    max-width: 260px !important;
    margin: 12px auto 0 !important;
}

.progress-eq-canvas {
    width: 100%;
    height: 16px;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.progress-eq-canvas.is-active {
    opacity: 0.88;
}

.progress-bar {
    position: relative;
    height: 6px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--progress-bg) 76%, var(--window-bg) 24%) 0%,
            color-mix(in srgb, var(--progress-bg) 88%, #0e1621 12%) 100%);
    border-radius: 9999px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--progress-bg) 64%, transparent 36%);
    transition: transform 160ms ease, box-shadow 160ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 1px rgba(0, 0, 0, 0.18);
}

.progress-bar:hover {
    transform: scaleY(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.progress-filled {
    width: 0%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--primary) 72%, #40dbc3 28%) 0%,
            color-mix(in srgb, var(--primary) 84%, #6ebdff 16%) 100%);
    transition: width 130ms linear;
    will-change: width;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 10px color-mix(in srgb, var(--primary) 32%, transparent);
}

.progress-bar.is-playing .progress-filled {
    animation: progress-breathe 2.2s ease-in-out infinite;
}

.time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 4px 0 8px 0;
    font-size: 12px;
    color: var(--text-light);
}

.volume-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto;
    max-width: 200px;
}

.volume-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 9999px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
}

.volume-btn:hover {
    background: var(--button-hover-bg);
    color: var(--primary);
}

.volume-slider {
    width: 100%;
    height: 4px;
    background: var(--progress-bg);
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    -webkit-appearance: none;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}

.btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-color);
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    box-shadow: 0 4px 6px var(--shadow-color);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.btn:hover:not(:disabled) {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-play {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary-dark);
}

.btn-play:hover:not(:disabled) {
    background: var(--primary-dark);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--radioactive-glow);
    border-color: var(--primary);
}

.stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--text-light);
}

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

.share-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.stat-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.stat-share-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--button-hover-bg);
    transform: translateY(-1px);
}

.stat-share-btn:active {
    transform: translateY(0);
}

.stat-share-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.heart {
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.heart.liked {
    color: var(--like) !important;
}

.heart:hover {
    transform: scale(1.2);
}

.shuffle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 16px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.shuffle:hover {
    transform: scale(1.2);
    background: var(--button-hover-bg);
    color: var(--primary);
}

.shuffle.active {
    color: var(--primary);
    background: var(--button-hover-bg);
}

.player-side-panels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
}

.side-panel {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: min(312px, 88vw);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--window-bg) 92%, var(--window-header-bg) 8%);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: 14px;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--shadow-color) 85%, transparent);
    overflow: hidden;
    pointer-events: auto;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.2s ease,
        visibility 0.2s step-end;
    opacity: 0;
    visibility: hidden;
    z-index: 22;
    contain: content;
    backdrop-filter: blur(8px);
}

.side-panel.left {
    left: 8px;
    transform: translateX(calc(-100% - 20px));
}

.side-panel.right {
    right: 8px;
    transform: translateX(calc(100% + 20px));
}

.side-panel.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.2s ease,
        visibility 0s;
}

.player-side-panels .side-panel-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--window-header-bg) 84%, var(--primary) 16%) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-color) 68%) !important;
    border-radius: 12px;
    box-shadow:
        0 12px 24px color-mix(in srgb, var(--shadow-color) 74%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
    font-size: 14px;
    color: var(--text-color) !important;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    backdrop-filter: blur(8px) saturate(1.06);
    transition:
        transform 0.2s ease,
        width 0.2s ease,
        height 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.22s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    z-index: 24;
}

.player-side-panels .side-panel-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
            color-mix(in srgb, #fff 16%, transparent) 0%,
            transparent 65%);
    opacity: 0.88;
    pointer-events: none;
}

.player-side-panels .side-panel-toggle i {
    position: relative;
    z-index: 1;
    transition: transform 0.16s ease, text-shadow 0.16s ease, opacity 0.16s ease;
}

.player-side-panels .side-panel-toggle:hover {
    background: color-mix(in srgb, var(--window-header-bg) 64%, var(--primary) 36%) !important;
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 56%, var(--border-color) 44%) !important;
    box-shadow:
        0 16px 28px color-mix(in srgb, var(--shadow-color) 80%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent),
        0 0 14px color-mix(in srgb, var(--radioactive-glow) 54%, transparent);
    transform: translateY(-50%) scale(1.04);
}

.player-side-panels .side-panel-toggle:hover i {
    transform: scale(1.08);
    text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent);
}

.player-side-panels .side-panel-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.player-side-panels .side-panel-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.player-side-panels .side-panel-toggle.left {
    left: 0;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.player-side-panels .side-panel-toggle.right {
    right: 0;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.player-side-panels .side-panel-toggle.open {
    color: var(--primary) !important;
    transform: translateY(-50%) scale(0.78);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
}

.player-side-panels .side-panel-toggle.minimized {
    width: 18px;
    height: 46px;
    opacity: 0.78;
}

.player-side-panels .side-panel-toggle.minimized i {
    transform: scale(0.78);
    opacity: 0.9;
}

.player-side-panels .side-panel-toggle.left.minimized {
    transform: translateY(-50%) translateX(-8px);
}

.player-side-panels .side-panel-toggle.right.minimized {
    transform: translateY(-50%) translateX(8px);
}

.player-side-panels .side-panel-toggle.left.minimized:hover {
    transform: translateY(-50%) translateX(-4px) scale(1.02);
}

.player-side-panels .side-panel-toggle.right.minimized:hover {
    transform: translateY(-50%) translateX(4px) scale(1.02);
}

.side-panel-header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--window-header-bg) 92%, var(--primary) 8%) 0%,
            color-mix(in srgb, var(--window-bg) 96%, transparent) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    flex-shrink: 0;
    min-height: 56px;
}

.side-panel-header.compact {
    padding: 10px 12px;
    min-height: 52px;
    gap: 8px;
}

.side-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    min-width: 0;
    flex: 1 1 auto;
}

.side-panel-title.compact {
    font-size: 14px;
    font-weight: 600;
}

.album-like-all-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border-color) 55%);
    background: color-mix(in srgb, var(--primary) 18%, var(--button-bg) 82%);
    color: color-mix(in srgb, var(--primary) 72%, var(--text-color) 28%);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
    flex-shrink: 0;
}

.album-like-all-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--primary) 28%, var(--button-hover-bg) 72%);
    color: var(--primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 25%, transparent);
}

.album-like-all-btn.dislike-mode {
    border-color: color-mix(in srgb, var(--like) 44%, var(--border-color) 56%);
    background: color-mix(in srgb, var(--like) 14%, var(--button-bg) 86%);
    color: color-mix(in srgb, var(--like) 78%, var(--text-color) 22%);
}

.album-like-all-btn.dislike-mode:hover {
    background: color-mix(in srgb, var(--like) 22%, var(--button-hover-bg) 78%);
    color: var(--like);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--like) 28%, transparent);
}

.album-like-all-btn:active {
    transform: translateY(0);
}

.album-like-all-btn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

.side-panel-title>span:first-child,
.side-panel-title .album-panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-track-count {
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: var(--primary);
    border-radius: 9999px;
    margin-left: 4px;
}

.side-panel-back-btn {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--button-bg) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 50%;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.side-panel-back-btn:hover {
    background: var(--button-hover-bg);
    color: var(--text-color);
}

.side-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--button-bg) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 50%;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.side-panel-close:hover {
    background: var(--button-hover-bg);
    color: var(--text-color);
}

.side-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 10px 12px;
    min-height: 0;
    scrollbar-gutter: stable;
}

.side-panel-content.compact-scroll {
    padding: 10px;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.side-panel-content.compact-scroll::-webkit-scrollbar {
    width: 6px;
}

.side-panel-content.compact-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.side-panel-content.compact-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-light) 55%, transparent);
    border-radius: 9999px;
}

.side-panel-footer {
    padding: 10px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--window-bg) 92%, transparent) 0%,
            color-mix(in srgb, var(--window-header-bg) 94%, transparent) 100%);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    flex-shrink: 0;
}

.footer-btn {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: white;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-btn:hover {
    background: var(--primary-dark);
    color: white;
    transform: translateY(-1px);
}

.footer-btn.back-btn {
    background: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.footer-btn.back-btn:hover {
    background: var(--button-hover-bg);
    color: var(--text-color);
}

.side-panel-tracks-compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 1px 0;
    width: 100%;
}

.side-panel-track-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    text-align: left;
    column-gap: 10px;
    row-gap: 3px;
    padding: 10px 10px 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--window-bg) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    position: relative;
    min-height: 62px;
    overflow: hidden;
}

.side-panel-track-compact:hover {
    background: color-mix(in srgb, var(--button-hover-bg) 70%, var(--window-bg) 30%);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color) 70%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-color) 40%, transparent);
}

.side-panel-track-compact.playing {
    background: var(--playing-bg);
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border-color) 48%);
    font-weight: 600;
}

.side-panel-track-compact.playing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}

.side-panel-track-compact>* {
    position: relative;
    z-index: 1;
}

.track-background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: var(--track-blur-filter);
    opacity: 0.2;
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.track-background-blur.active {
    opacity: 0.42;
}

.track-title-compact {
    grid-column: 1;
    grid-row: 1;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-color);
    text-align: left;
    line-height: 1.2;
    padding-right: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-panel-track-compact.playing .track-title-compact {
    color: var(--primary);
}

.track-artist-compact {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.85;
    text-align: left;
    padding-right: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-actions-compact {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-self: center;
}

.side-panel .track-action-compact {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-light) !important;
    background: color-mix(in srgb, var(--button-bg) 88%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.side-panel .track-action-compact:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--button-bg) 82%) !important;
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color) 64%) !important;
    transform: translateY(-1px);
}

.track-action-compact.play-btn:hover {
    background: color-mix(in srgb, var(--primary) 18%, var(--button-bg) 82%) !important;
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color) 64%) !important;
}

.track-action-compact.like-btn.liked {
    color: var(--like) !important;
}

.track-action-compact.like-btn.liked:hover {
    background: color-mix(in srgb, var(--like) 24%, var(--button-bg) 76%) !important;
    color: white !important;
    border-color: color-mix(in srgb, var(--like) 42%, var(--border-color) 58%) !important;
}

.track-action-compact:active {
    transform: scale(0.96);
}

.side-panel-artists-list,
.side-panel-albums-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.side-panel-artist-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 12px;
    background: color-mix(in srgb, var(--window-bg) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
    cursor: pointer;
    position: relative;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    width: 100%;
}

.side-panel-artist-item:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color) 70%);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

.artist-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

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

.artist-name:not(.player-artist-header .artist-name) {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-album-count {
    font-size: 11px;
    color: var(--text-light);
}

.side-panel-album-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 56%, transparent);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--window-bg) 84%, transparent);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    width: 100%;
}

.side-panel-album-item:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color) 70%);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

.album-background-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: var(--album-blur-filter);
    opacity: var(--album-blur-opacity);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.side-panel-album-item:hover .album-background-blur {
    filter: var(--album-blur-hover-filter);
    opacity: var(--album-blur-hover-opacity);
    transform: scale(1.15);
}

.album-cover-foreground {
    width: 56px;
    height: 56px;
    margin-right: 14px;
    flex-shrink: 0;
    background: var(--album-cover-surface);
    border: 1px solid var(--album-cover-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--album-cover-shadow);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.side-panel-album-item:hover .album-cover-foreground {
    transform: scale(1.08);
}

.album-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.album-cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 24px;
    z-index: 2;
}

.album-info {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.album-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-details {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.empty-panel-compact {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px 16px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--window-bg) 86%, transparent);
    color: var(--text-light);
    font-style: normal;
}

.empty-panel-compact p {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.empty-panel-compact small {
    font-size: 11px;
    opacity: 0.86;
}

.empty-panel-compact i {
    font-size: 22px;
    opacity: 0.54;
}

.radioativo-search-container {
    --search-bg-top: color-mix(in srgb, var(--window-header-bg) 82%, var(--primary) 18%);
    --search-bg-mid: color-mix(in srgb, var(--window-bg) 90%, transparent);
    --search-bg-bottom: color-mix(in srgb, var(--window-bg) 96%, transparent);
    --search-surface: color-mix(in srgb, var(--window-bg) 88%, var(--window-header-bg) 12%);
    --search-surface-border: color-mix(in srgb, var(--border-color) 70%, transparent);
    --search-surface-strong: color-mix(in srgb, var(--primary) 42%, var(--border-color) 58%);
    --search-item-bg: linear-gradient(145deg,
            color-mix(in srgb, var(--window-bg) 90%, transparent) 0%,
            color-mix(in srgb, var(--window-header-bg) 84%, transparent) 100%);
    --search-item-playing: linear-gradient(145deg,
            color-mix(in srgb, var(--playing-bg) 72%, var(--window-bg) 28%) 0%,
            color-mix(in srgb, var(--window-bg) 90%, transparent) 100%);
    --search-shadow-soft: 0 16px 34px color-mix(in srgb, var(--shadow-color) 54%, transparent);
    --search-shadow-card: 0 10px 20px color-mix(in srgb, var(--shadow-color) 28%, transparent);
    --search-gap: 10px;
    width: 100%;
    height: 100%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    overflow: hidden;
    background:
        radial-gradient(circle at 108% -4%, color-mix(in srgb, var(--radioactive-glow) 44%, transparent) 0%, transparent 40%),
        radial-gradient(circle at -16% 110%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 36%),
        linear-gradient(180deg, var(--search-bg-top) 0%, var(--search-bg-mid) 50%, var(--search-bg-bottom) 100%);
}

.radioativo-search-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(120deg,
            color-mix(in srgb, var(--primary) 5%, transparent) 0 6px,
            transparent 6px 18px);
    background-size: 36px 36px;
    opacity: 0.14;
    z-index: 0;
}

.radioativo-search-header {
    position: relative;
    z-index: 1;
    padding: 16px 16px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--window-header-bg) 94%, var(--primary) 6%) 0%,
            color-mix(in srgb, var(--window-bg) 96%, transparent) 100%);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
    display: grid;
    gap: var(--search-gap);
}

.radioativo-search-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-height: 32px;
    padding: 0 12px 0 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-color) 68%);
    background: color-mix(in srgb, var(--window-bg) 90%, transparent);
    font-size: 11px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.radioativo-search-title i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    font-size: 10px;
}

.radioativo-search-title::after {
    content: 'catalogo';
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.radioativo-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color) 76%);
    background: color-mix(in srgb, var(--window-bg) 92%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
        0 8px 18px color-mix(in srgb, var(--shadow-color) 36%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    overflow: hidden;
}

.radioativo-input-wrapper:focus-within {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--border-color) 38%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
        0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent),
        0 14px 26px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

.radioativo-input-wrapper.searching {
    border-color: color-mix(in srgb, var(--primary) 70%, var(--border-color) 30%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
        0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent),
        0 0 22px color-mix(in srgb, var(--radioactive-glow) 46%, transparent);
}

.radioativo-input-wrapper.searching .radioativo-input-icon i {
    animation: searchSpin 1s linear infinite;
}

.radioativo-input-icon {
    width: 46px;
    min-width: 46px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
}

.radioativo-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.radioativo-input::placeholder {
    color: color-mix(in srgb, var(--text-light) 84%, transparent);
    font-weight: 500;
}

.radioativo-clear-btn {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--window-header-bg) 92%, transparent);
    font-size: 11px;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.radioativo-clear-btn:hover {
    background: color-mix(in srgb, var(--button-hover-bg) 74%, var(--window-bg) 26%);
    color: var(--text-color);
    border-color: color-mix(in srgb, var(--primary) 46%, var(--border-color) 54%);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--shadow-color) 26%, transparent);
}

.radioativo-clear-btn:active {
    transform: scale(0.96);
}

.radioativo-results-container {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.radioativo-results-inner {
    height: 100%;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    align-content: start;
    gap: var(--search-gap);
    scrollbar-gutter: stable;
}

.radioativo-empty {
    min-height: min(100%, 340px);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 9px;
    padding: 26px 20px;
    text-align: center;
    color: var(--text-light);
    border: 1px dashed color-mix(in srgb, var(--search-surface-border) 80%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--search-surface) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.radioativo-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
}

.radioativo-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.radioativo-empty-subtitle {
    font-size: 12px;
    line-height: 1.5;
    max-width: 300px;
}

.radioativo-search-footer {
    position: relative;
    z-index: 1;
    min-height: 46px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-light);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    background: color-mix(in srgb, var(--window-header-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.radioativo-search-footer i {
    color: var(--primary);
    font-size: 12px;
}

.radioativo-stats-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-color) 72%);
    background: color-mix(in srgb, var(--window-bg) 90%, transparent);
    font-size: 10px;
    font-weight: 800;
    color: var(--text-color);
    text-transform: none;
    letter-spacing: 0.03em;
}

.radioativo-results-inner::-webkit-scrollbar {
    width: 9px;
}

.radioativo-results-inner::-webkit-scrollbar-track {
    background: transparent;
}

.radioativo-results-inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-light) 58%, transparent);
}

.radioativo-results-inner::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary) 38%, var(--text-light) 62%);
}

.radioativo-search-container .search-item-system {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    margin: 0;
    padding: 10px 11px;
    border-radius: 16px;
    background: var(--search-item-bg);
    border: 1px solid var(--search-surface-border);
    box-shadow: var(--search-shadow-card);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.radioativo-search-container .search-item-system::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 4px;
    background: transparent;
    transition: background 0.16s ease;
}

.radioativo-search-container .search-item-system::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            color-mix(in srgb, var(--primary) 10%, transparent) 0%,
            transparent 34%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.radioativo-search-container .search-item-system:hover {
    transform: translateY(-2px);
    border-color: var(--search-surface-strong);
    box-shadow: var(--search-shadow-soft);
}

.radioativo-search-container .search-item-system:hover::after {
    opacity: 0.7;
}

.radioativo-search-container .search-item-system.playing {
    border-color: color-mix(in srgb, var(--primary) 56%, var(--border-color) 44%);
    background: var(--search-item-playing);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent),
        0 12px 24px color-mix(in srgb, var(--shadow-color) 34%, transparent);
}

.radioativo-search-container .search-item-system.playing::before {
    background: var(--primary);
}

.search-item-cover {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 18px;
    position: relative;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow-color) 42%, transparent);
}

.search-item-cover i {
    z-index: 1;
}

.search-item-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.search-item-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.015em;
}

.search-item-artist,
.search-item-album {
    min-width: 0;
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.95;
}

.search-item-artist i,
.search-item-album i {
    width: 13px;
    text-align: center;
    font-size: 9px;
    opacity: 0.74;
}

.search-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 4px;
    opacity: 1;
    transform: none;
}

.radioativo-search-container .search-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    background: color-mix(in srgb, var(--window-header-bg) 94%, transparent) !important;
    color: var(--text-light) !important;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--shadow-color) 24%, transparent) !important;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.radioativo-search-container .search-action-btn i {
    pointer-events: none;
}

.radioativo-search-container .search-action-btn:hover {
    transform: translateY(-1px) scale(1.02);
    border-color: color-mix(in srgb, var(--primary) 46%, var(--border-color) 54%) !important;
    background: color-mix(in srgb, var(--primary) 16%, var(--button-bg) 84%) !important;
    color: var(--primary) !important;
    box-shadow: 0 7px 14px color-mix(in srgb, var(--shadow-color) 30%, transparent) !important;
}

.radioativo-search-container .search-action-btn.play-btn.active {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--border-color) 38%) !important;
    background: color-mix(in srgb, var(--primary) 24%, var(--button-bg) 76%) !important;
    color: var(--primary) !important;
}

.radioativo-search-container .search-action-btn.liked {
    color: var(--like) !important;
    border-color: color-mix(in srgb, var(--like) 40%, var(--border-color) 60%) !important;
    background: color-mix(in srgb, var(--like) 15%, var(--button-bg) 85%) !important;
}

.radioativo-search-container .search-action-btn.liked:hover {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--like) 58%, var(--border-color) 42%) !important;
    background: color-mix(in srgb, var(--like) 72%, var(--button-bg) 28%) !important;
}

.search-item-system.playing .search-item-title {
    color: var(--primary);
}

.radioativo-search-container .search-item-system.playing .search-item-artist,
.radioativo-search-container .search-item-system.playing .search-item-album {
    color: color-mix(in srgb, var(--text-color) 72%, var(--primary) 28%);
}

@keyframes searchSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .radioativo-search-header {
        padding: 12px 12px 10px;
    }

    .radioativo-results-inner {
        padding: 10px;
        gap: 8px;
    }

    .radioativo-search-footer {
        min-height: 42px;
        padding: 0 12px;
    }

    .radioativo-search-container .search-item-system {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        min-height: 70px;
        border-radius: 14px;
        padding: 9px;
        gap: 9px;
    }

    .search-item-cover {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 12px;
    }

    .search-item-title {
        font-size: 13px;
    }

    .search-item-artist,
    .search-item-album {
        font-size: 10px;
        gap: 5px;
    }

    .radioativo-search-container .search-action-btn {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }
}

#notification-area {
    --toast-fixed-width: 332px;
    position: fixed;
    bottom: max(62px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px));
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: var(--toast-fixed-width);
    max-width: calc(100vw - 20px);
    pointer-events: none;
}

.notification {
    position: relative;
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    background: linear-gradient(152deg,
            color-mix(in srgb, var(--window-bg) 94%, #ffffff 6%),
            color-mix(in srgb, var(--window-header-bg) 88%, #000000 12%));
    color: var(--text-color);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 66%, transparent);
    animation: notification-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.notification::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent) inset;
    opacity: 0.8;
}

.notification::after {
    display: none;
}

.notification-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    background: color-mix(in srgb, var(--button-bg) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 38%, transparent);
}

.notification-icon i {
    font-size: 13px;
    line-height: 1;
}

.notification-content {
    min-width: 0;
    overflow: hidden;
}

.notification-message {
    display: block;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.36;
    font-weight: 570;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification.notification-marquee .notification-message {
    display: inline-block;
    min-width: max-content;
    padding-right: 18px;
    overflow: visible;
    text-overflow: clip;
    animation: notification-marquee-scroll var(--toast-marquee-duration, 8s) linear infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .notification.notification-marquee .notification-message {
        display: block;
        min-width: 0;
        padding-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: none;
    }
}

.notification-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: var(--text-color);
    background: color-mix(in srgb, var(--button-bg) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    margin-left: auto;
}

.notification-count[hidden] {
    display: none !important;
}

.notification.has-count .notification-count {
    display: inline-flex;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 58%, transparent) inset;
}

.notification[data-group^="achievement:"] {
    border-color: color-mix(in srgb, #5bc7ff 54%, var(--border-color) 46%);
}

.notification.notification-rgb::before {
    box-shadow:
        0 0 0 1px color-mix(in srgb, #56beff 46%, transparent) inset,
        0 0 22px color-mix(in srgb, #8a78ff 22%, transparent);
    background: linear-gradient(135deg, rgba(49, 255, 205, 0.1), rgba(134, 120, 255, 0.1), rgba(255, 106, 193, 0.08));
    background-size: 200% 200%;
    animation: notification-rgb-shift 3s linear infinite;
}

.notification.notification-rgb {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--shadow-color) 64%, transparent);
}

.notification.notification-rgb .notification-icon {
    border-color: color-mix(in srgb, #5fc5ff 44%, transparent);
    box-shadow:
        0 2px 10px color-mix(in srgb, var(--shadow-color) 34%, transparent),
        0 0 14px color-mix(in srgb, #7a78ff 26%, transparent);
}

.notification.notification-bump {
    animation: notification-bump 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.notification.notification-rgb-flash {
    filter: brightness(1.1) saturate(1.2);
}

.notification.is-leaving {
    animation: notification-fade-out 0.22s ease forwards;
}

:root[data-theme="dark"] .notification {
    border-color: color-mix(in srgb, var(--border-color) 72%, rgba(150, 190, 255, 0.18) 28%);
    background: linear-gradient(156deg, color-mix(in srgb, var(--window-bg) 88%, #000000 12%), color-mix(in srgb, var(--window-header-bg) 92%, #000000 8%));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.44);
}

:root[data-theme="dark"] .notification-icon {
    background: color-mix(in srgb, var(--button-bg) 86%, #0a0f16 14%);
}

:root[data-theme="light"] .notification {
    border-color: color-mix(in srgb, var(--border-color) 72%, rgba(255, 255, 255, 0.42) 28%);
}

:root[data-toast-style="clean"] .notification {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    background: var(--window-bg);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--shadow-color) 46%, transparent);
}

:root[data-toast-style="clean"] .notification-icon {
    border-radius: 6px;
    box-shadow: none;
    border-color: color-mix(in srgb, var(--border-color) 84%, transparent);
    background: var(--button-bg);
}

:root[data-toast-style="clean"] .notification::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 42%, transparent) inset;
}

:root[data-toast-style="clean"] .notification-message {
    font-weight: 500;
}

:root[data-toast-style="clean"] .notification-count {
    background: var(--button-bg);
    border-color: var(--border-color);
    box-shadow: none;
}

:root[data-toast-style="matrix"] .notification {
    border-radius: 8px;
    border-color: color-mix(in srgb, #2ed573 58%, var(--border-color) 42%);
    background:
        linear-gradient(180deg, rgba(5, 17, 9, 0.96), rgba(3, 10, 6, 0.97)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
    color: #bfffd2;
    text-shadow: 0 0 5px rgba(68, 255, 136, 0.2);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(61, 216, 116, 0.18) inset;
}

:root[data-toast-style="matrix"] .notification::before {
    box-shadow: 0 0 0 1px rgba(75, 235, 133, 0.24) inset;
    background: rgba(53, 255, 145, 0.03);
}

:root[data-toast-style="matrix"] .notification-icon {
    border-radius: 6px;
    border-color: rgba(73, 225, 128, 0.58);
    background: rgba(9, 33, 16, 0.84);
    box-shadow: inset 0 0 0 1px rgba(92, 255, 150, 0.18);
}

:root[data-toast-style="matrix"] .notification-message,
:root[data-toast-style="matrix"] .notification-count {
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

:root[data-toast-style="matrix"] .notification-count {
    color: #b7ffc9;
    border-color: rgba(54, 224, 111, 0.52);
    background: rgba(9, 35, 17, 0.86);
    box-shadow: inset 0 0 0 1px rgba(86, 255, 141, 0.15);
}

:root[data-toast-style="matrix"] .notification.notification-rgb::before {
    background: linear-gradient(180deg, #5bffa8 0%, #1be96e 52%, #0cc954 100%);
}

:root[data-theme="light"][data-toast-style="matrix"] .notification {
    background:
        linear-gradient(180deg, rgba(9, 31, 17, 0.93), rgba(6, 22, 12, 0.95)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 3px);
}

:root[data-toast-style="frost"] .notification {
    border-radius: 12px;
    border-color: color-mix(in srgb, #9ad9ff 56%, var(--border-color) 44%);
    background:
        linear-gradient(160deg, rgba(220, 244, 255, 0.2), rgba(170, 214, 255, 0.08)),
        color-mix(in srgb, var(--window-bg) 80%, #e3f4ff 20%);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--shadow-color) 44%, transparent),
        0 0 0 1px color-mix(in srgb, #9ad9ff 32%, transparent) inset;
}

:root[data-toast-style="frost"] .notification::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, #b7e8ff 38%, transparent) inset;
    background: linear-gradient(180deg, rgba(176, 231, 255, 0.11), rgba(176, 231, 255, 0.03));
}

:root[data-toast-style="frost"] .notification-icon {
    border-color: color-mix(in srgb, #8dd3ff 46%, var(--border-color) 54%);
    background: color-mix(in srgb, #d4f2ff 36%, var(--button-bg) 64%);
}

:root[data-toast-style="sunset"] .notification {
    border-radius: 11px;
    border-color: color-mix(in srgb, #ff8e5a 56%, var(--border-color) 44%);
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 170, 96, 0.22), transparent 36%),
        linear-gradient(150deg, rgba(255, 126, 95, 0.22), rgba(255, 191, 73, 0.08)),
        color-mix(in srgb, var(--window-bg) 78%, #301510 22%);
    box-shadow: 0 12px 24px color-mix(in srgb, rgba(111, 39, 21, 0.45) 64%, transparent);
}

:root[data-toast-style="sunset"] .notification::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, #ff9f6e 34%, transparent) inset;
    background: linear-gradient(180deg, rgba(255, 170, 96, 0.11), rgba(255, 90, 61, 0.03));
}

:root[data-toast-style="sunset"] .notification-icon {
    border-color: color-mix(in srgb, #ff995d 52%, var(--border-color) 48%);
    background: color-mix(in srgb, #ffcc8f 30%, var(--button-bg) 70%);
}

:root[data-toast-style="mono"] .notification {
    border-radius: 8px;
    border-color: color-mix(in srgb, #9a9fa7 48%, var(--border-color) 52%);
    background:
        linear-gradient(180deg, rgba(18, 20, 24, 0.95), rgba(8, 10, 13, 0.96)),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
    color: #edf1f5;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

:root[data-toast-style="mono"] .notification::before {
    box-shadow: 0 0 0 1px rgba(214, 220, 229, 0.14) inset;
    background: rgba(214, 220, 229, 0.03);
}

:root[data-toast-style="mono"] .notification-icon {
    border-color: rgba(214, 220, 229, 0.24);
    background: rgba(27, 31, 38, 0.9);
}

:root[data-toast-style="mono"] .notification-message,
:root[data-toast-style="mono"] .notification-count {
    font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

@media (max-width: 720px) {
    #notification-area {
        left: auto;
        right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px));
        width: min(var(--toast-fixed-width), calc(100vw - 16px));
        bottom: max(66px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    }

    .notification {
        border-radius: 10px;
        padding: 9px 10px 9px 12px;
        gap: 7px;
    }

    .notification-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 13px;
    }

    .notification-message {
        font-size: 12px;
    }
}

.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-overlay);
    opacity: 0;
    visibility: hidden;
    z-index: 10002;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.confirm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    padding: 24px;
    max-width: 400px;
    width: 90%;
    background: var(--window-bg);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.confirm-modal-overlay.active .confirm-modal {
    transform: translateY(0);
}

.confirm-modal-header {
    margin-bottom: 20px;
}

.confirm-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.confirm-modal-title i {
    color: var(--like);
}

.confirm-modal-message {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.5;
}

.confirm-modal-body {
    margin-bottom: 24px;
}

.confirm-modal-track-info {
    padding: 12px;
    margin-bottom: 16px;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.confirm-modal-track-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 4px;
}

.confirm-modal-track-details {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    gap: 10px;
}

.confirm-modal-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px;
    background: var(--button-bg);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.confirm-modal-option:hover {
    background: var(--button-hover-bg);
}

.confirm-modal-checkbox {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

.confirm-modal-checkbox.checked {
    background: var(--primary);
    border-color: var(--primary);
}

.confirm-modal-checkbox.checked::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.confirm-modal-option-label {
    font-size: 13px;
    color: var(--text-color);
    flex-grow: 1;
}

.confirm-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.confirm-modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-modal-btn.cancel {
    background: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.confirm-modal-btn.cancel:hover {
    background: var(--button-hover-bg);
}

.confirm-modal-btn.confirm {
    background: var(--like);
    color: white;
}

.confirm-modal-btn.confirm:hover {
    background: #be123c;
    transform: translateY(-1px);
}

.brand-logo {
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cover-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.cover-error {
    opacity: 0.3;
    filter: grayscale(1);
}

.bg-loaded {
    opacity: 0.7;
    transition: opacity 0.5s ease;
}

.bg-error {
    opacity: 0.1;
    filter: grayscale(1);
}

@keyframes windowShake {
    0% {
        transform: translateX(0) translateY(0) scale(1);
    }

    20% {
        transform: translateX(-5px) translateY(-3px) scale(1.02);
    }

    40% {
        transform: translateX(5px) translateY(3px) scale(1.02);
    }

    60% {
        transform: translateX(-3px) translateY(-2px) scale(1.01);
    }

    80% {
        transform: translateX(3px) translateY(2px) scale(1.01);
    }

    100% {
        transform: translateX(0) translateY(0) scale(1);
    }
}

.window-locate {
    animation: windowShake 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) both;
}

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

    100% {
        transform: translateX(-100%);
    }
}

@keyframes vinylSpinOn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes notification-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

@keyframes notification-fade-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
}

@keyframes notification-bump {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1.018);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes notification-rgb-shift {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 100%;
    }
}

@keyframes notification-marquee-scroll {

    0%,
    14% {
        transform: translateX(0);
    }

    86%,
    100% {
        transform: translateX(calc(-1 * var(--toast-marquee-distance, 0px)));
    }
}

@keyframes loadingWave {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.search-item-system,
.side-panel-artist-item,
.side-panel-album-item {
    animation: fadeInUp 0.3s ease backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes chromatic-shift {
    0% {
        background-position: 0% 50%;
        filter: blur(15px) hue-rotate(0deg);
    }

    25% {
        background-position: 50% 100%;
        filter: blur(15px) hue-rotate(90deg);
    }

    50% {
        background-position: 100% 50%;
        filter: blur(15px) hue-rotate(180deg);
    }

    75% {
        background-position: 50% 0%;
        filter: blur(15px) hue-rotate(270deg);
    }

    100% {
        background-position: 0% 50%;
        filter: blur(15px) hue-rotate(360deg);
    }
}

@keyframes text-shimmer {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2),
            0 0 10px rgba(255, 255, 255, 0.1);
    }

    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
            0 0 15px rgba(255, 255, 255, 0.2),
            0 0 20px rgba(255, 255, 255, 0.1);
    }

    100% {
        background-position: 0% 50%;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2),
            0 0 10px rgba(255, 255, 255, 0.1);
    }
}

@keyframes cyber-glitch-fix {
    0% {
        transform: translate(0);
        text-shadow: none;
    }

    10% {
        transform: translate(-1px, 1px);
        text-shadow: 1px 0 var(--primary), -1px 0 var(--like);
    }

    20% {
        transform: translate(1px, -1px);
        text-shadow: -1px 0 var(--primary), 1px 0 var(--like);
    }

    30% {
        transform: translate(-1px, -1px);
        text-shadow: 1px 0 var(--primary), -1px 0 var(--like);
    }

    40% {
        transform: translate(1px, 1px);
        text-shadow: -1px 0 var(--primary), 1px 0 var(--like);
    }

    50% {
        transform: translate(-1px, 1px);
        text-shadow: 2px 0 var(--primary), -2px 0 var(--like);
    }

    60% {
        transform: translate(1px, -1px);
        text-shadow: -2px 0 var(--primary), 2px 0 var(--like);
    }

    70% {
        transform: translate(-1px, -1px);
        text-shadow: 2px 0 var(--primary), -2px 0 var(--like);
    }

    80% {
        transform: translate(1px, 1px);
        text-shadow: -2px 0 var(--primary), 2px 0 var(--like);
    }

    90% {
        transform: translate(0);
        text-shadow: none;
    }

    100% {
        transform: translate(0);
        text-shadow: none;
    }
}

@keyframes scanline {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(40px);
    }
}

@media (max-width: 768px) {
    #desktop-container {
        overflow: auto;
    }

    #desktop {
        min-width: auto;
        min-height: auto;
        padding: 10px;
    }

    .window {
        position: relative !important;
        top: 10px !important;
        left: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        resize: none !important;
        overflow: hidden !important;
    }

    #player-window-instance,
    .window[data-window-id="player-window"] {
        width: calc(100vw - 20px) !important;
        height: auto !important;
        resize: none;
    }

    .player-artist-header {
        height: 35px !important;
        padding: 0 10px !important;
    }

    .player-artist-header .artist-name {
        font-size: 13px !important;
    }

    .title-normal,
    .title-marquee {
        font-size: 18px;
    }

    .side-panel {
        width: min(280px, 88vw);
        top: 6px;
        bottom: 6px;
    }

    .player-side-panels .side-panel-toggle {
        width: 28px;
        height: 58px;
        font-size: 14px;
        border-radius: 10px;
    }

    .player-side-panels .side-panel-toggle.minimized {
        width: 16px;
        height: 38px;
    }

    .side-panel-track-compact {
        padding: 8px 8px 8px 10px;
        min-height: 56px;
        column-gap: 8px;
    }

    .track-title-compact {
        font-size: 12px;
    }

    .track-artist-compact {
        font-size: 10px;
    }

    .side-panel .track-action-compact {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .side-panel-artist-item,
    .side-panel-album-item {
        padding: 8px 10px;
        gap: 10px;
    }

    .artist-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .album-cover-foreground {
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }

    .confirm-modal {
        padding: 20px;
        width: 95%;
    }

    .confirm-modal-footer {
        flex-direction: column;
    }

    .confirm-modal-btn {
        width: 100%;
    }
}

.heart.liked,
.track-action-compact.like-btn.liked,
.search-action-btn.liked {
    color: var(--like) !important;
}

.heart.liked:hover,
.track-action-compact.like-btn.liked:hover,
.search-action-btn.liked:hover {
    color: var(--like-hover) !important;
}

.btn,
.btn-play,
.volume-btn,
.shuffle,
.window-button,
.side-panel-toggle,
.search-action-btn,
.track-action-compact {
    color: var(--text-color) !important;
    background: var(--button-bg) !important;
    border-color: var(--border-color) !important;
}

.btn-play {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary-dark) !important;
}

.btn:hover:not(:disabled),
.volume-btn:hover,
.shuffle:hover,
.side-panel-toggle:hover {
    background: var(--button-hover-bg) !important;
    color: var(--primary) !important;
}

@keyframes progress-breathe {

    0%,
    100% {
        filter: saturate(1) brightness(1);
    }

    50% {
        filter: saturate(1.06) brightness(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress-filled {
        transition: none;
        animation: none;
    }

    .progress-eq-canvas {
        transition: none;
    }

    .progress-bar {
        transition: none;
        transform: none !important;
    }

    .cover-container.vinyl-mode .cover,
    .cover-container.vinyl-mode.vinyl-leave .cover {
        animation: none !important;
        transform: rotate(0deg) !important;
    }

    .cover-container.vinyl-mode.vinyl-leave .cover::before {
        transition: none !important;
    }
}

.shuffle.active {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 22%, var(--button-bg) 78%) !important;
    border-color: color-mix(in srgb, var(--primary) 56%, var(--border-color) 44%) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
        0 6px 12px color-mix(in srgb, var(--primary) 20%, transparent);
}

.shuffle.active:hover {
    background: color-mix(in srgb, var(--primary) 30%, var(--button-hover-bg) 70%) !important;
}

.btn-play:hover:not(:disabled) {
    background: var(--primary-dark) !important;
    color: white !important;
}

/* Theme Studio App */
.theme-studio-window-body {
    padding: 0 !important;
    overflow: hidden !important;
}

.theme-studio-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--window-bg);
    color: var(--text-color);
}

.theme-studio-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--window-header-bg);
}

.theme-studio-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.theme-studio-subtitle {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.45;
}

.theme-studio-current {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.theme-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 64px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.theme-studio-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--window-header-bg) 84%, transparent);
}

.theme-studio-tab {
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-studio-tab:hover {
    background: var(--button-hover-bg);
}

.theme-studio-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary-dark) 78%, var(--primary) 22%));
    border-color: color-mix(in srgb, var(--primary-dark) 72%, var(--border-color) 28%);
}

.theme-studio-tab:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.theme-studio-panels {
    flex: 1;
    min-height: 0;
    display: flex;
}

.theme-studio-panel {
    flex: 1;
    min-height: 0;
    display: none;
    flex-direction: column;
}

.theme-studio-panel.active {
    display: flex;
}

.theme-studio-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--window-header-bg);
}

.theme-preset-btn {
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-preset-btn:hover {
    background: var(--button-hover-bg);
    color: var(--primary);
    border-color: var(--primary);
}

.theme-token-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.theme-token-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
}

.theme-token-item>span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.theme-token-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-token-color {
    width: 34px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
}

.theme-token-hex {
    width: 88px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    text-transform: lowercase;
    outline: none;
}

.theme-token-hex:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.theme-studio-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    background: var(--window-header-bg);
}

.theme-toast-style-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    gap: 12px;
}

.theme-toast-style-header {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--button-bg);
    padding: 12px;
    display: grid;
    gap: 6px;
}

.theme-toast-style-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.theme-toast-style-subtitle {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-light);
}

.theme-toast-style-current {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.theme-toast-style-grid {
    display: grid;
    gap: 10px;
}

.theme-toast-style-option {
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--text-color);
    padding: 11px;
    display: grid;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toast-style-option:hover {
    background: var(--button-hover-bg);
    transform: translateY(-1px);
}

.theme-toast-style-option.active {
    border-color: color-mix(in srgb, var(--primary) 66%, var(--border-color) 34%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 72%, transparent);
}

.theme-toast-style-name {
    font-size: 13px;
    font-weight: 700;
}

.theme-toast-style-desc {
    font-size: 11.5px;
    color: var(--text-light);
    line-height: 1.4;
}

.theme-toast-preview {
    margin-top: 2px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--window-bg) 78%, var(--window-header-bg) 22%);
    min-height: 38px;
    padding: 8px 10px;
    display: grid;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.theme-toast-preview::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary-dark) 70%, #1db954 30%));
}

.theme-toast-preview-line {
    display: block;
    height: 6px;
    margin-left: 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-light) 52%, transparent);
}

.theme-toast-preview-line.short {
    width: 55%;
}

.theme-toast-style-option[data-toast-style="aurora"] .theme-toast-preview::before {
    background: linear-gradient(180deg, #36ffd5, #45ccff, #7b78ff, #ff5db9);
}

.theme-toast-style-option[data-toast-style="clean"] .theme-toast-preview {
    background: var(--window-bg);
}

.theme-toast-style-option[data-toast-style="clean"] .theme-toast-preview::before {
    width: 2px;
    background: var(--primary);
}

.theme-toast-style-option[data-toast-style="matrix"] .theme-toast-preview {
    border-color: color-mix(in srgb, #19d95f 56%, var(--border-color) 44%);
    background: linear-gradient(180deg, rgba(8, 25, 14, 0.9), rgba(6, 14, 9, 0.95));
}

.theme-toast-style-option[data-toast-style="matrix"] .theme-toast-preview::before {
    background: linear-gradient(180deg, #31f088, #0ecb61);
}

.theme-toast-style-option[data-toast-style="matrix"] .theme-toast-preview-line {
    background: color-mix(in srgb, #77ffb1 64%, transparent);
}

.theme-studio-btn {
    min-height: 36px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-studio-btn.secondary {
    background: var(--button-bg);
    color: var(--text-color);
}

.theme-studio-btn.secondary:hover {
    background: var(--button-hover-bg);
    color: var(--primary);
}

.theme-studio-btn.primary {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

.theme-studio-btn.primary:hover {
    background: var(--primary-dark);
}

.theme-studio-btn.danger {
    background: rgba(225, 29, 72, 0.16);
    color: var(--text-color);
    border-color: rgba(225, 29, 72, 0.35);
}

.theme-studio-btn.danger:hover {
    background: rgba(225, 29, 72, 0.24);
}

@media (max-width: 640px) {
    .theme-studio-tabs {
        grid-template-columns: 1fr;
    }

    .theme-studio-presets {
        grid-template-columns: 1fr;
    }

    .theme-studio-actions {
        grid-template-columns: 1fr;
    }

    .theme-toast-style-grid {
        grid-template-columns: 1fr;
    }
}

/* Background Studio App */
.background-studio-window-body {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--window-bg);
}

.background-studio-app {
    --bgs-surface: var(--window-bg);
    --bgs-soft: var(--window-header-bg);
    --bgs-border: var(--border-color);
    --bgs-text: var(--text-color);
    --bgs-muted: var(--text-light);
    --bgs-accent: var(--primary);
    --bgs-glow: var(--radioactive-glow);

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    color: var(--bgs-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bgs-glow) 42%, transparent) 0%, transparent 36%),
        linear-gradient(170deg, var(--bgs-surface) 0%, var(--bgs-soft) 100%);
}

.background-studio-header {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--bgs-border);
    background: color-mix(in srgb, var(--bgs-soft) 82%, transparent);
    backdrop-filter: blur(8px);
}

.background-studio-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.background-studio-subtitle {
    margin-top: 6px;
    font-size: 12px;
    color: var(--bgs-muted);
    line-height: 1.45;
}

.background-studio-grid {
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.background-mode-card {
    min-height: 120px;
    border: 1px solid var(--bgs-border);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 45%),
        linear-gradient(158deg, color-mix(in srgb, var(--button-bg) 85%, transparent) 0%, color-mix(in srgb, var(--window-bg) 92%, transparent) 100%);
    color: var(--bgs-text);
    text-align: left;
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.background-mode-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bgs-accent) 52%, var(--bgs-border) 48%);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--shadow-color) 40%, transparent);
}

.background-mode-card.active {
    border-color: color-mix(in srgb, var(--bgs-accent) 64%, var(--bgs-border) 36%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bgs-accent) 24%, transparent),
        0 14px 32px color-mix(in srgb, var(--bgs-accent) 22%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--bgs-accent) 30%, transparent) 0%, transparent 47%),
        linear-gradient(158deg, color-mix(in srgb, var(--button-hover-bg) 85%, transparent) 0%, color-mix(in srgb, var(--window-bg) 94%, transparent) 100%);
}

.background-mode-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.background-mode-description {
    font-size: 12px;
    color: var(--bgs-muted);
    line-height: 1.4;
}

.background-mode-badge {
    width: fit-content;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bgs-accent) 40%, var(--bgs-border) 60%);
    background: color-mix(in srgb, var(--bgs-accent) 18%, var(--button-bg) 82%);
    color: var(--bgs-text);
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

@media (max-width: 640px) {
    .background-studio-grid {
        grid-template-columns: 1fr;
    }
}

/* Achievements App */
.achievements-window-body {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--window-bg);
}

.achievements-shell {
    --ach-surface: var(--window-bg);
    --ach-surface-soft: var(--window-header-bg);
    --ach-border: var(--border-color);
    --ach-text: var(--text-color);
    --ach-muted: var(--text-light);
    --ach-accent: var(--primary);
    --ach-accent-strong: var(--primary-dark);
    --ach-chip: var(--button-bg);
    --ach-chip-hover: var(--button-hover-bg);

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    height: 100%;
    padding: 14px;
    color: var(--ach-text);
    background:
        radial-gradient(circle at 100% 0%, var(--radioactive-glow) 0%, transparent 28%),
        linear-gradient(160deg, var(--ach-surface) 0%, var(--ach-surface-soft) 100%);
}

.achievements-hero {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--ach-border);
    border-radius: 12px;
    background: var(--ach-surface-soft);
}

.achievements-ring {
    --ach-progress: 0%;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: conic-gradient(var(--ach-accent) var(--ach-progress), var(--progress-bg) 0%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievements-ring::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--ach-surface);
    border: 1px solid var(--ach-border);
}

.achievements-ring-core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.achievements-ring-core span {
    font-size: 17px;
    font-weight: 800;
    color: var(--ach-accent);
}

.achievements-summary {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.achievements-summary-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.achievements-summary-counter {
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--ach-border);
    background: var(--ach-chip);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.achievements-summary-latest {
    font-size: 12px;
    color: var(--ach-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievements-board {
    min-height: 0;
    border: 1px solid var(--ach-border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--ach-surface-soft) 0%, var(--ach-surface) 100%);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.achievements-board-header {
    min-height: 42px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ach-border);
    background: var(--ach-chip);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.desktop-context-menu {
    position: fixed;
    min-width: 230px;
    display: none;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--window-bg) 94%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color) 84%, transparent);
    z-index: 12000;
}

.desktop-context-menu.is-visible {
    display: block;
}

.desktop-context-item {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.desktop-context-item:hover {
    background: color-mix(in srgb, var(--button-hover-bg) 80%, transparent);
}

.achievements-board-title {
    font-size: 13px;
    font-weight: 700;
}

.achievements-board-total {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--ach-border);
    background: var(--ach-surface);
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ach-muted);
}

.achievements-grid {
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 96px;
    gap: 10px;
    align-content: start;
    align-items: stretch;
}

.achievement-card {
    height: 100%;
    min-height: 0;
    border-radius: 10px;
    border: 1px solid var(--ach-border);
    background: linear-gradient(165deg, var(--ach-chip) 0%, var(--ach-surface-soft) 100%);
    padding: 8px 7px;
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr) auto;
    gap: 4px;
    align-items: start;
    justify-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.achievement-card:hover {
    transform: translateY(-2px);
    border-color: var(--ach-accent);
    background: linear-gradient(165deg, var(--ach-chip-hover) 0%, var(--ach-surface-soft) 100%);
}

.achievement-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--ach-border);
    background: var(--ach-surface);
    color: var(--ach-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

.achievement-card-title {
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.achievement-card-meta {
    width: 100%;
    margin-top: auto;
    font-size: 10px;
    line-height: 1.2;
    color: var(--ach-muted);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    position: relative;
}

.achievement-card-meta.is-marquee {
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.achievement-card-meta-track {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    width: max-content;
}

.achievement-card-meta.is-marquee .achievement-card-meta-track {
    animation: achievementMetaTicker 7s linear infinite;
    animation-play-state: paused;
}

.achievement-card:hover .achievement-card-meta.is-marquee .achievement-card-meta-track,
.achievement-card-meta.is-marquee:hover .achievement-card-meta-track {
    animation-play-state: running;
}

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

    100% {
        transform: translateX(calc(-50% - 9px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .achievement-card-meta.is-marquee .achievement-card-meta-track {
        animation: none;
    }
}

.achievement-card.unlocked {
    border-color: var(--ach-accent);
    background:
        radial-gradient(circle at 80% 12%, var(--radioactive-glow), transparent 45%),
        linear-gradient(165deg, var(--ach-chip-hover) 0%, var(--ach-surface-soft) 100%);
}

.achievement-card.unlocked .achievement-card-icon {
    border-color: var(--ach-accent);
}

.achievement-card.locked {
    color: var(--ach-muted);
    filter: grayscale(0.76) saturate(0.6);
}

.achievement-card.locked::after {
    content: "SECRETO";
    position: absolute;
    top: 6px;
    right: 6px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ach-surface);
    border: 1px solid var(--ach-border);
    font-size: 8px;
    letter-spacing: 0.35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.achievements-empty {
    min-height: 96px;
    grid-column: 1 / -1;
    border-radius: 10px;
    border: 1px dashed var(--ach-border);
    color: var(--ach-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ach-surface);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 780px) {
    .achievements-shell {
        padding: 12px;
        gap: 10px;
    }

    .achievements-hero {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 10px;
    }

    .achievements-ring {
        width: 76px;
        height: 76px;
    }

    .achievements-ring-core span {
        font-size: 15px;
    }

    .achievements-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 90px;
        gap: 8px;
        padding: 8px;
    }
}

.settings-center-window-body {
    padding: 0;
    background: transparent;
    min-height: 0;
    overflow: hidden;
}

.premium-settings-v2 {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: color-mix(in srgb, var(--window-bg) 76%, transparent);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.ps2-toolbar {
    padding: 16px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: color-mix(in srgb, var(--window-header-bg) 48%, transparent);
}

.ps2-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    font-size: 12px;
    color: color-mix(in srgb, var(--text-light) 82%, transparent);
}

.ps2-toolbar-meta strong {
    color: var(--text-color);
    font-weight: 700;
}

.ps2-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps2-layout {
    min-height: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.2fr) minmax(250px, 1fr);
    gap: 14px;
}

.ps2-column {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border-color) 34%, transparent);
    background: color-mix(in srgb, var(--window-header-bg) 34%, transparent);
    overflow: auto;
    scrollbar-width: thin;
}

.ps2-editor-column {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 12px;
}

.ps2-section-head {
    display: grid;
    gap: 4px;
}

.ps2-section-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
}

.ps2-section-head p {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.4;
}

.ps2-theme-grid,
.ps2-wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.ps2-theme-card,
.ps2-wallpaper-card {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    border-radius: 10px;
    padding: 8px;
    background: color-mix(in srgb, var(--window-bg) 46%, transparent);
    color: var(--text-color);
    display: grid;
    gap: 7px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ps2-theme-card:hover,
.ps2-wallpaper-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, #000 16%, transparent);
}

.ps2-theme-card.active,
.ps2-wallpaper-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, var(--window-bg) 90%);
}

.ps2-theme-card span,
.ps2-wallpaper-card span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps2-theme-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ps2-border) 52%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ps2-primary) 20%, transparent), transparent),
        var(--ps2-desktop);
    position: relative;
    overflow: hidden;
}

.ps2-theme-thumb-window {
    position: absolute;
    left: 10%;
    top: 16%;
    width: 80%;
    height: 54%;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--ps2-border) 70%, transparent);
    background: var(--ps2-window);
}

.ps2-theme-thumb-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    background: color-mix(in srgb, var(--ps2-primary) 62%, #0d1016 38%);
    border-top: 1px solid color-mix(in srgb, var(--ps2-border) 62%, transparent);
}

.ps2-live-card {
    display: grid;
    gap: 10px;
}

.ps2-live-preview {
    --ps2-live-desktop: #d6e2ef;
    --ps2-live-primary: #2f6fb2;
    --ps2-live-window: #f3f7fb;
    --ps2-live-text: #132131;
    --ps2-live-border: #c2d1e2;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ps2-live-border) 68%, transparent);
    background-color: var(--ps2-live-desktop);
    background-size: cover;
    background-position: center;
    padding: 12px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    overflow: hidden;
}

.ps2-mini-window {
    width: min(220px, 78%);
    border: 1px solid color-mix(in srgb, var(--ps2-live-border) 72%, transparent);
    border-radius: 8px;
    background: var(--ps2-live-window);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.ps2-mini-window-head {
    height: 14px;
    background: color-mix(in srgb, var(--ps2-live-primary) 52%, var(--ps2-live-window) 48%);
    border-bottom: 1px solid color-mix(in srgb, var(--ps2-live-border) 55%, transparent);
}

.ps2-mini-window-body {
    height: 56px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ps2-live-primary) 11%, transparent), transparent 56%),
        var(--ps2-live-window);
}

.ps2-mini-taskbar {
    align-self: end;
    height: 24px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--ps2-live-border) 60%, transparent);
    background: color-mix(in srgb, var(--ps2-live-primary) 45%, #11161f 55%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

.ps2-mini-taskbar span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: color-mix(in srgb, #ffffff 82%, var(--ps2-live-primary) 18%);
    opacity: 0.84;
}

.ps2-live-meta {
    display: grid;
    gap: 2px;
}

.ps2-live-meta strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.ps2-live-meta span {
    font-size: 12px;
    color: var(--text-light);
}

.ps2-controls {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 34%, transparent);
    background: color-mix(in srgb, var(--window-bg) 46%, transparent);
}

.settings-action-btn {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    font-size: 12px;
    font-weight: 700;
    padding: 0 16px;
    color: var(--text-color);
    background: color-mix(in srgb, var(--button-bg) 68%, transparent);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.settings-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow-color) 18%, transparent);
}

.settings-action-btn.secondary:hover {
    background: color-mix(in srgb, var(--text-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 22%, transparent);
}

.settings-action-btn.primary {
    background: var(--primary);
    color: var(--artist-header-text);
    border: 1px solid color-mix(in srgb, var(--primary) 72%, #000 28%);
}

.settings-action-btn.primary:hover {
    filter: brightness(1.08);
}

.settings-action-btn.danger {
    background: color-mix(in srgb, var(--like) 14%, transparent);
    color: var(--like);
    border-color: color-mix(in srgb, var(--like) 30%, transparent);
}

.settings-action-btn.danger:hover {
    background: var(--like);
    color: #fff;
}

.settings-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-field span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
}

.settings-field select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 124px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    background: color-mix(in srgb, var(--window-bg) 58%, transparent);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
}

.settings-field select:focus {
    outline: none;
    border-color: var(--primary);
}

.settings-field input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--border-color) 44%, transparent);
    border-radius: 50%;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.settings-field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.settings-field input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.ps2-wallpaper-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ps2-upload {
    display: grid;
    gap: 8px;
}

.ps2-upload .settings-action-btn {
    justify-self: start;
}

.ps2-upload-input {
    display: none;
}

.ps2-subsection-head {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 26%, transparent);
}

.ps2-reactive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ps2-reactive-card {
    border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 24%, transparent) 0%, transparent 46%),
        color-mix(in srgb, var(--window-bg) 74%, transparent);
    color: var(--text-color);
    min-height: 112px;
    text-align: left;
    padding: 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ps2-reactive-card strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.ps2-reactive-card small {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.35;
}

.ps2-reactive-card span {
    width: fit-content;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    background: color-mix(in srgb, var(--window-header-bg) 52%, transparent);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
}

.ps2-reactive-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 56%, transparent);
    box-shadow: 0 10px 20px color-mix(in srgb, #000 16%, transparent);
}

.ps2-reactive-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 48%),
        color-mix(in srgb, var(--window-bg) 82%, transparent);
}

.ps2-bg-controls {
    margin-top: 2px;
}

.settings-field.settings-field-range {
    display: grid;
    gap: 6px;
}

.settings-field.settings-field-range span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ps2-range-value {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.settings-field.settings-field-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 46%, transparent);
    outline: none;
    cursor: pointer;
}

.settings-field.settings-field-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--primary) 78%, #000 22%);
    background: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

.settings-field.settings-field-range input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--primary) 78%, #000 22%);
    background: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

.ps2-empty {
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 44%, transparent);
    color: var(--text-light);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 1180px) {
    .ps2-layout {
        grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.2fr);
    }

    .ps2-column:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    .ps2-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .ps2-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

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

    .ps2-column {
        overflow: visible;
    }

    .ps2-theme-grid,
    .ps2-wallpaper-grid,
    .ps2-reactive-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ps2-layout {
        padding: 12px;
    }

    .ps2-column {
        padding: 12px;
    }

    .ps2-theme-grid,
    .ps2-wallpaper-grid,
    .ps2-reactive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-field {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .ps2-theme-grid,
    .ps2-wallpaper-grid,
    .ps2-reactive-grid {
        grid-template-columns: 1fr;
    }
}

/* Emulator window layout */
.emulator-desktop-window-body {
    padding: 0;
    overflow: hidden !important;
    display: flex;
    min-height: 0;
    background: #000;
}

.emulator-desktop-frame-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.emulator-desktop-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.emulator-desktop-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: 13px;
    color: #b4bfd6;
    background: linear-gradient(180deg, #0c1322 0%, #05080f 100%);
    z-index: 2;
}

/* App Window Styles */
.window[data-window-id="achievements-window"] {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border-color) 80%);
}

.window[data-window-id="emulator-window"] {
    border-color: color-mix(in srgb, var(--primary) 26%, var(--border-color) 74%);
}

.window[data-window-id="player-window"] {
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border-color) 78%);
}

.window[data-window-id="retro-hub-window"] {
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border-color) 76%);
}

.window[data-window-id="search-window"] {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border-color) 82%);
}

.window[data-window-id="settings-center-window"] {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border-color) 80%);
}