:root{--color-primary: #0099cc;--color-primary-dark: #007aa6;--color-primary-light: #33aadd;--color-secondary: #2D2D2D;--color-accent: #0099cc;--color-accent-dark: #007aa6;--color-background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-background-light: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-background-light-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-surface: rgba(255, 255, 255, .1);--color-surface-elevated: rgba(255, 255, 255, .15);--color-surface-light: rgba(255, 255, 255, .1);--color-surface-elevated-light: rgba(255, 255, 255, .15);--color-text-primary: #FFFFFF;--color-text-secondary: #E5E5E5;--color-text-light: #ffffff;--color-text-muted: #B0B0B0;--color-text-inverse: #2c3e50;--color-success: #107C10;--color-error: #D13438;--color-warning: #FF8C00;--color-info: #0078D4;--color-border: #404040;--color-border-light: #505050;--color-border-focus: var(--color-primary);--color-border-subtle: #333333;--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--line-height-tight: 1.25;--line-height-base: 1.5;--line-height-relaxed: 1.625;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}*{box-sizing:border-box}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background:var(--color-background);margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}@media (prefers-color-scheme: light){:root{--color-background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-surface: rgba(255, 255, 255, .1);--color-surface-elevated: rgba(255, 255, 255, .15);--color-text-primary: #FFFFFF;--color-text-secondary: #E5E5E5;--color-text-muted: #B0B0B0;--color-border: rgba(255, 255, 255, .2);--color-border-light: rgba(255, 255, 255, .3);--color-border-subtle: rgba(255, 255, 255, .1)}}.dark-mode{--color-background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);--color-surface: rgba(255, 255, 255, .1);--color-surface-elevated: rgba(255, 255, 255, .15);--color-text-primary: #FFFFFF;--color-text-secondary: #E5E5E5;--color-text-muted: #B0B0B0;--color-border: rgba(255, 255, 255, .2);--color-border-light: rgba(255, 255, 255, .3);--color-border-subtle: rgba(255, 255, 255, .1)}p{font-size:var(--font-size-base);line-height:var(--line-height-base);margin-bottom:var(--space-md);color:var(--color-text-primary)}a{color:var(--color-primary);text-decoration:none;cursor:pointer;transition:color .2s ease}a:hover{color:var(--color-primary-dark);text-decoration:underline}button{cursor:pointer;font-family:inherit}.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--color-background);padding:var(--space-lg);position:relative;overflow:hidden}.auth-page:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgba(0,153,204,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(0,153,204,.1) 0%,transparent 50%),radial-gradient(circle at 40% 60%,rgba(51,170,221,.08) 0%,transparent 50%);pointer-events:none;animation:backgroundShimmer 20s ease-in-out infinite}@keyframes backgroundShimmer{0%,to{opacity:1}50%{opacity:.8}}.auth-card{background:#ffffff1a;padding:var(--space-2xl);border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #0006,0 10px 20px -8px #0000004d,inset 0 1px #fff3;max-width:460px;width:100%;border:1px solid rgba(255,255,255,.2);position:relative;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.auth-header{width:100%;margin-bottom:var(--space-xl)}.auth-card h1{font-family:var(--font-family-primary);font-size:var(--font-size-3xl);font-weight:700;color:var(--color-primary);margin:0 0 var(--space-sm) 0;text-align:center;width:100%;line-height:var(--line-height-tight)}.auth-card h2{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-lg) 0;text-align:center;width:100%}.auth-card p{font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-secondary);margin-bottom:var(--space-lg);text-align:center}.auth-card .subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-xl);text-align:center}.auth-button-container{display:flex;justify-content:center;width:100%}.auth-button-container .button{width:100%;justify-content:center}.auth-form{display:flex;flex-direction:column;gap:var(--space-xl);width:100%}.auth-form .form-section{display:flex;flex-direction:column;gap:var(--space-lg)}.auth-form .button-section{margin-top:var(--space-lg);padding-top:var(--space-lg)}.form-group{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md);width:100%}.form-group:last-child{margin-bottom:0}.form-divider{margin:var(--space-xl) 0;border:none;height:1px;background:var(--color-border-subtle);position:relative}.form-divider.with-text{display:flex;align-items:center;text-align:center;margin:var(--space-2xl) 0}.form-divider.with-text:before,.form-divider.with-text:after{content:"";flex:1;height:1px;background:var(--color-border-subtle)}.form-divider.with-text span{padding:0 var(--space-lg);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:500}.form-label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-xs)}.auth-card input,.auth-card select,.auth-card textarea{width:100%;padding:var(--space-md) var(--space-lg);border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family-primary);color:var(--color-text-primary);background:#ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 3px #0003,0 1px 2px #0000001a;position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.auth-card input:focus,.auth-card select:focus,.auth-card textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0099cc4d,0 4px 12px #09c3,inset 0 1px 3px #0003;transform:translateY(-2px) scale(1.01);background:#ffffff26}.auth-card input:hover,.auth-card select:hover,.auth-card textarea:hover{border-color:#ffffff4d;box-shadow:inset 0 1px 3px #0003,0 2px 4px #0000001a;transform:translateY(-1px);background:#ffffff1f}.auth-card input::placeholder,.auth-card select::placeholder,.auth-card textarea::placeholder{color:var(--color-text-muted);opacity:.7}.auth-card input:disabled,.auth-card select:disabled,.auth-card textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}.input-with-icon{position:relative}.input-with-icon input{padding-left:3rem}.input-with-icon .input-icon{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:var(--font-size-lg)}.button{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:var(--font-size-base);font-weight:500;font-family:var(--font-family-primary);border:none;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:44px;white-space:nowrap;position:relative;overflow:hidden}.button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.button:hover:before{left:100%}.button-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:var(--color-text-light);box-shadow:0 4px 16px #09c6,0 2px 8px #0099cc4d;border:1px solid var(--color-primary-light);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.button-primary:hover{background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));transform:translateY(-2px);box-shadow:0 8px 24px #0099cc80,0 4px 16px #09c6}.button-primary:active{transform:translateY(0);box-shadow:0 2px 8px #09c6,0 1px 4px #0099cc4d}.button-secondary{background:#ffffff1a;color:var(--color-text-primary);border:2px solid rgba(255,255,255,.2);box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.button-secondary:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-1px);box-shadow:var(--shadow-md)}.button-outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:inset 0 0 0 0 var(--color-primary);transition:all .3s cubic-bezier(.4,0,.2,1)}.button-outline:hover{background:var(--color-primary);color:var(--color-text-light);box-shadow:inset 0 0 0 2px var(--color-primary);transform:translateY(-1px)}.button-link{background:transparent;color:var(--color-primary);padding:var(--space-sm);min-height:auto;font-weight:400}.button-link:hover{color:var(--color-primary-light);text-decoration:underline;transform:none}.button-success{background:linear-gradient(135deg,var(--color-success),#0d6e0d);color:var(--color-text-light);box-shadow:0 4px 16px #107c104d}.button-success:hover{background:linear-gradient(135deg,#198919,var(--color-success));transform:translateY(-2px);box-shadow:0 8px 24px #107c1066}.button-danger{background:linear-gradient(135deg,var(--color-error),#b02e32);color:var(--color-text-light);box-shadow:0 4px 16px #d134384d}.button-danger:hover{background:linear-gradient(135deg,#e94347,var(--color-error));transform:translateY(-2px);box-shadow:0 8px 24px #d1343866}.button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;background:var(--color-text-muted)!important;color:var(--color-surface)!important;box-shadow:none!important}.button:disabled:before{display:none}.button.full-width{width:100%}.button.loading{position:relative;pointer-events:none;color:transparent}.button.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;color:var(--color-text-light)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.button.loading.pulse{animation:pulse 2s ease-in-out infinite}.google-oauth-button{display:flex;padding:var(--space-md) var(--space-lg);align-items:center;justify-content:flex-start;gap:var(--space-lg);background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-md);cursor:pointer;text-decoration:none;font-weight:500;font-size:var(--font-size-base);color:var(--color-text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);min-height:44px;position:relative;overflow:hidden;width:100%;box-sizing:border-box;box-shadow:0 2px 8px #00000026,inset 0 1px #ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.google-oauth-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,120,212,.1),transparent);transition:left .5s ease}.google-oauth-button:hover:before{left:100%}.google-oauth-button:hover{background:#ffffff26;border-color:var(--color-primary);transform:translateY(-2px) scale(1.01);box-shadow:0 8px 24px #0099cc40,0 4px 16px #09c3,inset 0 1px #ffffff26;color:var(--color-primary)}.google-oauth-button:active{transform:translateY(0) scale(.99);transition:all .1s ease;box-shadow:0 2px 8px #0078d41a,0 1px 4px #0078d40d}.google-oauth-button:focus{outline:none;box-shadow:0 0 0 3px #0078d44d,0 4px 16px #0078d41a;border-color:var(--color-primary)}.google-oauth-button .google-icon{width:24px;height:24px;flex-shrink:0;margin-left:var(--space-md)}.google-oauth-button .button-text{flex:1;text-align:center;margin-right:calc(24px + var(--space-md) + var(--space-md));font-weight:600;letter-spacing:.025em}.google-oauth-button.compact{padding:var(--space-sm) var(--space-md);min-height:40px;font-size:var(--font-size-sm)}.google-oauth-button.compact .google-icon{width:18px;height:18px}.google-oauth-button.large{padding:var(--space-lg) var(--space-xl);min-height:56px;font-size:var(--font-size-lg)}.google-oauth-button.large .google-icon{width:24px;height:24px}.oauth-button{display:flex;padding:var(--space-md) var(--space-lg);align-items:center;justify-content:center;gap:var(--space-md);background:var(--color-surface-elevated);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;text-decoration:none;font-weight:500;font-size:var(--font-size-base);color:var(--color-text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);min-height:48px;width:100%;position:relative;overflow:hidden}.oauth-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0078d426,0 4px 16px #0078d41a}.oauth-button.google:hover{border-color:#4285f4;box-shadow:0 8px 24px #4285f426}.oauth-button.microsoft:hover{border-color:#00a1f1;box-shadow:0 8px 24px #00a1f126}.oauth-button.apple:hover{border-color:#000;box-shadow:0 8px 24px #00000026}.app{width:100vw;min-height:calc(100vh + -0px);display:flex;flex-direction:column;background:var(--color-background);color:var(--color-text-primary);position:relative}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-background);z-index:-1}.form-title{font-family:var(--font-family-primary);font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary);margin:0 0 var(--space-lg) 0;text-align:center;line-height:var(--line-height-tight)}.custom-form{display:flex;flex-direction:column;gap:var(--space-lg);background:#ffffff1a;padding:var(--space-2xl);border-radius:var(--radius-xl);box-shadow:0 25px 50px -12px #0006,0 10px 20px -8px #0000004d,inset 0 1px #fff3;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.custom-input{width:100%;padding:var(--space-md);border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family-primary);color:var(--color-text-primary);background:#ffffff1a;transition:border-color .2s ease,box-shadow .2s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.custom-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0099cc4d;background:#ffffff26}.custom-input::placeholder{color:var(--color-text-muted)}.format-message{padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-md)}.error-message,.format-message.error{background:#d134381a;border:2px solid var(--color-error);border-left:4px solid var(--color-error);color:var(--color-error);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-md);position:relative;box-shadow:0 4px 16px #d134381a}.success-message,.format-message.success{background:#107c101a;border:2px solid var(--color-success);border-left:4px solid var(--color-success);color:var(--color-success);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-md);position:relative;box-shadow:0 4px 16px #107c101a}.warning-message,.format-message.warning{background:#ff8c001a;border:2px solid var(--color-warning);border-left:4px solid var(--color-warning);color:var(--color-warning);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-md);position:relative;box-shadow:0 4px 16px #ff8c001a}.info-message,.format-message.info{background:#0078d41a;border:2px solid var(--color-info);border-left:4px solid var(--color-info);color:var(--color-info);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-md);position:relative;box-shadow:0 4px 16px #0078d41a}@keyframes slideInFromTop{0% {.btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); font-size: var(--font-size-base); font-weight: 500; font-family: var(--font-family-primary); border: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: all .3s cubic-bezier(.4,0,.2,1); min-height: 44px; white-space: nowrap; background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); color: var(--color-text-light); box-shadow: 0 4px 8px rgba(0,120,212,.2),0 2px 4px rgba(0,120,212,.15); position: relative; overflow: hidden;} .btn::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transition: left .5s ease;} .btn:hover::before {left: 100%;} .btn:hover {background: linear-gradient(135deg,var(--color-primary-light),var(--color-primary)); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 20px rgba(0,120,212,.3),0 4px 10px rgba(0,120,212,.2);} .btn:active {transform: translateY(0) scale(.98); transition: all .1s ease; box-shadow: 0 2px 4px rgba(0,120,212,.2),0 1px 2px rgba(0,120,212,.15);} .btn:focus {outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.4),0 4px 8px rgba(0,120,212,.2),0 2px 4px rgba(0,120,212,.15); transition: box-shadow .2s ease;} .btn:disabled {opacity: .6; cursor: not-allowed; transform: none !important; background: var(--color-text-muted) !important; box-shadow: none !important;} .btn:disabled::before {display: none;} .btn-secondary {background: var(--color-accent); color: var(--color-text-light);} .btn-secondary:hover {background: var(--color-accent-dark);} .btn-outline {background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); box-shadow: none;} .btn-outline:hover {background: var(--color-primary); color: var(--color-text-light);} .btn-danger {background: var(--color-error); color: var(--color-text-light);} .btn-danger:hover {background: #c0392b;} .btn-success {background: var(--color-success); color: var(--color-text-light);} .btn-success:hover {background: #219a52;} .btn-base {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: .75rem 1.5rem; border-radius: .5rem; font-weight: 600; font-family: var(--font-family-primary); font-size: var(--font-size-base); border: none; cursor: pointer; text-decoration: none; transition: background-color .2s ease,box-shadow .2s ease,transform .1s ease,border-color .2s ease; min-height: 48px; white-space: nowrap; position: relative; overflow: hidden;} .btn-primary {background: #1D4ED8; color: #FFFFFF; box-shadow: 0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(29,78,216,.2); border: 2px solid transparent;} .btn-primary:hover {background: #1E40AF; transform: translateY(-1px); box-shadow: 0 8px 12px rgba(0,0,0,.15),0 4px 8px rgba(29,78,216,.3);} .btn-primary:active {transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.1),0 1px 2px rgba(29,78,216,.2);} .btn-primary:focus {outline: none; box-shadow: 0 0 0 3px #93C5FD,0 4px 6px rgba(0,0,0,.1);} .btn-primary:focus-visible {outline: 2px solid #93C5FD; outline-offset: 2px;} .btn-secondary {background: var(--color-surface-elevated); color: var(--color-text-primary); box-shadow: none; border: 2px solid var(--color-border);} .btn-secondary:hover {background: var(--color-border-light); border-color: var(--color-border-light); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.05);} .btn-secondary:active {transform: translateY(0); background: var(--color-border); box-shadow: none;} .btn-secondary:focus {outline: none; box-shadow: 0 0 0 3px var(--color-border-light); border-color: var(--color-text-muted);} .btn-secondary:focus-visible {outline: 2px solid var(--color-border-light); outline-offset: 2px;} @media (prefers-color-scheme: dark) {.btn-secondary {background: var(--color-surface-elevated); color: var(--color-text-primary); border-color: var(--color-border);} .btn-secondary:hover {background: var(--color-border-light); border-color: var(--color-border-light);} .btn-secondary:active {background: var(--color-border);} .btn-secondary:focus {box-shadow: 0 0 0 3px var(--color-border-light); border-color: var(--color-text-muted);}} .dark-mode .btn-secondary {background: var(--color-surface-elevated); color: var(--color-text-primary); border-color: var(--color-border);} .dark-mode .btn-secondary:hover {background: var(--color-border-light); border-color: var(--color-border-light);} .dark-mode .btn-secondary:active {background: var(--color-border);} .dark-mode .btn-secondary:focus {box-shadow: 0 0 0 3px var(--color-border-light); border-color: var(--color-text-muted);} .btn-group {display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;} .btn-group > button + button,.btn-group > .btn-base + .btn-base,.btn-group > a + button,.btn-group > button + a {margin-left: .5rem;} .auth-button {display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); font-size: var(--font-size-base); font-weight: 600; font-family: var(--font-family-primary); border: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: all .3s cubic-bezier(.4,0,.2,1); min-height: 44px; white-space: nowrap; position: relative; overflow: hidden; text-align: center; line-height: 1; box-shadow: var(--shadow-sm); width: 100%;} .auth-button::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); transition: left .6s ease;} .auth-button:hover::before {left: 100%;} .auth-button.primary {background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); color: var(--color-text-light); font-weight: 600; padding: var(--space-md) var(--space-xl); min-height: 44px; box-shadow: 0 4px 16px rgba(0,120,212,.3),0 2px 8px rgba(0,120,212,.2); border: 2px solid var(--color-primary-light); letter-spacing: .025em;} .auth-button.primary:hover {background: linear-gradient(135deg,var(--color-primary-light),var(--color-primary)); transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 32px rgba(0,120,212,.4),0 6px 20px rgba(0,120,212,.3),0 0 0 1px rgba(255,255,255,.1);} .auth-button.primary:active {transform: translateY(0) scale(.98); transition: all .1s ease; box-shadow: 0 2px 8px rgba(0,120,212,.3),0 1px 4px rgba(0,120,212,.2);} .auth-button.primary:focus {outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.3),0 4px 16px rgba(0,120,212,.3),0 2px 8px rgba(0,120,212,.2);} .auth-button.secondary {background: var(--color-surface-elevated); color: var(--color-text-primary); font-weight: 500; padding: var(--space-md) var(--space-xl); min-height: 44px; border: 2px solid var(--color-border-light); box-shadow: 0 2px 8px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05); letter-spacing: .025em;} .auth-button.secondary:hover {background: linear-gradient(135deg,var(--color-border-light),var(--color-surface-elevated)); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 20px rgba(0,120,212,.18),0 4px 12px rgba(0,120,212,.15),inset 0 1px 0 rgba(255,255,255,.15);} .auth-button.secondary:active {transform: translateY(0) scale(.98); transition: all .1s ease; background: var(--color-border); box-shadow: 0 1px 4px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05);} .auth-button.secondary:focus {outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.2),0 2px 8px rgba(0,0,0,.1); border-color: var(--color-primary);} .auth-button.google-button {background: var(--color-surface-elevated); color: var(--color-text-primary); font-weight: 500; padding: var(--space-md) var(--space-xl); min-height: 44px; border: 2px solid var(--color-border); box-shadow: 0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.05); position: relative; letter-spacing: .025em;} .auth-button.google-button:hover {background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,120,212,.15),0 4px 16px rgba(0,120,212,.1),inset 0 1px 0 rgba(255,255,255,.1);} .auth-button.google-button:active {transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.05);} .auth-button.google-button:focus {outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.2),0 2px 8px rgba(0,0,0,.08); border-color: var(--color-primary);} .auth-mode-container {width: 100%; display: flex; flex-direction: column;} .google-oauth-section {margin: var(--space-lg) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); width: 100%;} .google-oauth-section.side-by-side {flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-lg);} .google-oauth-section.side-by-side .google-oauth-button {flex: 1; min-width: 0;} .google-oauth-section.centered {align-items: center; justify-content: center;} .google-oauth-section::before {content: ""; display: none;} .google-oauth-section.with-divider {margin: var(--space-xl) 0; padding: var(--space-lg) 0; border-top: 1px solid var(--color-border-subtle); position: relative;} .google-oauth-section.with-divider::before {content: "or"; display: block; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 var(--space-md); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500;} .oauth-divider {display: flex; align-items: center; margin: var(--space-xl) 0; position: relative;} .oauth-divider::before {content: ""; flex: 1; height: 1px; background: var(--color-border-subtle);} .oauth-divider::after {content: ""; flex: 1; height: 1px; background: var(--color-border-subtle);} .oauth-divider span {padding: 0 var(--space-lg); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500;} .auth-button.full-width {width: 100%; justify-content: center;} .auth-button:disabled {opacity: .5; cursor: not-allowed; transform: none !important; background: var(--color-text-muted) !important; color: var(--color-surface) !important; border-color: var(--color-text-muted) !important; box-shadow: none !important; pointer-events: none;} .auth-button:disabled::before {display: none;} .auth-button-group {display: flex; flex-direction: column; gap: var(--space-md); width: 100%;} .auth-button-group.horizontal {flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-md); align-items: stretch;} .auth-button-group.space-between {flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap;} .auth-button-group.space-between .auth-button {flex: 1; min-width: 140px; max-width: 200px;} .auth-button-group.horizontal .auth-button {flex: 1; min-width: 120px;} .auth-button-group.start {justify-content: flex-start;} .auth-button-group.end {justify-content: flex-end;} .auth-button-group.center {justify-content: center;} .auth-button-group.equal-width .auth-button {flex: 1; min-width: 0;} .auth-button-group.no-wrap {flex-wrap: nowrap;} .auth-button-group .auth-button + .auth-button {margin-top: 0;} .auth-button-group.responsive-stack {flex-direction: row; flex-wrap: wrap; gap: var(--space-md);} .auth-button-group.responsive-stack .auth-button {flex: 1; min-width: 150px;} .button-row {display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); width: 100%; margin-top: var(--space-lg);} .button-row .auth-button {flex: 1; min-width: 140px; max-width: 200px;} .button-row.center {justify-content: center;} .button-row.start {justify-content: flex-start;} .button-row.end {justify-content: flex-end;} .button-row.equal-width .auth-button {flex: 1; min-width: 0; max-width: none;} .button-row.compact {gap: var(--space-md); margin-top: var(--space-md);} .button-row.tight {gap: var(--space-sm);} .auth-layout {display: flex; flex-direction: column; gap: var(--space-lg);} .auth-layout.horizontal {flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-lg);} .auth-layout.horizontal > * {flex: 1; min-width: 0;} .auth-layout.centered {align-items: center; justify-content: center;} .auth-section {display: flex; flex-direction: column; gap: var(--space-md);} .auth-section.horizontal {flex-direction: row; align-items: center; gap: var(--space-lg);} .auth-section.horizontal > * {flex: 1; min-width: 0;} .google-icon {width: 20px; height: 20px; flex-shrink: 0; display: inline-block;} .auth-button .google-icon {margin-right: var(--space-xs);} .auth-button.loading {position: relative; pointer-events: none; color: transparent;} .auth-button.loading::after {content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; color: var(--color-text-light);} .auth-button.primary.loading::after {color: var(--color-text-light);} .auth-button.secondary.loading::after,.auth-button.google-button.loading::after {color: var(--color-text-primary);} @media (max-width: 768px) {.auth-button-group.horizontal:not(.no-stack),.auth-button-group.space-between:not(.no-stack) {flex-direction: column;} .auth-button-group.responsive-stack {flex-direction: column;} .auth-button-group.responsive-stack .auth-button {min-width: 100%; max-width: 100%;} .button-row:not(.no-stack) {flex-direction: column; gap: var(--space-md);} .button-row:not(.no-stack) .auth-button {min-width: 100%; max-width: 100%;} .auth-layout.horizontal:not(.no-stack) {flex-direction: column;} .auth-section.horizontal:not(.no-stack) {flex-direction: column; gap: var(--space-md);} .google-oauth-section.side-by-side:not(.no-stack) {flex-direction: column; gap: var(--space-md);} .google-oauth-section.side-by-side:not(.no-stack) .google-oauth-button {flex: none; width: 100%;} .auth-button {padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); min-height: 48px;} .auth-button.primary,.auth-button.secondary,.auth-button.google-button {min-height: 48px; padding: var(--space-md) var(--space-lg);} .google-oauth-button {min-height: 48px; padding: var(--space-md) var(--space-lg);}} @media (max-width: 480px) {.auth-button {padding: var(--space-md) var(--space-lg); font-size: var(--font-size-sm); min-height: 44px;} .auth-button.primary,.auth-button.secondary,.auth-button.google-button {min-height: 44px; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-sm);} .google-oauth-button {min-height: 44px; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-sm);} .google-oauth-button.compact {min-height: 40px; padding: var(--space-sm) var(--space-md);} .auth-button-group {gap: var(--space-md);} .button-row {gap: var(--space-md);} .auth-layout {gap: var(--space-md);} .auth-section {gap: var(--space-sm);} .google-icon {width: 18px; height: 18px;} .oauth-divider span {padding: 0 var(--space-md);} .auth-card {padding: var(--space-lg);} .auth-form {gap: var(--space-md);} .form-group {gap: var(--space-sm); margin-bottom: var(--space-sm);}} @media (max-width: 1024px) and (min-width: 769px) {.auth-button-group.horizontal .auth-button {min-width: 100px;} .auth-button-group.space-between .auth-button {min-width: 120px; max-width: 180px;} .button-row .auth-button {min-width: 120px; max-width: 180px;} .google-oauth-section.side-by-side {gap: var(--space-md);}} @media (max-width: 360px) {.auth-button,.google-oauth-button {padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); min-height: 40px;} .auth-button-group,.button-row {gap: var(--space-sm);} .auth-card {padding: var(--space-md);} .google-icon {width: 16px; height: 16px;}} .btn-primary:disabled,.btn-secondary:disabled {opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; pointer-events: none;} .btn-primary:disabled {background: var(--color-text-muted) !important; color: var(--color-surface) !important;} .btn-secondary:disabled {background: var(--color-surface) !important; color: var(--color-text-muted) !important; border-color: var(--color-border) !important;} .btn.loading,.google-oauth-button.loading,.auth-button.loading {position: relative; pointer-events: none; color: transparent;} .btn.loading::after,.google-oauth-button.loading::after,.auth-button.loading::after {content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; color: var(--color-text-light);} .google-oauth-button.loading::after {color: var(--color-primary);} .btn.loading.pulse,.google-oauth-button.loading.pulse {animation: loadingPulse 2s ease-in-out infinite;} @keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}} @keyframes loadingPulse {0%,100% {opacity: 1; transform: scale(1);} 50% {opacity: .7; transform: scale(1.02);}} .btn.loading.shimmer::before,.google-oauth-button.loading.shimmer::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation: shimmer 1.5s ease-in-out infinite;} @keyframes shimmer {0% {left: -100%;} 100% {left: 100%;}} @media (max-width: 768px) {.auth-page {padding: var(--space-md); align-items: flex-start; padding-top: var(--space-2xl);} .auth-card {padding: var(--space-xl); max-width: 100%; margin: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);} .custom-form {padding: var(--space-xl);} .form-title {font-size: var(--font-size-xl); margin-bottom: var(--space-md);} .auth-card h2 {font-size: var(--font-size-lg);} .button,.btn,.btn-primary,.btn-secondary {padding: var(--space-md) var(--space-lg); font-size: var(--font-size-sm);} .btn-group {flex-direction: column; width: 100%;} .btn-group > button + button,.btn-group > .btn-base + .btn-base,.btn-group > a + button,.btn-group > button + a {margin-left: 0; margin-top: .5rem;}} @media (max-width: 480px) {.auth-page {padding: var(--space-sm); padding-top: var(--space-lg);} .auth-card {padding: var(--space-lg); border-radius: var(--radius-md);} .custom-form {padding: var(--space-lg); gap: var(--space-md);} .form-title {font-size: var(--font-size-lg); margin-bottom: var(--space-sm);} .auth-form {gap: var(--space-md);} .custom-input,.auth-card input,.auth-card select,.auth-card textarea {padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm);} .button,.btn,.btn-primary,.btn-secondary {padding: var(--space-sm) var(--space-md); min-height: 40px;} .google-oauth-button {padding: var(--space-sm) var(--space-md); min-height: 40px; font-size: var(--font-size-sm);}} .password-strength-indicator {margin-top: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border-subtle); transition: all .3s ease;} .password-strength-bar {width: 100%; height: 4px; background: var(--color-border-subtle); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-sm);} .password-strength-fill {height: 100%; border-radius: 2px; transition: all .5s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;} .password-strength-fill::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); animation: strengthShimmer 2s ease-in-out infinite;} @keyframes strengthShimmer {0% {left: -100%;} 100% {left: 100%;}} .password-strength-weak .password-strength-fill {width: 25%; background: linear-gradient(135deg,var(--color-error),#ff6b6b);} .password-strength-fair .password-strength-fill {width: 50%; background: linear-gradient(135deg,var(--color-warning),#ffa726);} .password-strength-good .password-strength-fill {width: 75%; background: linear-gradient(135deg,#2196f3,#42a5f5);} .password-strength-strong .password-strength-fill {width: 100%; background: linear-gradient(135deg,var(--color-success),#66bb6a);} .password-strength-text {font-size: var(--font-size-xs); font-weight: 500; text-align: center; transition: color .3s ease;} .password-strength-weak .password-strength-text {color: var(--color-error);} .password-strength-fair .password-strength-text {color: var(--color-warning);} .password-strength-good .password-strength-text {color: #2196f3;} .password-strength-strong .password-strength-text {color: var(--color-success);} .password-requirements {margin-top: var(--space-sm); padding: var(--space-sm); background: var(--color-surface); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle);} .password-requirement {display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-text-muted); margin: var(--space-xs) 0; transition: color .3s ease;} .password-requirement.met {color: var(--color-success);} .password-requirement.met::before {content: "✓"; color: var(--color-success); font-weight: bold;} .password-requirement:not(.met)::before {content: "○"; color: var(--color-text-muted);} @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {.auth-card {border-width: .5px;} .custom-input,.auth-card input,.auth-card select,.auth-card textarea {border-width: 1px;} .button-outline,.btn-outline {border-width: 1px;} .password-strength-bar {height: 3px;}} @media (prefers-color-scheme: dark) {:root { --color-background: #1a202c; --color-background-gradient: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); --color-surface: #2d3748; --color-surface-elevated: #4a5568; --color-text-primary: #f7fafc; --color-text-secondary: #e2e8f0; --color-text-muted: #a0aec0; --color-border: #4a5568; --color-border-light: #2d3748; }} @media print {.auth-page {background: #2D2D2D; color: #FFFFFF;} .auth-card {box-shadow: none; border: 1px solid #404040; background: #2D2D2D;} .button,.btn {background: #2D2D2D !important; color: #FFFFFF !important; border: 1px solid #404040;}} @media (prefers-reduced-motion: reduce) {* {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;} .btn:hover,.button:hover {transform: none;}} .btn:focus-visible,.button:focus-visible {outline: 2px solid var(--color-primary); outline-offset: 2px;} .header {background: rgba(255,255,255,.1) !important; border-bottom: 2px solid rgba(255,255,255,.2) !important; color: #FFFFFF !important; padding: var(--space-md) var(--space-lg); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all .3s cubic-bezier(.4,0,.2,1);} .header::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--color-primary),var(--color-primary-light)); opacity: .8;} .header-content {display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; width: 100%; gap: var(--space-lg);} .logo {display: flex; align-items: center; gap: var(--space-md); color: var(--color-primary); font-size: var(--font-size-xl); font-weight: 700; font-family: var(--font-family-primary); text-decoration: none; transition: all .3s ease; position: relative; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: linear-gradient(135deg,transparent,rgba(0,120,212,.05)); border: 1px solid transparent;} .logo:hover {color: var(--color-primary-light); transform: translateY(-1px); background: linear-gradient(135deg,rgba(0,120,212,.05),rgba(0,120,212,.1)); border-color: rgba(0,120,212,.2); box-shadow: 0 4px 16px rgba(0,120,212,.15),0 2px 8px rgba(0,120,212,.1);} .logo:focus {outline: none; box-shadow: 0 0 0 3px rgba(0,120,212,.3),0 4px 16px rgba(0,120,212,.15); border-color: var(--color-primary);} .logo img,.logo svg {width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,120,212,.2)); transition: filter .3s ease;} .logo:hover img,.logo:hover svg {filter: drop-shadow(0 4px 8px rgba(0,120,212,.3));} .logo-text {font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); letter-spacing: -.025em; line-height: 1;} .logo-text .highlight {color: var(--color-primary-light);} .header-nav {display: flex; align-items: center; gap: var(--space-lg);} .header-nav-item {color: var(--color-text-secondary); text-decoration: none; font-weight: 500; font-size: var(--font-size-base); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); transition: all .3s ease; position: relative;} .header-nav-item:hover {color: var(--color-primary); background: rgba(0,120,212,.1);} .header-nav-item:focus {outline: none; box-shadow: 0 0 0 2px rgba(0,120,212,.3);} .header-nav-item.active {color: var(--color-primary); background: rgba(0,120,212,.15); font-weight: 600;} .header-nav-item.active::after {content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: var(--color-primary); border-radius: 1px;} .header-actions {display: flex; align-items: center; gap: var(--space-md);} .header-button {padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; border: 2px solid var(--color-border); background: var(--color-surface-elevated); color: var(--color-text-primary); cursor: pointer; transition: all .3s ease; text-decoration: none; display: flex; align-items: center; gap: var(--space-sm);} .header-button:hover {border-color: var(--color-primary); background: rgba(0,120,212,.1); color: var(--color-primary); transform: translateY(-1px);} .header-button.primary {background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); color: var(--color-text-light); border-color: var(--color-primary);} .header-button.primary:hover {background: linear-gradient(135deg,var(--color-primary-light),var(--color-primary)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,120,212,.3);} .header-user {display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-surface-elevated); border: 1px solid var(--color-border); cursor: pointer; transition: all .3s ease; position: relative;} .header-user:hover {background: var(--color-border-light); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,120,212,.1);} .header-user-avatar {width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-light); font-size: var(--font-size-sm); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .header-user-info {display: flex; flex-direction: column; align-items: flex-start; min-width: 0;} .header-user-name {font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;} .header-user-role {font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;} .header-mobile-menu {display: none; background: none; border: none; color: var(--color-text-primary); cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-sm); transition: background-color .3s ease;} .header-mobile-menu:hover {background: var(--color-surface-elevated);} .header-mobile-menu svg {width: 24px; height: 24px;} @media (max-width: 768px) {.header {padding: var(--space-sm) var(--space-md);} .header-content {gap: var(--space-md);} .logo {font-size: var(--font-size-lg); padding: var(--space-xs) var(--space-sm); gap: var(--space-sm);} .logo img,.logo svg {width: 28px; height: 28px;} .header-nav {display: none;} .header-mobile-menu {display: block;} .header-actions {gap: var(--space-sm);} .header-button {padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs);} .header-user {padding: var(--space-xs) var(--space-sm);} .header-user-avatar {width: 24px; height: 24px; font-size: var(--font-size-xs);} .header-user-info {display: none;}} @media (max-width: 480px) {.header {padding: var(--space-xs) var(--space-sm);} .header-content {gap: var(--space-sm);} .logo {font-size: var(--font-size-base); padding: var(--space-xs);} .logo img,.logo svg {width: 24px; height: 24px;} .logo-text {display: none;} .header-actions {gap: var(--space-xs);} .header-button {padding: var(--space-xs); min-width: 36px; justify-content: center;} .header-button span {display: none;} .header-user {padding: var(--space-xs); min-width: 36px; justify-content: center;}} .header.scrolled {box-shadow: 0 8px 32px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); background: rgba(255,255,255,.15);} .header.scrolled::before {opacity: 1;} @media (prefers-color-scheme: light) {.header {background: #2D2D2D; border-bottom-color: #404040;} .header.scrolled {background: rgba(45,45,45,.95); box-shadow: 0 8px 24px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.15);}} .dark-mode .header {background: var(--color-surface); border-bottom-color: var(--color-border-subtle);} .dark-mode .header.scrolled {background: rgba(45,45,45,.95);} @container (max-width: 400px) {.auth-card {padding: var(--space-md);}} .header {background: #2D2D2D !important; border-bottom: 2px solid #404040 !important; color: #FFFFFF !important;} .header-content {color: #FFFFFF !important;} .logo {color: var(--color-primary) !important; font-weight: 600 !important; font-size: var(--font-size-xl) !important;} .header-content a {color: #FFFFFF !important;} .header-content a:hover {color: var(--color-primary-light) !important;} .chakra-ui-dark { --chakra-colors-gray-50: #f7fafc; --chakra-colors-gray-100: #edf2f7; --chakra-colors-gray-200: #e2e8f0; --chakra-colors-gray-300: #cbd5e0; --chakra-colors-gray-400: #a0aec0; --chakra-colors-gray-500: #718096; --chakra-colors-gray-600: #4a5568; --chakra-colors-gray-700: #2d3748; --chakra-colors-gray-800: #1a202c; --chakra-colors-gray-900: #171923; } .chakra-card,.chakra-table,.chakra-text,.chakra-heading,.chakra-button,.chakra-input {color: var(--color-text-primary) !important; background: var(--color-surface) !important; border-color: var(--color-border) !important;} .chakra-table th,.chakra-table td {color: var(--color-text-primary) !important; border-color: var(--color-border) !important;} .chakra-table th {background: var(--color-surface-elevated) !important;} .chakra-table tbody tr:hover {background: var(--color-surface-elevated) !important;} .chat-message-content,.chat-message-content *,.message-content,.message-content * {color: var(--color-text-primary) !important;} .chat-message-content table,.chat-message-content table *,.message-content table,.message-content table * {color: var(--color-text-primary) !important; background: transparent !important; border-color: var(--color-border) !important;} .chat-message-content table th,.message-content table th {background: var(--color-surface) !important; color: var(--color-text-primary) !important; font-weight: 600;} .chat-message-content table td,.message-content table td {background: transparent !important; color: var(--color-text-primary) !important;} .chat-message-content .dark-blue-text,.chat-message-content [style*="color: #"],.message-content .dark-blue-text,.message-content [style*="color: #"] {color: var(--color-text-primary) !important;} .chat-message-content h1,.chat-message-content h2,.chat-message-content h3,.chat-message-content h4,.chat-message-content h5,.chat-message-content h6,.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6 {color: var(--color-text-primary) !important;} .chat-message-content p,.chat-message-content span,.chat-message-content div,.chat-message-content li,.message-content p,.message-content span,.message-content div,.message-content li {color: var(--color-text-primary) !important;} .chat-message-content a,.message-content a {color: var(--color-primary) !important;} .chakra-card__header,.chakra-card__body {background: var(--color-surface) !important; color: var(--color-text-primary) !important;} .chakra-stat__label,.chakra-stat__number,.chakra-stat__help-text {color: var(--color-text-primary) !important;} .chakra-badge {color: var(--color-text-primary) !important;} .chakra-input__element,.chakra-select__wrapper,.chakra-textarea {color: var(--color-text-primary) !important; background: var(--color-surface) !important;} .chakra-button {background: var(--color-primary) !important; color: var(--color-text-light) !important; border: none !important;} .chakra-button:hover {background: var(--color-primary-dark) !important; transform: translateY(-2px);} .chakra-button[data-variant="ghost"] {background: var(--color-surface) !important; color: var(--color-text-primary) !important;} .chakra-button[data-variant="outline"] {background: transparent !important; color: var(--color-primary) !important; border: 2px solid var(--color-primary) !important;} .chakra-modal__content {background: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important;} .chakra-modal__header,.chakra-modal__body,.chakra-modal__footer {color: var(--color-text-primary) !important;} [style*="color: rgb(59, 130, 246)"],[style*="color: #3b82f6"],[style*="color: rgb(29, 78, 216)"],[style*="color: #1d4ed8"] {color: var(--color-text-primary) !important;} [data-theme="chakra-ui"],.chakra-ui-light,.chakra-ui-dark,.css-0,.css-1 {background-color: transparent !important; color: var(--color-text-primary) !important;} .chakra-box,[class*="chakra-box"],.css-0 {background-color: transparent !important; background: transparent !important; color: var(--color-text-primary) !important;} .chakra-card,[class*="chakra-card"],.chakra-card__body,.chakra-card__header,.chakra-card__footer {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;} .chakra-table,.chakra-table__container,.chakra-table tbody,.chakra-table thead,.chakra-table tfoot,.chakra-table tr,.chakra-table th,.chakra-table td,[class*="chakra-table"] {background: transparent !important; background-color: transparent !important; color: var(--color-text-primary) !important; border-color: var(--color-border) !important;} .chakra-table th {background: var(--color-surface-elevated) !important; background-color: var(--color-surface-elevated) !important; color: var(--color-text-primary) !important; font-weight: 600 !important;} .chakra-table tbody tr:hover {background: var(--color-surface-elevated) !important; background-color: var(--color-surface-elevated) !important;} .chakra-text,.chakra-heading,[class*="chakra-text"],[class*="chakra-heading"],.chakra-stat__label,.chakra-stat__number,.chakra-stat__help-text {color: var(--color-text-primary) !important;} .chakra-button,[class*="chakra-button"] {background: var(--color-primary) !important; background-color: var(--color-primary) !important; color: var(--color-text-light) !important; border: none !important; transition: all .3s ease !important;} .chakra-button:hover {background: var(--color-primary-dark) !important; background-color: var(--color-primary-dark) !important; transform: translateY(-2px) !important;} .chakra-button[data-variant="ghost"],.chakra-button--variant-ghost {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important;} .chakra-button[data-variant="outline"],.chakra-button--variant-outline {background: transparent !important; background-color: transparent !important; color: var(--color-primary) !important; border: 2px solid var(--color-primary) !important;} .chakra-input,.chakra-select,.chakra-textarea,.chakra-input__element,.chakra-select__wrapper,[class*="chakra-input"],[class*="chakra-select"],[class*="chakra-textarea"],input,select,textarea {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 2px solid var(--color-border) !important; border-radius: var(--radius-md) !important;} .chakra-input:focus,.chakra-select:focus,.chakra-textarea:focus,input:focus,select:focus,textarea:focus {border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(0,153,204,.3) !important;} .chakra-badge,[class*="chakra-badge"] {background: var(--color-surface-elevated) !important; background-color: var(--color-surface-elevated) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important;} .chakra-modal__content,.chakra-modal__header,.chakra-modal__body,.chakra-modal__footer,.chakra-modal__overlay,[class*="chakra-modal"] {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;} .chakra-modal__overlay {background: rgba(0,0,0,.8) !important; backdrop-filter: blur(10px) !important;} .chakra-alert,[class*="chakra-alert"] {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important;} .chakra-stat,[class*="chakra-stat"] {background: transparent !important; color: var(--color-text-primary) !important;} .chakra-menu__list,.chakra-menu__item,.chakra-menu__button,[class*="chakra-menu"] {background: var(--color-surface) !important; background-color: var(--color-surface) !important; color: var(--color-text-primary) !important; border: 1px solid var(--color-border) !important;} .chakra-menu__item:hover {background: var(--color-surface-elevated) !important; background-color: var(--color-surface-elevated) !important;} .chakra-divider {border-color: var(--color-border) !important;} .chakra-container,.chakra-stack,.chakra-flex,.chakra-grid,.chakra-simple-grid,[class*="chakra-container"],[class*="chakra-stack"],[class*="chakra-flex"],[class*="chakra-grid"] {background: transparent !important; color: var(--color-text-primary) !important;} [style*="background-color: white"],[style*="background-color: #ffffff"],[style*="background-color: #fff"],[style*="background: white"],[style*="background: #ffffff"],[style*="background: #fff"],[class*="bg-white"],[class*="background-white"] {background: var(--color-surface) !important; background-color: var(--color-surface) !important;} [style*="color: black"],[style*="color: #000000"],[style*="color: #000"],[style*="color: rgb(0, 0, 0)"] {color: var(--color-text-primary) !important;} html,body,#root,.App,main {background: var(--color-background) !important; color: var(--color-text-primary) !important;} *[style*="background: white"],*[style*="background-color: white"],*[style*="background: #fff"],*[style*="background-color: #fff"],*[style*="background: #ffffff"],*[style*="background-color: #ffffff"] {background: var(--color-surface) !important; background-color: var(--color-surface) !important;} .auth-card::before {display: none !important;} .auth-card {border-top: none !important;} .chakra-modal__content::before,.chakra-modal__header::before,.chakra-card::before {display: none !important;} [class*="modal"]::before,[class*="card"]::before,[class*="auth"]::before {background: none !important; border: none !important; height: 0 !important; opacity: 0 !important;} .admin-container {min-height: 100vh; background: var(--color-background); color: var(--color-text-primary); padding: var(--space-lg);} .admin-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 2px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md);} .admin-header h1 {font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-primary); margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.1);} .admin-header-actions {display: flex; gap: var(--space-md); align-items: center;} .admin-section {margin-bottom: var(--space-xl); padding: 0;} .admin-section h2 {font-size: var(--font-size-xl); font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--space-lg); border-left: 4px solid var(--color-primary); padding-left: var(--space-md);} .admin-stats-grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl);} .admin-stat-card {background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); transition: all .3s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden;} .admin-stat-card::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--color-primary),var(--color-primary-light));} .admin-stat-card:hover {box-shadow: var(--shadow-lg); transform: translateY(-4px) scale(1.02); border-color: var(--color-primary);} .admin-stat-card .stat-value {font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-xs); text-shadow: 0 1px 2px rgba(0,0,0,.1);} .admin-stat-card .stat-label {font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-xs);} .admin-stat-card .stat-description {font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-xs);} .admin-card {background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); overflow: hidden; transition: all .3s ease;} .admin-card:hover {box-shadow: var(--shadow-lg); border-color: var(--color-border-light);} .admin-card-header {padding: var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-surface-elevated);} .admin-card-header h3 {font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-primary); margin: 0;} .admin-card-content {padding: var(--space-lg);} .admin-recent-users {list-style: none; padding: 0; margin: 0;} .admin-recent-users li {display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); border-bottom: 1px solid var(--color-border); transition: all .2s ease;} .admin-recent-users li:hover {background-color: var(--color-surface-elevated); transform: translateX(4px);} .admin-recent-users li:last-child {border-bottom: none;} .admin-user-info {display: flex; align-items: center; gap: var(--space-sm);} .admin-user-avatar {width: 40px; height: 40px; border-radius: var(--radius-xl); background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-light); text-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 2px 8px rgba(0,120,212,.3);} .admin-user-details {display: flex; flex-direction: column; gap: 2px;} .admin-user-name {font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); margin: 0;} .admin-user-email {font-size: var(--font-size-xs); color: var(--color-text-secondary); margin: 0;} .admin-user-status {font-size: var(--font-size-xs); font-weight: 500; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); text-transform: uppercase; letter-spacing: .05em; border: 1px solid;} .admin-user-status.pending {background-color: rgba(255,140,0,.1); color: var(--color-warning); border-color: var(--color-warning);} .admin-user-status.approved {background-color: rgba(16,124,16,.1); color: var(--color-success); border-color: var(--color-success);} .admin-user-status.denied {background-color: rgba(209,52,56,.1); color: var(--color-error); border-color: var(--color-error);} .admin-actions {display: flex; gap: var(--space-sm); align-items: center;} .admin-action-button {background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-primary); cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-xs);} .admin-action-button:hover {background-color: var(--color-border-light); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,120,212,.2);} .admin-action-button.primary {background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); border-color: var(--color-primary); color: var(--color-text-light); box-shadow: 0 2px 8px rgba(0,120,212,.3);} .admin-action-button.primary:hover {background: linear-gradient(135deg,var(--color-primary-light),var(--color-primary)); transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(0,120,212,.4);} .admin-action-button.danger {background: linear-gradient(135deg,var(--color-error),#b02e32); border-color: var(--color-error); color: var(--color-text-light); box-shadow: 0 2px 8px rgba(209,52,56,.3);} .admin-action-button.danger:hover {background: linear-gradient(135deg,#e94347,var(--color-error)); transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(209,52,56,.4);} .admin-loading {display: flex; justify-content: center; align-items: center; padding: var(--space-xl); color: var(--color-text-secondary); font-size: var(--font-size-lg);} .admin-empty-state {text-align: center; padding: var(--space-2xl); color: var(--color-text-secondary); background: var(--color-surface); border-radius: var(--radius-lg); border: 2px dashed var(--color-border);} .admin-empty-state h3 {font-size: var(--font-size-lg); font-weight: 500; color: var(--color-text-primary); margin-bottom: var(--space-sm);} .admin-empty-state p {font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0;} .admin-quick-actions {display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: var(--space-lg); margin-bottom: var(--space-xl);} .admin-quick-action {position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text-primary); font-weight: 500; transition: all .3s cubic-bezier(.4,0,.2,1); overflow: hidden; min-height: 80px; text-align: center;} .admin-quick-action::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--color-primary),var(--color-primary-light)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;} .admin-quick-action:hover::before {transform: scaleX(1);} .admin-quick-action:hover {background: var(--color-surface-elevated); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px rgba(0,120,212,.2);} .admin-table {width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border);} .admin-table th,.admin-table td {padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border);} .admin-table th {background: var(--color-surface-elevated); font-weight: 600; color: var(--color-text-primary); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .05em;} .admin-table td {color: var(--color-text-secondary); font-size: var(--font-size-sm);} .admin-table tbody tr:hover {background: var(--color-surface-elevated);} .admin-table tbody tr:last-child td {border-bottom: none;} .admin-form {background: var(--color-surface); padding: var(--space-xl); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);} .admin-form-group {margin-bottom: var(--space-lg);} .admin-form-label {display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); margin-bottom: var(--space-sm);} .admin-form-input,.admin-form-select,.admin-form-textarea {width: 100%; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated); color: var(--color-text-primary); font-size: var(--font-size-base); transition: all .2s ease;} .admin-form-input:focus,.admin-form-select:focus,.admin-form-textarea:focus {outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,120,212,.2);} .admin-form-input::placeholder,.admin-form-textarea::placeholder {color: var(--color-text-muted);} .admin-badge {display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); font-weight: 500; border-radius: var(--radius-md); border: 1px solid; text-transform: uppercase; letter-spacing: .05em;} .admin-badge.success {background: rgba(16,124,16,.1); color: var(--color-success); border-color: var(--color-success);} .admin-badge.warning {background: rgba(255,140,0,.1); color: var(--color-warning); border-color: var(--color-warning);} .admin-badge.error {background: rgba(209,52,56,.1); color: var(--color-error); border-color: var(--color-error);} .admin-badge.info {background: rgba(0,120,212,.1); color: var(--color-primary); border-color: var(--color-primary);} .admin-container {padding: var(--space-sm);} .admin-header {flex-direction: column; align-items: stretch; gap: var(--space-md); padding: var(--space-md);} .admin-header h1 {font-size: var(--font-size-xl); text-align: center;} .admin-header-actions {justify-content: center; flex-wrap: wrap;} .admin-stats-grid {grid-template-columns: 1fr; gap: var(--space-md);} .admin-quick-actions {grid-template-columns: 1fr; gap: var(--space-md);} .admin-action-button {min-height: 44px; min-width: 44px; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-sm); touch-action: manipulation;} .admin-quick-action {min-height: 60px; padding: var(--space-md); touch-action: manipulation;} .admin-table-wrapper {position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-surface);} .admin-table-wrapper::-webkit-scrollbar {height: 6px;} .admin-table-wrapper::-webkit-scrollbar-track {background: var(--color-surface); border-radius: var(--radius-sm);} .admin-table-wrapper::-webkit-scrollbar-thumb {background: var(--color-primary); border-radius: var(--radius-sm);} .admin-table-wrapper::-webkit-scrollbar-thumb:hover {background: var(--color-primary-dark);} .admin-table-wrapper::after {content: "→ Scroll for more"; position: absolute; right: 0; top: 0; background: linear-gradient(90deg,transparent,var(--color-surface-elevated) 20%); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-muted); pointer-events: none; opacity: 1; transition: opacity .3s ease; border-radius: 0 var(--radius-lg) 0 var(--radius-sm);} .admin-table-wrapper.scrolled::after {opacity: 0;} .admin-table-cards {display: none; gap: var(--space-md);} .admin-table-card {background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-sm);} .admin-table-card-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border);} .admin-table-card-title {font-weight: 600; color: var(--color-text-primary); font-size: var(--font-size-sm);} .admin-table-card-body {display: grid; gap: var(--space-xs);} .admin-table-card-row {display: flex; justify-content: space-between; align-items: center; padding: var(--space-xs) 0; font-size: var(--font-size-sm);} .admin-table-card-label {color: var(--color-text-secondary); font-weight: 500;} .admin-table-card-value {color: var(--color-text-primary); text-align: right;} .admin-recent-users li {flex-direction: column; align-items: stretch; gap: var(--space-sm); padding: var(--space-md); touch-action: manipulation;} .admin-user-info {align-self: flex-start;} .admin-actions {justify-content: center; flex-wrap: wrap; gap: var(--space-sm);} .admin-form {padding: var(--space-md);} .admin-form-input,.admin-form-select,.admin-form-textarea {min-height: 44px; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .admin-form-group {margin-bottom: var(--space-md);} .admin-modal {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.8); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-sm); overflow-y: auto; -webkit-overflow-scrolling: touch;} .admin-modal-content {background: var(--color-surface); border-radius: var(--radius-lg); max-width: 100%; width: 100%; max-height: 90vh; overflow-y: auto; margin: var(--space-md) 0; box-shadow: var(--shadow-lg); touch-action: manipulation;} .admin-modal-header {padding: var(--space-lg); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--color-surface); z-index: 1;} .admin-modal-close {min-height: 44px; min-width: 44px; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; touch-action: manipulation;} .admin-modal-close:hover {background: var(--color-surface-elevated); color: var(--color-text-primary);} .admin-modal-body {padding: var(--space-lg);} .admin-modal-open {overflow: hidden; position: fixed; width: 100%;} @media (min-width: 568px) {.admin-container {padding: var(--space-md);} .admin-stats-grid {grid-template-columns: repeat(2,1fr);} .admin-quick-actions {grid-template-columns: repeat(2,1fr);} .admin-recent-users li {flex-direction: row; align-items: center;} .admin-user-info {align-self: center;} .admin-actions {justify-content: flex-end;}} @media (max-height: 500px) and (orientation: landscape) {.admin-header {padding: var(--space-sm); margin-bottom: var(--space-md);} .admin-header h1 {font-size: var(--font-size-lg);} .admin-stat-card {padding: var(--space-md);} .admin-stat-card .stat-value {font-size: var(--font-size-2xl);} .admin-modal {align-items: center; padding: var(--space-xs);} .admin-modal-content {max-height: 95vh; margin: var(--space-xs) 0;} .admin-modal-header,.admin-modal-body {padding: var(--space-md);}} @media (min-width: 768px) {.admin-container {padding: var(--space-lg);} .admin-header {flex-direction: row; align-items: center; padding: var(--space-lg);} .admin-header h1 {font-size: var(--font-size-2xl); text-align: left;} .admin-header-actions {justify-content: flex-end; flex-wrap: nowrap;} .admin-stats-grid {grid-template-columns: repeat(auto-fit,minmax(280px,1fr));} .admin-quick-actions {grid-template-columns: repeat(auto-fit,minmax(200px,1fr));} .admin-form {padding: var(--space-xl);} .admin-quick-action {min-height: 80px;} .admin-table-cards {display: none;} .admin-modal {align-items: center; padding: var(--space-lg);} .admin-modal-content {max-width: 600px; margin: 0;} .admin-modal-header,.admin-modal-body {padding: var(--space-lg);}} @media (min-width: 1024px) {.admin-action-button {min-height: auto; min-width: auto; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs);} .admin-table-wrapper::after {display: none;} .admin-modal-content {max-width: 800px;}} @media (min-width: 1440px) {.admin-stats-grid {grid-template-columns: repeat(4,1fr);} .admin-quick-actions {grid-template-columns: repeat(4,1fr);}} @media (max-width: 767px) {.admin-table {min-width: 600px; font-size: var(--font-size-xs);} .admin-table th,.admin-table td {padding: var(--space-sm); white-space: nowrap;} .admin-table-mobile-cards .admin-table-wrapper {display: none;} .admin-table-mobile-cards .admin-table-cards {display: flex; flex-direction: column;}} @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {.admin-user-avatar,.admin-action-button,.admin-modal-close {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}} @media (prefers-reduced-motion: reduce) {.admin-stat-card:hover,.admin-action-button:hover,.admin-quick-action:hover {transform: none;} .admin-quick-action::before {transition: none;} .admin-recent-users li:hover {transform: none;}} @media print {.admin-container {background: white; color: black; box-shadow: none;} .admin-header-actions,.admin-actions,.admin-modal {display: none;} .admin-card,.admin-stat-card {border: 1px solid #ccc; box-shadow: none; break-inside: avoid;} .admin-table {border-collapse: collapse; width: 100%;} .admin-table th,.admin-table td {border: 1px solid #ccc;}}}}