@tailwind base;@tailwind components;@tailwind utilities;:root{--glass-white: rgba(255, 255, 255, .25);--glass-white-hover: rgba(255, 255, 255, .35);--glass-black: rgba(0, 0, 0, .25);--glass-black-hover: rgba(0, 0, 0, .35);--primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-500: #0ea5e9;--primary-600: #0284c7;--primary-700: #0369a1;--primary-glass: rgba(14, 165, 233, .2);--primary-glass-hover: rgba(14, 165, 233, .3);--secondary-glass: rgba(168, 85, 247, .2);--secondary-glass-hover: rgba(168, 85, 247, .3);--success-glass: rgba(34, 197, 94, .2);--error-glass: rgba(239, 68, 68, .2);--warning-glass: rgba(245, 158, 11, .2);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .37);--shadow-glass-hover: 0 12px 40px 0 rgba(31, 38, 135, .45);--shadow-glass-inset: inset 0 1px 0 0 rgba(255, 255, 255, .2);--blur-sm: blur(8px);--blur-md: blur(16px);--blur-lg: blur(24px);--blur-xl: blur(32px);--radius-glass: 16px;--radius-glass-lg: 24px;--radius-glass-xl: 32px;--backdrop-blur: blur(16px) saturate(180%);--backdrop-blur-heavy: blur(24px) saturate(200%)}[data-theme=dark]{--glass-white: rgba(255, 255, 255, .1);--glass-white-hover: rgba(255, 255, 255, .2);--glass-black: rgba(0, 0, 0, .4);--glass-black-hover: rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;scroll-behavior:smooth}body{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#f5576c,#4facfe);background-size:400% 400%;animation:gradientShift 15s ease infinite;min-height:100vh;overflow-x:hidden}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.glass{background:var(--glass-white);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow-glass);border-radius:var(--radius-glass)}.glass-hover{transition:all .3s cubic-bezier(.23,1,.32,1)}.glass-hover:hover{background:var(--glass-white-hover);box-shadow:var(--shadow-glass-hover);transform:translateY(-2px)}.glass-dark{background:var(--glass-black);border:1px solid rgba(255,255,255,.1)}.glass-primary{background:var(--primary-glass);border:1px solid rgba(14,165,233,.3)}.glass-primary:hover{background:var(--primary-glass-hover)}.glass-btn{@apply glass glass-hover;padding:12px 24px;font-weight:600;border:none;cursor:pointer;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.glass-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.glass-btn:active:before{width:300px;height:300px}.glass-card{@apply glass glass-hover;padding:24px;position:relative;overflow:hidden}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}.glass-input{@apply glass;padding:16px 20px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;color:#fff;font-size:16px;outline:none;transition:all .3s ease}.glass-input::placeholder{color:#fff9}.glass-input:focus{border-color:var(--primary-500);background:#ffffff26;box-shadow:0 0 0 4px #0ea5e91a}.glass-nav{@apply glass;-webkit-backdrop-filter:var(--backdrop-blur-heavy);backdrop-filter:var(--backdrop-blur-heavy);position:sticky;top:0;z-index:100}.text-shadow{text-shadow:0 2px 4px rgba(0,0,0,.1)}.glass-shimmer{position:relative;overflow:hidden}.glass-shimmer:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.fade-in{animation:fadeIn .6s cubic-bezier(.23,1,.32,1)}.slide-up{animation:slideUp .6s cubic-bezier(.23,1,.32,1)}.scale-in{animation:scaleIn .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}@media (prefers-contrast: high){.glass{border-width:2px;border-color:currentColor}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{.glass{background:#fff!important;border:1px solid #000!important;box-shadow:none!important}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-2xl)}.loading-container.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--color-background);z-index:9999}.loading-spinner{position:relative}.loading-spinner.small{width:24px;height:24px}.loading-spinner.medium{width:40px;height:40px}.loading-spinner.large{width:60px;height:60px}.spinner-ring{position:absolute;top:0;left:0;width:100%;height:100%;border:3px solid transparent;border-radius:50%}.spinner-ring:nth-child(1){border-top-color:var(--color-primary);animation:spin 1s linear infinite}.spinner-ring:nth-child(2){border-right-color:var(--color-secondary);animation:spin 1.5s linear infinite reverse;width:80%;height:80%;top:10%;left:10%}.spinner-ring:nth-child(3){border-bottom-color:var(--color-info);animation:spin 2s linear infinite;width:60%;height:60%;top:20%;left:20%}.loading-message{font-size:var(--font-sm);color:var(--color-text-secondary);margin-top:var(--spacing-md)}.layout{display:flex;height:100vh;overflow:hidden;background-color:var(--color-background)}.sidebar{width:240px;background-color:var(--color-card);border-right:1px solid var(--color-border);display:flex;flex-direction:column;transition:transform var(--transition-base);z-index:40}.sidebar-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{color:var(--color-primary);width:28px;height:28px}.logo-text{font-size:var(--font-xl);font-weight:700;color:var(--color-text-primary)}.sidebar-toggle{display:none;padding:var(--spacing-xs);color:var(--color-text-secondary)}.sidebar-nav{flex:1;padding:var(--spacing-md);overflow-y:auto}.nav-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-xs);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--font-sm);font-weight:500;transition:all var(--transition-fast)}.nav-item:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.nav-item.active{background-color:#3b82f61a;color:var(--color-primary)}.sidebar-footer{padding:var(--spacing-md);border-top:1px solid var(--color-border)}.main-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.header{height:64px;background-color:var(--color-card);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-xl);z-index:30}.header-left{display:flex;align-items:center;gap:var(--spacing-md)}.header-right{display:flex;align-items:center;gap:var(--spacing-lg)}.header-btn{padding:var(--spacing-sm);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:all var(--transition-fast);position:relative}.header-btn:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.notification-btn{position:relative}.notification-badge{position:absolute;top:4px;right:4px;width:18px;height:18px;background-color:var(--color-danger);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}.connection-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-sm)}.connection-status.connected{background-color:#10b9811a;color:var(--color-success)}.connection-status.disconnected{background-color:#ef44441a;color:var(--color-danger)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);background-color:currentColor;animation:pulse 2s ease-in-out infinite}.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + var(--spacing-sm));right:0;min-width:240px;background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:50;overflow:hidden}.dropdown-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.dropdown-header h3{font-size:var(--font-md);font-weight:600}.mark-all-read{font-size:var(--font-xs);color:var(--color-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.mark-all-read:hover{background-color:var(--color-surface)}.dropdown-footer{padding:var(--spacing-md);border-top:1px solid var(--color-border);text-align:center}.dropdown-footer a{font-size:var(--font-sm);color:var(--color-primary)}.dropdown-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-sm) 0}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text-primary);font-size:var(--font-sm);transition:background-color var(--transition-fast)}.dropdown-item:hover{background-color:var(--color-surface)}.notifications-menu{min-width:320px;max-width:400px}.notifications-list{max-height:400px;overflow-y:auto}.notification-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);border-bottom:1px solid var(--color-border);transition:background-color var(--transition-fast)}.notification-item:hover{background-color:var(--color-surface)}.notification-item.unread{background-color:#3b82f60d}.notification-icon{width:32px;height:32px;border-radius:var(--radius-full);background-color:var(--color-surface);display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}.notification-content{flex:1;min-width:0}.notification-title{font-size:var(--font-sm);font-weight:500;margin-bottom:var(--spacing-xs)}.notification-text{font-size:var(--font-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.notification-time{font-size:var(--font-xs);color:var(--color-text-muted)}.user-menu-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.user-menu-btn:hover{background-color:var(--color-surface)}.user-avatar{width:32px;height:32px;border-radius:var(--radius-full);background-color:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-name{font-size:var(--font-sm);font-weight:500;color:var(--color-text-primary)}.user-menu{min-width:200px}.user-info{padding:var(--spacing-md);border-bottom:1px solid var(--color-border)}.user-info-name{font-size:var(--font-sm);font-weight:600;margin-bottom:var(--spacing-xs)}.user-info-email{font-size:var(--font-xs);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.premium-badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border-radius:var(--radius-md);font-size:var(--font-xs);font-weight:600}.main-content{flex:1;overflow-y:auto;background-color:var(--color-surface)}.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:30}@media (max-width: 768px){.sidebar{position:fixed;top:0;left:0;height:100%;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-toggle,.sidebar-overlay{display:block}.desktop-hidden{display:block!important}.header{padding:0 var(--spacing-md)}}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);background-color:var(--color-background)}.error-content{max-width:600px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.error-icon{width:80px;height:80px;border-radius:var(--radius-full);background:#ef44441a;color:var(--color-danger);display:flex;align-items:center;justify-content:center}.error-content h1{font-size:var(--font-3xl);font-weight:700;color:var(--color-text-primary)}.error-message{font-size:var(--font-md);color:var(--color-text-secondary);line-height:1.6;max-width:400px}.error-details{width:100%;margin-top:var(--spacing-xl);text-align:left}.error-details summary{cursor:pointer;padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);font-size:var(--font-sm);font-weight:500;color:var(--color-text-secondary);transition:background-color var(--transition-fast)}.error-details summary:hover{background:var(--color-card)}.error-stack{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);overflow-x:auto}.error-name{font-size:var(--font-sm);font-weight:600;color:var(--color-danger);margin-bottom:var(--spacing-md)}.error-stack pre{font-size:var(--font-xs);color:var(--color-text-secondary);font-family:Courier New,monospace;line-height:1.5;white-space:pre-wrap;word-break:break-word}.error-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.error-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-card);color:var(--color-text-primary);font-size:var(--font-sm);font-weight:500;transition:all var(--transition-fast)}.error-btn:hover{background:var(--color-surface);transform:translateY(-2px);box-shadow:var(--shadow-md)}.error-btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.error-btn.primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}