*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;margin:0;background:var(--bg-color-main);color:var(--text-color);transition:background-color .3s ease,color .3s ease}:root{--primary-color: #1062a3;--secondary-color: #ff9800;--success-color: #4caf50;--error-color: #f44336;--warning-color: #ff9800;--bg-color-main: #f5f5f5;--background-color: #fafafa;--card-bg-color: #eeeeee;--card-bg-color-second: #cbcbcb;--card-bg-color-third: #9b9b9b;--surface-color: #ffffff;--text-color: #212121;--text-secondary: #757575;--border-color: #989898;--border-color-easy: #dbdbdb;--shadow: rgba(0, 0, 0, .1);--icon-bg-active: #a1a1a1;--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 48px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--angle-border: 16px;--shadow1: #0a10141f;--shadow-ng1: rgba(0, 0, 0, .1);--shadow-ng2: rgba(0, 0, 0, .05);--square-button-outline-color: #ffffff;--title-color: #212121;--sub-title-color: #494949;--icon-color: rgb(77, 80, 81)}[data-theme=dark]{--background-color: #00000033;--bg-color-main: #1e1e1e;--card-bg-color: #2d2d2d;--card-bg-color-second: #3e3e3e;--card-bg-color-third: #4f4f4f74;--surface-color: #1e1e1e;--text-color: #dadada;--text-secondary: #b0b0b0;--border-color: #f0f3f9;--border-color-easy: #a4a4a4;--shadow: 0 2px 8px rgba(0, 0, 0, .3);--shadow1: rgba(255, 255, 255, .2);--shadow2: rgba(255, 255, 255, .19);--shadow-ng1: rgba(0, 0, 0, .5);--shadow-ng2: rgba(0, 0, 0, .3);--square-button-outline-color: #2d2d2d;--title-color: #ffffff;--sub-title-color: #d3cfcf;--icon-color: #dfdfdf;--icon-color: rgb(77, 80, 81)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-sm)}.card{width:100%;-webkit-font-smoothing:antialiased;text-decoration:none;box-sizing:border-box;display:flex;flex-direction:column;border:1px solid var(--border-color);background:var(--card-bg-color);border-radius:var(--border-radius-lg);color:var(--title-color);box-shadow:0 1px 6px 1px var(--shadow1),0 0 2px var(--shadow2);transition:border .5s ease-in-out,box-shadow .5s,transform .3s ease;overflow:hidden;padding:var(--spacing-md);position:relative}.card:hover{transform:translateY(-5px);box-shadow:0 4px 18px 0 var(--shadow);border-color:transparent}.btn{padding:12px 24px;border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:14px;font-weight:500;text-transform:uppercase;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:#1976d2;transform:translateY(-1px)}.btn-success{background:var(--success-color);color:#fff}.btn-error{background:var(--error-color);color:#fff}.fade-in{animation:fadeIn .5s ease-in}mat-icon{color:var(--icon-color)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.progress-circle{transform:rotate(-90deg)}.code-block{background:#1e1e1e;color:#d4d4d4;border:1px solid #333;border-radius:6px;padding:16px;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow-x:auto;margin:var(--spacing-sm) 0;position:relative;white-space:pre;tab-size:2}.code-block:before{content:"JavaScript";position:absolute;top:8px;right:12px;font-size:10px;color:#7d8590;text-transform:uppercase;letter-spacing:1px;font-weight:600}.code-block .keyword{color:#ff7b72;font-weight:600}.code-block .string{color:#a5d6ff}.code-block .string{color:#ce9178}.code-block .comment{color:#6a9955;font-style:italic}.code-block .function{color:#dcdcaa}.code-block .number{color:#b5cea8}.code-block .boolean{color:#569cd6}.code-block .class-name{color:#4ec9b0}.code-block .operator,.code-block .punctuation{color:#d4d4d4}.code-block .decorator{color:#dcdcaa}.code-block .angular-control{color:#c586c0}.code-block .signal{color:#4ec9b0}.code-block .template-expression{color:#569cd6}.code-block .template-string{color:#ce9178}[data-theme=light] .code-block{background:#f6f8fa;color:#24292f;border-color:#d0d7de}[data-theme=light] .code-block:before{color:#656d76}[data-theme=light] .code-block .keyword{color:#cf222e}[data-theme=light] .code-block .string,[data-theme=light] .code-block .template-string{color:#0a3069}[data-theme=light] .code-block .template-expression{color:#953800;background:#9538001a}[data-theme=light] .code-block .number{color:#0550ae}[data-theme=light] .code-block .comment{color:#6e7781}[data-theme=light] .code-block .function{color:#8250df}[data-theme=light] .code-block .variable{color:#953800}[data-theme=light] .code-block .operator{color:#cf222e}[data-theme=light] .code-block .property,[data-theme=light] .code-block .boolean{color:#0550ae}[data-theme=light] .code-block .class-name{color:#953800}[data-theme=light] .code-block .decorator{color:#cf222e}[data-theme=light] .code-block .angular-control{color:#1a7f37}[data-theme=light] .code-block .signal{color:#953800}.text-center{text-align:center}.text-success{color:var(--success-color)}.text-error{color:var(--error-color)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.ripple-effect{position:relative;overflow:hidden}.ripple-effect:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .3s,height .3s}.ripple-effect:active:after{width:200px;height:200px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media (max-width: 768px){.code-block{font-size:12px;padding:var(--spacing-sm)}.card{margin:var(--spacing-xs) 0;padding:var(--spacing-sm)}}.achievement-snackbar{background:linear-gradient(135deg,#4caf50,#45a049)!important;color:#fff!important;font-weight:500!important}.achievement-snackbar.rarity-common{background:linear-gradient(135deg,#9e9e9e,#757575)!important}.achievement-snackbar.rarity-rare{background:linear-gradient(135deg,#2196f3,#1976d2)!important}.achievement-snackbar.rarity-epic{background:linear-gradient(135deg,#9c27b0,#7b1fa2)!important}.achievement-snackbar.rarity-legendary{background:linear-gradient(135deg,#ff9800,#f57c00)!important}.achievement-snackbar.multiple-achievements{background:linear-gradient(135deg,#e91e63,#c2185b)!important}.achievement-snackbar .mat-simple-snackbar-action{color:#ffffffe6!important;font-weight:700!important}.success-snackbar{background:#4caf50!important;color:#fff!important}.info-snackbar{background:#2196f3!important;color:#fff!important}.warning-snackbar{background:#ff9800!important;color:#fff!important}.error-snackbar{background:#f44336!important;color:#fff!important}.loading-snackbar{background:#607d8b!important;color:#fff!important}.offline-snackbar{background:#9e9e9e!important;color:#fff!important}.online-snackbar{background:#4caf50!important;color:#fff!important}.sync-snackbar{background:#2196f3!important;color:#fff!important}.sync-complete-snackbar{background:#4caf50!important;color:#fff!important}.error-handling-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.error-handling-container{background:#fff;border-radius:12px;padding:32px;box-shadow:0 8px 32px #0000004d;max-width:400px;width:90%;text-align:center}.offline-indicator-fixed{position:fixed;top:64px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:8px 16px;border-radius:20px;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000004d}.error-summary-fixed{position:fixed;top:80px;right:20px;z-index:1001}.error-panel-fixed{position:fixed;top:140px;right:20px;width:400px;max-height:500px;background:#fff;border-radius:8px;box-shadow:0 8px 32px #0000004d;z-index:1002}@media (prefers-color-scheme: dark){.error-handling-container,.error-panel-fixed{background:#2d2d2d;color:#fff}}@media (max-width: 768px){.offline-indicator-fixed{top:56px;left:16px;right:16px;transform:none;border-radius:12px}.error-summary-fixed{top:70px;right:16px}.error-panel-fixed{top:130px;right:16px;left:16px;width:auto}.error-handling-container{padding:24px;margin:16px}}.mat-mdc-menu-panel{background:#fffc!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:12px!important;box-shadow:0 8px 24px #00000026!important}.mat-mdc-menu-item{color:var(--text-color)!important}.mat-mdc-menu-item:hover:not([disabled]){background:#2196f31a!important;color:var(--primary-color)!important;border-radius:6px}.mat-mdc-menu-item .mat-icon{color:var(--text-secondary)!important}.mat-mdc-menu-item:hover:not([disabled]) .mat-icon{color:var(--primary-color)!important}.mat-mdc-dialog-container{background:#ffffffd9!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:16px!important;box-shadow:0 12px 40px #0003!important}[data-theme=dark] .mat-mdc-menu-panel{background:#1e1e1ecc!important;border-color:#ffffff26!important}[data-theme=dark] .mat-mdc-dialog-container{background:#1e1e1ed9!important;border-color:#fff3!important}