:root { 
  --bg:#0f1115; --fg:#e6e6e6; --muted:#a1a1a1; --accent:#4da3ff; --ok:#4caf50; --warn:#ffc107; --err:#ff5252; 
 }
* { box-sizing:border-box }
html, body { height:100%; }
body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif }

a { color:var(--accent); text-decoration:none }
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid #222 }

main { display:grid; grid-template-columns: 2fr 1fr; gap:12px; padding:12px }

section { background:#12151d; border:1px solid #222; border-radius:14px; padding:12px }
h1,h2 { margin:.3rem 0 1rem }

.controls button { margin:4px 6px; padding:8px 12px; border-radius:10px; border:1px solid #333; background:#1a1f2b; color:#fff; cursor:pointer }
.controls button.active { outline:2px solid var(--accent) }

/* Видео-область: высота от окна вместо aspect-ratio */
.video-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden }
#video,#remoteVideo { width:100%; height:100%; object-fit:contain }
#overlay { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.stat { background:#0d1016; border:1px solid #1e2230; padding:8px; border-radius:10px }
.kv { display:flex; justify-content:space-between; gap:8px }
.kv .k { color:var(--muted) }
.badge { display:inline-block; padding:2px 6px; border-radius:8px; border:1px solid #2b2f3c }
.ok { color:var(--ok) } .warn { color:var(--warn) } .err { color:var(--err) }
.footer { padding:10px 16px; color:var(--muted) }

/* .stat { padding: 8px; border: 1px solid #222; border-radius: 10px; background:#0b0b0f; } */
.stat { padding: 8px; border: 1px solid #222; border-radius: 10px; margin: 8px; background:#0b0b0f; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.kv .k { opacity:.7; }
.kv .v { font-variant-numeric: tabular-nums; }

.kv.sev-ok   { background: rgba(0,180,42,.12); }
.kv.sev-warn { background: rgba(255,165,0,.12); }
.kv.sev-bad  { background: rgba(255,60,56,.14); }

.icon-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; 
  border:1px solid #2a2a2a; background:#101214; color:#e7e7e7; border-radius:10px; }
.icon-btn:hover { background:#171a1c; }
.icon-btn.warn { color:#ff6464; border-color:#4a2323; }
#overlay { touch-action:none; }  /* для тач-рисования */

.toolbar { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }

.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.badge { background: rgba(0,0,0,.5); color:#fff; padding:4px 8px; border-radius:8px; }
.speaking { outline: 3px solid #28c76f; box-shadow: 0 0 0 4px rgba(40,199,111,.25); }

/* .rooms { margin:.5rem 0 1rem; }
.rooms-head { display:flex; align-items:center; justify-content:space-between; }
.rooms-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:8px; }
.room-item { display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid #232323; background:#0e0f12; border-radius:10px; padding:.6rem .8rem; }
.room-item .rn { font-weight:600; }
.room-item .rc { opacity:.75; font-variant-numeric: tabular-nums; }
.room-item .joinBtn { padding:.35rem .6rem; border:1px solid #2a2a2a; background:#121317; color:#e7e7e7; border-radius:8px; } */

/* вёрстка для узких экранов */
@media (max-width: 980px) {
  main { grid-template-columns:1fr }
  .video-wrap { height: clamp(280px, 52vh, 60vh); }
}

/* дополни твой style.css этими блоками (можно вставить в конец файла):
 --- inputs/selects in dark theme --- */
input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  background:#0c1017;
  color:#e6e6e6;
  border:1px solid #2a2f3a;
  border-radius:10px;
  padding:8px 10px;
  outline:none;
  transition:border-color .15s ease;
}
input::placeholder, textarea::placeholder { color:#8b8b8b; }
input:focus, select:focus, textarea:focus { border-color:#4da3ff; box-shadow:0 0 0 3px rgba(77,163,255,.15); }
select { padding-right:28px; }

/* --- video shell grows; no dead space at bottom --- */
html, body { height:100%; }
main { min-height:calc(100vh - 60px); }

/* --- fullscreen button area fix for mobile --- */
.video-wrap { position:relative; min-height:240px; }

/* --- chat panel --- */
.chat { display:flex; flex-direction:column; gap:8px; height:100%; }
.chat-list {
  flex:1; overflow:auto;
  background:#0d1016; border:1px solid #1e2230; border-radius:10px; padding:8px;
}
.chat-row { display:flex; gap:8px; align-items:flex-start; margin:6px 0; }
.chat-row .chat-who { color:#8ab4ff; font-weight:600; }
.chat-row.mine .chat-who { color:#80e27e; }
.chat-row .chat-text { white-space:pre-wrap; word-break:break-word; }
.chat-row .chat-ts { margin-left:auto; color:#a1a1a1; font-variant-numeric:tabular-nums; font-size:12px; }
.chat-input { display:flex; gap:8px; }
.chat-input input { flex:1; }

/* небольшие кнопки у контролов */
.controls input, .controls select { margin:4px 6px; }


/* Inputs & buttons dark theme */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], textarea, select {
  background:#1a1f2b; color:var(--fg); border:1px solid #2b3244; border-radius:10px; padding:8px 10px; outline:none;
}
input::placeholder, textarea::placeholder { color: #8690a5; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(77,163,255,0.15); }

button, .btn {
  background:#1a1f2b; color:#fff; border:1px solid #2b3244; border-radius:10px; padding:8px 12px; cursor:pointer;
}
button:hover, .btn:hover { border-color:#3a425a; }
button.primary, .btn-primary { background: #0f1725; border-color: #2b66c6; }
#annotate { background:#0f1725; border-color:#2b66c6; }

/* Participants panel */
.participants-panel { padding:6px 6px 10px; }
.participants-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.participant-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #222; background:#10141d; border-radius:999px; user-select:none; transition:all .15s ease; }
.participant-item .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.participant-item .name { font-weight:600; }
.participant-item .mic { font-size:12px; opacity:.8 }
.participant-item.speaking { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(77,163,255,.15); }
.participant-item.selected { outline: 2px dashed var(--accent); outline-offset:2px; }

/* Chat items with mentions */
.chat-mention { display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border:1px solid #2b2f3c; border-radius:999px; background:#121725; }
.chat-mention .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }