.search-bar-container{position:relative;flex:1;max-width:400px;margin:0 var(--spacing-md)}.search-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--color-bg-primary);color:var(--color-text-primary)}.search-input:focus{outline:none;border-color:var(--color-primary)}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);margin-top:var(--spacing-xs);max-height:500px;overflow-y:auto;z-index:1000}.search-section{border-bottom:1px solid var(--color-border-light)}.search-section:last-child{border-bottom:none}.search-section-title{padding:var(--spacing-sm) var(--spacing-md);font-weight:600;color:var(--color-text-secondary);background:var(--color-bg-secondary);font-size:var(--font-size-sm)}.search-result-item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:background-color var(--transition-base)}.search-result-item:hover{background-color:var(--color-bg-secondary)}.search-result-title{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.search-result-content{color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.search-result-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.search-loading,.search-no-results{padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary)}.notifications-container{position:relative}.notifications-button{background:none;border:none;font-size:var(--font-size-xl);cursor:pointer;padding:var(--spacing-xs);position:relative;transition:transform var(--transition-base)}.notifications-button:hover{transform:scale(1.1)}.notification-badge{position:absolute;top:0;right:0;background:var(--color-danger);color:var(--color-text-white);border-radius:var(--radius-full);font-size:var(--font-size-xs);padding:2px 6px;min-width:18px;text-align:center;font-weight:700}.notifications-dropdown{position:absolute;top:100%;right:0;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);width:350px;max-height:500px;display:flex;flex-direction:column;z-index:1000;margin-top:var(--spacing-xs)}.notifications-header{padding:var(--spacing-md);border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center}.notifications-header h3{margin:0;font-size:var(--font-size-lg)}.mark-all-read-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-xs)}.mark-all-read-btn:hover{text-decoration:underline}.notifications-list{overflow-y:auto;max-height:400px}.notification-item{padding:var(--spacing-md);border-bottom:1px solid var(--color-border-light);cursor:pointer;transition:background-color var(--transition-base);display:flex;justify-content:space-between;align-items:flex-start}.notification-item:hover{background-color:var(--color-bg-secondary)}.notification-item.unread{background-color:var(--color-primary-light)}.notification-content{flex:1}.notification-title{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.notification-message{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.notification-time{color:var(--color-text-light);font-size:var(--font-size-xs)}.unread-indicator{width:8px;height:8px;background:var(--color-primary);border-radius:var(--radius-full);margin-left:var(--spacing-sm);flex-shrink:0;margin-top:var(--spacing-xs)}.no-notifications{padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary)}.layout{min-height:100vh;display:flex;flex-direction:column}.navbar{background-color:var(--color-bg-primary);color:var(--color-text-primary);padding:var(--spacing-md) var(--spacing-xl);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);border-bottom:1px solid var(--color-border-light);gap:var(--spacing-md)}.navbar-brand{font-size:1.5rem;font-weight:700}.navbar-brand a{text-decoration:none;display:flex;align-items:center;gap:var(--spacing-sm)}.navbar-logo{height:40px;width:auto}.navbar-menu{display:flex;gap:2rem;flex:1;justify-content:center}.navbar-menu a{color:var(--color-text-primary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color var(--transition-base)}.navbar-menu a:hover{background-color:var(--color-bg-secondary)}.navbar-menu a.active{background-color:var(--color-primary-light);color:var(--color-primary)}.navbar-user{display:flex;align-items:center;gap:var(--spacing-md);color:var(--color-text-primary)}.logout-btn{background-color:var(--color-danger);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-base)}.logout-btn:hover{background-color:var(--color-danger-dark)}.main-content{flex:1;padding:var(--spacing-xl);max-width:1200px;width:100%;margin:0 auto}@media (max-width: 768px){.navbar{flex-direction:column;gap:1rem}.navbar-menu{flex-direction:column;gap:.5rem;width:100%}.main-content{padding:1rem}}.login-container{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%)}.login-card{background:var(--color-bg-primary);padding:var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:100%;max-width:400px}.login-card h1{margin-bottom:var(--spacing-lg);color:var(--color-text-primary);text-align:center}.form-group input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base)}.form-group small{display:block;margin-top:var(--spacing-xs);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.error-message{background-color:#fee;color:#c33;padding:var(--spacing-sm);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);border:1px solid #fcc}.submit-btn{width:100%;padding:var(--spacing-sm);background-color:var(--color-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:background-color var(--transition-base);margin-top:var(--spacing-md)}.switch-mode{margin-top:1rem;text-align:center}.link-btn{background:none;border:none;color:var(--color-primary);cursor:pointer;text-decoration:underline;font-size:var(--font-size-sm)}.link-btn:hover{color:var(--color-primary-dark)}.reaction-container{position:relative;display:flex;align-items:center;gap:var(--spacing-sm)}.reaction-summary{display:flex;align-items:center;gap:var(--spacing-sm)}.reaction-counts{display:flex;align-items:center;gap:var(--spacing-xs)}.reaction-emoji{font-size:var(--font-size-lg)}.reaction-total{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-left:var(--spacing-xs)}.reaction-button{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-lg);cursor:pointer;transition:all var(--transition-base)}.reaction-button:hover{background:var(--color-bg-light);transform:scale(1.1)}.reaction-button.active{background:var(--color-primary-light);border-color:var(--color-primary)}.reaction-picker{position:absolute;bottom:100%;left:0;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xs);display:flex;gap:var(--spacing-xs);box-shadow:var(--shadow-lg);z-index:100;margin-bottom:var(--spacing-xs)}.reaction-option{background:none;border:none;font-size:var(--font-size-xl);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:transform var(--transition-base)}.reaction-option:hover{transform:scale(1.2);background:var(--color-bg-secondary)}.reaction-option.selected{background:var(--color-primary-light)}.poll-container{margin:var(--spacing-lg) 0;padding:var(--spacing-lg);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border-light)}.create-poll-btn{background:var(--color-primary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.create-poll-btn:hover{background:var(--color-primary-dark)}.poll-create-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.poll-create-form h3{margin:0 0 var(--spacing-md) 0;color:var(--color-text-primary)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group input[type=text],.form-group input[type=datetime-local]{padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base)}.option-input-group{display:flex;gap:var(--spacing-xs);align-items:center}.add-option-btn{background:var(--color-bg-primary);border:1px dashed var(--color-border);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-primary);font-size:var(--font-size-sm)}.form-actions{display:flex;gap:var(--spacing-sm)}.submit-btn{background:var(--color-primary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer}.cancel-btn{background:var(--color-bg-primary);color:var(--color-text-primary);border:1px solid var(--color-border);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer}.poll-header{margin-bottom:var(--spacing-md)}.poll-question{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-primary)}.poll-expired,.poll-expires{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.poll-expired{color:var(--color-danger)}.poll-options{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.poll-option{padding:var(--spacing-md);background:var(--color-bg-primary);border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base)}.poll-option:hover:not(.disabled){border-color:var(--color-primary);background:var(--color-primary-light)}.poll-option.selected{border-color:var(--color-primary);background:var(--color-primary-light)}.poll-option.disabled{cursor:not-allowed;opacity:.6}.poll-option-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.poll-option-text{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.poll-checkbox,.poll-radio{cursor:pointer}.poll-option-stats{display:flex;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.poll-vote-count{font-weight:500}.poll-percentage{color:var(--color-primary);font-weight:600}.poll-progress-bar{width:100%;height:8px;background:var(--color-bg-secondary);border-radius:var(--radius-sm);overflow:hidden}.poll-progress-fill{height:100%;background:var(--color-primary);transition:width var(--transition-base)}.poll-footer{padding-top:var(--spacing-sm);border-top:1px solid var(--color-border-light);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.poll-total-votes{font-weight:500}.newsfeed{max-width:800px;margin:0 auto}.newsfeed-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.newsfeed-header h1{color:var(--color-text-primary)}.posts-list{display:flex;flex-direction:column;gap:1.5rem}.post-card{background:var(--color-bg-primary);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.post-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:1rem}.post-header h2{color:var(--color-text-primary);margin:0}.post-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.post-author{color:#666;font-size:.9rem}.post-actions{display:flex;gap:.5rem}.edit-btn,.delete-btn,.save-btn,.cancel-btn{padding:.4rem .8rem;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-base)}.edit-btn{background-color:var(--color-primary);color:var(--color-text-white)}.delete-btn{background-color:var(--color-danger);color:var(--color-text-white)}.delete-btn:hover{background-color:var(--color-danger-dark)}.save-btn{background-color:var(--color-secondary);color:var(--color-text-white)}.save-btn:hover:not(:disabled){background-color:#229954}.save-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-btn{background-color:#95a5a6;color:#fff}.cancel-btn:hover{background-color:#7f8c8d}.edit-form,.edit-form .form-group{margin-bottom:1rem}.edit-form .form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.edit-form .form-group input,.edit-form .form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit}.edit-form .form-group input:focus,.edit-form .form-group textarea:focus{outline:none;border-color:var(--color-primary)}.post-content{color:var(--color-text-primary);line-height:1.6;margin-bottom:var(--spacing-md);white-space:pre-wrap}.post-image{width:100%;max-height:400px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--spacing-md)}.post-footer{padding-top:var(--spacing-md);border-top:1px solid var(--color-border-light)}.post-author-info{display:flex;align-items:center;gap:.75rem}.author-avatar{width:40px;height:40px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-primary)}.author-avatar-placeholder{width:40px;height:40px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;border:2px solid #667eea}.author-name{font-weight:500;color:var(--color-text-primary);font-size:var(--font-size-sm)}.post-date{color:var(--color-text-light);font-size:var(--font-size-sm)}.loading,.no-posts{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);background:var(--color-bg-primary);border-radius:var(--radius-md)}.recipients-selector{display:flex;flex-direction:column;gap:1rem}.recipient-input{display:flex;gap:.5rem;align-items:center}.recipient-input select{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.add-recipient-btn{background-color:var(--color-secondary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-base)}.add-recipient-btn:hover:not(:disabled){background-color:#229954}.add-recipient-btn:disabled{opacity:.5;cursor:not-allowed}.recipients-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.recipient-tag{display:flex;align-items:center;gap:.5rem;background-color:#e8f5e9;padding:.4rem .8rem;border-radius:4px;font-size:.9rem}.remove-recipient-btn{background:none;border:none;color:#c62828;cursor:pointer;font-size:1.2rem;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.remove-recipient-btn:hover{background-color:#ffebee}.board{max-width:1200px;margin:0 auto}.board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.board-header h1{color:var(--color-text-primary)}.create-post-btn{background-color:var(--color-secondary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.create-post-btn:hover{background-color:var(--color-secondary-dark)}.create-post-form{background:var(--color-bg-primary);padding:var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-xl)}.create-post-form h2{margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.form-group{margin-bottom:1rem}.poll-form-section{background:var(--color-bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);margin:var(--spacing-md) 0}.poll-form-section h3{margin-top:0;margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.option-input-group{display:flex;gap:var(--spacing-xs);align-items:center;margin-bottom:var(--spacing-xs)}.option-input-group input{flex:1}.remove-option-btn{background:var(--color-danger);color:var(--color-text-white);border:none;width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center}.add-option-btn{background:var(--color-bg-primary);border:1px dashed var(--color-border);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-primary);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.form-group label{display:block;margin-bottom:var(--spacing-sm);color:var(--color-text-primary);font-weight:500}.form-group input,.form-group textarea{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);font-family:inherit}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary)}.category-selection{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--spacing-sm)}.category-select-btn{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-border);background:var(--color-bg-primary);color:var(--color-text-primary);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--transition-base);min-width:120px}.category-select-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.category-select-btn.selected{font-weight:600;box-shadow:var(--shadow-md)}.submit-btn{background-color:var(--color-primary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.board-content{margin-top:2rem}.categories-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;border-left:4px solid #667eea;background:#fff;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.filter-btn:hover{background-color:#f5f5f5}.filter-btn.active{background-color:#667eea;color:#fff;border-color:#667eea}.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.post-card{background:var(--color-bg-primary);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--transition-base);display:flex;flex-direction:column;height:100%}.post-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.category-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;color:#fff;font-size:.75rem;font-weight:500;margin-bottom:.75rem}.post-header-full{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.post-image{max-width:100%;border-radius:8px;margin-top:1rem}.post-image-thumbnail{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:1rem}.image-preview{margin-top:.5rem}.post-card h2{color:#2c3e50;margin-bottom:.5rem}.post-preview{color:#666;margin-bottom:1rem;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.post-footer-card{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem;border-top:1px solid #eee}.comment-count{font-size:.875rem;color:#666}.post-details-full{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;position:relative}.post-author-info{display:flex;align-items:center;gap:.5rem}.author-avatar{width:32px;height:32px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-primary)}.author-avatar-placeholder{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-white);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700;border:2px solid var(--color-primary)}.author-details{display:flex;flex-direction:column;gap:.25rem}.author-name{font-weight:500;color:#2c3e50;font-size:.9rem}.post-details{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 4px #0000001a;position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;float:right;color:#999;margin-bottom:1rem}.close-btn:hover{color:#333}.delete-post-btn{background:var(--color-danger);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-base)}.delete-post-btn:hover{background:var(--color-danger-dark)}.post-full{margin-bottom:2rem}.post-full h2{color:#2c3e50;margin-bottom:.5rem}.post-author-info{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.post-author-info .author-avatar{width:40px;height:40px}.post-author-info .author-avatar-placeholder{width:40px;height:40px;font-size:1rem}.post-content{color:var(--color-text-primary);line-height:1.6;white-space:pre-wrap}.comments-section h3{color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.comments-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.comment{padding:1rem;background:#f9f9f9;border-radius:4px}.comment-author-info{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.comment-author-info .author-avatar{width:32px;height:32px}.comment-author-info .author-avatar-placeholder{width:32px;height:32px;font-size:.875rem}.comment-author{font-weight:500;color:var(--color-text-primary)}.comment-content{color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.comment-date{font-size:.875rem;color:#999}.comment-form textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:inherit;margin-bottom:.5rem}.comment-form textarea:focus{outline:none;border-color:#667eea}.no-comments{color:#999;font-style:italic;margin-bottom:1.5rem}.loading,.no-posts{text-align:center;padding:3rem;color:#666;background:#fff;border-radius:8px}@media (max-width: 968px){.board-content{grid-template-columns:1fr}.post-details{position:static;max-height:none}}.chat{max-width:1200px;margin:0 auto}.chat h1{color:var(--color-text-primary);margin-bottom:var(--spacing-xl)}.chat-container{display:grid;grid-template-columns:300px 1fr;gap:var(--spacing-xl);height:calc(100vh - 200px)}.chat-sidebar{background:var(--color-bg-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-md)}.user-search-section{position:relative}.user-search-input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base)}.user-search-results{position:absolute;top:100%;left:0;right:0;background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);margin-top:var(--spacing-xs);max-height:300px;overflow-y:auto;z-index:100}.user-search-result-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);cursor:pointer;transition:background-color var(--transition-base)}.user-search-result-item:hover{background-color:var(--color-bg-secondary)}.user-search-avatar,.user-search-avatar-placeholder{width:32px;height:32px;border-radius:var(--radius-full)}.user-search-avatar{object-fit:cover}.user-search-avatar-placeholder{background:var(--color-primary);color:var(--color-text-white);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700}.user-search-name{font-weight:500;color:var(--color-text-primary)}.chat-tabs{display:flex;gap:var(--spacing-xs);border-bottom:2px solid var(--color-border-light)}.chat-tabs button{flex:1;padding:var(--spacing-sm);border:none;background:none;cursor:pointer;color:var(--color-text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition-base)}.chat-tabs button.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.direct-chats-list{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.chat-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-base);border:1px solid transparent}.chat-item:hover{background-color:var(--color-bg-secondary)}.chat-item.selected{background-color:var(--color-primary-light);border-color:var(--color-primary)}.chat-item-avatar,.chat-item-avatar-placeholder{width:40px;height:40px;border-radius:var(--radius-full);flex-shrink:0}.chat-item-avatar{object-fit:cover}.chat-item-avatar-placeholder{background:var(--color-primary);color:var(--color-text-white);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700}.chat-item-info{flex:1;min-width:0}.chat-item-name{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item-meta{font-size:var(--font-size-xs);color:var(--color-text-light)}.no-chats{text-align:center;color:var(--color-text-light);padding:var(--spacing-xl)}.groups-list{display:flex;flex-direction:column;gap:.5rem}.group-item{padding:1rem;border-radius:4px;cursor:pointer;transition:background-color .2s;border:1px solid transparent}.group-item:hover{background-color:var(--color-bg-secondary)}.group-item.selected{background-color:var(--color-primary-light);border-color:var(--color-primary)}.group-name{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.group-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.group-meta{font-size:var(--font-size-xs);color:var(--color-text-light)}.no-groups{text-align:center;color:var(--color-text-light);padding:var(--spacing-xl)}.chat-messages-container{display:flex;flex-direction:column;background:var(--color-bg-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.messages-list{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.message-wrapper{display:flex;align-items:flex-start;gap:.75rem;max-width:70%}.message-wrapper.own{align-self:flex-end;flex-direction:row-reverse}.message-avatar{flex-shrink:0}.avatar-img{width:36px;height:36px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-primary)}.avatar-placeholder{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-white);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:700;border:2px solid var(--color-primary)}.message{flex:1;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);background:#f0f0f0}.message.own{background:var(--color-primary);color:var(--color-text-white)}.message-sender{font-size:.875rem;font-weight:500;margin-bottom:.25rem;color:#666}.message.own .message-sender{color:#ffffffe6}.message-content{word-wrap:break-word}.message-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem}.message-time{font-size:.75rem;opacity:.7}.message-actions{display:flex;gap:var(--spacing-xs);align-items:center}.edit-message-btn,.delete-message-btn,.pin-message-btn,.attach-file-btn{background:none;border:none;cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-xs);opacity:.6;transition:opacity var(--transition-base)}.edit-message-btn:hover,.delete-message-btn:hover,.pin-message-btn:hover,.attach-file-btn:hover{opacity:1}.delete-message-btn{color:var(--color-danger)}.pinned-indicator{background:var(--color-warning);color:var(--color-text-white);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-xs);margin-bottom:var(--spacing-xs);font-weight:600}.message.pinned{border-left:3px solid var(--color-warning);padding-left:var(--spacing-sm)}.edit-message-form{width:100%}.edit-message-input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-base);resize:vertical;margin-bottom:var(--spacing-xs)}.edit-message-actions{display:flex;gap:var(--spacing-xs)}.save-edit-btn,.cancel-edit-btn{padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm)}.save-edit-btn{background:var(--color-primary);color:var(--color-text-white)}.cancel-edit-btn{background:var(--color-bg-secondary);color:var(--color-text-primary)}.message-files{margin-top:var(--spacing-xs);display:flex;flex-direction:column;gap:var(--spacing-xs)}.message-file{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg-secondary);border-radius:var(--radius-sm);text-decoration:none;color:var(--color-primary);font-size:var(--font-size-sm);transition:background-color var(--transition-base)}.message-file:hover{background:var(--color-bg-light)}.file-size{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin-left:var(--spacing-xs)}.pinned-messages-info{padding:var(--spacing-sm);background:var(--color-bg-secondary);border-top:1px solid var(--color-border-light)}.pinned-count{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}.delete-message-btn{background:none;border:none;color:#fffc;cursor:pointer;font-size:1.2rem;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;opacity:0}.message:hover .delete-message-btn{opacity:1}.delete-message-btn:hover{background-color:#fff3;color:#fff}.message:not(.own) .delete-message-btn{color:#00000080}.message:not(.own) .delete-message-btn:hover{background-color:#0000001a;color:#333}.no-messages{text-align:center;color:#999;padding:3rem}.no-group-selected{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:1.2rem}.message-input-form{border-top:1px solid #eee;padding:1rem;position:relative}.autocomplete-dropdown{position:absolute;bottom:100%;left:1rem;right:1rem;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px #0000001a;max-height:200px;overflow-y:auto;z-index:10}.autocomplete-section{padding:.5rem}.autocomplete-title{font-size:.75rem;font-weight:500;color:#666;padding:.25rem .5rem;text-transform:uppercase}.autocomplete-item{padding:.5rem;cursor:pointer;transition:background-color .2s}.autocomplete-item:hover{background-color:#f5f5f5}.input-wrapper{display:flex;gap:.5rem}.message-input{flex:1;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.message-input:focus{outline:none;border-color:var(--color-primary)}.send-btn{padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-primary);color:var(--color-text-white);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.send-btn:hover:not(:disabled){background-color:var(--color-primary-dark)}.send-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.chat-container{grid-template-columns:1fr;height:auto}.chat-groups{max-height:200px}.message{max-width:85%}}.profile{max-width:800px;margin:0 auto}.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.profile-header h1{color:var(--color-text-primary)}.edit-btn{background-color:var(--color-primary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.edit-btn:hover{background-color:var(--color-primary-dark)}.profile-card{background:var(--color-bg-primary);padding:var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;gap:var(--spacing-xl)}.profile-picture-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.profile-picture{width:150px;height:150px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--color-primary)}.profile-picture-placeholder{width:150px;height:150px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-white);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700}.image-upload{display:flex;flex-direction:column;gap:.5rem;align-items:center}.image-upload input[type=file]{font-size:.875rem}.upload-btn{background-color:var(--color-secondary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-sm)}.upload-btn:hover:not(:disabled){background-color:var(--color-secondary-dark)}.upload-btn:disabled{opacity:.6;cursor:not-allowed}.image-upload-controls{display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center}.error-message{color:var(--color-danger);font-size:var(--font-size-sm);text-align:center}.profile-info{flex:1}.profile-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;color:var(--color-text-primary)}.form-group input{padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base)}.form-group input:focus{outline:none;border-color:var(--color-primary)}.submit-btn{background-color:var(--color-primary);color:var(--color-text-white);border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base);align-self:flex-start}.submit-btn:hover:not(:disabled){background-color:var(--color-primary-dark)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.profile-details h2{color:var(--color-text-primary);margin-bottom:var(--spacing-lg)}.profile-field{margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.profile-field strong{color:var(--color-text-primary);margin-right:var(--spacing-sm)}.visibility-settings{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-border-light)}.visibility-settings h3{color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:auto;cursor:pointer}.loading,.error{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.error{color:var(--color-danger)}@media (max-width: 768px){.profile-card{flex-direction:column}}.admin{max-width:1200px;margin:0 auto}.admin h1{color:var(--color-text-primary);margin-bottom:var(--spacing-xl)}.admin-tabs{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);border-bottom:2px solid var(--color-border-light)}.admin-tabs button{background:none;border:none;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;font-size:var(--font-size-base);color:var(--color-text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--transition-base)}.admin-tabs button:hover{color:var(--color-text-primary)}.admin-tabs button.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.admin-content{background:var(--color-bg-primary);padding:var(--spacing-xl);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.admin-section h2{color:var(--color-text-primary);margin-bottom:var(--spacing-lg)}.create-form{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}.create-form input{flex:1;min-width:200px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base)}.create-form button{padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-secondary);color:var(--color-text-white);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-size-base);transition:background-color var(--transition-base)}.create-form button:hover{background-color:var(--color-secondary-dark)}.roles-list,.groups-list,.users-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem}.role-item,.group-item,.user-item{padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-base)}.role-item:hover,.user-item:hover{background-color:var(--color-bg-secondary)}.role-item.selected,.user-item.selected{background-color:var(--color-primary-light);border-color:var(--color-primary)}.role-name,.group-name,.user-name{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.role-meta,.group-meta,.user-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.permissions-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.permission-item{padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.permission-name{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.permission-description{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.permissions-manager{margin-top:2rem;padding-top:2rem;border-top:1px solid #eee}.permissions-manager h3{color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.assigned-permissions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;min-height:50px}.permission-tag{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-primary);color:var(--color-text-white);border-radius:var(--radius-md);font-size:var(--font-size-sm);position:relative;min-width:200px}.permission-tag span{font-weight:500}.permission-description-small{font-size:.75rem;opacity:.9;font-style:italic}.remove-permission-btn{position:absolute;top:.25rem;right:.25rem;background:#fff3;border:none;color:#fff;cursor:pointer;font-size:1.2rem;line-height:1;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.remove-permission-btn:hover{background:#ffffff4d}.no-permissions-text{color:#666;font-style:italic;padding:1rem}.add-permission-section{margin-top:1rem}.add-permission-section label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}.add-permission-select{width:100%;max-width:500px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);background-color:var(--color-bg-primary)}.all-permissions-assigned{color:var(--color-success);font-style:italic;padding:var(--spacing-md);background-color:#e8f5e9;border-radius:var(--radius-sm)}.loading-text{color:var(--color-primary);font-style:italic;margin-top:var(--spacing-sm)}.user-management-panel{margin-top:var(--spacing-xl);padding-top:var(--spacing-xl);border-top:1px solid var(--color-border-light)}.user-management-panel h3{color:var(--color-text-primary);margin-bottom:var(--spacing-lg)}.management-section{margin-bottom:var(--spacing-lg)}.management-section label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--color-text-primary)}.management-section select{width:100%;max-width:400px;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.user-groups{display:flex;flex-wrap:wrap;gap:.5rem}.group-tag{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#e8f5e9;color:#27ae60;border-radius:20px;font-size:.875rem}.group-tag button{background:none;border:none;color:#27ae60;cursor:pointer;font-size:1.2rem;line-height:1}.role-item,.group-item{display:flex;justify-content:space-between;align-items:center}.role-actions,.group-actions{display:flex;gap:.5rem}.edit-btn-small,.delete-btn-small{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;transition:background-color .2s}.edit-btn-small{background-color:#667eea;color:#fff}.edit-btn-small:hover{background-color:#5568d3}.delete-btn-small{background-color:#e74c3c;color:#fff}.delete-btn-small:hover{background-color:#c0392b}.group-description{font-size:.875rem;color:#666;margin-bottom:.25rem}.user-permissions-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}.permission-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background-color:#f9f9f9;border-radius:4px;border:1px solid #eee}.permission-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.permission-name-small{font-weight:500;color:#2c3e50;font-size:.9rem}.permission-desc-small{font-size:.75rem;color:#666}.permission-controls{display:flex;gap:.5rem;align-items:center}.grant-btn,.deny-btn,.remove-btn{padding:.4rem .8rem;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s;min-width:36px}.grant-btn{background-color:#e8f5e9;color:#27ae60;border:1px solid #27ae60}.grant-btn:hover{background-color:#c8e6c9}.grant-btn.active{background-color:#27ae60;color:#fff}.deny-btn{background-color:#ffebee;color:#e74c3c;border:1px solid #e74c3c}.deny-btn:hover{background-color:#ffcdd2}.deny-btn.active{background-color:#e74c3c;color:#fff}.remove-btn{background-color:#f5f5f5;color:#666;border:1px solid #ddd;font-size:.75rem}.remove-btn:hover{background-color:#e0e0e0}.help-text{display:block;margin-top:.5rem;color:#666;font-size:.875rem;font-style:italic}.categories-list{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.category-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;border:1px solid #ddd;border-radius:4px;background:#fff}.category-name{font-weight:500;color:#2c3e50;margin-bottom:.25rem}.category-description{font-size:.875rem;color:#666;margin-bottom:.25rem}.category-meta{font-size:.75rem;color:#999}.category-actions{display:flex;gap:.5rem}.edit-form-inline{display:flex;gap:.5rem;align-items:center;flex:1}.save-btn-small,.cancel-btn-small{padding:.25rem .75rem;font-size:.875rem;border-radius:4px;border:none;cursor:pointer}.save-btn-small{background-color:#667eea;color:#fff}.cancel-btn-small{background-color:#ddd;color:#333}:root{--color-primary: #667eea;--color-primary-dark: #5568d3;--color-primary-light: #e3f2fd;--color-secondary: #27ae60;--color-secondary-dark: #229954;--color-accent: #764ba2;--color-danger: #e74c3c;--color-danger-dark: #c0392b;--color-success: #27ae60;--color-warning: #f39c12;--color-text-primary: #2c3e50;--color-text-secondary: #666;--color-text-light: #999;--color-text-white: #ffffff;--color-bg-primary: #ffffff;--color-bg-secondary: #f5f5f5;--color-bg-dark: #2c3e50;--color-bg-light: #fafafa;--color-border: #ddd;--color-border-light: #eee;--color-border-dark: #ccc;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 50%;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--transition-fast: .15s;--transition-base: .2s;--transition-slow: .3s}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg-secondary);color:var(--color-text-primary)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}