:root{--primary: #4CAF50;--on-primary: #003910;--primary-container: #1F5A2A;--on-primary-container: #A5D6A7;--primary-fixed: #A5D6A7;--primary-fixed-dim: #81C784;--on-primary-fixed: #003910;--on-primary-fixed-variant: #1F5A2A;--secondary: #9575CD;--on-secondary: #2A1A4A;--secondary-container: #4A3D6A;--on-secondary-container: #D1C4E9;--secondary-fixed: #D1C4E9;--secondary-fixed-dim: #B39DDB;--on-secondary-fixed: #2A1A4A;--on-secondary-fixed-variant: #4A3D6A;--tertiary: #E91E63;--on-tertiary: #5A0030;--tertiary-container: #8A2D54;--on-tertiary-container: #F8BBD0;--tertiary-fixed: #F8BBD0;--tertiary-fixed-dim: #F48FB1;--on-tertiary-fixed: #5A0030;--on-tertiary-fixed-variant: #8A2D54;--error: #F44336;--on-error: #5F1410;--error-container: #8C2D28;--on-error-container: #FFCDD2;--surface-dim: #1A1C1E;--surface: #212427;--surface-bright: #3A3D40;--surface-container-lowest: #0F1113;--surface-container-low: #1E2022;--surface-container: #25282A;--surface-container-high: #2F3235;--surface-container-highest: #3A3D40;--inverse-surface: #E3E2E6;--inverse-on-surface: #2F3135;--inverse-primary: #2E7D32;--on-surface: #E3E2E6;--on-surface-variant: #C7C5CA;--outline: #919094;--outline-variant: #444746;--scrim: rgba(0, 0, 0, .7);--shadow: rgba(0, 0, 0, .8);--filter-primary: brightness(0) saturate(100%) invert(48%) sepia(96%) saturate(506%) hue-rotate(76deg) brightness(104%) contrast(93%);--filter-on-primary: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(2964%) hue-rotate(103deg) brightness(95%) contrast(101%);--filter-primary-container: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(1392%) hue-rotate(83deg) brightness(94%) contrast(91%);--filter-on-primary-container: brightness(0) saturate(100%) invert(87%) sepia(8%) saturate(1273%) hue-rotate(68deg) brightness(92%) contrast(87%);--filter-primary-fixed: brightness(0) saturate(100%) invert(87%) sepia(8%) saturate(1273%) hue-rotate(68deg) brightness(92%) contrast(87%);--filter-primary-fixed-dim: brightness(0) saturate(100%) invert(72%) sepia(19%) saturate(471%) hue-rotate(73deg) brightness(91%) contrast(85%);--filter-on-primary-fixed: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(2964%) hue-rotate(103deg) brightness(95%) contrast(101%);--filter-on-primary-fixed-variant: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(1392%) hue-rotate(83deg) brightness(94%) contrast(91%);--filter-secondary: brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(789%) hue-rotate(230deg) brightness(91%) contrast(87%);--filter-on-secondary: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2845%) hue-rotate(232deg) brightness(91%) contrast(95%);--filter-secondary-container: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1234%) hue-rotate(221deg) brightness(91%) contrast(84%);--filter-on-secondary-container: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(678%) hue-rotate(217deg) brightness(94%) contrast(88%);--filter-secondary-fixed: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(678%) hue-rotate(217deg) brightness(94%) contrast(88%);--filter-secondary-fixed-dim: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(543%) hue-rotate(220deg) brightness(93%) contrast(86%);--filter-on-secondary-fixed: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2845%) hue-rotate(232deg) brightness(91%) contrast(95%);--filter-on-secondary-fixed-variant: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1234%) hue-rotate(221deg) brightness(91%) contrast(84%);--filter-tertiary: brightness(0) saturate(100%) invert(26%) sepia(88%) saturate(3698%) hue-rotate(327deg) brightness(95%) contrast(87%);--filter-on-tertiary: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(4518%) hue-rotate(319deg) brightness(88%) contrast(108%);--filter-tertiary-container: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(1789%) hue-rotate(302deg) brightness(91%) contrast(88%);--filter-on-tertiary-container: brightness(0) saturate(100%) invert(90%) sepia(13%) saturate(543%) hue-rotate(298deg) brightness(102%) contrast(96%);--filter-tertiary-fixed: brightness(0) saturate(100%) invert(90%) sepia(13%) saturate(543%) hue-rotate(298deg) brightness(102%) contrast(96%);--filter-tertiary-fixed-dim: brightness(0) saturate(100%) invert(76%) sepia(16%) saturate(789%) hue-rotate(301deg) brightness(99%) contrast(94%);--filter-on-tertiary-fixed: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(4518%) hue-rotate(319deg) brightness(88%) contrast(108%);--filter-on-tertiary-fixed-variant: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(1789%) hue-rotate(302deg) brightness(91%) contrast(88%);--filter-error: brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(3245%) hue-rotate(346deg) brightness(97%) contrast(93%);--filter-on-error: brightness(0) saturate(100%) invert(15%) sepia(44%) saturate(2234%) hue-rotate(348deg) brightness(90%) contrast(94%);--filter-error-container: brightness(0) saturate(100%) invert(26%) sepia(42%) saturate(1456%) hue-rotate(342deg) brightness(88%) contrast(89%);--filter-on-error-container: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(432%) hue-rotate(313deg) brightness(103%) contrast(100%);--filter-surface-dim: brightness(0) saturate(100%) invert(8%) sepia(6%) saturate(567%) hue-rotate(169deg) brightness(95%) contrast(93%);--filter-surface: brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(543%) hue-rotate(169deg) brightness(94%) contrast(87%);--filter-surface-bright: brightness(0) saturate(100%) invert(22%) sepia(4%) saturate(234%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-surface-container-lowest: brightness(0) saturate(100%) invert(4%) sepia(8%) saturate(789%) hue-rotate(169deg) brightness(97%) contrast(96%);--filter-surface-container-low: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(456%) hue-rotate(169deg) brightness(95%) contrast(92%);--filter-surface-container: brightness(0) saturate(100%) invert(14%) sepia(5%) saturate(345%) hue-rotate(169deg) brightness(94%) contrast(88%);--filter-surface-container-high: brightness(0) saturate(100%) invert(18%) sepia(4%) saturate(289%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-surface-container-highest: brightness(0) saturate(100%) invert(22%) sepia(4%) saturate(234%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-inverse-surface: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(98%) contrast(90%);--filter-inverse-on-surface: brightness(0) saturate(100%) invert(18%) sepia(4%) saturate(234%) hue-rotate(187deg) brightness(92%) contrast(88%);--filter-inverse-primary: brightness(0) saturate(100%) invert(35%) sepia(46%) saturate(987%) hue-rotate(88deg) brightness(93%) contrast(88%);--filter-on-surface: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(98%) contrast(90%);--filter-on-surface-variant: brightness(0) saturate(100%) invert(83%) sepia(3%) saturate(234%) hue-rotate(205deg) brightness(96%) contrast(88%);--filter-outline: brightness(0) saturate(100%) invert(60%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(92%) contrast(86%);--filter-outline-variant: brightness(0) saturate(100%) invert(27%) sepia(4%) saturate(234%) hue-rotate(75deg) brightness(91%) contrast(87%);--filter-white: brightness(0) saturate(100%) invert(100%);--max-width: 680px}.hover-inset-primary{box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s ease,background .2s ease}.hover-inset-primary:hover{box-shadow:inset 0 0 0 2px var(--primary);background:transparent}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--surface);color:var(--on-surface);min-height:100vh}#app{padding:24px;max-width:1200px;margin:0 auto}#settings-layout{display:flex;gap:0;border-radius:12px;overflow:hidden;border:0;background:var(--surface-container-low);min-height:600px}.settings-drawer{width:360px;background:var(--surface-container-low);padding:12px 28px;display:flex;flex-direction:column;gap:0;flex-shrink:0}.drawer-header{padding:16px 0 24px;font-size:14px;font-weight:600;color:var(--on-surface-variant);letter-spacing:.1px;text-transform:uppercase}.drawer-section{display:flex;flex-direction:column;gap:0}.settings-content{flex:1;padding:32px;background:var(--surface-container-low);overflow-y:auto}.settings-section-container h1{font-size:28px;font-weight:600;margin-bottom:32px;color:var(--on-surface)}.page-icon{width:24px;height:24px;display:inline-block;filter:var(--filter-white)}.loading{color:var(--on-surface-variant);padding:40px;text-align:center}.hidden{display:none!important}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h2{font-size:16px;font-weight:600;margin-bottom:8px}.settings-section{max-width:500px}#language-select{--md-filled-text-field-container-color: var(--secondary-container);--md-filled-text-field-focus-active-indicator-color: var(--secondary);--md-filled-text-field-focus-label-text-color: var(--secondary)}#mute-sounds{--md-checkbox-selected-container-color: var(--secondary);--md-checkbox-selected-icon-color: var(--on-secondary)}.section-hint{color:var(--on-surface-variant);font-size:13px;margin-bottom:12px}.password-form{display:flex;flex-direction:column;gap:16px;max-width:500px}.password-form md-button{align-self:flex-start;margin-top:8px}.coming-soon{color:var(--on-surface-variant);font-size:14px;font-style:italic;padding:16px;background:var(--surface-container-high);border-radius:8px;text-align:center}.settings-toggle{display:flex;align-items:center;gap:12px;cursor:pointer}.toggle-label{font-size:14px;color:var(--on-surface)}.status-message{margin-top:8px;font-size:13px;opacity:0;transition:opacity .3s}.status-message.visible{opacity:1}.status-message.success{color:var(--primary)}.status-message.error{color:var(--error)}#not-logged-in{text-align:center;padding:40px;color:var(--on-surface-variant)}#not-logged-in a{color:var(--tertiary);text-decoration:none}#not-logged-in a:hover{text-decoration:underline}.delete-account-section{margin-top:32px;padding-top:32px;border-top:1px solid var(--outline-variant)}#delete-account-container{display:flex;flex-direction:column;gap:16px;max-width:500px}#delete-confirm-container{display:flex;flex-direction:column;gap:16px}#delete-confirm-container md-note{padding:0}#delete-confirm-container .delete-confirm-label{font-size:14px;margin:0 0 12px}.delete-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}#delete-confirm-container material-text-field{--md-filled-text-field-container-color: var(--tertiary-container);--md-filled-text-field-focus-active-indicator-color: var(--tertiary);--md-filled-text-field-focus-label-text-color: var(--tertiary)}#delete-error{margin-top:0}#account-deleted-view{display:flex;justify-content:center;align-items:center;min-height:400px;padding:40px}.account-deleted-content{max-width:500px;text-align:center}.deleted-icon{width:64px;height:64px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.account-deleted-content h1{font-size:24px;font-weight:600;margin-bottom:16px;color:var(--on-surface)}.deleted-message{font-size:16px;color:var(--on-surface);margin-bottom:12px}.deleted-info{font-size:14px;color:var(--on-surface-variant);margin-bottom:24px}.deleted-action{font-size:14px;color:var(--on-surface-variant)}.deleted-action a{color:var(--primary);text-decoration:none}.deleted-action a:hover{text-decoration:underline}