@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
--md-sys-color-primary: #6750A4;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-primary-container: #EADDFF;
--md-sys-color-on-primary-container: #21005D;
--md-sys-color-secondary: #625B71;
--md-sys-color-on-secondary: #FFFFFF;
--md-sys-color-secondary-container: #E8DEF8;
--md-sys-color-on-secondary-container: #1D192B;
--md-sys-color-tertiary: #7D5260;
--md-sys-color-on-tertiary: #FFFFFF;
--md-sys-color-tertiary-container: #FFD8E4;
--md-sys-color-on-tertiary-container: #31111D;
--md-sys-color-error: #B3261E;
--md-sys-color-on-error: #FFFFFF;
--md-sys-color-error-container: #F9DEDC;
--md-sys-color-on-error-container: #410E0B;
--md-sys-color-background: #FFFBFE;
--md-sys-color-on-background: #1C1B1F;
--md-sys-color-surface: #FFFBFE;
--md-sys-color-on-surface: #1C1B1F;
--md-sys-color-surface-variant: #E7E0EC;
--md-sys-color-on-surface-variant: #49454F;
--md-sys-color-outline: #79747E;
--md-sys-color-outline-variant: #CAC4D0;
--md-sys-color-surface-container-lowest: #FFFFFF;
--md-sys-color-surface-container-low: #F7F2FA;
--md-sys-color-surface-container: #F3EDF7;
--md-sys-color-surface-container-high: #ECE6F0;
--md-sys-color-surface-container-highest: #E6E0E9;
--md-sys-color-inverse-surface: #313033;
--md-sys-color-inverse-on-surface: #F4EFF4;
--md-sys-color-inverse-primary: #D0BCFF;
--md-ref-typeface: 'Roboto', sans-serif;
--md-sys-typescale-body-large: 400 1rem/1.5 var(--md-ref-typeface);
--md-sys-typescale-body-medium: 400 0.875rem/1.25 var(--md-ref-typeface);
--md-sys-typescale-body-small: 400 0.75rem/1 var(--md-ref-typeface);
--md-sys-typescale-title-large: 400 1.375rem/1.75 var(--md-ref-typeface);
--md-sys-typescale-title-medium: 500 1rem/1.5 var(--md-ref-typeface);
--md-sys-typescale-headline-small: 400 1.25rem/1.75 var(--md-ref-typeface);
--md-sys-typescale-label-large: 500 0.875rem/1.25 var(--md-ref-typeface);
--md-sys-typescale-label-medium: 500 0.75rem/1 var(--md-ref-typeface);
--md3e-motion-duration-medium: 300ms;
--md3e-motion-duration-long: 500ms;
--md3e-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md3e-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
--md3e-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
--md3e-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
--md3e-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--md3e-shape-corner-extra-large: 28px;
--md3e-shape-corner-large: 16px;
--md3e-shape-corner-medium: 12px;
--md3e-shape-corner-small: 8px;
--md3e-shape-corner-full: 9999px;
}

:root[data-theme="dark"] {
--md-sys-color-primary: #D0BCFF;
--md-sys-color-on-primary: #381E72;
--md-sys-color-primary-container: #4F378B;
--md-sys-color-on-primary-container: #EADDFF;
--md-sys-color-secondary: #CCC2DC;
--md-sys-color-on-secondary: #332D41;
--md-sys-color-secondary-container: #4A4458;
--md-sys-color-on-secondary-container: #E8DEF8;
--md-sys-color-tertiary: #EFB8C8;
--md-sys-color-on-tertiary: #492532;
--md-sys-color-tertiary-container: #633B48;
--md-sys-color-on-tertiary-container: #FFD8E4;
--md-sys-color-error: #F2B8B5;
--md-sys-color-on-error: #601410;
--md-sys-color-error-container: #8C1D18;
--md-sys-color-on-error-container: #F9DEDC;
--md-sys-color-background: #1C1B1F;
--md-sys-color-on-background: #E6E1E5;
--md-sys-color-surface: #1C1B1F;
--md-sys-color-on-surface: #E6E1E5;
--md-sys-color-surface-variant: #49454F;
--md-sys-color-on-surface-variant: #CAC4D0;
--md-sys-color-outline: #938F99;
--md-sys-color-outline-variant: #49454F;
--md-sys-color-surface-container-lowest: #0E0E11;
--md-sys-color-surface-container-low: #1C1B1F;
--md-sys-color-surface-container: #211F26;
--md-sys-color-surface-container-high: #2B2930;
--md-sys-color-surface-container-highest: #36343B;
--md-sys-color-inverse-surface: #F4EFF4;
--md-sys-color-inverse-on-surface: #313033;
--md-sys-color-inverse-primary: #6750A4;
}

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

html {
font-size: 16px;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
}

body {
font: var(--md-sys-typescale-body-large);
color: var(--md-sys-color-on-surface);
background-color: var(--md-sys-color-background);
font-family: var(--md-ref-typeface);
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
transition: background-color var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy),
color var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
}

.app-root {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}

.screen {
display: none;
width: 100%;
flex-shrink: 0;
}

.screen.active {
display: flex;
flex-direction: column;
}

#auth-screen {
min-height: 100vh;
min-height: 100dvh;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.auth-bg {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
var(--md-sys-color-primary-container) 0%,
var(--md-sys-color-surface) 50%,
var(--md-sys-color-secondary-container) 100%
);
opacity: 0.4;
z-index: 0;
}

.auth-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: 32px 24px;
background-color: var(--md-sys-color-surface-container-low);
border-radius: var(--md3e-shape-corner-extra-large);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
0 1px 4px rgba(0, 0, 0, 0.04);
animation: auth-enter var(--md3e-motion-duration-long) var(--md3e-motion-easing-emphasized-decelerate) both;
}

@keyframes auth-enter {
from {
opacity: 0;
transform: translateY(24px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.auth-header {
text-align: center;
margin-bottom: 28px;
}

.auth-icon {
font-size: 48px;
color: var(--md-sys-color-on-primary-container);
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background-color: var(--md-sys-color-primary-container);
border-radius: var(--md3e-shape-corner-extra-large);
margin-bottom: 16px;
}

.auth-title {
font: var(--md-sys-typescale-title-large);
color: var(--md-sys-color-on-surface);
margin-bottom: 4px;
}

.auth-subtitle {
font: var(--md-sys-typescale-body-medium);
color: var(--md-sys-color-on-surface-variant);
}

.auth-form {
display: flex;
flex-direction: column;
gap: 12px;
}

.md3-text-field {
position: relative;
width: 100%;
}

.md3-text-field input {
width: 100%;
height: 56px;
padding: 16px;
padding-top: 24px;
border: 2px solid var(--md-sys-color-outline);
border-radius: var(--md3e-shape-corner-small);
background-color: transparent;
color: var(--md-sys-color-on-surface);
font: var(--md-sys-typescale-body-large);
outline: none;
caret-color: var(--md-sys-color-primary);
transition: border-color var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
}

.md3-text-field input:focus {
border-color: var(--md-sys-color-primary);
}

.md3-text-field label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font: var(--md-sys-typescale-body-large);
color: var(--md-sys-color-on-surface-variant);
pointer-events: none;
transition: all var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
background-color: var(--md-sys-color-surface-container-low);
padding: 0 4px;
border-radius: 2px;
}

.md3-text-field input:focus + label,
.md3-text-field input:not(:placeholder-shown) + label {
top: 8px;
transform: translateY(0);
font: var(--md-sys-typescale-label-medium);
color: var(--md-sys-color-primary);
}

.md3-text-field input:not(:focus):not(:placeholder-shown) + label {
color: var(--md-sys-color-on-surface-variant);
}

.md3-text-field.optional input {
border-color: var(--md-sys-color-outline-variant);
}

.md3-text-field.optional input:focus {
border-color: var(--md-sys-color-secondary);
}

.md3-text-field.optional input:focus + label,
.md3-text-field.optional input:not(:placeholder-shown) + label {
color: var(--md-sys-color-secondary);
}

.md3-text-field.optional label {
color: var(--md-sys-color-outline);
}

.md3-text-field input.error {
border-color: var(--md-sys-color-error);
}

.md3-text-field input.error + label {
color: var(--md-sys-color-error);
}

.md3-field-helper {
display: block;
font: var(--md-sys-typescale-body-small);
color: var(--md-sys-color-on-surface-variant);
margin-top: 4px;
padding-left: 16px;
}

.md3-field-helper.error {
color: var(--md-sys-color-error);
}

.auth-buttons {
display: flex;
gap: 12px;
margin-top: 12px;
}

.md3-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
min-height: 40px;
padding: 0 24px;
border: none;
border-radius: var(--md3e-shape-corner-full);
font: var(--md-sys-typescale-label-large);
cursor: pointer;
transition: all var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}

.md3-button.filled {
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
}

.md3-button.filled:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.md3-button.filled:active {
transform: scale(0.98);
}

.md3-button.filled-tonal {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}

.md3-button.filled-tonal:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.md3-button.filled-tonal:active {
transform: scale(0.98);
}

.md3-button.filled.error {
background-color: var(--md-sys-color-error);
color: var(--md-sys-color-on-error);
}

.md3-button.text {
background-color: transparent;
color: var(--md-sys-color-primary);
padding: 0 12px;
}

.md3-button.text:hover {
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}

.md3-button:disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}

.md3-button.loading {
pointer-events: none;
color: transparent;
}

.md3-button.loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top-color: var(--md-sys-color-on-primary);
border-radius: 50%;
animation: button-spin 600ms linear infinite;
}

.md3-button.filled-tonal.loading::after {
border-top-color: var(--md-sys-color-on-secondary-container);
}

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

.button-icon {
font-size: 18px;
}

.auth-buttons .md3-button {
flex: 1;
}

.app-header {
position: sticky;
top: 0;
z-index: 100;
background-color: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
max-width: 960px;
margin: 0 auto;
width: 100%;
}

.header-left {
display: flex;
align-items: center;
gap: 10px;
}

.header-logo-icon {
font-size: 28px;
color: var(--md-sys-color-primary);
}

.header-title {
font: var(--md-sys-typescale-title-medium);
color: var(--md-sys-color-on-surface);
}

.header-right {
display: flex;
align-items: center;
gap: 4px;
}

.user-name {
font: var(--md-sys-typescale-label-large);
color: var(--md-sys-color-on-surface-variant);
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.md3-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: var(--md3e-shape-corner-full);
background-color: transparent;
color: var(--md-sys-color-on-surface-variant);
cursor: pointer;
transition: background-color var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
}

.md3-icon-button:hover {
background-color: var(--md-sys-color-surface-container-high);
}

.md3-icon-button:active {
background-color: var(--md-sys-color-surface-container-highest);
}

.md3-icon-button .material-symbols-rounded {
font-size: 24px;
}

.dashboard-content {
flex: 1;
padding: 20px 16px;
max-width: 960px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}

.dashboard-section {
background-color: var(--md-sys-color-surface-container);
border-radius: var(--md3e-shape-corner-large);
padding: 20px;
}

.dashboard-section.hidden {
display: none;
}

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
gap: 4px;
text-align: center;
}

.empty-state.action {
gap: 10px;
padding: 20px 16px;
}

.empty-icon {
font-size: 28px;
color: var(--md-sys-color-outline);
opacity: 0.6;
}

.empty-title {
font: var(--md-sys-typescale-body-large);
font-weight: 500;
color: var(--md-sys-color-on-surface-variant);
}

.empty-subtitle {
font: var(--md-sys-typescale-body-small);
color: var(--md-sys-color-outline);
}

.now-playing-card {
display: flex;
align-items: center;
gap: 16px;
border: 2px solid var(--md-sys-color-primary);
border-radius: var(--md3e-shape-corner-large);
padding: 16px;
background-color: var(--md-sys-color-surface-container-high);
animation: np-border-pulse 2s ease-in-out infinite;
}

@keyframes np-border-pulse {
0%, 100% {
border-color: var(--md-sys-color-primary);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-sys-color-primary) 0%, transparent);
}
50% {
border-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, var(--md-sys-color-primary-container));
box-shadow: 0 0 12px 0 color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);
}
}

.now-playing-card.hidden {
display: none;
}

.np-album-art-container {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--md3e-shape-corner-medium);
overflow: hidden;
background-color: var(--md-sys-color-surface-container);
}

.np-album-art {
width: 100%;
height: 100%;
object-fit: cover;
}

.np-playing-indicator {
position: absolute;
bottom: 4px;
right: 4px;
width: 24px;
height: 24px;
background-color: var(--md-sys-color-primary);
border-radius: var(--md3e-shape-corner-full);
display: flex;
align-items: center;
justify-content: center;
animation: eq-pulse 1s ease-in-out infinite;
}

.np-playing-indicator .material-symbols-rounded {
font-size: 14px;
color: var(--md-sys-color-on-primary);
}

@keyframes eq-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}

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

.np-label {
font: var(--md-sys-typescale-label-medium);
color: var(--md-sys-color-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.np-track-name {
font: var(--md-sys-typescale-title-medium);
color: var(--md-sys-color-on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.np-artist-name {
font: var(--md-sys-typescale-body-medium);
color: var(--md-sys-color-on-surface-variant);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.np-album-name {
font: var(--md-sys-typescale-body-small);
color: var(--md-sys-color-outline);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.section-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}

.section-icon {
font-size: 20px;
color: var(--md-sys-color-primary);
}

.section-title {
font: var(--md-sys-typescale-title-medium);
color: var(--md-sys-color-on-surface);
}

.tracks-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 400px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.tracks-list::-webkit-scrollbar {
width: 6px;
}

.tracks-list::-webkit-scrollbar-track {
background: transparent;
}

.tracks-list::-webkit-scrollbar-thumb {
background-color: var(--md-sys-color-outline-variant);
border-radius: 3px;
}

.tracks-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
gap: 12px;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-medium);
}

.md3-progress-circular {
width: 32px;
height: 32px;
position: relative;
animation: progress-rotate 1.4s linear infinite;
}

.md3-progress-circular-inner {
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top-color: var(--md-sys-color-primary);
border-right-color: var(--md-sys-color-primary);
border-radius: 50%;
animation: progress-spin 1.4s ease-in-out infinite;
}

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

@keyframes progress-spin {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}

.track-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background-color: var(--md-sys-color-surface-container-high);
border-radius: var(--md3e-shape-corner-medium);
transition: background-color var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
cursor: default;
}

.track-card:hover {
background-color: var(--md-sys-color-surface-container-highest);
}

.track-card-art {
width: 48px;
height: 48px;
border-radius: var(--md3e-shape-corner-small);
overflow: hidden;
flex-shrink: 0;
background-color: var(--md-sys-color-surface-container);
}

.track-card-art img {
width: 100%;
height: 100%;
object-fit: cover;
}

.track-card-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}

.track-card-name {
font: var(--md-sys-typescale-label-large);
color: var(--md-sys-color-on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.track-card-artist {
font: var(--md-sys-typescale-body-small);
color: var(--md-sys-color-on-surface-variant);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.track-card-album {
font: var(--md-sys-typescale-body-small);
color: var(--md-sys-color-outline);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.track-card-time {
font: var(--md-sys-typescale-label-medium);
color: var(--md-sys-color-outline);
flex-shrink: 0;
align-self: center;
}

.track-card-now-playing-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
border-radius: var(--md3e-shape-corner-full);
font: var(--md-sys-typescale-label-medium);
flex-shrink: 0;
align-self: center;
}

.track-card-now-playing-badge .material-symbols-rounded {
font-size: 14px;
animation: eq-pulse 1s ease-in-out infinite;
}

.track-card-no-art {
width: 48px;
height: 48px;
border-radius: var(--md3e-shape-corner-small);
background-color: var(--md-sys-color-surface-container);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.track-card-no-art .material-symbols-rounded {
font-size: 20px;
color: var(--md-sys-color-outline);
}

.settings-overlay {
position: fixed;
inset: 0;
z-index: 200;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: flex-end;
justify-content: center;
animation: overlay-enter var(--md3e-motion-duration-medium) var(--md3e-motion-easing-emphasized-decelerate) both;
}

.settings-overlay.hidden {
display: none;
}

@keyframes overlay-enter {
from { opacity: 0; }
to { opacity: 1; }
}

.settings-sheet {
width: 100%;
max-width: 560px;
background-color: var(--md-sys-color-surface-container-low);
border-radius: var(--md3e-shape-corner-extra-large) var(--md3e-shape-corner-extra-large) 0 0;
max-height: 90vh;
overflow-y: auto;
animation: sheet-enter var(--md3e-motion-duration-long) var(--md3e-motion-easing-emphasized-decelerate) both;
scrollbar-width: thin;
scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

@keyframes sheet-enter {
from {
opacity: 0;
transform: translateY(100%) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.settings-sheet-header {
padding: 12px 24px 0;
}

.settings-drag-handle {
width: 32px;
height: 4px;
background-color: var(--md-sys-color-outline-variant);
border-radius: 2px;
margin: 0 auto 12px;
}

.settings-sheet-top {
display: flex;
align-items: center;
justify-content: space-between;
}

.settings-sheet-title {
font: var(--md-sys-typescale-title-large);
color: var(--md-sys-color-on-surface);
}

.settings-sheet-body {
padding: 8px 24px 24px;
display: flex;
flex-direction: column;
gap: 20px;
}

.settings-group {
display: flex;
flex-direction: column;
gap: 12px;
}

.settings-group-title {
font: var(--md-sys-typescale-label-large);
color: var(--md-sys-color-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
padding-bottom: 4px;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}

.settings-row-label {
display: flex;
align-items: center;
gap: 12px;
font: var(--md-sys-typescale-body-large);
color: var(--md-sys-color-on-surface);
}

.settings-row-icon {
font-size: 24px;
color: var(--md-sys-color-on-surface-variant);
}

.md3-switch {
position: relative;
width: 52px;
height: 32px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}

.md3-switch-track {
width: 52px;
height: 32px;
border-radius: 16px;
border: 2px solid var(--md-sys-color-outline);
background-color: transparent;
position: relative;
transition: all var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
}

.md3-switch-thumb {
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--md-sys-color-outline);
transition: all var(--md3e-motion-duration-medium) var(--md3e-motion-easing-spring);
}

.md3-switch.active .md3-switch-track {
border-color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-primary);
}

.md3-switch.active .md3-switch-thumb {
left: 28px;
width: 24px;
height: 24px;
background-color: var(--md-sys-color-on-primary);
}

.color-options {
display: flex;
gap: 8px;
}

.color-option {
width: 36px;
height: 36px;
border-radius: var(--md3e-shape-corner-full);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--md3e-motion-duration-medium) var(--md3e-motion-easing-legacy);
display: flex;
align-items: center;
justify-content: center;
}

.color-option:hover {
transform: scale(1.1);
}

.color-option.active {
border-color: var(--md-sys-color-on-surface);
box-shadow: 0 0 0 2px var(--md-sys-color-surface), 0 0 0 4px var(--md-sys-color-on-surface);
}

.color-option.active::after {
content: '✓';
color: white;
font-size: 14px;
font-weight: 700;
}

.settings-sheet-body .md3-text-field {
margin-bottom: 0;
}

.settings-sheet-body .md3-button {
width: 100%;
}

.snackbar-container {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
display: flex;
flex-direction: column-reverse;
gap: 8px;
z-index: 9999;
pointer-events: none;
}

.snackbar {
pointer-events: auto;
padding: 12px 16px;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
border-radius: var(--md3e-shape-corner-small);
font: var(--md-sys-typescale-body-medium);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
animation: snackbar-enter var(--md3e-motion-duration-medium) var(--md3e-motion-easing-emphasized-decelerate) both;
max-width: 480px;
margin: 0 auto;
}

.snackbar.error {
background-color: var(--md-sys-color-error-container);
color: var(--md-sys-color-on-error-container);
}

.snackbar.success {
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}

@keyframes snackbar-enter {
from {
opacity: 0;
transform: translateY(16px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes snackbar-exit {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
}

@media (max-width: 480px) {
.auth-container {
max-width: 100%;
border-radius: 0;
padding: 24px 20px;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--md-sys-color-surface-container-low);
}

.auth-bg {
display: none;
}

.auth-buttons {
flex-direction: column;
}

.np-album-art-container {
width: 64px;
height: 64px;
}

.dashboard-content {
padding: 12px;
gap: 12px;
}

.dashboard-section {
padding: 16px;
border-radius: var(--md3e-shape-corner-medium);
}

.tracks-list {
max-height: 320px;
}

.header-content {
padding: 8px 12px;
}

.user-name {
max-width: 90px;
font: var(--md-sys-typescale-label-medium);
}

.settings-sheet {
max-width: 100%;
border-radius: var(--md3e-shape-corner-extra-large) var(--md3e-shape-corner-extra-large) 0 0;
}
}

@media (min-width: 481px) and (max-width: 768px) {
.auth-container {
max-width: 380px;
}

.dashboard-content {
max-width: 100%;
}

.settings-sheet {
max-width: 100%;
}
}

@media (min-width: 769px) {
.auth-container {
max-width: 420px;
}

.dashboard-content {
padding: 24px;
}

.dashboard-section {
padding: 24px;
}

.np-album-art-container {
width: 96px;
height: 96px;
}

.now-playing-card {
gap: 20px;
padding: 20px;
}

.track-card {
gap: 16px;
padding: 12px;
}

.track-card-art {
width: 56px;
height: 56px;
}

.settings-overlay {
align-items: center;
}

.settings-sheet {
border-radius: var(--md3e-shape-corner-extra-large);
max-height: 80vh;
}

.settings-sheet-header {
padding-top: 16px;
}

.settings-drag-handle {
display: none;
}
}