.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,var(--ui-panel-bg, #667eea) 0%,var(--ui-accent, #764ba2) 100%);position:relative;overflow:hidden}.auth-background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;--bg-brightness: .5;--bg-transition: 2s;--bg-ken-burns-scale: 1.1;--bg-ken-burns-duration: 30s}.auth-bg-image{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(var(--bg-brightness))}.auth-bg-image.ken-burns{animation:auth-ken-burns var(--bg-ken-burns-duration) ease-in-out infinite alternate}.auth-bg-image.current{z-index:1;opacity:1;transition:opacity var(--bg-transition) ease-in-out}.auth-bg-image.next{z-index:0;opacity:1}.auth-bg-image.current.fading-out{opacity:0}@keyframes auth-ken-burns{0%{transform:scale(1) translate(0)}to{transform:scale(var(--bg-ken-burns-scale)) translate(-2%,-2%)}}.auth-card{position:relative;z-index:1;background:#1a1a2ed9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:2rem;border-radius:10px;box-shadow:0 10px 25px #0006;width:100%;max-width:400px;border:1px solid rgba(255,255,255,.1)}.auth-language-selector{position:absolute;top:12px;right:12px;z-index:2}.auth-panel-image{display:flex;justify-content:center;margin-bottom:1rem}.auth-panel-image.top{margin-bottom:1.5rem}.auth-panel-image.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;margin:0}.auth-panel-image.bottom{margin-top:1.5rem;margin-bottom:0}.auth-panel-image img{max-width:100%;max-height:120px;object-fit:contain;border-radius:8px}.auth-card h1{margin-bottom:1.5rem;text-align:center;color:var(--ui-text, #333)}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--ui-text, #555);font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid var(--ui-panel-border, #ddd);border-radius:5px;font-size:1rem;background:var(--ui-input-bg, white);color:var(--ui-text, #333)}.form-group input:focus{outline:none;border-color:var(--ui-accent, #667eea)}.password-input-wrapper{position:relative}.password-input-wrapper input{padding-right:2.75rem}.password-toggle-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ui-muted, #888);padding:.25rem;display:flex;align-items:center;justify-content:center;width:auto;transition:color .2s}.password-toggle-btn:hover{color:var(--ui-text, #ccc);filter:none}.auth-card button:not(.password-toggle-btn){width:100%;padding:.75rem;background:var(--ui-button, #667eea);color:var(--ui-button-text, white);border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:filter .2s}.auth-card button:not(.password-toggle-btn):hover:not(:disabled){filter:brightness(1.15)}.auth-card button:not(.password-toggle-btn):disabled{opacity:.6;cursor:not-allowed}.error{color:var(--ui-danger, #e74c3c);margin-bottom:1rem;padding:.5rem;background:#e74c3c1a;border:1px solid var(--ui-danger, #e74c3c);border-radius:5px;text-align:center}.auth-link{text-align:center;margin-top:1rem;color:var(--ui-muted, #666)}.auth-link a{color:var(--ui-accent, #667eea);text-decoration:none;font-weight:600}.auth-link a:hover{text-decoration:underline}.auth-error{color:var(--ui-danger, #e74c3c);margin-bottom:1rem;padding:.75rem;background:#e74c3c1a;border:1px solid var(--ui-danger, #e74c3c);border-radius:5px;text-align:center}.auth-success{color:var(--ui-success, #27ae60);margin-bottom:1rem;padding:.75rem;background:#27ae601a;border:1px solid var(--ui-success, #27ae60);border-radius:5px;text-align:center}.auth-warning{color:var(--ui-warning, #f39c12);margin-bottom:1rem;padding:.75rem;background:#f39c121a;border:1px solid var(--ui-warning, #f39c12);border-radius:5px;text-align:center}.auth-success-inline{color:var(--ui-success, #27ae60);font-weight:500;margin-top:.5rem}.auth-warning p{margin:0 0 .5rem}.auth-loading{text-align:center;padding:2rem;color:var(--ui-muted, #888)}.auth-description{text-align:center;color:var(--ui-muted, #666);margin-bottom:1.5rem;line-height:1.5}.auth-section{margin-bottom:1rem}.auth-divider{display:flex;align-items:center;margin:1.5rem 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--ui-panel-border, #ddd)}.auth-divider span{padding:0 1rem;color:var(--ui-muted, #999);font-size:.9rem}.auth-button{width:100%;padding:.75rem;background:var(--ui-button, #667eea);color:var(--ui-button-text, white);border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:filter .2s}.auth-button:hover:not(:disabled){filter:brightness(1.15)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-links{text-align:center;margin-top:1rem}.auth-link-button{background:none;border:none;color:var(--ui-accent, #667eea);cursor:pointer;font-size:.9rem;padding:.5rem;text-decoration:underline}.auth-link-button:hover{opacity:.8}.code-inputs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.code-input{width:3rem;height:3.5rem;text-align:center;font-size:1.5rem;font-weight:600;border:2px solid var(--ui-panel-border, #ddd);border-radius:8px;background:var(--ui-input-bg, white);color:var(--ui-text, #333)}.code-input:focus{outline:none;border-color:var(--ui-accent, #667eea)}.backup-code-input{width:100%;padding:1rem;text-align:center;font-size:1.2rem;font-family:monospace;letter-spacing:.1em;border:2px solid var(--ui-panel-border, #ddd);border-radius:8px;background:var(--ui-input-bg, white);color:var(--ui-text, #333)}.backup-code-input:focus{outline:none;border-color:var(--ui-accent, #667eea)}.oauth-buttons{display:flex;flex-direction:column;gap:.75rem}.oauth-button{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.75rem 1rem;border:1px solid var(--ui-panel-border, #ddd);border-radius:5px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;background:var(--ui-input-bg, white);color:var(--ui-text, #333)}.oauth-button:hover{border-color:var(--ui-accent, #667eea);background:var(--ui-hover-bg, #f5f5f5)}.oauth-icon{flex-shrink:0}.oauth-google{border-color:#dadce0}.oauth-google:hover{border-color:#4285f4;background:#4285f40d}.oauth-discord{border-color:#5865f2}.oauth-discord:hover{background:#5865f21a}.passkey-button{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:var(--ui-panel-bg, #1a1a2e);color:var(--ui-text, white);border:2px solid var(--ui-accent, #667eea);border-radius:5px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s}.passkey-button:hover:not(:disabled){background:var(--ui-accent, #667eea)}.passkey-button:disabled{opacity:.6;cursor:not-allowed}.passkey-icon{flex-shrink:0}.auth-card h2{margin-bottom:1rem;text-align:center;color:var(--ui-text, #333)}.form-hint{display:block;margin-top:.25rem;font-size:.8rem;color:var(--ui-muted, #888)}.password-requirements{margin-top:.5rem;padding:.75rem;background:#e74c3c0d;border:1px solid rgba(231,76,60,.2);border-radius:5px;font-size:.85rem}.password-requirements.valid{background:#2ecc710d;border-color:#2ecc714d}.password-requirements ul{margin:0;padding-left:1.25rem}.password-requirements li{margin-bottom:.25rem}.requirement-missing{color:var(--ui-danger, #e74c3c)}.requirement-met{color:var(--ui-success, #2ecc71)}.security-settings{max-width:800px;margin:0 auto;padding:2rem}.security-section{background:var(--ui-panel-bg, white);border:1px solid var(--ui-panel-border, #ddd);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.security-section h3{margin-top:0;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--ui-panel-border, #eee);color:var(--ui-text, #333)}.security-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--ui-panel-border, #eee)}.security-item:last-child{border-bottom:none}.security-item-info{flex:1}.security-item-title{font-weight:500;color:var(--ui-text, #333)}.security-item-description{font-size:.85rem;color:var(--ui-muted, #666);margin-top:.25rem}.security-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.security-badge-enabled{background:#2ecc711a;color:var(--ui-success, #2ecc71)}.security-badge-disabled{background:#e74c3c1a;color:var(--ui-danger, #e74c3c)}.security-action-btn{padding:.5rem 1rem;border:1px solid var(--ui-panel-border, #ddd);border-radius:5px;background:var(--ui-input-bg, white);color:var(--ui-text, #333);cursor:pointer;font-size:.9rem;transition:all .2s}.security-action-btn:hover{border-color:var(--ui-accent, #667eea);background:var(--ui-hover-bg, #f5f5f5)}.security-action-btn-danger{border-color:var(--ui-danger, #e74c3c);color:var(--ui-danger, #e74c3c)}.security-action-btn-danger:hover{background:var(--ui-danger, #e74c3c);color:#fff}.session-list{list-style:none;padding:0;margin:0}.session-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border:1px solid var(--ui-panel-border, #eee);border-radius:5px;margin-bottom:.5rem}.session-info{flex:1}.session-device{font-weight:500;color:var(--ui-text, #333)}.session-details{font-size:.8rem;color:var(--ui-muted, #666)}.session-current{background:#2ecc710d;border-color:var(--ui-success, #2ecc71)}.passkey-list{list-style:none;padding:0;margin:0}.passkey-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border:1px solid var(--ui-panel-border, #eee);border-radius:5px;margin-bottom:.5rem}.passkey-info{flex:1}.passkey-name{font-weight:500;color:var(--ui-text, #333)}.passkey-details{font-size:.8rem;color:var(--ui-muted, #666)}.provider-list{display:flex;flex-direction:column;gap:.5rem}.provider-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border:1px solid var(--ui-panel-border, #eee);border-radius:5px}.provider-info{display:flex;align-items:center;gap:.75rem}.provider-name{font-weight:500;color:var(--ui-text, #333);text-transform:capitalize}.provider-email{font-size:.8rem;color:var(--ui-muted, #666)}.language-selector{display:flex;gap:4px;align-items:center}.language-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--border-color, #444);border-radius:4px;background:transparent;color:var(--text-secondary, #999);cursor:pointer;font-size:12px;transition:all .2s}.language-btn:hover{background:var(--bg-hover, rgba(255, 255, 255, .1));color:var(--text-primary, #fff)}.language-btn.active{background:var(--accent-color, #5a9a7a);color:#fff;border-color:var(--accent-color, #5a9a7a)}.language-flag{font-size:14px;line-height:1}.language-code{font-weight:600;font-size:11px;text-transform:uppercase}.language-selector-compact{padding:6px 10px;border:1px solid var(--border-color, #444);border-radius:6px;background:var(--bg-secondary, #1a1a2e);color:var(--text-primary, #fff);font-size:13px;cursor:pointer;outline:none}.language-selector-compact:focus{border-color:var(--accent-color, #5a9a7a)}.language-selector-compact option{background:var(--bg-secondary, #1a1a2e);color:var(--text-primary, #fff)}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.5rem;color:#666}:root{--z-playfield-object: 1;--z-playfield-controls: 10;--z-playfield-overlay: 100;--z-panel: 1000;--z-toolbar: 2000;--z-dropdown: 5000;--z-modal-backdrop: 9000;--z-modal: 10000;--z-context-backdrop: 29000;--z-context-menu: 30000;--z-fullscreen: 50000;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-selection: 0 0 0 3px var(--color-selection), 0 0 10px var(--color-selection-glow);--color-selection: #00c8ff;--color-selection-glow: rgba(0, 200, 255, .5);--color-selection-border: #00d1ff;--color-locked: #ffc107;--color-hidden: #9c27b0;--color-danger: #ff6b6b;--color-success: #4CAF50;--color-warning: #ffa726;--color-info: #4a9eff;--color-menu-bg: rgba(40, 40, 40, .98);--color-menu-hover: rgba(90, 140, 110, .3);--color-menu-divider: rgba(255, 255, 255, .1);--color-menu-text: #e0e0e0;--color-menu-text-muted: #aaa;--color-handle-bg: rgba(40, 40, 40, .9);--color-handle-hover: rgba(80, 130, 200, .95);--color-handle-active: rgba(60, 110, 180, .95);--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 10px;--font-size-xs: 10px;--font-size-sm: 11px;--font-size-md: 12px;--font-size-lg: 14px;--font-size-xl: 16px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--ui-bg, #0d2e1a);color:var(--ui-text, #e0e0e0)}#root{width:100%;height:100vh;overflow:hidden}:root{--breakpoint-desktop: 1200px;--breakpoint-tablet: 768px;--breakpoint-mobile: 480px;--breakpoint-small: 360px;--touch-target-min: 44px;--touch-target-comfortable: 48px;--touch-target-large: 56px;--sat: 0px;--sar: 0px;--sab: 0px;--sal: 0px;--mobile-padding: 16px;--mobile-padding-sm: 8px;--mobile-gap: 12px;--mobile-nav-height: 56px;--mobile-drawer-width: 280px}@supports (padding: env(safe-area-inset-top)){:root{--sat: env(safe-area-inset-top);--sar: env(safe-area-inset-right);--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left)}}@media (max-width: 768px){.desktop-only{display:none!important}}@media (min-width: 769px){.mobile-only{display:none!important}}@media (max-width: 768px){.tablet-hide{display:none!important}}@media (max-width: 480px){.phone-hide{display:none!important}}@media (pointer: coarse){button,[role=button],input[type=checkbox],input[type=radio],select,.clickable,.interactive{min-width:var(--touch-target-min);min-height:var(--touch-target-min)}a{padding:4px}}button,input,select,textarea,a{touch-action:manipulation}.scroll-container,.floating-panel-content,.sidebar-submenu{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@media (pointer: coarse){.scroll-container::-webkit-scrollbar,.floating-panel-content::-webkit-scrollbar{display:none}.scroll-container,.floating-panel-content{scrollbar-width:none;-ms-overflow-style:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (pointer: coarse){.no-select,.floating-panel-header,.mobile-nav-bar,.action-bar{-webkit-user-select:none;user-select:none}}@media (pointer: coarse){.draggable{cursor:default}.resize-handle{width:20px!important;height:20px!important}}@media (pointer: coarse){*:focus{outline:none}*:focus-visible{outline:2px solid var(--ui-accent, #667eea);outline-offset:2px}}.full-height{height:100vh;height:100dvh}.min-full-height{min-height:100vh;min-height:100dvh}@media (orientation: portrait) and (max-width: 768px){.landscape-only{display:none!important}}@media (orientation: landscape) and (max-height: 500px){.portrait-only{display:none!important}.mobile-nav-bar{--mobile-nav-height: 48px}}.safe-area-top{padding-top:var(--sat)}.safe-area-bottom{padding-bottom:var(--sab)}.safe-area-left{padding-left:var(--sal)}.safe-area-right{padding-right:var(--sar)}.safe-area-all{padding-top:var(--sat);padding-right:var(--sar);padding-bottom:var(--sab);padding-left:var(--sal)}.mobile-grid{display:grid;gap:var(--mobile-gap)}@media (max-width: 480px){.mobile-grid{grid-template-columns:1fr}}@media (min-width: 481px) and (max-width: 768px){.mobile-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 769px){.mobile-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width: 768px){input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],textarea,select{font-size:16px;padding:12px;border-radius:8px}}@media (max-width: 768px){.modal-fullscreen-mobile{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border-radius:0!important;margin:0!important;transform:none!important}}@media (hover: none){.hover-effect:hover{background:inherit;transform:none}}@media (hover: hover){.hover-effect:hover{background:#ffffff1a}}@media (pointer: coarse){[title]:after,.tooltip{display:none!important}}@media (max-width: 768px){.context-menu,.shape-context-menu{min-width:200px;padding:8px}.context-menu-item{padding:12px 16px;font-size:15px}}.debug-touch-targets button,.debug-touch-targets [role=button],.debug-touch-targets .interactive{outline:2px dashed red}.debug-safe-areas:before{content:"";position:fixed;top:0;left:0;right:0;height:var(--sat);background:#ff00004d;pointer-events:none;z-index:99999}.debug-safe-areas:after{content:"";position:fixed;bottom:0;left:0;right:0;height:var(--sab);background:#0000ff4d;pointer-events:none;z-index:99999}.tap-to-place-selected{outline:3px solid #f39c12!important;outline-offset:2px;animation:tapToPlaceSelected .8s ease-in-out infinite alternate;position:relative}.tap-to-place-selected:after{content:"u2713";position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:#f39c12;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}@keyframes tapToPlaceSelected{0%{box-shadow:0 0 8px #f39c1280}to{box-shadow:0 0 16px #f39c12cc}}.tap-to-place-target-active{cursor:crosshair}.tap-to-place-target-active:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px dashed rgba(243,156,18,.5);border-radius:inherit;pointer-events:none;animation:targetPulse 1.5s ease-in-out infinite}@keyframes targetPulse{0%,to{border-color:#f39c124d}50%{border-color:#f39c12b3}}.placement-indicator{position:fixed;bottom:calc(var(--mobile-nav-height, 56px) + var(--sab, 0px));left:0;right:0;display:none;z-index:9400;padding:8px 16px;pointer-events:none}@media (max-width: 768px){.placement-indicator{display:block}}.placement-indicator-content{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f39c12f2;border-radius:10px;color:#fff;font-size:14px;font-weight:500;box-shadow:0 4px 20px #0000004d;pointer-events:auto}.placement-indicator-icon{font-size:20px}.placement-indicator-text{flex:1}.placement-indicator-cancel{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:50%;color:#fff;font-size:14px;cursor:pointer}.placement-indicator-cancel:active{background:#ffffff4d}