:root{--primary-color:#1877f2;--primary-hover:#0c63d4;--primary-light:#e7f3ff;--primary-dark:#044bb4;--secondary-color:#7c3aed;--secondary-hover:#6d28d9;--secondary-light:#f3e8ff;--accent-pink:#ec4899;--accent-purple:#8b5cf6;--accent-indigo:#6366f1;--success-color:#00c875;--success-hover:#00b36b;--error-color:#e44258;--error-hover:#d93d50;--warning-color:#ffab00;--warning-hover:#ff9100;--info-color:#00bcd4;--info-hover:#00acc1;--bg-primary:#f8f9fd;--bg-secondary:#f0f2f5;--bg-tertiary:#e4e6eb;--card-bg:#fff;--hover-bg:#f2f3f5;--active-bg:#e4e6eb;--input-bg:#f5f6f8;--input-border:#dfe1e6;--input-focus:var(--primary-color);--text-primary:#050505;--text-secondary:#65676b;--text-tertiary:#8a8d91;--text-disabled:#bcc0c4;--text-white:#fff;--border-color:#e4e6eb;--border-light:#f0f2f5;--border-dark:#ccd0d5;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 4px 16px #0000001f;--shadow-xl:0 8px 24px #00000026;--shadow-2xl:0 12px 40px #0003;--primary-gradient:linear-gradient(135deg,#1877f2 0%,#0c63d4 100%);--secondary-gradient:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%);--success-gradient:linear-gradient(135deg,#00c875 0%,#00b36b 100%);--rainbow-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);--success-bg:#e6fcf5;--success-border:#9ae6d0;--error-bg:#ffebee;--error-border:#ffcdd2;--warning-bg:#fff8e1;--warning-border:#ffecb3;--info-bg:#e1f5fe;--info-border:#b3e5fc;--dark-bg-primary:#18191a;--dark-bg-secondary:#242526;--dark-bg-tertiary:#3a3b3c;--dark-card-bg:#242526;--dark-input-bg:#3a3b3c;--dark-hover-bg:#3a3b3c;--dark-text-primary:#e4e6eb;--dark-text-secondary:#b0b3b8;--dark-text-tertiary:#8a8d91;--dark-border-color:#3a3b3c;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;font-family:var(--font-family);line-height:1.5;font-weight:var(--font-weight-regular);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:var(--primary-color);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:var(--primary-hover)}body{background:var(--bg-primary);min-width:320px;min-height:100vh;color:var(--text-primary);margin:0;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0}h1{font-size:2rem;line-height:1.2}h2{font-size:1.5rem;line-height:1.3}h3{font-size:1.25rem;line-height:1.4}p{margin:0;line-height:1.6}button{border-radius:var(--radius-md);font-size:15px;font-weight:var(--font-weight-medium);cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}button:disabled{opacity:.5;cursor:not-allowed}button:active:not(:disabled){transform:scale(.98)}*{box-sizing:border-box}input,textarea,select{font-family:inherit;font-size:inherit;border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);color:var(--text-primary);padding:10px 12px;transition:all .2s}input:focus,textarea:focus,select:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--primary-light);outline:none}input::placeholder,textarea::placeholder{color:var(--text-tertiary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:var(--radius-sm);transition:background .2s}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media (prefers-color-scheme:dark){:root{--bg-primary:var(--dark-bg-primary);--bg-secondary:var(--dark-bg-secondary);--card-bg:var(--dark-card-bg);--input-bg:var(--dark-input-bg);--text-primary:var(--dark-text-primary);--text-secondary:var(--dark-text-secondary);--border-color:var(--dark-border-color)}}.sidebar{background:var(--card-bg);border-right:1px solid var(--border-color);z-index:100;flex-direction:column;width:280px;height:100vh;transition:width .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;box-shadow:2px 0 8px #0000000a}.sidebar.collapsed{width:72px}.sidebar-header{border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,#fff 0%,#f8f9fd 100%);justify-content:space-between;align-items:center;min-height:72px;padding:1.25rem 1.5rem;display:flex}.sidebar-logo{color:var(--primary-color);align-items:center;gap:.5rem;margin:0;font-size:1.5rem;font-weight:700;transition:opacity .3s;display:flex}.logo-icon{font-size:1.75rem;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.logo-text{background:linear-gradient(135deg,var(--primary-color)0%,var(--secondary-color)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700}.sidebar-logo.hidden{opacity:0;pointer-events:none}.sidebar-toggle{background:var(--hover-bg);border:1px solid var(--border-color);cursor:pointer;border-radius:var(--radius-md);color:var(--text-secondary);width:36px;height:36px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;padding:.5rem;font-size:1.125rem;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.sidebar-toggle:hover{background:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color);box-shadow:var(--shadow-md);transform:scale(1.05)}.sidebar-nav{flex:1;padding:1.25rem .75rem;overflow-y:auto}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-track{background:0 0}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.sidebar-nav ul{flex-direction:column;gap:.375rem;margin:0;padding:0;list-style:none;display:flex}.sidebar-nav li{margin:0}.sidebar-link{color:var(--text-secondary);border-radius:var(--radius-lg);cursor:pointer;align-items:center;padding:.875rem 1rem;font-size:.9375rem;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.sidebar-link:before{content:"";background:linear-gradient(90deg,var(--primary-light)0%,transparent 100%);z-index:-1;width:0;height:100%;transition:width .3s;position:absolute;top:0;left:0}.sidebar-link:hover{background:var(--hover-bg);color:var(--text-primary);padding-left:1.125rem}.sidebar-link:hover:before{width:100%}.sidebar-link:hover .sidebar-icon{color:var(--primary-color);transform:scale(1.1)}.sidebar-link.active{background:var(--primary-light);color:var(--primary-color);box-shadow:var(--shadow-sm);font-weight:600}.sidebar-link.active:after{content:"";background:var(--primary-color);width:4px;height:60%;box-shadow:0 0 8px var(--primary-color);border-radius:0 4px 4px 0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.sidebar-link.active .sidebar-icon{color:var(--primary-color)}.sidebar-icon{justify-content:center;align-items:center;min-width:24px;margin-right:.875rem;font-size:1.375rem;transition:all .2s;display:flex}.sidebar.collapsed .sidebar-icon{margin-right:0;font-size:1.5rem}.sidebar-label{white-space:nowrap;text-overflow:ellipsis;flex:1;transition:opacity .2s;overflow:hidden}.sidebar-label.hidden{opacity:0;pointer-events:none;width:0}.sidebar.collapsed .sidebar-link{justify-content:center;padding:.875rem;position:relative}.sidebar.collapsed .sidebar-link:hover{padding-left:.875rem}.sidebar.collapsed .sidebar-link:after{content:attr(title);background:var(--text-primary);color:var(--text-white);border-radius:var(--radius-md);white-space:nowrap;opacity:0;pointer-events:none;z-index:1000;box-shadow:var(--shadow-lg);padding:.5rem .75rem;font-size:.875rem;transition:opacity .2s;position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.sidebar.collapsed .sidebar-link:hover:after{opacity:1}@media (max-width:768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar.collapsed{width:280px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-nav li{animation:.3s ease-out both fadeIn}.sidebar-nav li:first-child{animation-delay:50ms}.sidebar-nav li:nth-child(2){animation-delay:.1s}.sidebar-nav li:nth-child(3){animation-delay:.15s}.sidebar-nav li:nth-child(4){animation-delay:.2s}.sidebar-nav li:nth-child(5){animation-delay:.25s}.sidebar-nav li:nth-child(6){animation-delay:.3s}.sidebar-nav li:nth-child(7){animation-delay:.35s}.notification-list{flex-direction:column;display:flex}.notification-item{cursor:pointer;border-bottom:1px solid #f3f4f6;align-items:flex-start;gap:12px;padding:16px 20px;transition:background .2s;display:flex;position:relative}.go-to-task-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;min-width:32px;height:32px;margin-top:4px;font-size:18px;font-weight:700;transition:all .2s;display:flex}.go-to-task-btn:hover{background:#2563eb;transform:translate(2px)}.go-to-task-btn:active{transform:translate(2px)scale(.95)}.notification-item.unread .go-to-task-btn{background:#2563eb;box-shadow:0 0 0 3px #3b82f633}.notification-item.unread .go-to-task-btn:hover{background:#1d4ed8}.notification-item:hover{background:#f9fafb}.notification-item:last-child{border-bottom:none}.notification-item.unread{background:#eff6ff}.notification-item.unread:hover{background:#dbeafe}.notification-icon{background:#f3f4f6;border-radius:50%;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;font-size:20px;display:flex}.notification-item.unread .notification-icon{background:#bfdbfe}.notification-content{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.notification-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.notification-type{color:#3b82f6;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.notification-time{color:#9ca3af;white-space:nowrap;font-size:12px}.notification-message{color:#111827;word-wrap:break-word;font-size:14px;line-height:1.5}.notification-item.unread .notification-message{font-weight:500}.notification-details{color:#6b7280;gap:6px;margin-top:4px;font-size:13px;display:flex}.detail-label{color:#9ca3af;font-weight:500}.detail-value{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.unread-indicator{background:#3b82f6;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;right:40px;transform:translateY(-50%)}.mark-read-btn{color:#6b7280;cursor:pointer;opacity:0;background:0 0;border:1px solid #d1d5db;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:all .2s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.notification-item:hover .mark-read-btn{opacity:1}.mark-read-btn:hover{color:#fff;background:#10b981;border-color:#10b981;transform:translateY(-50%)scale(1.1)}.mark-read-btn:active{transform:translateY(-50%)scale(.95)}.notification-list:empty:after{content:"No hay notificaciones";text-align:center;color:#9ca3af;padding:40px 20px;font-size:14px;display:block}.notification-bell{display:inline-block;position:relative}.bell-button{color:#374151;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex;position:relative}.bell-button:hover{background:#f3f4f6}.bell-button.active{background:#e5e7eb}.bell-button svg{width:20px;height:20px}.unread-badge{color:#fff;background:#ef4444;border:2px solid #fff;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:600;display:flex;position:absolute;top:4px;right:4px}.connection-status{border:2px solid #fff;border-radius:50%;width:8px;height:8px;position:absolute;bottom:4px;right:4px}.connection-status.connected{background:#10b981}.connection-status.disconnected{background:#ef4444}.notification-dropdown{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;width:380px;max-height:600px;animation:.2s dropdownFadeIn;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 25px #0000001a}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.dropdown-header h3{color:#111827;margin:0;font-size:16px;font-weight:600}.header-actions{align-items:center;gap:8px;display:flex}.sound-toggle{justify-content:center;align-items:center;display:flex}.mark-all-read{color:#3b82f6;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:12px;transition:background .2s}.mark-all-read:hover{background:#eff6ff}.dropdown-content{flex:1;max-height:480px;overflow-y:auto}.dropdown-content::-webkit-scrollbar{width:6px}.dropdown-content::-webkit-scrollbar-track{background:0 0}.dropdown-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.dropdown-content::-webkit-scrollbar-thumb:hover{background:#9ca3af}.no-notifications{color:#6b7280;justify-content:center;align-items:center;padding:60px 20px;display:flex}.no-notifications p{margin:0;font-size:14px}.dropdown-footer{text-align:center;border-top:1px solid #e5e7eb;padding:12px 20px}.view-all{color:#3b82f6;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s;display:inline-block}.view-all:hover{background:#eff6ff}@media (max-width:480px){.notification-dropdown{width:320px;right:-20px}}.language-selector{display:inline-block;position:relative}.language-selector-button{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-color);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;min-width:60px;padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.language-selector-button:hover{background:var(--hover-bg);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.language-flag{letter-spacing:.5px;font-size:.75rem;font-weight:600}.language-code{letter-spacing:.5px;font-weight:600}.language-arrow{margin-left:.25rem;font-size:.75rem;transition:transform .2s}.language-selector:hover .language-arrow{transform:rotate(180deg)}.language-dropdown{background:var(--card-bg);border:1px solid var(--border-color);opacity:0;visibility:hidden;z-index:1000;border-radius:8px;min-width:140px;margin-top:.5rem;transition:all .2s;position:absolute;top:100%;right:0;transform:translateY(-10px);box-shadow:0 4px 16px #00000026}.language-selector:hover .language-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.language-option{width:100%;color:var(--text-color);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.language-option:hover{background:var(--hover-bg)}.language-option.active{background:var(--primary-color);color:#fff}.language-option.active:hover{background:var(--primary-hover)}.language-option:first-child{border-radius:8px 8px 0 0}.language-option:last-child{border-radius:0 0 8px 8px}.language-option:only-child{border-radius:8px}@media (max-width:768px){.language-selector-button{min-width:auto;padding:.5rem}.language-code{display:none}.language-dropdown{min-width:120px}}#toast-container{z-index:10000;pointer-events:none;flex-direction:column;gap:12px;display:flex;position:fixed;top:20px;right:20px}.toast-notification{pointer-events:auto;background:#fff;border-left:4px solid #3b82f6;border-radius:12px;align-items:flex-start;gap:12px;min-width:320px;max-width:400px;padding:16px;transition:all .3s;animation:.3s slideIn;display:flex;box-shadow:0 10px 25px #00000026}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.toast-notification.fade-out{animation:.3s slideOut}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(400px)}}.toast-icon{background:#eff6ff;border-radius:50%;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;font-size:20px;display:flex}.toast-content{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.toast-title{color:#111827;margin:0;font-size:14px;font-weight:600}.toast-message{color:#6b7280;word-wrap:break-word;margin:0;font-size:13px;line-height:1.5}.toast-close{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;min-width:24px;height:24px;padding:0;font-size:24px;line-height:1;transition:all .2s;display:flex}.toast-close:hover{color:#111827;background:#f3f4f6}.toast-notification.success{border-left-color:#10b981}.toast-notification.success .toast-icon{background:#d1fae5}.toast-notification.warning{border-left-color:#f59e0b}.toast-notification.warning .toast-icon{background:#fef3c7}.toast-notification.error{border-left-color:#ef4444}.toast-notification.error .toast-icon{background:#fee2e2}.toast-notification.info{border-left-color:#3b82f6}.toast-notification.info .toast-icon{background:#dbeafe}@media (max-width:480px){#toast-container{top:10px;left:10px;right:10px}.toast-notification{min-width:auto;max-width:100%}}.topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border-color);z-index:90;justify-content:space-between;align-items:center;height:56px;padding:0 1.5rem;transition:left .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:280px;right:0;box-shadow:0 1px 2px #0000000d}.sidebar-collapsed~.topbar{left:72px}body:has(.sidebar.collapsed) .topbar{left:72px}.topbar-left{flex:1}.page-title{color:var(--text-color);margin:0;font-size:1.25rem;font-weight:600}.topbar-right{align-items:center;gap:.75rem;display:flex}.user-name{color:var(--secondary-text);background:var(--hover-bg);border-radius:var(--border-radius);padding:.5rem .75rem;font-size:.875rem;font-weight:500}.btn-theme,.btn-logout{border-radius:var(--border-radius);cursor:pointer;box-shadow:var(--box-shadow);border:none;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.btn-theme{background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color)}.btn-theme:hover{background:var(--hover-bg);box-shadow:var(--box-shadow-hover);transform:translateY(-1px)}.btn-logout{background:var(--danger-color);color:#fff}.btn-logout:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}@media (max-width:768px){.topbar{padding:0 1rem;left:0}.page-title{font-size:1.25rem}.user-name{display:none}}.app-container{background:var(--bg-primary);min-height:100vh;display:flex}.content-area{padding:var(--spacing-xl);background:var(--bg-secondary);flex:1;min-height:calc(100vh - 56px);margin-top:56px;overflow-y:auto}.content-area>*{animation:.3s ease-out fadeIn}@media (max-width:768px){.main-content,.main-content.sidebar-collapsed{margin-left:0}.content-area{padding:var(--spacing-md);min-height:calc(100vh - 60px);margin-top:60px}}.auth-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:#fff;border-radius:16px;width:100%;max-width:480px;padding:40px;animation:.5s fadeInUp;box-shadow:0 20px 60px #0000004d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-header{text-align:center;margin-bottom:30px}.auth-header h1{color:#333;margin-bottom:8px;font-size:28px;font-weight:700}.auth-header p{color:#666;font-size:14px}.auth-form{margin-bottom:20px}.form-row{grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;display:grid}.form-group input{box-sizing:border-box;border:2px solid #e1e8ed;border-radius:8px;width:100%;padding:12px 16px;font-size:14px;transition:all .3s}.form-group input:disabled{cursor:not-allowed;background-color:#f5f5f5}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;width:100%;margin-top:10px;padding:14px;font-size:16px;font-weight:600;transition:all .3s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#c33;background-color:#fee;border-left:4px solid #c33;border-radius:8px;margin-bottom:20px;padding:12px 16px;font-size:14px}.error-message p{margin:4px 0}.success-message{color:#2e7d32;background-color:#e8f5e9;border-left:4px solid #4caf50;border-radius:8px;margin-bottom:20px;padding:12px 16px;font-size:14px;animation:.3s slideDown}.info-message{color:#856404;background-color:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;font-size:14px;animation:.3s slideDown;display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.auth-divider{color:#999;align-items:center;margin:25px 0;font-size:14px;display:flex}.auth-divider:before,.auth-divider:after{content:"";background-color:#e1e8ed;flex:1;height:1px}.auth-divider span{padding:0 15px}.google-login-wrapper{justify-content:center;margin-bottom:20px;display:flex}.google-login-wrapper>div,.google-login-wrapper button{width:100%!important}.auth-footer{text-align:center;border-top:1px solid #e1e8ed;margin-top:25px;padding-top:20px}.auth-footer p{color:#666;margin:0;font-size:14px}.auth-footer a{color:#667eea;font-weight:600;text-decoration:none;transition:color .3s}.auth-footer a:hover{color:#764ba2;text-decoration:underline}@media (max-width:576px){.auth-card{padding:30px 20px}.form-row{grid-template-columns:1fr}.auth-header h1{font-size:24px}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.dashboard-container{padding:var(--spacing-md)}.stats-grid{gap:var(--spacing-md);grid-template-columns:1fr}.stat-card{padding:var(--spacing-md)}.stat-icon{width:52px;height:52px;font-size:2rem}.stat-info h3{font-size:1.5rem}.recent-tasks-section,.task-item{padding:var(--spacing-md)}.task-meta{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.dashboard-container{padding:var(--spacing-sm)}.section-title{font-size:1.25rem}}@media (max-width:1024px){.welcome-section{grid-template-columns:1fr}}@media (max-width:768px){.main-content{margin-left:0}.dashboard-content{padding:1rem}.dashboard-grid{grid-template-columns:1fr}}.profile-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}.profile-header{background-color:#fff;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px 30px;display:flex;box-shadow:0 2px 10px #0000001a}.header-title{flex-direction:column;gap:.3rem;display:flex}.profile-header h1{color:#333;margin:0;font-size:28px}.profile-header .subtitle{color:#666;margin:0;font-size:14px;font-weight:400}.btn-back:hover{background-color:#5a6268;transform:translateY(-2px)}.btn-logout:hover{background-color:#c82333;transform:translateY(-2px)}.profile-content{max-width:800px;margin:0 auto}.error-card{color:#721c24;text-align:center;background-color:#f8d7da;border-radius:10px;margin-bottom:20px;padding:20px}.btn-retry{color:#fff;cursor:pointer;background-color:#721c24;border:none;border-radius:5px;margin-top:10px;padding:8px 16px;font-size:14px}.btn-retry:hover{background-color:#5a171c}.profile-card{background-color:#fff;border-radius:10px;padding:30px;box-shadow:0 4px 15px #0000001a}.profile-card h2{color:#333;border-bottom:2px solid #667eea;margin-top:0;margin-bottom:25px;padding-bottom:10px}.profile-info{flex-direction:column;gap:20px;display:flex}.info-item{background-color:#f8f9fa;border-radius:5px;justify-content:space-between;align-items:center;padding:15px;transition:background-color .3s;display:flex}.info-item:hover{background-color:#e9ecef}.info-item label{color:#495057;min-width:100px;font-weight:600}.info-item span{color:#212529;text-align:right;flex:1}.no-data{text-align:center;color:#6c757d;background-color:#fff;border-radius:10px;padding:50px}@media (max-width:768px){.profile-header{text-align:center;flex-direction:column;gap:15px}.header-buttons{justify-content:center;width:100%}.info-item{text-align:center;flex-direction:column;gap:10px}.info-item label{min-width:auto}.info-item span{text-align:center}}.videocall-container{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}.videocall-header{background-color:#fff;justify-content:space-between;align-items:center;padding:20px 30px;display:flex;box-shadow:0 2px 10px #0000001a}.header-welcome h1{color:#333;margin:0;font-size:28px}.header-welcome p{color:#666;margin:5px 0 0;font-size:14px}.header-buttons{gap:10px;display:flex}.btn-back,.btn-logout{cursor:pointer;border:none;border-radius:5px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .3s}.btn-back{color:#fff;background-color:#6c757d}.btn-back:hover{background-color:#5a6268}.btn-logout{color:#fff;background-color:#dc3545}.btn-logout:hover{background-color:#c82333}.videocall-content{max-width:1400px;margin:0 auto;padding:30px}.users-panel{background-color:#fff;border-radius:10px;padding:30px;box-shadow:0 4px 6px #0000001a}.users-panel h2{color:#333;margin:0 0 20px;font-size:24px}.users-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.user-card{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:10px;justify-content:space-between;align-items:center;padding:20px;transition:transform .3s,box-shadow .3s;display:flex}.user-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.user-avatar{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:24px;font-weight:700;display:flex}.user-details h3{color:#333;margin:0;font-size:18px}.status{border-radius:12px;padding:4px 8px;font-size:12px;font-weight:500;display:inline-block}.status.online{color:#155724;background-color:#d4edda}.status.offline{color:#721c24;background-color:#f8d7da}.btn-call{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:25px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .3s}.btn-call:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 8px #0003}.btn-call:disabled{opacity:.5;cursor:not-allowed}.no-users{text-align:center;color:#666;padding:40px;font-size:16px}.incoming-call-modal{z-index:1000;background-color:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal-content{text-align:center;background-color:#fff;border-radius:15px;max-width:400px;padding:40px;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{color:#333;margin:0 0 20px;font-size:28px}.modal-content p{color:#666;margin:0 0 30px;font-size:18px}.modal-buttons{justify-content:center;gap:15px;display:flex}.btn-accept,.btn-reject{cursor:pointer;border:none;border-radius:25px;padding:15px 30px;font-size:16px;font-weight:600;transition:all .3s}.btn-accept{color:#fff;background-color:#28a745}.btn-accept:hover{background-color:#218838;transform:scale(1.05)}.btn-reject{color:#fff;background-color:#dc3545}.btn-reject:hover{background-color:#c82333;transform:scale(1.05)}.call-interface{background-color:#1a1a1a;border-radius:15px;min-height:600px;padding:20px}.videos-container{background-color:#000;border-radius:10px;width:100%;height:600px;position:relative;overflow:hidden}.video-wrapper{position:relative}.remote-video-wrapper{width:100%;height:100%}.local-video-wrapper{z-index:10;border:3px solid #fff;border-radius:10px;width:250px;height:188px;position:absolute;bottom:20px;right:20px;overflow:hidden;box-shadow:0 4px 6px #0000004d}.remote-video,.local-video{object-fit:cover;background-color:#000;width:100%;height:100%}.video-label{color:#fff;background-color:#000000b3;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:500;position:absolute;bottom:10px;left:10px}.call-controls{text-align:center;margin-top:20px}.btn-end-call{color:#fff;cursor:pointer;background-color:#dc3545;border:none;border-radius:30px;padding:15px 40px;font-size:18px;font-weight:600;transition:all .3s}.btn-end-call:hover{background-color:#c82333;transform:scale(1.05)}@media (max-width:768px){.users-list{grid-template-columns:1fr}.user-card{text-align:center;flex-direction:column}.user-info{flex-direction:column}.btn-call{width:100%;margin-top:15px}.local-video-wrapper{width:150px;height:113px;bottom:10px;right:10px}.videos-container{height:400px}}.user-list{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color);animation:.3s ease-out fadeIn;overflow:hidden}.user-list-header{background:linear-gradient(135deg,var(--primary-color)0%,var(--secondary-color)100%);color:#fff;justify-content:space-between;align-items:center;padding:1.75rem 2rem;display:flex}.header-left{align-items:center;gap:1rem;display:flex}.user-list-header h2{align-items:center;gap:.5rem;margin:0;font-size:1.75rem;font-weight:700;display:flex}.user-count{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;padding:.375rem .875rem;font-size:.875rem;font-weight:600}.user-list-controls{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:1.5rem 2rem}.search-box{max-width:500px;position:relative}.search-icon{color:var(--text-tertiary);pointer-events:none;font-size:1.125rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--card-bg);width:100%;color:var(--text-primary);padding:.875rem 1rem .875rem 3rem;font-size:.9375rem;transition:all .2s}.search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px var(--primary-light);outline:none}.search-input::placeholder{color:var(--text-tertiary)}.btn-create{color:var(--primary-color);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-sm);background:#fff;border:none;align-items:center;gap:.5rem;padding:.875rem 1.75rem;font-size:.9375rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn-create:hover{box-shadow:var(--shadow-lg);background:var(--primary-light);transform:translateY(-2px)}.users-table th{background:var(--bg-secondary);color:var(--text-primary);z-index:10;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .2s;position:sticky;top:0}.users-table th:hover{background:var(--bg-primary)}.users-table th.sort-asc:after{content:" ↑";margin-left:.5rem}.users-table th.sort-desc:after{content:" ↓";margin-left:.5rem}.users-table tbody tr{transition:background-color .2s}.users-table tbody tr:hover{background:var(--bg-secondary)}.user-avatar{background:var(--primary-gradient);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;font-weight:600;display:flex}.user-info{align-items:center;gap:.75rem;display:flex}.user-details h4{color:var(--text-primary);margin:0;font-size:.95rem;font-weight:600}.user-details p{color:var(--text-secondary);margin:.25rem 0 0;font-size:.85rem}.status-badge{text-transform:uppercase;border-radius:20px;padding:.25rem .75rem;font-size:.8rem;font-weight:600;display:inline-block}.role-badge{text-transform:uppercase;border-radius:20px;padding:.25rem .75rem;font-size:.8rem;font-weight:600;display:inline-block}.user-table-container{padding:0;overflow-x:auto}.user-table{border-collapse:separate;border-spacing:0;width:100%}.user-table thead th{background:var(--bg-secondary);color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;text-align:left;z-index:10;border-bottom:2px solid var(--border-color);padding:1rem 1.5rem;font-size:.875rem;font-weight:600;position:sticky;top:0}.user-table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.user-table thead th.sortable:hover{background:var(--hover-bg);color:var(--primary-color)}.user-table tbody tr{border-bottom:1px solid var(--border-light);transition:all .2s}.user-table tbody tr:hover{background:var(--bg-secondary);transform:scale(1.005);box-shadow:0 2px 8px #0000000a}.user-table tbody td{color:var(--text-primary);vertical-align:middle;padding:1.25rem 1.5rem;font-size:.9375rem}.user-email{color:var(--primary-color);font-weight:500}.user-name{background:0 0;border:none;margin:0;padding:0;font-weight:500}.date-cell{color:var(--text-secondary);font-size:.875rem}.status-badge{border-radius:50px;align-items:center;gap:.375rem;padding:.375rem .875rem;font-size:.8125rem;font-weight:600;display:inline-flex}.status-badge.active{background:var(--success-bg);color:var(--success-color);border:1px solid var(--success-border)}.status-badge.inactive{background:var(--error-bg);color:var(--error-color);border:1px solid var(--error-border)}.role-badge{border-radius:50px;align-items:center;gap:.375rem;padding:.375rem .875rem;font-size:.8125rem;font-weight:600;display:inline-flex}.role-badge.admin{background:var(--warning-bg);color:var(--warning-color);border:1px solid var(--warning-border)}.role-badge.user{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-border)}.action-buttons{justify-content:flex-start;align-items:center;gap:.5rem;display:flex}.btn-action{border-radius:var(--radius-md);cursor:pointer;min-width:36px;height:36px;color:var(--text-secondary);border:none;border:1px solid var(--border-color);background:0 0;justify-content:center;align-items:center;padding:.5rem;font-size:1.125rem;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn-action:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-action:active{transform:translateY(0)}.btn-action:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.btn-edit{color:var(--info-color);border-color:var(--info-border)}.btn-edit:hover{background:var(--info-color);color:#fff;border-color:var(--info-color)}.btn-reset{color:var(--warning-color);border-color:var(--warning-border)}.btn-reset:hover{background:var(--warning-color);color:#fff;border-color:var(--warning-color)}.btn-delete{color:var(--error-color);border-color:var(--error-border)}.btn-delete:hover:not(:disabled){background:var(--error-color);color:#fff;border-color:var(--error-color)}.loading{text-align:center;padding:4rem 2rem}.spinner{border:4px solid var(--border-light);border-top:4px solid var(--primary-color);border-radius:50%;width:48px;height:48px;margin:0 auto 1.5rem;animation:.8s linear infinite spin}.loading p{color:var(--text-secondary);margin:0;font-size:1rem}.empty-icon{opacity:.5;margin-bottom:1rem;font-size:4rem}.empty-state h3{color:var(--text-primary);margin:0 0 .5rem;font-size:1.5rem;font-weight:600}.empty-state p{color:var(--text-secondary);margin:0;font-size:1rem}@media (max-width:1024px){.user-list-header{flex-direction:column;align-items:flex-start;gap:1rem}.user-list-header h2{font-size:1.25rem}}@media (max-width:768px){.search-and-actions{flex-direction:column;align-items:stretch}.search-container{max-width:none}.users-table th,.users-table td{padding:.75rem .5rem}.user-info{flex-direction:column;align-items:flex-start;gap:.5rem}.actions-cell{flex-direction:column;gap:.25rem}.btn-action{width:100%;height:36px}}@media (max-width:480px){.user-list-header{padding:1rem}.users-table th,.users-table td{padding:.5rem .25rem;font-size:.9rem}.status-badge,.role-badge{padding:.2rem .5rem;font-size:.75rem}}.user-form{background:var(--card-bg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);border-radius:12px;width:100%;max-width:600px;margin:0 auto;overflow:hidden}.form-header{background:var(--primary-gradient);color:#fff;border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.form-header h2{margin:0;font-size:1.5rem;font-weight:600}.btn-close{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;transition:all .2s;display:flex}.btn-close:hover{background:#ffffff4d;transform:scale(1.1)}.form-content{padding:2rem}.form-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.form-group{flex-direction:column;display:flex}.form-group label{color:var(--text-primary);margin-bottom:.5rem;font-size:.9rem;font-weight:600}.form-group input{border:2px solid var(--border-color);background:var(--input-bg);color:var(--text-primary);border-radius:8px;padding:.75rem 1rem;font-size:1rem;transition:all .2s}.form-group input:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-group input.error{border-color:var(--error-color);box-shadow:0 0 0 3px #ef44441a}.field-error{color:var(--error-color);margin-top:.25rem;font-size:.8rem;font-weight:500}.error-message.general{background:var(--error-bg);color:var(--error-color);border:1px solid var(--error-border);border-radius:8px;margin-bottom:1.5rem;padding:1rem;font-weight:500}.form-permissions{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:2rem;padding:1.5rem}.form-permissions h3{color:var(--text-primary);margin:0 0 1rem;font-size:1.1rem;font-weight:600}.permission-grid{gap:1rem;display:grid}.checkbox-label{cursor:pointer;background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;align-items:flex-start;padding:.75rem;transition:all .2s;display:flex}.checkbox-label:hover{border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.checkbox-label input[type=checkbox]{opacity:0;cursor:pointer;position:absolute}.checkmark{background:var(--input-bg);border:2px solid var(--border-color);border-radius:4px;flex-shrink:0;width:20px;height:20px;margin-top:.125rem;margin-right:.75rem;transition:all .2s;position:relative}.checkbox-label input:checked~.checkmark{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-label input:checked~.checkmark:after{content:"✓";color:#fff;font-size:12px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.label-text{color:var(--text-primary);flex:1;font-weight:500}.label-text small{color:var(--text-secondary);margin-top:.25rem;font-size:.8rem;font-weight:400;display:block}.form-actions{border-top:1px solid var(--border-color);justify-content:flex-end;gap:1rem;padding-top:1.5rem;display:flex}.btn-cancel,.btn-save{cursor:pointer;border:none;border-radius:8px;min-width:120px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.btn-save{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-sm)}.btn-save:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-save:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width:768px){.form-grid{grid-template-columns:1fr;gap:1rem}.form-header{padding:1rem 1.5rem}.form-header h2{font-size:1.25rem}.form-content{padding:1.5rem}.form-actions{flex-direction:column}.btn-cancel,.btn-save{width:100%}}@media (max-width:480px){.user-form{border-radius:0;max-width:none;margin:0}.form-header,.form-content{padding:1rem}}.confirm-overlay{z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.confirm-dialog{background:var(--card-bg);box-shadow:var(--shadow-xl);border:1px solid var(--border-color);border-radius:12px;min-width:400px;max-width:500px;animation:.3s ease-out slideIn}.confirm-header{border-bottom:1px solid var(--border-color);padding:1.5rem 2rem 1rem}.confirm-header h3{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.confirm-body{padding:1.5rem 2rem}.confirm-body p{color:var(--text-secondary);margin:0;font-size:1rem;line-height:1.5}.confirm-actions{border-top:1px solid var(--border-color);justify-content:flex-end;gap:1rem;padding:1rem 2rem 1.5rem;display:flex}.btn-cancel,.btn-confirm{cursor:pointer;border:none;border-radius:8px;min-width:100px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.btn-cancel{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-cancel:hover{background:var(--text-secondary);color:#fff}.btn-confirm.danger{background:var(--error-bg);color:var(--error-color);border:1px solid var(--error-border)}.btn-confirm.danger:hover{background:var(--error-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-confirm.warning{background:var(--warning-bg);color:var(--warning-color);border:1px solid var(--warning-border)}.btn-confirm.warning:hover{background:var(--warning-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-confirm.success{background:var(--success-bg);color:var(--success-color);border:1px solid var(--success-border)}.btn-confirm.success:hover{background:var(--success-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}@media (max-width:480px){.confirm-dialog{min-width:90vw;margin:1rem}.confirm-header,.confirm-body,.confirm-actions{padding-left:1.5rem;padding-right:1.5rem}.confirm-actions{flex-direction:column}.btn-cancel,.btn-confirm{width:100%}}.reset-password-overlay{z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.reset-password-modal{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-2xl);width:90%;max-width:500px;max-height:90vh;animation:.3s ease-out slideUp;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,var(--primary-light)0%,var(--secondary-light)100%);justify-content:space-between;align-items:flex-start;padding:1.5rem;display:flex}.header-content{flex:1;align-items:center;gap:1rem;display:flex}.header-icon{color:var(--primary-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#fff;padding:.75rem;font-size:2rem}.modal-header h2{color:var(--text-primary);margin:0 0 .25rem;font-size:1.5rem;font-weight:700}.user-info{color:var(--text-secondary);margin:0;font-size:.875rem}.user-info strong{color:var(--primary-color);font-weight:600}.btn-close{border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);background:#fff;justify-content:center;align-items:center;font-size:1.25rem;transition:all .2s;display:flex}.btn-close:hover{background:var(--error-bg);color:var(--error-color);border-color:var(--error-color);transform:rotate(90deg)}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--input-bg);width:100%;color:var(--text-primary);padding:.875rem 3rem .875rem 1rem;font-size:.9375rem;transition:all .2s}.password-input-wrapper input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px var(--primary-light);background:var(--card-bg);outline:none}.password-input-wrapper input.error{border-color:var(--error-color)}.password-input-wrapper input.error:focus{box-shadow:0 0 0 4px var(--error-bg)}.toggle-password{cursor:pointer;color:var(--text-tertiary);border-radius:var(--radius-md);background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;font-size:1.25rem;transition:all .2s;display:flex;position:absolute;right:.75rem}.toggle-password:hover{color:var(--primary-color);background:var(--primary-light)}.error-message{color:var(--error-color);margin-top:.5rem;font-size:.8125rem;font-weight:500;display:block}.password-strength{margin-top:.75rem}.strength-bar{background:var(--border-light);border-radius:3px;height:6px;margin-bottom:.375rem;overflow:hidden}.strength-fill{border-radius:3px;height:100%;transition:all .3s}.strength-label{font-size:.8125rem;font-weight:600}.password-requirements{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:1.5rem;padding:1rem}.password-requirements h4{color:var(--text-primary);margin:0 0 .75rem;font-size:.875rem;font-weight:600}.password-requirements ul{margin:0;padding:0;list-style:none}.password-requirements li{color:var(--text-secondary);padding:.375rem 0 .375rem 1.75rem;font-size:.8125rem;transition:color .2s;position:relative}.password-requirements li:before{content:"○";color:var(--text-tertiary);font-size:1rem;transition:all .2s;position:absolute;left:.5rem}.password-requirements li.valid{color:var(--success-color);font-weight:500}.password-requirements li.valid:before{content:"✓";color:var(--success-color);font-weight:700}.modal-actions{border-top:1px solid var(--border-color);justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;display:flex}.btn-cancel{border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;background:#fff;padding:.875rem 1.5rem;font-size:.9375rem;font-weight:600;transition:all .2s}.btn-cancel:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-confirm{border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary-color)0%,var(--secondary-color)100%);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);border:none;padding:.875rem 1.5rem;font-size:.9375rem;font-weight:600;transition:all .2s}.btn-confirm:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-confirm:disabled,.btn-cancel:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@media (max-width:768px){.reset-password-modal{width:95%;max-height:95vh}.modal-header,.modal-body{padding:1rem}.modal-actions{flex-direction:column-reverse}.btn-cancel,.btn-confirm{width:100%}}.notification{z-index:3000;min-width:350px;max-width:500px;animation:.3s ease-out slideInRight;position:fixed;top:20px;right:20px}.notification-content{background:var(--card-bg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);border-radius:8px;align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.notification.success{border-left:4px solid var(--success-color)}.notification.success .notification-content{background:var(--success-bg);border-color:var(--success-border)}.notification.error{border-left:4px solid var(--error-color)}.notification.error .notification-content{background:var(--error-bg);border-color:var(--error-border)}.notification.warning{border-left:4px solid var(--warning-color)}.notification.warning .notification-content{background:var(--warning-bg);border-color:var(--warning-border)}.notification.info{border-left:4px solid var(--info-color)}.notification.info .notification-content{background:var(--info-bg);border-color:var(--info-border)}.notification-icon{flex-shrink:0;font-size:1.25rem}.notification-message{color:var(--text-primary);flex:1;font-weight:500;line-height:1.4}.notification-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:1.25rem;transition:all .2s;display:flex}.notification-close:hover{background:var(--bg-secondary);color:var(--text-primary)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (max-width:480px){.notification{min-width:auto;max-width:none;left:10px;right:10px}.notification-content{padding:.875rem 1rem}.notification-message{font-size:.9rem}}.users-layout{background:var(--bg-primary);min-height:100vh;display:flex}.main-content{flex-direction:column;flex:1;margin-left:280px;transition:margin-left .3s;display:flex}.main-content.sidebar-collapsed{margin-left:72px}.users-content{flex:1;padding:2rem;position:relative}.access-denied{text-align:center;background:var(--card-bg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);border-radius:12px;max-width:500px;margin:0 auto;padding:4rem 2rem}.access-denied h2{color:var(--error-color);margin-bottom:1rem;font-size:2rem}.access-denied p{color:var(--text-secondary);font-size:1.1rem}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-primary);box-shadow:var(--shadow-xl);border-radius:12px;max-width:90vw;max-height:90vh;animation:.3s ease-out slideIn;overflow-y:auto}@media (max-width:1024px){.main-content{margin-left:0}.users-content{padding:1rem}}@media (max-width:768px){.modal-content{max-width:95vw;max-height:95vh;margin:1rem}.users-content{padding:.5rem}}@media (max-width:480px){.access-denied{margin:1rem;padding:2rem 1rem}.access-denied h2{font-size:1.5rem}.access-denied p{font-size:1rem}}.task-card{cursor:pointer;background:#fff;border-left:4px solid #0000;border-radius:12px;padding:20px;transition:all .3s;animation:.4s ease-out slideInFromTop;position:relative;box-shadow:0 2px 8px #00000014}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.task-card.new-task{border-left-color:#10b981;animation:1.5s ease-out newTaskHighlight}@keyframes newTaskHighlight{0%{background-color:#d1fae5;transform:scale(1.02)}to{background-color:#fff;transform:scale(1)}}.task-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001f}.task-card.overdue{border-left-color:#ef4444}.task-card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.priority-badge{color:#fff;text-transform:capitalize;border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.task-actions{gap:4px;display:flex}.btn-icon{cursor:pointer;opacity:.7;background:0 0;border:none;border-radius:6px;padding:6px;font-size:16px;transition:all .2s}.btn-icon:hover{opacity:1;background:#f3f4f6}.task-title{color:#1f2937;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.task-description{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 12px;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.task-status-container{margin-bottom:12px}.status-badge{border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.task-category{color:#6b7280;margin-bottom:12px;font-size:13px}.task-tags{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.task-tag{color:#374151;border-radius:12px;padding:3px 10px;font-size:11px;font-weight:500;display:inline-block}.task-tag.more-tags{color:#6b7280;background:#e5e7eb}.task-card-footer{border-top:1px solid #f3f4f6;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;display:flex}.assigned-user{color:#3b82f6;font-size:13px;font-weight:500}.unassigned{color:#9ca3af;font-size:13px;font-style:italic}.task-due-date{color:#6b7280;font-size:13px}.task-due-date.overdue{color:#ef4444;font-weight:600}.task-meta{border-top:1px solid #f3f4f6;gap:12px;margin-top:12px;padding-top:12px;display:flex}.meta-item{color:#6b7280;align-items:center;gap:4px;font-size:12px;display:flex}.task-card-loading{background:#ffffffe6;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.mini-spinner{border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@media (max-width:768px){.task-card{padding:16px}.task-title{font-size:16px}.task-description{font-size:13px}}.typing-indicator{background:#f9fafb;border-radius:8px;align-items:center;gap:8px;margin:8px 0;padding:8px 12px;display:flex}.typing-dots{align-items:center;gap:4px;display:flex}.typing-dots span{background:#9ca3af;border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite typingBounce}.typing-dots span:first-child{animation-delay:-.32s}.typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,80%,to{opacity:.5;transform:scale(0)}40%{opacity:1;transform:scale(1)}}.typing-text{color:#6b7280;font-size:13px;font-style:italic}.emoji-reaction-picker{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.reactions-display{flex-wrap:wrap;gap:6px;display:flex}.reaction-badge{cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;align-items:center;gap:4px;padding:4px 8px;font-size:14px;transition:all .2s;display:flex}.reaction-badge:hover{background:#f3f4f6;border-color:#d1d5db;transform:scale(1.05)}.reaction-badge.user-reacted{background:#dbeafe;border-color:#3b82f6}.reaction-badge.user-reacted:hover{background:#bfdbfe}.reaction-emoji{font-size:16px;line-height:1}.reaction-count{color:#6b7280;font-size:12px;font-weight:500}.reaction-badge.user-reacted .reaction-count{color:#1d4ed8}.add-reaction-container{position:relative}.add-reaction-btn{cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;transition:all .2s;display:flex}.add-reaction-btn:hover{background:#f3f4f6;border-color:#3b82f6;transform:scale(1.1)}.emoji-picker-dropdown{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:12px;min-width:250px;margin-bottom:8px;animation:.2s ease-out slideUp;position:absolute;bottom:100%;left:0;box-shadow:0 10px 25px #0000001a}.emoji-picker-header{color:#374151;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;font-weight:500;display:flex}.close-picker{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:24px;line-height:1;transition:all .2s;display:flex}.close-picker:hover{color:#374151;background:#f3f4f6}.emoji-picker-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;display:grid}.emoji-option{aspect-ratio:1;cursor:pointer;background:#f9fafb;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;width:100%;font-size:28px;transition:all .2s;display:flex}.emoji-option:hover{background:#f3f4f6;border-color:#d1d5db;transform:scale(1.1)}.emoji-option.selected{background:#dbeafe;border-color:#3b82f6}.emoji-option.selected:hover{background:#bfdbfe}@media (max-width:768px){.emoji-picker-dropdown{min-width:200px}.emoji-picker-grid{grid-template-columns:repeat(2,1fr)}.emoji-option{font-size:24px}}.comment-history-modal{width:90vw;max-width:700px}.modal-body{max-height:500px;padding:20px;overflow-y:auto}.loading-state,.error-state,.empty-state{text-align:center;color:#6b7280;padding:40px 20px}.error-state{color:#ef4444}.history-list{flex-direction:column;gap:16px;display:flex}.history-entry{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px;transition:all .2s}.history-entry:hover{background:#f3f4f6;box-shadow:0 2px 4px #0000000d}.history-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.history-number{color:#3b82f6;font-size:14px;font-weight:600}.history-date{color:#9ca3af;font-size:12px}.history-meta{color:#6b7280;margin-bottom:12px;font-size:13px}.history-editor strong{color:#374151}.history-content{background:#fff;border-left:3px solid #3b82f6;border-radius:6px;padding:12px}.history-content p{color:#374151;white-space:pre-wrap;word-break:break-word;margin:0;line-height:1.6}.modal-footer{border-top:1px solid #e5e7eb;justify-content:flex-end;padding:16px 20px;display:flex}.comment-drop-zone{background-color:#f7fafc;border:2px dashed #cbd5e0;border-radius:8px;margin:10px 0;padding:20px;transition:all .3s}.comment-drop-zone.dragging{background-color:#ebf8ff;border-color:#4299e1;transform:scale(1.02)}.comment-drop-zone.uploading{background-color:#faf5ff;border-color:#9f7aea}.drop-zone-content{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;min-height:80px;display:flex}.drop-zone-icon{margin-bottom:8px;font-size:32px}.drop-zone-text{color:#4a5568;margin:0;font-size:14px}.drop-zone-link{color:#4299e1;text-decoration:underline}.drop-zone-hint{color:#a0aec0;margin-top:4px;font-size:12px}.spinner-small{border:3px solid #f3f3f3;border-top-color:#4299e1;border-radius:50%;width:30px;height:30px;margin-bottom:10px;animation:1s linear infinite spin}.comment-attachments{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;margin:10px 0;padding:12px}.attachments-header{color:#4a5568;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:500;display:flex}.attachments-icon{font-size:16px}.attachments-count{color:#718096}.attachments-list{flex-direction:column;gap:8px;display:flex}.attachment-item{background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;justify-content:space-between;align-items:center;padding:10px;transition:all .2s;display:flex}.attachment-item:hover{border-color:#cbd5e0;box-shadow:0 1px 3px #0000001a}.attachment-info{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.attachment-icon{flex-shrink:0;font-size:24px}.attachment-details{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.attachment-name{color:#2d3748;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.attachment-size{color:#a0aec0;font-size:11px}.attachment-actions{flex-shrink:0;gap:4px;display:flex}.btn-attachment-action{cursor:pointer;background-color:#0000;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;text-decoration:none;transition:all .2s;display:inline-flex}.btn-attachment-action:hover{background-color:#edf2f7;transform:scale(1.1)}.btn-attachment-action.view:hover{background-color:#bee3f8}.btn-attachment-action.download:hover{background-color:#c6f6d5}.btn-attachment-action.delete:hover{background-color:#fed7d7}@media (max-width:600px){.attachment-item{flex-direction:column;align-items:flex-start;gap:8px}.attachment-actions{justify-content:flex-end;width:100%}}.searchable-selector{z-index:1000;background:#fff;border:1px solid #3b82f6;border-radius:8px;min-width:200px;max-width:300px;position:absolute;overflow:hidden;box-shadow:0 4px 12px #00000026}.searchable-selector-search{background:#f9fafb;border-bottom:1px solid #e5e7eb;padding:8px}.searchable-selector-input{border:1px solid #d1d5db;border-radius:4px;outline:none;width:100%;padding:6px 10px;font-family:inherit;font-size:12px;transition:border-color .2s}.searchable-selector-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.searchable-selector-list{max-height:200px;padding:4px;overflow-y:auto}.searchable-selector-item{cursor:pointer;border-radius:4px;margin:2px 0;padding:8px 12px;font-size:12px;transition:background-color .15s}.searchable-selector-item:hover{background:#eff6ff}.searchable-selector-item.selected{color:#1e40af;background:#dbeafe;font-weight:500}.searchable-selector-item.empty-option{color:#6b7280;font-style:italic}.searchable-selector-item.empty-option:hover{background:#f3f4f6}.searchable-selector-item.no-results{color:#9ca3af;cursor:default;text-align:center;padding:12px;font-style:italic}.searchable-selector-item.no-results:hover{background:0 0}.searchable-selector-list::-webkit-scrollbar{width:6px}.searchable-selector-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.searchable-selector-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.searchable-selector-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.task-detail-modal{flex-direction:column!important;width:90vw!important;max-width:1400px!important;max-height:90vh!important;display:flex!important}.modal-header{flex-shrink:0}.header-left{flex:1}.header-left h2{margin:0 0 8px}.task-meta-info,.header-right{align-items:center;gap:8px;display:flex}.detail-tabs{border-bottom:2px solid #e5e7eb;flex-shrink:0;gap:4px;padding:0 24px;display:flex}.detail-tabs .tab{cursor:pointer;color:#6b7280;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s}.detail-tabs .tab:hover{color:#3b82f6}.detail-tabs .tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.detail-content{flex:1;padding:24px;overflow-y:auto}.details-section{flex-direction:column;gap:24px;display:flex}.detail-group{flex-direction:column;gap:12px;display:flex}.detail-group h3{color:#1f2937;margin:0;font-size:16px;font-weight:600}.group-header{justify-content:space-between;align-items:center;display:flex}.task-description-full{color:#4b5563;white-space:pre-wrap;margin:0;line-height:1.6}.info-item label{color:#6b7280;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.info-item span{color:#1f2937;font-size:14px}.tags-list{flex-wrap:wrap;gap:8px;display:flex}.tag-item{color:#374151;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:500}.add-collaborator-form{gap:8px;margin-bottom:12px;display:flex}.add-collaborator-form .form-select{flex:1}.participants-list{flex-direction:column;gap:8px;display:flex}.participant-item{background:#f9fafb;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.participant-role{color:#6b7280;font-size:12px;font-weight:500}.comment-form{background:#f9fafb;border-radius:8px;flex-direction:column;gap:12px;padding:16px;display:flex}.replying-to,.editing-comment{color:#1e40af;background:#dbeafe;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.replying-to button,.editing-comment button{cursor:pointer;color:#1e40af;background:0 0;border:none;width:24px;height:24px;padding:0;font-size:18px}.comment-textarea{resize:vertical;border:1px solid #d1d5db;border-radius:8px;width:100%;min-height:80px;padding:12px;font-family:inherit;font-size:14px}.comment-textarea:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.comment-form-actions{justify-content:flex-end;gap:8px;display:flex}.comment-file-attachment{align-items:center;gap:12px;margin:8px 0;display:flex}.btn-attach-file{color:#4b5563;cursor:pointer;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;align-items:center;gap:4px;padding:6px 12px;font-size:13px;transition:all .2s;display:inline-flex}.btn-attach-file:hover{background:#e5e7eb;border-color:#9ca3af}.selected-file{background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;display:flex}.selected-file .file-name{color:#1e40af;font-weight:500}.selected-file .file-size{color:#6b7280;font-size:11px}.btn-remove-file{color:#ef4444;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px;font-weight:700;line-height:1;transition:color .2s}.btn-remove-file:hover{color:#dc2626}.comment-item{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;transition:all .2s;position:relative}.comment-item:hover{border-color:#d1d5db;box-shadow:0 1px 3px #0000001a}.comment-item.resolved{opacity:.8;background:#f8fafc;border-color:#10b981;order:999}.comment-item.resolved .comment-text{color:#64748b;text-decoration:line-through}.comment-header{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px;font-size:12px;display:flex}.comment-body{margin-bottom:6px}.comment-text{color:#374151;word-wrap:break-word;font-size:14px;line-height:1.3}.comment-item.level-1{border-left:3px solid #e5e7eb;margin-left:16px}.comment-item.level-2{border-left:3px solid #cbd5e1;margin-left:32px}.comment-item.level-3{border-left:3px solid #94a3b8;margin-left:48px}.comment-item.level-1 .comment-text,.comment-item.level-2 .comment-text,.comment-item.level-3 .comment-text{font-weight:500;color:#000!important}.comment-item.level-1 .comment-author,.comment-item.level-2 .comment-author,.comment-item.level-3 .comment-author{font-weight:700;color:#000!important}.comment-actions{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.btn-comment-action{color:#6b7280;cursor:pointer;background:0 0;border:1px solid #d1d5db;border-radius:4px;padding:3px 6px;font-size:11px;transition:all .2s}.btn-comment-action:hover{background:#f3f4f6;border-color:#9ca3af}.btn-comment-action.success{color:#10b981;border-color:#10b981}.btn-comment-action.success:hover{background:#d1fae5}.btn-comment-action.danger{color:#ef4444;border-color:#ef4444}.btn-comment-action.danger:hover{background:#fee2e2}.resolved-btn{color:#10b981!important;background:#d1fae5!important;border-color:#10b981!important}.inline-edit-container{flex-direction:column;gap:6px;display:flex}.inline-edit-textarea{resize:vertical;border:1px solid #d1d5db;border-radius:4px;width:100%;min-height:50px;padding:6px;font-family:inherit;font-size:13px}.inline-edit-actions{justify-content:flex-end;gap:6px;display:flex}.comment-attachments{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:6px}.comment-attachment-item{background:#f8fafc;border-radius:4px;align-items:center;gap:4px;margin-bottom:3px;margin-right:6px;padding:3px 6px;font-size:11px;display:inline-flex}.comment-attachment-item a{color:#3b82f6;text-decoration:none}.comment-attachment-item a:hover{text-decoration:underline}.file-size{color:#6b7280;font-size:10px}.facebook-reply-form{align-items:flex-start;gap:8px;margin-top:8px;margin-left:40px;display:flex;position:relative}.reply-connector{background:#e1e5e9;border-radius:1px;width:2px;position:absolute;top:0;bottom:0;left:-16px}.reply-connector:before{content:"";background:#e1e5e9;border-radius:1px;width:10px;height:2px;position:absolute;top:12px;left:-4px}.reply-form-container{flex:1;align-items:flex-start;gap:8px;min-height:32px;display:flex}.reply-avatar{background:#e3f2fd;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-top:4px;font-size:14px;display:flex}.facebook-reply-input{flex-direction:column;flex:1;gap:8px;display:flex;position:relative}.facebook-reply-textbox{resize:none;background:#fff;border:1px solid #dddfe2;border-radius:16px;outline:none;width:100%;min-height:32px;padding:8px 12px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s;color:#000!important}.facebook-reply-textbox:focus{border-color:#1877f2;box-shadow:0 0 0 2px #1877f21a}.facebook-reply-textbox::placeholder{color:#8a8d91}.reply-actions{justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;display:flex}.cancel-reply-btn{color:#65676b;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:600;transition:background-color .2s}.cancel-reply-btn:hover{background:#f2f3f5}.submit-reply-btn{color:#fff;cursor:pointer;background:#1877f2;border:none;border-radius:6px;padding:6px 12px;font-size:14px;font-weight:600;transition:background-color .2s}.submit-reply-btn:hover:not(:disabled){background:#166fe5}.submit-reply-btn:disabled{color:#bcc0c4;cursor:not-allowed;background:#e4e6ea}.resolve-container{position:relative}.resolve-options-menu{z-index:100;background:#fff;border:1px solid #d1d5db;border-radius:8px;min-width:200px;margin-top:4px;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000026}.resolve-option{text-align:left;color:#374151;cursor:pointer;background:0 0;border:none;border-radius:0;width:100%;padding:10px 12px;font-size:13px;font-weight:500;transition:background-color .2s;display:block}.resolve-option:first-child{border-radius:8px 8px 0 0}.resolve-option:last-child{border-radius:0 0 8px 8px}.resolve-option:hover{background:#f3f4f6}.resolve-option:not(:last-child){border-bottom:1px solid #e5e7eb}.comments-section{flex-direction:column;gap:12px;display:flex}.comment-item._optimistic{opacity:.7;position:relative}.comment-item._optimistic:after{content:"";border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.comment-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:4px;font-size:12px;display:flex;position:relative}.comment-header-left{flex-wrap:wrap;flex:1;align-items:center;gap:6px;display:flex}.comment-header-right{align-items:center;gap:4px;display:flex}.comment-author{color:#1f2937;font-weight:600}.comment-date{color:#6b7280;font-size:11px}.resolved-badge{color:#fff;background:#10b981;border-radius:12px;padding:2px 6px;font-size:10px;font-weight:500}.history-link{color:#6b7280;cursor:pointer;background:0 0;border:none;padding:0;font-size:10px;text-decoration:underline}.history-link:hover{color:#3b82f6}.delete-vote-container{align-items:center;gap:4px;display:flex}.delete-vote-counter{color:#6b7280;text-align:center;background:#f3f4f6;border-radius:8px;min-width:24px;padding:2px 4px;font-size:10px;font-weight:500;transition:all .2s}.delete-vote-btn{color:#ef4444;cursor:pointer;background:0 0;border:1px solid #ef4444;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:12px;transition:all .2s;display:flex}.delete-vote-btn:hover{background:#fee2e2;border-color:#dc2626}.delete-vote-btn.voted{color:#fff;background:#ef4444;border-color:#dc2626}.delete-vote-btn.voted:hover{background:#dc2626}.delete-vote-btn.voting{opacity:.6;cursor:wait;animation:1s ease-in-out infinite pulse}.delete-vote-btn:disabled{cursor:not-allowed}.btn-comment-action.active{color:#3b82f6;background:#dbeafe;border-color:#3b82f6}.btn-comment-action:disabled{opacity:.6;cursor:not-allowed}.mention-selector-container{display:inline-block;position:relative}.btn-mention-user{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:4px;padding:6px 12px;font-size:13px;transition:background .2s}.btn-mention-user:hover{background:#2563eb}.mention-dropdown-selector{z-index:1000;background:#fff;border:1px solid #d1d5db;border-radius:8px;min-width:250px;max-height:300px;margin-bottom:8px;position:absolute;bottom:100%;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.mention-dropdown-header{color:#6b7280;text-transform:uppercase;letter-spacing:.5px;background:#f3f4f6;border-bottom:1px solid #e5e7eb;padding:10px 12px;font-size:12px;font-weight:600}.mention-dropdown-item{cursor:pointer;border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:10px 12px;transition:background .15s;display:flex}.mention-dropdown-item:last-child{border-bottom:none}.mention-dropdown-item:hover{background:#eff6ff}.mention-dropdown-item.no-participants{color:#9ca3af;cursor:default;justify-content:center;font-size:13px}.mention-dropdown-item.no-participants:hover{background:#fff}.participant-name{color:#1f2937;font-size:14px;font-weight:500}.participant-role-badge{color:#2563eb;background:#dbeafe;border-radius:12px;padding:2px 8px;font-size:11px;font-weight:600}.selected-mention-badge{background:#dbeafe;border:1px solid #3b82f6;border-radius:6px;align-items:center;gap:8px;margin:8px 0;padding:8px 12px;font-size:13px;display:flex}.selected-mention-badge strong{color:#2563eb}.btn-clear-mention{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:18px;transition:background .2s;display:flex}.btn-clear-mention:hover{background:#0000001a}.mention-highlight{color:#2563eb;cursor:pointer;background-color:#dbeafe;border-radius:3px;padding:2px 4px;font-weight:600;transition:background-color .2s}.mention-highlight:hover{background-color:#bfdbfe}.mention-selector-inline{align-items:center;display:inline-flex;position:relative}.mention-edit-container{align-items:center;gap:4px;display:flex}.mention-search-dropdown{z-index:1000;background:#fff;border:1px solid #3b82f6;border-radius:8px;flex-direction:column;gap:6px;min-width:220px;max-width:300px;margin-top:4px;padding:8px;display:flex;position:absolute;top:100%;left:0;box-shadow:0 4px 12px #00000026}.mention-search-input{border:1px solid #d1d5db;border-radius:6px;outline:none;width:100%;padding:8px 12px;font-size:12px;transition:border-color .2s}.mention-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.mention-options-list{flex-direction:column;gap:2px;max-height:200px;display:flex;overflow-y:auto}.mention-options-list::-webkit-scrollbar{width:6px}.mention-options-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.mention-options-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.mention-option-item{cursor:pointer;color:#1f2937;border-radius:4px;padding:8px 12px;font-size:12px;transition:all .2s}.mention-option-item:hover{color:#2563eb;background:#eff6ff}.mention-option-item:first-child{color:#6b7280;font-style:italic}.mention-option-item.no-results{color:#9ca3af;cursor:default;text-align:center;font-style:italic}.mention-option-item.no-results:hover{color:#9ca3af;background:0 0}.btn-close-mention-dropdown{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:4px;align-self:flex-end;padding:6px;font-size:12px;font-weight:600;transition:all .2s}.btn-close-mention-dropdown:hover{background:#dc2626}.mention-user-select{cursor:pointer;color:#1f2937;background:#fff;border:1px solid #3b82f6;border-radius:4px;max-width:160px;padding:3px 8px;font-family:inherit;font-size:11px}.mention-user-select:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 2px #3b82f61a}.mention-user-select[size]{z-index:1000;background:#fff;border:1px solid #3b82f6;border-radius:6px;min-width:180px;max-width:250px;max-height:200px;padding:4px;position:absolute;box-shadow:0 4px 12px #00000026}.mention-user-select[size] option{cursor:pointer;border-radius:4px;margin:2px 0;padding:8px 12px}.mention-user-select[size] option:hover{background:#eff6ff}.mention-user-select[size] option:checked{background:#dbeafe;font-weight:500}.btn-cancel-mention{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:4px;padding:4px 8px;font-size:11px;line-height:1;transition:all .2s}.btn-cancel-mention:hover{background:#dc2626}.mention-btn{font-weight:500;background:#f3f4f6!important;border-color:#9ca3af!important}.mention-btn:hover{background:#e5e7eb!important;border-color:#6b7280!important}.inline-rename-container{flex:1;align-items:center;gap:.5rem;display:flex}.rename-input{border:1px solid #d0d7de;border-radius:4px;outline:none;flex:1;padding:.25rem .5rem;font-size:14px}.rename-input:focus{border-color:var(--primary-color,#1877f2);box-shadow:0 0 0 2px #1877f21a}.file-extension{color:#666;font-size:14px;font-weight:500}.rename-actions{gap:.25rem;display:flex}.btn-icon-small.success{color:#fff;background:#28a745}.btn-icon-small.success:hover{background:#218838}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:10px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.task-form-modal{width:90vw!important;max-width:1400px!important}.btn-close{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:32px;line-height:1;transition:all .2s;display:flex}.btn-close:hover{color:#1f2937;background:#f3f4f6}.task-form{padding:24px}.form-label{color:#374151;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.form-label.required:after{content:" *";color:#ef4444}.form-input,.form-textarea,.form-select{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;transition:all .2s}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-textarea{resize:vertical}.form-select-multiple{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:8px;font-size:14px;transition:all .2s}.form-select-multiple:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-help{color:#6b7280;margin-top:6px;font-size:12px;display:block}.alert{border-radius:8px;margin-bottom:20px;padding:12px 16px;font-size:14px}.alert-error{color:#991b1b;background:#fee2e2;border:1px solid #fecaca}.form-actions{border-top:1px solid #e5e7eb;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:24px;display:flex}.btn-secondary:hover:not(:disabled){background:#e5e7eb}@media (max-width:768px){.modal-content{border-radius:0;max-width:100%;max-height:100vh}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn{width:100%}}.tasks-page{max-width:1400px;margin:0 auto;padding:24px}.tasks-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.header-left h1{color:#1f2937;margin:0 0 8px;font-size:28px}.task-stats{gap:16px;display:flex}.stat-item{color:#6b7280;font-size:14px}.stat-item strong{color:#1f2937;font-weight:600}.view-tabs{border-bottom:2px solid #e5e7eb;gap:8px;margin-bottom:24px;display:flex}.tab{cursor:pointer;color:#6b7280;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s}.tab:hover{color:#3b82f6}.tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.filters-bar{background:#f9fafb;border-radius:12px;flex-wrap:wrap;gap:12px;margin-bottom:24px;padding:16px;display:flex}.filter-group{flex:1;min-width:200px}.search-input,.filter-select{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:10px 14px;font-size:14px;transition:all .2s}.search-input:focus,.filter-select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.btn-clear{color:#fff;cursor:pointer;white-space:nowrap;background:#ef4444;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.btn-clear:hover{background:#dc2626}.tasks-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;margin-bottom:24px;display:grid}.no-tasks{text-align:center;background:#f9fafb;border:2px dashed #d1d5db;border-radius:12px;grid-column:1/-1;padding:60px 20px}.no-tasks p{color:#6b7280;margin:0 0 16px;font-size:18px}.loading-spinner,.error-message{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.error-message p{color:#ef4444;margin:0;font-size:16px}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}@media (max-width:768px){.tasks-page{padding:16px}.tasks-header{flex-direction:column;align-items:flex-start}.header-right,.header-right .btn{width:100%}.filters-bar{flex-direction:column}.filter-group{min-width:100%}.tasks-grid{grid-template-columns:1fr}.view-tabs{overflow-x:auto}.tab{white-space:nowrap}}@media (max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.dashboard-container{padding:var(--spacing-md)}.stats-grid{gap:var(--spacing-md);grid-template-columns:1fr}.stat-card{padding:var(--spacing-md)}.stat-icon{width:52px;height:52px;font-size:2rem}.stat-info h3{font-size:1.5rem}.recent-tasks-section,.task-item{padding:var(--spacing-md)}.task-meta{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.dashboard-container{padding:var(--spacing-sm)}.section-title{font-size:1.25rem}}@media (max-width:1024px){.welcome-section{grid-template-columns:1fr}}@media (max-width:768px){.main-content{margin-left:0}.dashboard-content{padding:1rem}.dashboard-grid{grid-template-columns:1fr}}.settings-container{max-width:1400px;margin:0 auto;padding:24px}.settings-header{margin-bottom:32px}.settings-header h1{color:#1f2937;margin:0 0 8px;font-size:28px}.settings-header p{color:#6b7280;margin:0;font-size:14px}.message{border-radius:8px;margin-bottom:24px;padding:12px 16px;font-size:14px;animation:.3s slideDown}.message-success{color:#065f46;background:#d1fae5;border-left:4px solid #10b981}.message-error{color:#991b1b;background:#fee2e2;border-left:4px solid #ef4444}.message-info{color:#1e40af;background:#dbeafe;border-left:4px solid #3b82f6}.settings-tabs{border-bottom:2px solid #e5e7eb;gap:8px;margin-bottom:32px;display:flex}.settings-tabs .tab{cursor:pointer;color:#6b7280;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s}.settings-tabs .tab:hover{color:#3b82f6;background:#f3f4f6}.settings-tabs .tab.active{color:#3b82f6;background:0 0;border-bottom-color:#3b82f6}.settings-content{animation:.3s fadeIn}.settings-section{width:100%}.section-grid{grid-template-columns:400px 1fr;gap:32px;display:grid}.form-card{background:#fff;border-radius:12px;height:fit-content;padding:24px;position:sticky;top:24px;box-shadow:0 1px 3px #0000001a}.form-card h2{color:#1f2937;margin:0 0 24px;font-size:18px}.form-group input[type=text],.form-group input[type=number],.form-group textarea{border:1px solid #d1d5db;border-radius:8px;width:100%;padding:10px 12px;font-size:14px;transition:all .2s}.form-group input:focus,.form-group textarea:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-group input[type=color]{cursor:pointer;border:1px solid #d1d5db;border-radius:8px;width:60px;height:40px}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}.checkbox-group label{cursor:pointer;align-items:center;gap:8px;display:flex}.checkbox-group input[type=checkbox]{cursor:pointer;width:18px;height:18px}.form-actions{gap:12px;margin-top:24px;display:flex}.list-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.list-card h2{color:#1f2937;margin:0 0 20px;font-size:18px}.items-list{flex-direction:column;gap:12px;display:flex}.empty-message{text-align:center;color:#9ca3af;padding:60px 20px;font-size:14px}.item-card{border:1px solid #e5e7eb;border-radius:8px;padding:16px;transition:all .2s}.item-card:hover{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f61a}.item-header{justify-content:space-between;align-items:flex-start;display:flex}.item-info{flex:1;align-items:flex-start;gap:12px;display:flex}.color-badge{border:2px solid #fff;border-radius:6px;flex-shrink:0;width:24px;height:24px;box-shadow:0 1px 3px #0003}.item-info h3{color:#1f2937;margin:0 0 4px;font-size:15px;font-weight:600}.item-meta{color:#6b7280;margin:0;font-size:12px}.item-description{color:#6b7280;margin:12px 0 0 36px;font-size:13px;line-height:1.5}.item-actions{gap:4px;display:flex}.tags-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.tag-card{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .2s;display:flex}.tag-actions{gap:4px;display:flex}.tag-card:hover{background:#e5e7eb;border-color:#3b82f6}.tag-name{color:#374151;font-size:13px;font-weight:500}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary:disabled{cursor:not-allowed;background:#9ca3af}.btn-icon{cursor:pointer;background:0 0;border:none;border-radius:6px;padding:8px;font-size:16px;transition:all .2s}.btn-icon:hover{background:#f3f4f6}.btn-icon-small{cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:14px;transition:all .2s}.btn-icon-small:hover{background:#e5e7eb}.btn-icon-small.danger:hover{color:#ef4444;background:#fee2e2}@media (max-width:1024px){.section-grid{grid-template-columns:1fr}.form-card{position:static}}@media (max-width:768px){.settings-container{padding:16px}.settings-tabs{overflow-x:auto}.settings-tabs .tab{white-space:nowrap;padding:10px 16px}.form-row{grid-template-columns:1fr}.tags-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.preview-container{background:#f8f9fa;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:200px;display:flex;overflow:hidden}.preview-unavailable{text-align:center;color:#95a5a6;padding:40px;font-size:16px}.preview-image{background:#000;padding:0;position:relative}.preview-image img{object-fit:contain;cursor:pointer;-webkit-user-select:none;user-select:none;width:auto;max-width:100%;height:auto;max-height:500px;transition:opacity .2s;display:block}.preview-image img:hover{opacity:.9}.preview-image img:active{opacity:.8}.preview-pdf{flex-direction:column;gap:12px;min-height:500px;padding:0;display:flex}.preview-actions{background:#f8f9fa;border-bottom:1px solid #e9ecef;justify-content:center;padding:12px;display:flex}.open-new-tab-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 8px #3498db4d}.open-new-tab-btn:hover{background:linear-gradient(135deg,#2980b9,#21618c);transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}.open-new-tab-btn:active{transform:translateY(0);box-shadow:0 2px 6px #3498db4d}.preview-pdf iframe{border:none;border-radius:8px;flex:1;width:100%;height:500px}.preview-video{background:#000;flex-direction:column;gap:12px;padding:0;display:flex}.preview-video video{border-radius:8px;max-width:100%;max-height:500px;display:block}.preview-audio{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:40px}.preview-audio audio{filter:drop-shadow(0 4px 8px #0003);width:100%;max-width:400px}.preview-other{text-align:center;padding:60px 40px}.file-icon-preview{flex-direction:column;align-items:center;gap:16px;display:flex}.icon-large{opacity:.6;font-size:120px}.file-type-label{color:#3498db;letter-spacing:2px;margin:0;font-size:24px;font-weight:700}.preview-message{color:#7f8c8d;margin:0;font-size:14px}@media (max-width:768px){.preview-container{min-height:150px}.preview-image img{max-height:300px}.preview-pdf iframe{height:400px}.preview-video video{max-height:300px}.icon-large{font-size:80px}.file-type-label{font-size:18px}}.file-detail-modal{max-width:800px;max-height:90vh}.file-detail-title{align-items:center;gap:12px;display:flex}.file-icon-large{font-size:36px}.file-preview-section{text-align:center;background:#f8f9fa;border-radius:8px;margin-bottom:24px;padding:20px}.file-info-section{margin-bottom:24px}.file-info-section h3{color:#2c3e50;border-bottom:2px solid #e0e0e0;margin:0 0 16px;padding-bottom:8px;font-size:16px;font-weight:600}.info-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.info-item{flex-direction:column;gap:4px;display:flex}.info-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.info-value{color:#2c3e50;font-size:14px;font-weight:500}.description-section{background:#f8f9fa;border-left:4px solid #3498db;border-radius:8px;margin-top:20px;padding:16px}.description-section h4{color:#2c3e50;margin:0 0 8px;font-size:14px;font-weight:600}.description-section p{color:#555;margin:0;font-size:14px;line-height:1.6}.path-section{margin-bottom:24px}.path-section h3{color:#2c3e50;margin:0 0 12px;font-size:16px;font-weight:600}.file-path{color:#555;word-break:break-all;background:#f8f9fa;border-radius:6px;margin:0;padding:12px;font-family:Courier New,monospace;font-size:13px}.permissions-section{margin-bottom:24px}.permissions-section h3{color:#2c3e50;margin:0 0 12px;font-size:16px;font-weight:600}.permissions-list{flex-direction:column;gap:8px;display:flex}.permission-item{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;justify-content:space-between;align-items:center;padding:12px;display:flex}.permission-user{color:#2c3e50;font-size:14px;font-weight:500}.permission-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600}.modal-footer{justify-content:space-between;align-items:center;display:flex}.footer-actions{gap:8px;display:flex}.btn-action{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.btn-download{color:#fff;background:#3498db}.btn-download:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db4d}.btn-delete{color:#e74c3c;background:#ecf0f1}.btn-delete:hover{color:#c0392b;background:#fee2e2;transform:translateY(-2px)}@media (max-width:768px){.file-detail-modal{max-width:95%}.info-grid{grid-template-columns:1fr;gap:12px}.modal-footer{flex-direction:column;align-items:stretch;gap:12px}.footer-actions{flex-direction:column;width:100%}.btn-action{justify-content:center;width:100%}}.file-upload-modal{max-width:600px}.drop-zone{text-align:center;cursor:pointer;background:#f8f9fa;border:2px dashed #3498db;border-radius:12px;padding:40px 20px;transition:all .3s}.drop-zone:hover{background:#e3f2fd;border-color:#2980b9;transform:scale(1.01)}.drop-zone-content{flex-direction:column;align-items:center;gap:12px;display:flex}.upload-icon{opacity:.7;font-size:64px}.drop-text{color:#2c3e50;margin:0;font-size:18px;font-weight:600}.or-text{color:#95a5a6;margin:0;font-size:14px}.btn-browse{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;transition:all .2s}.btn-browse:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db4d}.size-limit{color:#7f8c8d;margin:8px 0 0;font-size:12px}.selected-files{margin-top:24px}.selected-files h3{color:#2c3e50;margin:0 0 12px;font-size:16px;font-weight:600}.files-list{border:1px solid #e0e0e0;border-radius:8px;max-height:300px;padding:8px;overflow-y:auto}.file-item{background:#fff;border:1px solid #f0f0f0;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:12px;transition:all .2s;display:flex}.file-item:hover{background:#f8f9fa;border-color:#3498db}.file-item:last-child{margin-bottom:0}.file-item-info{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.file-icon{flex-shrink:0;font-size:32px}.file-details{flex:1;min-width:0}.file-item-name{color:#2c3e50;text-overflow:ellipsis;white-space:nowrap;margin:0 0 4px;font-size:14px;font-weight:600;overflow:hidden}.file-item-size{color:#7f8c8d;margin:0;font-size:12px}.btn-remove{cursor:pointer;color:#7f8c8d;background:#ecf0f1;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:20px;transition:all .2s;display:flex}.btn-remove:hover{color:#ef4444;background:#fee2e2;transform:scale(1.1)}.upload-progress{flex-shrink:0;align-items:center;gap:12px;width:120px;display:flex}.progress-bar{background:#ecf0f1;border-radius:3px;flex:1;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#3498db 0%,#2ecc71 100%);border-radius:3px;height:100%;transition:width .3s}.progress-text{color:#3498db;text-align:right;min-width:40px;font-size:12px;font-weight:600}@media (max-width:640px){.file-upload-modal{max-width:95%}.drop-zone{padding:30px 16px}.upload-icon{font-size:48px}.drop-text{font-size:16px}.file-item{flex-direction:column;align-items:flex-start;gap:12px}.upload-progress{width:100%}.btn-remove{align-self:flex-end}}.permissions-modal{max-width:600px}.file-info-bar{background:#f8f9fa;border-radius:8px;align-items:center;gap:12px;margin-bottom:24px;padding:16px;display:flex}.file-info-bar .file-icon{font-size:32px}.file-info-bar .file-name{color:#2c3e50;font-size:16px;font-weight:600}.add-permission-section{margin-bottom:32px}.add-permission-section h3{color:#2c3e50;margin:0 0 16px;font-size:16px;font-weight:600}.add-permission-form{gap:8px;display:flex}.add-permission-form select{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;flex:1;padding:10px 12px;font-size:14px}.add-permission-form select:focus{border-color:#3498db;outline:none}.btn-add{color:#fff;cursor:pointer;white-space:nowrap;background:#27ae60;border:none;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-add:hover:not(:disabled){background:#229954;transform:translateY(-2px);box-shadow:0 4px 12px #27ae604d}.btn-add:disabled{cursor:not-allowed;background:#bdc3c7;transform:none}.permissions-list-section{margin-bottom:24px}.permissions-list-section h3{color:#2c3e50;margin:0 0 16px;font-size:16px;font-weight:600}.permissions-list{background:#f8f9fa;border-radius:8px;flex-direction:column;gap:8px;max-height:300px;padding:8px;display:flex;overflow-y:auto}.permission-row{background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:space-between;align-items:center;padding:12px;transition:all .2s;display:flex}.permission-row:hover{border-color:#3498db;box-shadow:0 2px 8px #00000014}.user-info{flex:1;align-items:center;gap:12px;display:flex}.user-avatar{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.user-details{flex:1;align-items:center;gap:12px;display:flex}.user-name{color:#2c3e50;margin:0;font-size:14px;font-weight:600}.permission-badge{text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-radius:12px;padding:4px 12px;font-size:11px;font-weight:600}.permission-badge.read{color:#1976d2;background:#e3f2fd}.permission-badge.write{color:#f57c00;background:#fff3e0}.permission-badge.delete{color:#c2185b;background:#fce4ec}.permission-badge.full{color:#388e3c;background:#e8f5e9}.btn-remove-permission{color:#7f8c8d;cursor:pointer;background:#ecf0f1;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;transition:all .2s;display:flex}.btn-remove-permission:hover:not(:disabled){color:#ef4444;background:#fee2e2;transform:scale(1.1)}.btn-remove-permission:disabled{opacity:.5;cursor:not-allowed}.empty-permissions{text-align:center;color:#95a5a6;padding:40px 20px}.empty-permissions p{margin:8px 0;font-size:14px}.empty-permissions .hint{color:#bdc3c7;font-size:12px;font-style:italic}.owner-section{background:#fff9e6;border-left:4px solid #f39c12;border-radius:8px;margin-top:20px;padding:16px}.owner-section h4{color:#2c3e50;margin:0 0 12px;font-size:14px;font-weight:600}.owner-info{align-items:center;gap:12px;display:flex}.owner-avatar{background:linear-gradient(135deg,#f39c12 0%,#e67e22 100%);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.owner-name{color:#2c3e50;font-size:14px;font-weight:600}.error-message{color:#c33;background:#fee;border-left:4px solid #c33;border-radius:6px;margin-top:16px;padding:12px;font-size:14px}@media (max-width:640px){.permissions-modal{max-width:95%}.add-permission-form{flex-direction:column}.btn-add{width:100%}.permission-row{flex-direction:column;align-items:flex-start;gap:12px}.user-details{flex-direction:column;align-items:flex-start;gap:8px}.btn-remove-permission{align-self:flex-end}}.dashboard-container{padding:var(--spacing-xl);max-width:1400px;margin:0 auto;animation:.3s ease-out fadeIn}.stats-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.stat-card{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--spacing-lg);align-items:center;gap:var(--spacing-md);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.stat-card:before{content:"";width:4px;height:100%;transition:width .3s;position:absolute;top:0;left:0}.stat-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.stat-card:hover:before{opacity:.05;width:100%}.stat-card-blue:before{background:var(--primary-color)}.stat-card-green:before{background:var(--success-color)}.stat-card-orange:before{background:var(--warning-color)}.stat-card-purple:before{background:var(--secondary-color)}.stat-card-cyan:before{background:var(--info-color)}.stat-icon{background:var(--primary-light);border-radius:var(--radius-lg);justify-content:center;align-items:center;width:64px;height:64px;font-size:2.5rem;transition:transform .3s;display:flex}.stat-card:hover .stat-icon{transform:scale(1.1)rotate(5deg)}.stat-card-blue .stat-icon{background:var(--primary-light)}.stat-card-green .stat-icon{background:var(--success-bg)}.stat-card-orange .stat-icon{background:var(--warning-bg)}.stat-card-purple .stat-icon{background:var(--secondary-light)}.stat-card-cyan .stat-icon{background:var(--info-bg)}.stat-info{z-index:1;flex:1}.stat-info h3{font-size:2rem;font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:4px;line-height:1}.stat-info p{color:var(--text-secondary);font-size:.875rem;font-weight:var(--font-weight-medium);margin:0}.recent-tasks-section{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.section-title{font-size:1.5rem;font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);display:flex}.section-title:before{content:"";background:var(--primary-gradient);border-radius:var(--radius-sm);width:4px;height:24px}.tasks-list{gap:var(--spacing-md);flex-direction:column;display:flex}.task-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);cursor:pointer;transition:all .2s}.task-item:hover{border-color:var(--primary-color);background:var(--card-bg);box-shadow:var(--shadow-md);transform:translate(4px)}.task-main-info{margin-bottom:var(--spacing-md)}.task-title{font-size:1rem;font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--spacing-sm)}.task-description{color:var(--text-secondary);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-size:.875rem;line-height:1.6;display:-webkit-box;overflow:hidden}.task-meta{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.task-status,.task-priority,.task-date{border-radius:var(--radius-full);font-size:.75rem;font-weight:var(--font-weight-medium);align-items:center;gap:4px;padding:4px 12px;display:inline-flex}.status-completed{background:var(--success-bg);color:var(--success-color);border:1px solid var(--success-border)}.status-in-progress{background:var(--info-bg);color:var(--info-color);border:1px solid var(--info-border)}.status-pending{background:var(--warning-bg);color:var(--warning-color);border:1px solid var(--warning-border)}.status-unknown{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.priority-high{background:var(--error-bg);color:var(--error-color);border:1px solid var(--error-border)}.priority-medium{background:var(--warning-bg);color:var(--warning-color);border:1px solid var(--warning-border)}.priority-low{background:var(--success-bg);color:var(--success-color);border:1px solid var(--success-border)}.priority-unknown{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.task-date{color:var(--text-tertiary);border:1px solid var(--border-color);background:0 0}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--text-secondary)}.empty-state p{margin:var(--spacing-md)0;font-size:1rem}.loading-spinner{justify-content:center;align-items:center;gap:var(--spacing-md);flex-direction:column;min-height:400px;display:flex}.spinner{border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.loading-spinner p{color:var(--text-secondary);font-weight:var(--font-weight-medium)}@media (max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.dashboard-container{padding:var(--spacing-md)}.stats-grid{gap:var(--spacing-md);grid-template-columns:1fr}.stat-card{padding:var(--spacing-md)}.stat-icon{width:52px;height:52px;font-size:2rem}.stat-info h3{font-size:1.5rem}.recent-tasks-section,.task-item{padding:var(--spacing-md)}.task-meta{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.dashboard-container{padding:var(--spacing-sm)}.section-title{font-size:1.25rem}}@media (max-width:1024px){.welcome-section{grid-template-columns:1fr}}@media (max-width:768px){.main-content{margin-left:0}.dashboard-content{padding:1rem}.dashboard-grid{grid-template-columns:1fr}}.stat-card,.welcome-card,.info-card{animation:.5s ease-out fadeIn}.documents-container{max-width:1400px;min-height:calc(100vh - 120px);margin:0 auto;padding:20px;position:relative}.documents-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.documents-header h1{color:#2c3e50;margin:0;font-size:28px}.header-actions{gap:12px;display:flex}.breadcrumbs{background:#f8f9fa;border-radius:8px;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;font-size:14px;display:flex}.breadcrumb{color:#3498db;cursor:pointer;transition:color .2s}.breadcrumb:hover{color:#2980b9;text-decoration:underline}.breadcrumb.active{color:#2c3e50;cursor:default;font-weight:600}.breadcrumb.active:hover{text-decoration:none}.breadcrumbs .separator{color:#95a5a6;-webkit-user-select:none;user-select:none}.documents-filters{background:#fff;border-radius:8px;align-items:center;gap:16px;margin-bottom:24px;padding:16px;display:flex;box-shadow:0 1px 3px #0000001a}.search-box{flex:1;gap:8px;display:flex}.search-box input{border:1px solid #ddd;border-radius:6px;flex:1;padding:10px 16px;font-size:14px}.search-box button{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:6px;padding:10px 20px;font-size:16px;transition:background .2s}.search-box button:hover{background:#2980b9}.filter-group{align-items:center;gap:8px;display:flex}.filter-group label{color:#555;font-size:14px;font-weight:500}.filter-group select{cursor:pointer;border:1px solid #ddd;border-radius:6px;padding:8px 12px;font-size:14px}.drag-overlay{z-index:9999;pointer-events:none;background:#3498dbe6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.drag-content{background:#fff;border:4px dashed #3498db;border-radius:16px;padding:60px 80px;box-shadow:0 10px 40px #0003}.drag-content p{color:#2c3e50;margin:0;font-size:24px;font-weight:600}.files-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:20px;display:grid}.file-card{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;transition:all .3s;position:relative;overflow:hidden}.file-card.file{cursor:grab}.file-card.file:active{cursor:grabbing;opacity:.5;transform:scale(.95)}.file-card.file[draggable=true]{-webkit-user-drag:element}.file-card:hover{border-color:#3498db;transform:translateY(-4px);box-shadow:0 8px 24px #0000001f}.file-card.folder{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.file-card.folder:hover{transform:translateY(-4px)scale(1.02)}.file-thumbnail{background:#f8f9fa;border-radius:8px;justify-content:center;align-items:center;width:100%;height:140px;margin-bottom:16px;display:flex;overflow:hidden}.folder-thumbnail{background:linear-gradient(135deg,#667eea1a 0%,#764ba21a 100%);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.folder-thumbnail .folder-icon{filter:drop-shadow(0 4px 8px #0003);font-size:64px}.image-thumbnail{background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.image-thumbnail img{object-fit:cover;width:100%;max-width:100%;height:100%;max-height:100%}.pdf-thumbnail{background:#fff;border:1px solid #e0e0e0;width:100%;height:100%;position:relative}.pdf-thumbnail iframe{pointer-events:none;transform-origin:0 0;border:none;width:100%;height:100%;transform:scale(1.5)}.pdf-overlay{color:#fff;pointer-events:none;background:#3498dbe6;border-radius:4px;padding:4px 8px;font-size:14px;font-weight:600;position:absolute;bottom:4px;right:4px}.generic-thumbnail{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.generic-thumbnail .file-icon-emoji{opacity:.8;font-size:56px}.file-icon{text-align:center;margin-bottom:16px}.folder-icon{filter:drop-shadow(0 4px 8px #0003);font-size:64px}.file-icon-emoji{font-size:56px}.file-info{text-align:center}.file-name{color:#2c3e50;text-overflow:ellipsis;white-space:nowrap;margin:0 0 8px;font-size:15px;font-weight:600;overflow:hidden}.file-card.folder .file-name{color:#fff}.file-size{color:#7f8c8d;margin:4px 0;font-size:13px}.file-date{color:#95a5a6;margin:4px 0 0;font-size:12px}.file-card.folder .file-size,.file-card.folder .file-date{color:#fffc}.file-actions{border-top:1px solid #eee;justify-content:center;gap:8px;margin-top:12px;padding-top:12px;display:flex}.file-card.folder .file-actions{border-top-color:#ffffff4d}.btn-icon{cursor:pointer;background:#ecf0f1;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .2s;display:flex}.btn-icon:hover{background:#bdc3c7;transform:scale(1.1)}.btn-icon.danger:hover{color:#ef4444;background:#fee2e2}.file-card.folder .btn-icon{background:#fff3}.file-card.folder .btn-icon:hover{background:#fff6}.empty-state{text-align:center;color:#95a5a6;padding:80px 20px}.empty-state p{margin-bottom:20px;font-size:18px}.empty-state button{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:background .2s}.empty-state button:hover{background:#2980b9}.loading{text-align:center;color:#7f8c8d;padding:60px;font-size:18px}.error-message{color:#c33;background:#fee;border-left:4px solid #c33;border-radius:8px;margin:20px 0;padding:16px}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:500px;max-height:90vh;animation:.3s slideUp;overflow:auto;box-shadow:0 20px 60px #0000004d}.modal-header{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{color:#2c3e50;margin:0;font-size:20px}.close-btn{color:#95a5a6;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:28px;transition:all .2s;display:flex}.close-btn:hover{color:#2c3e50;background:#f5f5f5}.modal-body{padding:24px}.modal-footer{border-top:1px solid #eee;justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.form-group{margin-bottom:20px}.form-group label{color:#2c3e50;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input,.form-group textarea{border:1px solid #ddd;border-radius:6px;width:100%;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:#3498db;outline:none}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-primary{color:#fff;background:#3498db}.btn-primary:hover{background:#2980b9;transform:translateY(-1px);box-shadow:0 4px 12px #3498db4d}.btn-primary:disabled{cursor:not-allowed;background:#bdc3c7;transform:none}.btn-secondary{color:#2c3e50;background:#ecf0f1}.btn-secondary:hover{background:#bdc3c7}@media (max-width:1024px){.files-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}}@media (max-width:768px){.documents-container{padding:16px}.documents-header{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{flex-direction:column;width:100%}.header-actions button{width:100%}.documents-filters{flex-direction:column;align-items:stretch}.filter-group{width:100%}.filter-group select{flex:1}.files-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.file-card{padding:16px 12px}.file-thumbnail{height:100px}.folder-icon{font-size:48px}.file-icon-emoji,.generic-thumbnail .file-icon-emoji{font-size:40px}.file-name{font-size:13px}.modal-content{width:95%;max-height:95vh}}@media (max-width:480px){.files-grid{grid-template-columns:1fr 1fr}.file-thumbnail{height:80px}.breadcrumbs{padding:8px 12px;font-size:12px}}.btn{border-radius:var(--radius-md);font-family:var(--font-family);font-weight:var(--font-weight-medium);cursor:pointer;white-space:nowrap;border:none;outline:none;justify-content:center;align-items:center;gap:8px;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{box-shadow:0 0 0 3px var(--primary-light)}.btn-sm{min-height:32px;padding:6px 12px;font-size:.875rem}.btn-md{min-height:40px;padding:10px 20px;font-size:15px}.btn-lg{min-height:48px;padding:12px 24px;font-size:1rem}.btn-primary{background:var(--primary-color);color:var(--text-white)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--secondary-color);color:var(--text-white)}.btn-secondary:hover:not(:disabled){background:var(--secondary-hover);box-shadow:var(--shadow-md)}.btn-success{background:var(--success-color);color:var(--text-white)}.btn-success:hover:not(:disabled){background:var(--success-hover);box-shadow:var(--shadow-md)}.btn-danger{background:var(--error-color);color:var(--text-white)}.btn-danger:hover:not(:disabled){background:var(--error-hover);box-shadow:var(--shadow-md)}.btn-ghost{color:var(--text-primary);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--hover-bg)}.btn-outline{color:var(--primary-color);border:2px solid var(--primary-color);background:0 0}.btn-outline:hover:not(:disabled){background:var(--primary-light)}.btn-outline-secondary{color:var(--text-secondary);border:1px solid var(--border-color);background:0 0}.btn-outline-secondary:hover:not(:disabled){background:var(--hover-bg);border-color:var(--border-dark)}.btn-loading{pointer-events:none;opacity:.7}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}.btn-full-width{width:100%}.btn-icon{align-items:center;font-size:1.2em;display:inline-flex}.btn-text{align-items:center;display:inline-flex}.btn-group{gap:8px;display:inline-flex}.btn-group .btn{flex:1}@media (max-width:768px){.btn-lg{min-height:44px;padding:10px 20px;font-size:15px}}.style-guide{background:var(--bg-primary);min-height:100vh;padding:var(--spacing-2xl)0}.section{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.section h2{font-size:1.5rem;font-weight:var(--font-weight-semibold);color:var(--text-primary);align-items:center;gap:var(--spacing-sm);display:flex}.section h3{color:var(--text-primary);font-size:1.125rem}.color-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));display:grid}.color-card{text-align:center}.color-preview{border-radius:var(--radius-md);width:100%;height:80px;margin-bottom:var(--spacing-sm);box-shadow:var(--shadow-md)}.color-card p{font-size:.875rem;font-weight:var(--font-weight-medium);color:var(--text-secondary)}.demo-section{padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md)}.card-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.form-demo{max-width:400px}.form-demo input,.form-demo textarea,.form-demo select{width:100%}*{box-sizing:border-box;margin:0;padding:0}#root{background:var(--bg-primary);width:100%;min-height:100vh}.card{background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;display:flex}.card-title{font-size:1.25rem;font-weight:var(--font-weight-semibold);color:var(--text-primary)}.card-body{color:var(--text-secondary)}.badge{border-radius:var(--radius-full);font-size:.875rem;font-weight:var(--font-weight-medium);white-space:nowrap;align-items:center;gap:4px;padding:4px 12px;display:inline-flex}.badge-primary{background:var(--primary-light);color:var(--primary-color)}.badge-success{background:var(--success-bg);color:var(--success-color)}.badge-error{background:var(--error-bg);color:var(--error-color)}.badge-warning{background:var(--warning-bg);color:var(--warning-color)}.avatar{border-radius:var(--radius-full);background:var(--primary-gradient);color:#fff;font-weight:var(--font-weight-medium);justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.avatar-sm{width:32px;height:32px;font-size:.875rem}.avatar-md{width:40px;height:40px;font-size:1rem}.avatar-lg{width:56px;height:56px;font-size:1.25rem}.avatar img{object-fit:cover;width:100%;height:100%}.container{max-width:1200px;padding:var(--spacing-lg);margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-center{text-align:center}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-sm)}.mb-2{margin-bottom:var(--spacing-md)}.mb-3{margin-bottom:var(--spacing-lg)}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-sm)}.mt-2{margin-top:var(--spacing-md)}.mt-3{margin-top:var(--spacing-lg)}.p-0{padding:0}.p-1{padding:var(--spacing-sm)}.p-2{padding:var(--spacing-md)}.p-3{padding:var(--spacing-lg)}.animate-fade-in{animation:.3s ease-out fadeIn}.animate-slide-in{animation:.3s ease-out slideIn}@media (max-width:768px){.container,.card{padding:var(--spacing-md)}h1{font-size:1.5rem}h2{font-size:1.25rem}}