/* ===== חדר בקרה לאירוע טלפוני =====
   מסך המנחה של מצב הוועידה.

   ⚠️ הצבע הראשי כאן טורקיז ולא סגול, ובכוונה. שני המסכים שולטים
   באותה שלוחה 40, ומנחה שפתח את המסך הלא נכון היה מגלה את זה רק
   כשמאה אנשים שומעים שקט. ההבדל בצבע נראה מהצד השני של החדר. */

:root {
  --bg: #08111A;
  --bg-soft: #0F1C29;
  --card: #14263A;
  --card-2: #1A3145;
  --line: #24455F;
  --ink: #EAF6FF;
  --ink-dim: #8FA9BF;

  --brand: #12B7A6;
  --brand-2: #4FE3D0;
  --brand-dim: rgba(18, 183, 166, .16);

  --ok: #22C55E;
  --bad: #EF4444;
  --warn: #F59E0B;
  --info: #38BDF8;
  --live: #FF4D6D;

  --o1: #F59E0B;
  --o2: #38BDF8;
  --o3: #EC4899;
  --o4: #22C55E;
  --o5: #A78BFA;
  --o6: #F97316;
  --o7: #14B8A6;
  --o8: #E11D48;
  --o9: #84CC16;

  --r: 16px;
  --shadow: 0 14px 44px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

/* ⚠️ הכלל הזה חייב להיות כאן, ולפני כל השאר.
 *
 * תכונת hidden ב-HTML עובדת דרך גיליון ברירת המחדל של הדפדפן, וכל
 * כלל שלנו שקובע display גובר עליה. כאן כמעט כל דבר שמוסתר הוא גם
 * grid או flex — חלון האישור, חלון המקשים, שער הסיסמה, הרצועות —
 * ולכן בלי הכלל הזה הם פשוט לא נסגרים לעולם.
 *
 * זה מה שקרה בפועל: המסך נפתח עם חלון "האם להמשיך" תקוע על כל
 * העמוד, ולחיצה על הכפתורים באמת הסירה את התכונה — אבל שום דבר
 * לא זז, כי ה-CSS המשיך לצייר אותם. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Assistant", "Rubik", system-ui, sans-serif;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* זוהר עדין בפינה — כדי שהמסך לא ייראה כמו טבלה */
  background-image:
    radial-gradient(1100px 520px at 88% -12%, rgba(18, 183, 166, .13), transparent 62%),
    radial-gradient(900px 460px at 6% 108%, rgba(79, 227, 208, .07), transparent 60%);
  background-attachment: fixed;
}

button { font-family: inherit; }

/* ===== שער סיסמה ===== */

.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(4, 10, 16, .88);
  backdrop-filter: blur(8px);
  padding: 20px;
}

.gate-box {
  width: min(430px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 32px 28px;
  text-align: center;
}

.gate-emoji { font-size: 46px; line-height: 1; }
.gate-box h1 { margin: 12px 0 6px; font-size: 25px; }
.gate-sub { margin: 0 0 20px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }

.gate-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 17px;
  text-align: center;
  letter-spacing: 3px;
  outline: none;
}

.gate-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

.gate-err {
  margin-top: 12px;
  color: #FFB4B4;
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
}

.gate-btn {
  margin-top: 18px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #032B27;
  font-size: 16.5px;
  font-weight: 800;
  cursor: pointer;
}

.gate-btn.ghost { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.gate-btn.danger { background: linear-gradient(180deg, #FF7A7A, var(--bad)); color: #fff; }
.gate-btn:hover { filter: brightness(1.07); }

.confirm-actions { display: flex; gap: 10px; margin-top: 8px; }
.confirm-actions .gate-btn { margin-top: 10px; }

/* ===== סרגל עליון ===== */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: linear-gradient(180deg, rgba(20, 38, 58, .96), rgba(15, 28, 41, .96));
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
}

.brand .dotmark {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 4px var(--brand-dim);
}

.tb-sep { width: 1px; align-self: stretch; background: var(--line); }

.tb {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tb-label {
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.tb-value {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tb-mini { font-size: 11.5px; color: var(--ink-dim); font-weight: 500; }
.tb-spacer { flex: 1; }

.phase-chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: var(--card-2);
  border: 1px solid var(--line);
}

.phase-chip[data-phase="question"] { background: rgba(56, 189, 248, .16); border-color: rgba(56, 189, 248, .45); color: #BFE9FF; }
.phase-chip[data-phase="reveal"] { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .45); color: #C4F5D6; }
.phase-chip[data-phase="leaderboard"] { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .45); color: #FFE3B0; }
.phase-chip[data-phase="finished"] { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .45); color: #DCD1FF; }

.timer {
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: center;
  line-height: 1;
}

.timer.warn { color: var(--warn); }
.timer.hot { color: var(--bad); animation: pulse .9s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: .5; } }

.picker {
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 14px;
  max-width: 210px;
  outline: none;
}

.link-btn {
  text-decoration: none;
  color: var(--ink-dim);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px;
  white-space: nowrap;
}

.link-btn:hover { color: var(--ink); border-color: var(--brand); }

.conn-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  white-space: nowrap;
}

.conn-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); }
.conn-badge[data-conn="open"] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.conn-badge[data-conn="connecting"] .dot { background: var(--warn); }
.conn-badge[data-conn="closed"] .dot { background: var(--bad); }

/* ===== רצועת אזהרה על אסימון חסר ===== */

.alertbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: rgba(245, 158, 11, .12);
  border-bottom: 1px solid rgba(245, 158, 11, .35);
  font-size: 14px;
  color: #FFE3B0;
  line-height: 1.55;
}

.alertbar b { color: #FFF3D6; }
.alertbar.bad { background: rgba(239, 68, 68, .12); border-bottom-color: rgba(239, 68, 68, .38); color: #FFC9C9; }

/* ===== תור שמות ===== */

.namebox {
  padding: 10px 18px;
  background: rgba(18, 183, 166, .08);
  border-bottom: 1px solid var(--line);
}

.namebox-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.namebox-title { font-weight: 800; font-size: 14.5px; }
.namebox-note { font-size: 12px; color: var(--ink-dim); }

.namebox-all {
  margin-inline-start: auto;
  background: var(--brand);
  color: #032B27;
  border: 0;
  border-radius: 9px;
  padding: 6px 13px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.namebox-list { display: flex; flex-wrap: wrap; gap: 8px; }

.namechip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
  font-size: 13.5px;
}

.namechip b { font-weight: 800; }
.namechip .n { color: var(--ink-dim); font-size: 12px; }

.namechip button {
  border: 0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.namechip .yes { background: var(--ok); color: #04220F; }
.namechip .no { background: rgba(239, 68, 68, .2); color: #FFB4B4; }

/* ===== ניווט שאלות ===== */

.qjump {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 28, 41, .6);
  overflow-x: auto;
}

.qjump-label { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.qjump-chips { display: flex; gap: 5px; }

.qchip {
  min-width: 28px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 6px;
}

.qchip:hover { border-color: var(--brand); color: var(--ink); }
.qchip.now { background: var(--brand); border-color: var(--brand); color: #032B27; }
.qchip.done { color: var(--ok); border-color: rgba(34, 197, 94, .4); }
.qchip.bad { color: #FFB4B4; border-color: rgba(239, 68, 68, .5); }

/* ===== פריסה ===== */

.main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px 18px;
  align-items: start;
}

@media (max-width: 1080px) {
  .main { grid-template-columns: 1fr; }
}

.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.card {
  background: linear-gradient(180deg, var(--card), var(--bg-soft));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}

.card-title { font-size: 14.5px; font-weight: 800; }
.hint { font-size: 11.5px; color: var(--ink-dim); font-weight: 500; }
.card-meta { margin-inline-start: auto; font-size: 12px; color: var(--ink-dim); }

/* ===== לוח חדר הוועידה ===== */

.roomcard { border-color: rgba(18, 183, 166, .35); }

.room-state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  margin-bottom: 12px;
}

.room-state.on {
  background: linear-gradient(180deg, rgba(255, 77, 109, .13), rgba(255, 77, 109, .05));
  border-color: rgba(255, 77, 109, .42);
}

.room-led {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink-dim);
  flex: none;
}

.room-state.on .room-led {
  background: var(--live);
  box-shadow: 0 0 0 5px rgba(255, 77, 109, .18);
  animation: pulse 1.3s ease-in-out infinite;
}

.room-title { font-size: 17px; font-weight: 900; }
.room-sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.room-nums { display: flex; gap: 18px; margin-inline-start: auto; }
.room-num { text-align: center; }
.room-num b { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; }
.room-num span { font-size: 11px; color: var(--ink-dim); }
.room-num.room b { color: var(--live); }
.room-num.quiz b { color: var(--brand-2); }

.room-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.rbtn {
  flex: 1 1 auto;
  min-width: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, border-color .15s;
}

.rbtn:hover:not(:disabled) { border-color: var(--brand); filter: brightness(1.1); }
.rbtn:disabled { opacity: .38; cursor: not-allowed; }
.rbtn.go { background: linear-gradient(180deg, #FF7A94, var(--live)); border-color: transparent; color: #fff; }
.rbtn.stop { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: transparent; color: #032B27; }

/* ===== קונסולת השאלה ===== */

.qtext {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 30px;
}

.qtext.empty { color: var(--ink-dim); font-weight: 600; font-size: 16px; }

.options { display: flex; flex-direction: column; gap: 8px; }

.opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.opt .bar {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  background: currentColor;
  opacity: .13;
  transition: width .35s ease;
  width: 0;
}

.opt .num {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  background: currentColor;
  flex: none;
  z-index: 1;
}

.opt .num span { color: #06121B; }
.opt .txt { flex: 1; font-size: 15.5px; color: var(--ink); z-index: 1; min-width: 0; }
.opt .cnt { font-size: 13.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; z-index: 1; }

.opt.correct { border-color: var(--ok); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .35); }
.opt.correct .txt::after { content: " ✓"; color: var(--ok); font-weight: 900; }

/* ===== שורת ההקראה ===== */

.narr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(56, 189, 248, .08);
  border: 1px solid rgba(56, 189, 248, .26);
  font-size: 13px;
  color: #C7E9FF;
  line-height: 1.5;
}

.narr b { font-variant-numeric: tabular-nums; }

/* ===== משתתפים ===== */

.filter {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}

.filter:focus { border-color: var(--brand); }

.plist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 460px;
  overflow-y: auto;
  padding-inline-end: 3px;
}

.prow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.prow.off { opacity: .42; }
.prow.answered { border-color: rgba(34, 197, 94, .32); }

.pnum {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--card-2);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  flex: none;
}

.pname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.pname.unnamed { color: var(--ink-dim); font-style: italic; }

.pwhere {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  white-space: nowrap;
  flex: none;
}

.pwhere.room { color: #FFC2CE; border-color: rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .12); }
.pwhere.quiz { color: #A9F0E7; border-color: rgba(18, 183, 166, .4); background: rgba(18, 183, 166, .12); }

.pscore {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 44px;
  text-align: end;
  flex: none;
}

.pmic {
  display: flex;
  gap: 4px;
  flex: none;
}

.pmic button {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}

.pmic button:hover:not(:disabled) { color: var(--ink); border-color: var(--brand); }
.pmic button:disabled { opacity: .3; cursor: not-allowed; }
.pmic .open:hover:not(:disabled) { border-color: var(--ok); color: var(--ok); }
.pmic .drop:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }

.empty { text-align: center; color: var(--ink-dim); font-size: 13px; padding: 18px 0; }

/* ===== סדר לחיצות ===== */

.orow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
  font-size: 13px;
  border: 1px solid transparent;
}

.orow.right { border-color: rgba(34, 197, 94, .3); }
.orow.wrong { border-color: rgba(239, 68, 68, .25); opacity: .72; }
.orow .place { font-weight: 900; color: var(--ink-dim); min-width: 22px; }
.orow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .ms { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: 12px; }
.orow .pt { font-weight: 800; color: var(--brand-2); min-width: 42px; text-align: end; }

.olist { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; }

/* ===== לוח תוצאות ===== */

.brow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13.5px;
}

.brow .rk { font-weight: 900; min-width: 26px; color: var(--ink-dim); }
.brow.top1 .rk, .brow.top2 .rk, .brow.top3 .rk { color: var(--warn); }
.brow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .sc { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ===== סרגל שליטה ===== */

.controls {
  position: sticky;
  bottom: 0;
  z-index: 35;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: linear-gradient(0deg, rgba(8, 17, 26, .99), rgba(15, 28, 41, .93));
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, border-color .15s, opacity .15s;
}

.ctl:hover:not(:disabled) { border-color: var(--brand); filter: brightness(1.12); }
.ctl:disabled { opacity: .34; cursor: not-allowed; }
.ctl .ico { font-size: 16px; }

.ctl .kbd {
  font-size: 10.5px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, .25);
}

.ctl-go { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: transparent; color: #032B27; }
.ctl-go .kbd { color: #04413A; border-color: rgba(3, 43, 39, .3); }
.ctl-stop { background: linear-gradient(180deg, #FFC46B, var(--warn)); border-color: transparent; color: #3A2504; }
.ctl-stop .kbd { color: #5A3A06; border-color: rgba(58, 37, 4, .3); }
.ctl-info { background: rgba(56, 189, 248, .13); border-color: rgba(56, 189, 248, .32); }
.ctl-warn { background: rgba(167, 139, 250, .13); border-color: rgba(167, 139, 250, .34); }
.ctl-bad { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); }
.ctl-gap { flex: 1; }

/* ===== הודעות ===== */

.toasts {
  position: fixed;
  bottom: 84px;
  inset-inline-start: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 15px;
  font-size: 14px;
  box-shadow: var(--shadow);
  max-width: 400px;
}

.toast.ok { border-color: rgba(34, 197, 94, .5); }
.toast.err { border-color: rgba(239, 68, 68, .55); }
.toast.warn { border-color: rgba(245, 158, 11, .5); }

/* ===== לוח הגדרות (מדריך חיבור) ===== */

.setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.setup-item {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
}

.setup-item .k { font-size: 11px; color: var(--ink-dim); }
.setup-item .v { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }
.setup-item .d { font-size: 11.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.4; }
.setup-item.ok { border-color: rgba(34, 197, 94, .4); }
.setup-item.bad { border-color: rgba(239, 68, 68, .45); }

.keys-table { width: 100%; border-collapse: collapse; text-align: start; font-size: 14px; }
.keys-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.keys-table td.k { width: 78px; }
.keys-table kbd {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 12.5px;
}