* { box-sizing: border-box; }
body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  margin: 0;
  background: #14161a;
  color: #eee;
  direction: rtl;
}
.auth-box {
  max-width: 380px;
  margin: 60px auto;
  padding: 28px;
  background: #1e2126;
  border-radius: 12px;
}
.auth-box h1 { font-size: 20px; margin-bottom: 20px; text-align: center; }
label { display: block; margin: 12px 0 4px; font-size: 14px; }
input[type=text] {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #3a3d42;
  background: #14161a; color: #eee; font-family: inherit;
}
.tabs { display: flex; gap: 8px; margin-top: 16px; }
.tab-btn {
  flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #3a3d42;
  background: transparent; color: #aaa; cursor: pointer; font-family: inherit;
}
.tab-btn.active { background: #378ADD; color: #fff; border-color: #378ADD; }
.hidden { display: none; }
.primary-btn, .secondary-btn {
  width: 100%; padding: 10px; margin-top: 18px; border: none; border-radius: 8px;
  background: #378ADD; color: #fff; cursor: pointer; font-family: inherit; font-size: 15px;
}
.secondary-btn { background: #5F5E5A; width: auto; margin-top: 0; padding: 8px 16px; }
.error { color: #F09595; font-size: 13px; }

.room-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #1e2126; border-bottom: 1px solid #2c2f34;
}
.room-code-badge { font-size: 13px; color: #9FE1CB; }
.room-layout { display: flex; gap: 12px; padding: 12px; }
.participants-panel { flex: 0 0 200px; background: #1e2126; border-radius: 10px; padding: 10px; max-height: 80vh; overflow-y: auto; }
.participants-panel h3 { margin-top: 0; font-size: 14px; }
.participants-panel ul { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.participants-panel li { padding: 4px 0; border-bottom: 1px solid #2c2f34; }
.toolbar { margin-bottom: 10px; display: flex; gap: 8px; }
.video-area { flex: 3; }
.chat-panel { flex: 1; display: flex; flex-direction: column; background: #1e2126; border-radius: 10px; padding: 10px; max-height: 80vh; }
.video-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.video-grid-remote { display: contents; }
.video-tile { position: relative; width: 220px; }
.video-tile video { width: 100%; border-radius: 8px; background: #000; }
.video-tile span { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.whiteboard-box { margin-top: 16px; background: #1e2126; border-radius: 10px; padding: 12px; }
.wb-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
#whiteboard { width: 100%; max-width: 800px; height: auto; background: #2a2d33; border-radius: 8px; cursor: crosshair; touch-action: none; }
.shared-video-box { margin-top: 16px; background: #1e2126; border-radius: 10px; padding: 12px; }
.upload-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
#chatList { flex: 1; overflow-y: auto; list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
#chatList li { padding: 4px 0; border-bottom: 1px solid #2c2f34; }
#chatForm { display: flex; gap: 6px; }
#chatInput { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #3a3d42; background: #14161a; color: #eee; font-family: inherit; }