/* Instructor UI refinements: clear hierarchy at projector, laptop, and phone sizes. */
body { letter-spacing: -.012em; }

.teacher-top { min-height: 32px; }
.teacher-top .brand { font-size: 16px; }
.teacher-top form button { padding: 6px 0; }

.room-sidebar {
  position: sticky;
  top: 22px;
  padding: 18px;
  border-color: #dfe6f2;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(48, 68, 111, .05);
  backdrop-filter: blur(10px);
}
.room-sidebar nav a { padding: 12px; }
.room-sidebar nav b { font-size: 13px; }
.room-sidebar nav a.active { background: linear-gradient(135deg, #e8efff, #eef0ff); }
.new-room summary { display: flex; align-items: center; min-height: 26px; }

.room-header {
  align-items: center;
  padding: 23px 25px;
  border: 1px solid #e0e6f2;
  border-radius: 22px;
  background:
    radial-gradient(320px 160px at 100% 0, rgba(218, 227, 255, .78), transparent 78%),
    rgba(255, 255, 255, .78);
  box-shadow: 0 12px 32px rgba(50, 68, 108, .05);
}
.room-header h1 {
  margin-top: 11px;
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -.065em;
}
.room-header p { margin-top: 10px; font-size: 13px; }
.room-actions {
  display: grid;
  width: 255px;
  min-width: 255px;
  gap: 10px;
  justify-items: stretch;
}
.present-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(105deg, #3868df, #654bd2);
  color: #fff;
  box-shadow: 0 8px 18px rgba(61, 80, 192, .24);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.025em;
  transition: transform .18s, filter .18s;
}
.present-link:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.join-box {
  min-width: 0;
  padding: 12px 14px;
  border-color: #dbe4f7;
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
}
.join-box b { margin-top: 3px; font-size: 22px; }
.join-box input { height: 28px; margin-top: 7px; font-size: 10px; }
.present-privacy {
  padding: 10px 11px 9px;
  border: 1px solid #dce4f5;
  border-radius: 12px;
  background: rgba(251, 252, 255, .9);
}
.present-privacy > span { display: block; color: #596a88; font-size: 11px; font-weight: 800; }
.present-privacy form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 6px; }
.present-privacy select { min-width: 0; margin: 0; padding: 6px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.present-privacy button { padding: 0 10px; border: 0; border-radius: 8px; background: #e8eeff; color: #4164c5; font-size: 11px; font-weight: 800; cursor: pointer; }
.present-privacy > small { display: block; margin-top: 6px; color: #8792a6; font-size: 9px; line-height: 1.35; }

.question-maker {
  overflow: hidden;
  border-color: #d9e4f7;
  background: rgba(249, 251, 255, .88);
  box-shadow: 0 7px 22px rgba(52, 77, 132, .035);
}
.question-maker summary { min-height: 58px; padding: 17px 19px; font-size: 15px; }
.question-maker form { padding: 1px 19px 20px; }
.question-maker label { font-size: 12px; }
.question-maker input,
.question-maker select,
.question-maker textarea { font-size: 13px; }
.type-panel[data-type-panel="short"] { border-color: #cfeee1; background: #f5fdf9; }
.type-panel[data-type-panel="scale"] { border-color: #dfd8fa; background: #faf9ff; }
.type-panel[data-type-panel="choice"] { border-color: #d5e1fb; background: #f7f9ff; }
.choice-multiple-toggle { display: grid !important; grid-template-columns: 19px 1fr; column-gap: 9px; align-items: center; margin-top: 12px !important; padding: 11px 12px; border: 1px solid #dce4f6; border-radius: 10px; background: #fff; color: #445879; cursor: pointer; }
.choice-multiple-toggle input { width: 19px; height: 19px; margin: 0; padding: 0; accent-color: #536fe0; cursor: pointer; }
.choice-multiple-toggle span { font-size: 12px; font-weight: 900; }
.choice-multiple-toggle small { grid-column: 2; margin-top: 2px; color: #7d8aa1; font-size: 10px; font-weight: 600; line-height: 1.4; }
.question-edit-toggle { display: grid !important; grid-template-columns: 19px 1fr; column-gap: 9px; align-items: center; margin-top: 14px !important; padding: 12px 13px; border: 1px solid #d4eadf; border-radius: 11px; background: #f6fcf9; color: #3f6658; cursor: pointer; }
.question-edit-toggle input { width: 19px; height: 19px; margin: 0; padding: 0; accent-color: #24906e; cursor: pointer; }
.question-edit-toggle span { font-size: 12px; font-weight: 900; }
.question-edit-toggle small { grid-column: 2; margin-top: 2px; color: #738b83; font-size: 10px; font-weight: 600; line-height: 1.45; }
.multiple-choice-note { margin: 12px 0 0; color: #73819b; font-size: 11px; line-height: 1.55; }

.list-title { margin: 31px 0 14px; }
.list-title h2 { margin: 0; font-size: 19px; }
.question-list { gap: 14px; }
.question-card {
  padding: 22px;
  border-color: #e1e6ef;
  border-radius: 19px;
  box-shadow: 0 8px 22px rgba(50, 70, 110, .045);
}
.question-card h3 { margin-top: 15px; font-size: 18px; line-height: 1.45; }
.question-top small { font-size: 11px; }
.question-actions button { min-height: 32px; padding: 7px 11px; font-size: 11px; }
.question-actions .open { box-shadow: 0 4px 10px rgba(61, 99, 203, .08); }
.result-bars { gap: 11px; margin-top: 20px; }
.result-row { grid-template-columns: minmax(105px, 1fr) 3fr 61px; }
.result-row > span { font-size: 12px; }
.result-row i { height: 11px; }
.result-row strong { font-size: 12px; }

@media (max-width: 780px) {
  .teacher-shell { padding-bottom: 38px; }
  .teacher-top .brand { font-size: 15px; }
  .room-sidebar {
    position: static;
    padding: 11px 12px 12px;
    border-radius: 15px;
  }
  .sidebar-title { margin: 1px 2px 9px; }
  .room-sidebar nav { gap: 5px; }
  .room-sidebar nav a { min-width: 132px; padding: 9px 10px; }
  .room-sidebar nav b { font-size: 12px; }
  .room-sidebar nav span { margin-top: 2px; }
  .new-room { margin-top: 9px; padding-top: 9px; }
  .new-room summary { min-height: 22px; }

  .room-header { margin-top: 2px; padding: 20px 17px 18px; border-radius: 18px; }
  .room-header h1 { font-size: 30px; }
  .room-header p { margin-top: 8px; font-size: 12px; }
  .room-actions { width: 100%; min-width: 0; margin-top: 17px; }
  .present-link { min-height: 44px; font-size: 13px; }
  .present-privacy { padding: 11px 12px 10px; }
  .present-privacy > span { font-size: 12px; }
  .present-privacy select { min-height: 34px; font-size: 12px; }
  .present-privacy button { min-width: 54px; font-size: 12px; }
  .present-privacy > small { font-size: 10px; }
  .join-box { padding: 11px 13px; }
  .join-box b { font-size: 21px; }

  .question-maker { border-radius: 15px; }
  .question-maker summary { min-height: 56px; padding: 16px; font-size: 14px; }
  .question-maker form { padding: 1px 16px 18px; }
  .choice-multiple-toggle { padding: 10px 11px; }
  .question-edit-toggle { padding: 11px; }
  .list-title { margin: 27px 0 12px; }
  .list-title h2 { font-size: 18px; }
  .question-card { padding: 17px 16px; border-radius: 17px; }
  .question-card h3 { margin-top: 14px; font-size: 18px; }
  .question-top { align-items: flex-start; }
  .question-top > div:first-child { min-width: 0; gap: 7px; }
  .question-top small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .result-bars { gap: 10px; margin-top: 18px; }
  .result-row { grid-template-columns: 86px 1fr 49px; gap: 9px; }
}