body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #36393f; color: #fff; overflow: hidden; }
* { box-sizing: border-box; }

/* AUTH (LOGIN) */
#auth-container { height: 100vh; display: flex; justify-content: center; align-items: center; background: #2f3136; }
.auth-box { background: #202225; padding: 40px; border-radius: 8px; width: 100%; max-width: 400px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-align: center; }
.auth-header h2 { margin: 0; color: #fff; }
.auth-header p { color: #b9bbbe; margin-top: 5px; }
.auth-tabs { display: flex; background: #2f3136; padding: 5px; border-radius: 5px; margin: 20px 0; }
.auth-tabs button { flex: 1; padding: 10px; border: none; background: none; color: #b9bbbe; cursor: pointer; border-radius: 4px; font-weight: bold; }
.auth-tabs button.active { background: #40444b; color: #fff; }
.input-group { position: relative; margin-bottom: 15px; }
.input-group i { position: absolute; left: 12px; top: 12px; color: #72767d; }
.input-group input { width: 100%; padding: 10px 10px 10px 35px; background: #2f3136; border: 1px solid #202225; color: #fff; border-radius: 4px; outline: none; transition: 0.2s; }
.input-group input:focus { border-color: #5865f2; }
.btn-submit { width: 100%; padding: 10px; background: #5865f2; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
.btn-submit:hover { background: #4752c4; }
.btn-register { background: #3ba55c; }
.btn-register:hover { background: #2d7d46; }
.auth-msg { margin-top: 15px; font-size: 14px; }
.auth-msg.error { color: #ed4245; }
.auth-msg.success { color: #3ba55c; }

/* MAIN DASHBOARD */
#main-layout { display: flex; height: 100vh; }
.sidebar-projects { width: 72px; background: #202225; display: flex; flex-direction: column; align-items: center; padding-top: 12px; overflow-y: auto; gap: 8px; }
.project-icon { width: 48px; height: 48px; background: #36393f; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; font-weight: bold; color: #dcddde; }
.project-icon:hover { background: #5865f2; border-radius: 16px; color: #fff; }
.add-project-btn { width: 48px; height: 48px; border-radius: 50%; background: #3ba55c; color: white; border: none; cursor: pointer; font-size: 20px; transition: 0.2s; }
.add-project-btn:hover { border-radius: 16px; }

.sidebar-rooms { width: 240px; background: #2f3136; display: flex; flex-direction: column; }
.sidebar-rooms .header { padding: 16px; font-weight: bold; border-bottom: 1px solid #202225; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
#room-list { flex: 1; overflow-y: auto; padding: 8px; }
.room-item { padding: 8px; border-radius: 4px; color: #8e9297; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.room-item:hover { background: #34373c; color: #fff; }
.hint { font-size: 12px; color: #72767d; text-align: center; margin-top: 20px; }
#room-controls { padding: 10px; display: flex; gap: 5px; justify-content: center; }
#room-controls button { background: #36393f; color: #b9bbbe; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
#room-controls button:hover { background: #40444b; color: #fff; }

.user-panel { background: #292b2f; padding: 10px; display: flex; align-items: center; justify-content: space-between; }
.user-details { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: bold; }
.avatar { width: 32px; height: 32px; background: #5865f2; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.user-panel button { background: none; border: none; color: #b9bbbe; cursor: pointer; font-size: 16px; }
.user-panel button:hover { color: #ed4245; }

.content-area { flex: 1; background: #36393f; display: flex; flex-direction: column; }
.chat-header { height: 48px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #26272d; font-weight: bold; }

/* CHAT */
#chat-interface { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.msg { line-height: 1.4; }
.msg b { color: #fff; cursor: pointer; }
.msg b:hover { text-decoration: underline; }
.input-box { padding: 0 16px 20px; display: flex; gap: 10px; }
.input-box input { flex: 1; padding: 12px; background: #40444b; border: none; border-radius: 8px; color: #fff; outline: none; }
.input-box button { background: #5865f2; color: white; border: none; padding: 0 20px; border-radius: 8px; cursor: pointer; }

/* VIDEO */
#voice-interface { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.video-grid { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; justify-content: center; }
.video-card { width: 300px; height: 225px; background: #000; border-radius: 8px; position: relative; overflow: hidden; }
.video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card span { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.video-card.local { border: 2px solid #5865f2; }
.voice-controls { margin-top: 10px; text-align: center; }
.btn-danger { background: #ed4245; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }