:root[data-theme='dark']{--md-sys-color-primary:#2a7b9e;--md-sys-color-primary-container:#003243;--md-sys-color-on-primary:#e8f9ff;--md-sys-color-on-primary-container:#bfeaf7;--md-sys-color-primary-hover:#3293b9;--md-sys-color-secondary:#2ea6cf;--md-sys-color-secondary-container:#002d45;--md-sys-color-on-secondary:#001f2b;--md-sys-color-on-secondary-container:#bfeaf7;--md-sys-color-tertiary:#4faed6;--md-sys-color-tertiary-container:#002735;--md-sys-color-on-tertiary:#001c26;--md-sys-color-on-tertiary-container:#bfdff0;--md-sys-color-error:#ffb4ab;--md-sys-color-error-container:#93000a;--md-sys-color-on-error:#690005;--md-sys-color-on-error-container:#ffdad6;--md-sys-color-success:#57b657;--md-sys-color-success-container:#132f14;--md-sys-color-on-success:#0a2f0c;--md-sys-color-on-success-container:#86d786;--md-sys-color-surface:#141318;--md-sys-color-surface-variant:#3b3940;--md-sys-color-surface-container:#18161b;--md-sys-color-surface-container-high:#201e23;--md-sys-color-surface-container-highest:#2a282d;--md-sys-color-on-surface:#e6e1e5;--md-sys-color-on-surface-variant:#cac4d0;--md-sys-color-outline:#938f99;--md-sys-color-outline-variant:#49454f;--md-sys-elevation-1:0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15);--md-sys-elevation-2:0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15);--md-sys-elevation-3:0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3);--md-sys-elevation-4:0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3);--md-sys-shape-corner-small:8px;--md-sys-shape-corner-medium:12px;--md-sys-shape-corner-large:16px;--md-sys-shape-corner-extra-large:28px}:root[data-theme='light']{--md-sys-color-primary:#229ed9;--md-sys-color-primary-container:#d9f3ff;--md-sys-color-on-primary:#ffffff;--md-sys-color-on-primary-container:#00344a;--md-sys-color-primary-hover:#1c8fc6;--md-sys-color-secondary:#39c2f1;--md-sys-color-secondary-container:#cfefff;--md-sys-color-on-secondary:#00344a;--md-sys-color-on-secondary-container:#003e57;--md-sys-color-tertiary:#1f8acb;--md-sys-color-tertiary-container:#d1eeff;--md-sys-color-on-tertiary:#ffffff;--md-sys-color-on-tertiary-container:#002e42;--md-sys-color-error:#ba1a1a;--md-sys-color-error-container:#ffdad6;--md-sys-color-on-error:#ffffff;--md-sys-color-on-error-container:#410002;--md-sys-color-success:#2e7d32;--md-sys-color-success-container:#c8e6c9;--md-sys-color-on-success:#ffffff;--md-sys-color-on-success-container:#1b5e20;--md-sys-color-surface:#fffbfe;--md-sys-color-surface-variant:#e7e0ec;--md-sys-color-surface-container:#f3edf7;--md-sys-color-surface-container-high:#ece6f0;--md-sys-color-surface-container-highest:#e6e0e9;--md-sys-color-on-surface:#1c1b1f;--md-sys-color-on-surface-variant:#49454f;--md-sys-color-outline:#79747e;--md-sys-color-outline-variant:#cac4d0;--md-sys-elevation-1:0 1px 2px rgba(0,0,0,0.08),0 1px 3px 1px rgba(0,0,0,0.05);--md-sys-elevation-2:0 1px 2px rgba(0,0,0,0.08),0 2px 6px 2px rgba(0,0,0,0.05);--md-sys-elevation-3:0 4px 8px 3px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.08);--md-sys-elevation-4:0 6px 10px 4px rgba(0,0,0,0.05),0 2px 3px rgba(0,0,0,0.08);--md-sys-shape-corner-small:8px;--md-sys-shape-corner-medium:12px;--md-sys-shape-corner-large:16px;--md-sys-shape-corner-extra-large:28px}:root{--md-sys-color-primary:#3ea0c9;--md-sys-color-primary-container:#003243;--md-sys-color-on-primary:#e8f9ff;--md-sys-color-on-primary-container:#bfeaf7;--md-sys-color-primary-hover:#3293b9;--md-sys-color-secondary:#2ea6cf;--md-sys-color-secondary-container:#002d45;--md-sys-color-on-secondary:#001f2b;--md-sys-color-on-secondary-container:#bfeaf7;--md-sys-color-tertiary:#4faed6;--md-sys-color-tertiary-container:#002735;--md-sys-color-on-tertiary:#001c26;--md-sys-color-on-tertiary-container:#bfdff0;--md-sys-color-error:#ffb4ab;--md-sys-color-error-container:#93000a;--md-sys-color-on-error:#690005;--md-sys-color-on-error-container:#ffdad6;--md-sys-color-success:#57b657;--md-sys-color-success-container:#132f14;--md-sys-color-on-success:#0a2f0c;--md-sys-color-on-success-container:#86d786;--md-sys-color-surface:#141318;--md-sys-color-surface-variant:#3b3940;--md-sys-color-surface-container:#18161b;--md-sys-color-surface-container-high:#201e23;--md-sys-color-surface-container-highest:#2a282d;--md-sys-color-on-surface:#e6e1e5;--md-sys-color-on-surface-variant:#cac4d0;--md-sys-color-outline:#938f99;--md-sys-color-outline-variant:#3b3940;--md-sys-elevation-1:0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15);--md-sys-elevation-2:0 1px 2px rgba(0,0,0,0.3),0 2px 6px 2px rgba(0,0,0,0.15);--md-sys-elevation-3:0 4px 8px 3px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.3);--md-sys-elevation-4:0 6px 10px 4px rgba(0,0,0,0.15),0 2px 3px rgba(0,0,0,0.3);--md-sys-shape-corner-small:8px;--md-sys-shape-corner-medium:12px;--md-sys-shape-corner-large:16px;--md-sys-shape-corner-extra-large:28px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);line-height:1.6;min-height:100vh;transition:background-color 0.3s ease,color 0.3s ease}.app-bar{background:var(--md-sys-color-primary);padding:16px 0;box-shadow:var(--md-sys-elevation-2);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px)}.app-bar-content{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.app-bar-left{display:flex;align-items:center;gap:16px}.app-bar-right{display:flex;align-items:center;gap:16px}.app-bar-title{font-size:1.5rem;font-weight:500;color:var(--md-sys-color-on-primary-container);letter-spacing:0.5px;display:flex;align-items:center;gap:12px;text-decoration:none}.app-bar-icon{font-size:2rem;text-decoration:none;color:var(--md-sys-color-on-primary-container);display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer}.user-menu-container{position:relative;display:flex;align-items:center}.user-menu-toggle{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);color:var(--md-sys-color-on-primary-container);backdrop-filter:blur(10px);font-family:'Roboto',sans-serif;font-size:0.875rem;font-weight:500}.user-menu-toggle:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.user-menu-toggle[aria-expanded='true'] .dropdown-arrow{transform:rotate(180deg)}.user-menu-toggle .username{font-size:0.875rem;font-weight:500;display:inline}.user-menu-toggle .settings-gear{font-size:1.5rem;transition:transform 0.3s ease;margin-left:4px}.user-menu-toggle[aria-expanded='true'] .settings-gear{transform:rotate(90deg)}.user-dropdown-menu{position:absolute;top:calc(100% + 12px);right:0;background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);box-shadow:var(--md-sys-elevation-3);min-width:240px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.95);transition:all 0.2s cubic-bezier(0.4,0,0.2,1);z-index:1100}.user-dropdown-menu[aria-hidden='false']{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--md-sys-color-on-surface);text-decoration:none;border:none;background:none;width:100%;text-align:left;font-size:0.875rem;font-weight:500;font-family:'Roboto',sans-serif;cursor:pointer;transition:background-color 0.2s ease}.dropdown-item:hover{background-color:var(--md-sys-color-surface-container-highest)}.dropdown-item .material-icons{font-size:1.25rem;color:var(--md-sys-color-on-surface-variant)}.dropdown-item-danger{color:var(--md-sys-color-error)}.dropdown-item-danger .material-icons{color:var(--md-sys-color-error)}.dropdown-item-danger:hover{background-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.theme-toggle-item{position:relative}.dropdown-divider{height:1px;margin:8px 0;background-color:var(--md-sys-color-outline-variant);border:none}.dropdown-form{margin:0;padding:0}.btn-logout{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:6px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);color:var(--md-sys-color-on-primary-container);font-size:0.8rem;font-weight:500;font-family:'Roboto',sans-serif}.btn-logout:hover{background:rgba(255,100,100,0.3);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.btn-logout .material-icons{font-size:1.1rem}.logout-text{display:inline}.container-main{max-width:1400px;margin:32px auto;padding:0 24px}.card{background-color:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1);overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1),background-color 0.3s ease,border-color 0.3s ease;border:1px solid var(--md-sys-color-outline-variant)}.card:hover{box-shadow:var(--md-sys-elevation-3);transform:translateY(-2px)}.card-header{padding:20px 24px;border-bottom:1px solid var(--md-sys-color-outline-variant);font-weight:500;font-size:1.25rem;display:flex;align-items:center;gap:12px}.card-header.primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary-container)}.card-header.success{background:var(--md-sys-color-success);color:var(--md-sys-color-on-success-container)}.card-body{padding:24px}.form-label{display:block;margin-bottom:8px;color:var(--md-sys-color-on-surface-variant);font-size:0.875rem;font-weight:500;letter-spacing:0.5px;transition:color 0.3s ease}.form-control,.form-select{width:100%;padding:16px;background-color:var(--md-sys-color-surface-container-highest);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);color:var(--md-sys-color-on-surface);font-size:1rem;font-family:'Roboto',sans-serif;transition:all 0.2s ease,background-color 0.3s ease,border-color 0.3s ease}.form-control:focus,.form-select:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent);background-color:var(--md-sys-color-surface-container)}.form-control::placeholder{color:var(--md-sys-color-on-surface-variant);opacity:0.6}.btn{padding:12px 24px;border:none;border-radius:var(--md-sys-shape-corner-large);font-size:0.875rem;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}.btn:hover::before{width:300px;height:300px}.btn-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary-container);box-shadow:var(--md-sys-elevation-1)}.btn-primary:hover{box-shadow:var(--md-sys-elevation-3);transform:translateY(-2px)}.btn-secondary{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary-container);box-shadow:var(--md-sys-elevation-1)}.btn-secondary:hover{box-shadow:var(--md-sys-elevation-3);transform:translateY(-2px)}.btn-success{background:var(--md-sys-color-success);color:var(--md-sys-color-on-success-container);box-shadow:var(--md-sys-elevation-1)}.btn-success:hover{box-shadow:var(--md-sys-elevation-3);transform:translateY(-2px)}.btn:disabled{background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface);opacity:0.38;cursor:not-allowed;box-shadow:none}.btn-lg{padding:16px 32px;font-size:1rem}.input-group{display:flex;gap:8px}.input-group .form-control{flex:1}.input-group .btn{white-space:nowrap}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:text-bottom;border:0.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spinner-border 0.75s linear infinite}.spinner-border-sm{width:0.875rem;height:0.875rem;border-width:0.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.alert-warning{background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-left:4px solid var(--md-sys-color-tertiary)}.preview-box{background-color:var(--md-sys-color-surface-container);border:2px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:24px;min-height:250px;white-space:pre-wrap;font-family:'Roboto Mono',monospace;font-size:0.9rem;line-height:1.6;color:var(--md-sys-color-on-surface);box-shadow:inset 0 2px 4px rgba(0,0,0,0.3);transition:background-color 0.3s ease,border-color 0.3s ease,color 0.3s ease}.preview-image{max-width:100%;height:auto;border-radius:var(--md-sys-shape-corner-small);box-shadow:var(--md-sys-elevation-1)}.preview-footer{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.preview-avatar-container{width:100%;display:flex;align-items:center;justify-content:center}.preview-avatar{max-width:100%;height:auto;max-height:400px;border-radius:var(--md-sys-shape-corner-small);object-fit:contain;box-shadow:var(--md-sys-elevation-1);border:2px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-highest)}.alert{padding:16px 20px;border-radius:var(--md-sys-shape-corner-medium);margin-top:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--md-sys-elevation-1);animation:slideIn 0.3s ease}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-success{background-color:var(--md-sys-color-success-container);color:var(--md-sys-color-on-success-container);border-left:4px solid var(--md-sys-color-success)}.alert-danger{background-color:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-left:4px solid var(--md-sys-color-error)}.alert-info{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-left:4px solid var(--md-sys-color-secondary)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:24px;margin:0}@media (max-width:1100px){.row{grid-template-columns:1fr}}.mb-3{margin-bottom:20px}.mt-3{margin-top:20px}.d-grid{display:grid}.gap-2{gap:12px}.text-danger{color:var(--md-sys-color-error);font-size:0.875rem;margin-top:6px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--md-sys-color-surface)}::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-outline-variant)}@media (max-width:768px){.app-bar-title{font-size:1.2rem}.app-bar-icon{font-size:1.5rem}.app-bar-content{padding:0 16px;flex-wrap:nowrap}.user-menu-toggle .username{display:none}.user-menu-toggle .user-icon{display:none}.user-menu-toggle{padding:8px 12px;min-width:auto}.user-dropdown-menu{min-width:200px}.app-bar-right{margin-left:auto;flex-shrink:0}}@media (max-width:480px){.app-bar-title{font-size:1rem}.app-bar-left{flex:1;min-width:0;overflow:hidden}.app-bar-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.card-header-icon{font-size:1.5rem}.card-header-flex{display:flex;align-items:center;justify-content:space-between}.card-header-left{display:flex;align-items:center;gap:12px}.form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:768px){.form-row-2col{grid-template-columns:1fr}}.login-container{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:2rem 1rem}.login-card{background:var(--md-sys-color-surface);border-radius:28px;box-shadow:var(--md-sys-elevation-2);padding:2.5rem;width:100%;max-width:480px;animation:fadeIn 0.3s ease-in}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:2rem}.login-icon{font-size:3rem;display:block;margin-bottom:1rem}.login-header h2{font-size:1.75rem;font-weight:500;color:var(--md-sys-color-on-surface);margin:0 0 0.5rem 0}.login-header p{font-size:0.95rem;color:var(--md-sys-color-on-surface-variant);margin:0}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:0.5rem}.form-label{font-size:0.875rem;font-weight:500;color:var(--md-sys-color-on-surface);display:flex;align-items:center;gap:0.5rem}.form-label .material-icons{font-size:1.25rem}.form-input{padding:1rem;border:1px solid var(--md-sys-color-outline);border-radius:12px;font-size:1rem;font-family:'Roboto',sans-serif;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);transition:all 0.2s ease}.form-input:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:0 0 0 3px var(--md-sys-color-primary-container)}.btn-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;padding:1rem 2rem;border-radius:100px;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:all 0.2s ease;font-family:'Roboto',sans-serif;margin-top:0.5rem;position:relative;overflow:hidden}.btn-primary:hover{background:var(--md-sys-color-primary-hover);box-shadow:var(--md-sys-elevation-1)}.btn-primary:active{transform:scale(0.98)}.btn-full{width:100%}.login-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--md-sys-color-outline-variant)}.info-text{font-size:0.85rem;color:var(--md-sys-color-on-surface-variant);margin:0;text-align:center;line-height:1.6}.info-text .material-icons{font-size:1.1rem;vertical-align:text-bottom;margin-right:0.25rem}.info-text a{color:var(--md-sys-color-primary);text-decoration:none;font-weight:500;transition:all 0.2s ease;border-bottom:1px solid transparent}.info-text a:hover{color:var(--md-sys-color-primary-hover);border-bottom-color:var(--md-sys-color-primary)}.info-text a:active{color:var(--md-sys-color-primary);opacity:0.8}.info-text a:link,.info-text a:visited{color:var(--md-sys-color-primary)}.info-text a:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-bottom-color:var(--md-sys-color-primary)}@media (hover:none){.info-text a{-webkit-tap-highlight-color:rgba(0,0,0,0)}}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.6);transform:scale(0);animation:ripple-animation 0.6s ease-out;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}.form-input.invalid{border-color:var(--md-sys-color-error);animation:shake 0.3s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media (max-width:600px){.login-card{padding:2rem 1.5rem}.login-header h2{font-size:1.5rem}}