/* ============================================================
   TierTalk — /admin (แดชบอร์ดควบคุม)
   โฟลว์ใหม่: ถามทีละข้อ → เฉลยทีละข้อ → บอร์ดสะสม
   Desktop-first 1280+, ใช้งานได้บนแท็บเล็ตแนวนอน 768+
   ใช้เฉพาะตัวแปรจาก tokens.css — ห้ามฝังค่าสีตรง ๆ
   ============================================================ */

body {
  overflow: hidden; /* shell คุม scroll เอง (desktop) */
}

/* author styles ชนะ UA stylesheet เสมอ → ต้องบังคับ [hidden] เอง
   ไม่งั้น .badge / .field-error / .gate ที่ตั้ง display ไว้จะไม่ยอมซ่อน */
[hidden] { display: none !important; }

/* ปุ่มเล็กบนแดชบอร์ดยังต้องกดง่ายในที่แสงน้อย → ไม่ต่ำกว่า 44px */
.btn-sm { min-height: 44px; }
.btn-icon.btn-sm { width: 44px; min-height: 44px; }

.noscript-warn {
  padding: var(--sp-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------- Icon slot */
.ic-slot,
.ic {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
.ic-slot svg,
.ic svg {
  width: 24px;
  height: 24px;
}
.ic-sm svg { width: 20px; height: 20px; }

/* ============================================================ Auth gate */
.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background:
    radial-gradient(circle at 20% 15%, var(--wwa-pink-soft), transparent 55%),
    radial-gradient(circle at 82% 85%, var(--wwa-pink-mist), transparent 60%),
    var(--color-background);
  z-index: var(--z-overlay);
  overflow: auto;
}
.gate-card {
  width: min(94vw, 420px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.gate-mark,
.brand-mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--wwa-red-soft), var(--color-primary));
  box-shadow: var(--shadow-soft);
  position: relative;
}
.gate-mark::after,
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  opacity: 0.9;
}
.gate-title { font-size: var(--text-2xl); margin: 0; }
.gate-sub { color: var(--wwa-ink-mid); font-weight: 600; font-size: var(--text-sm); }

/* ============================================================ Shell */
.admin-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 348px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  background: var(--color-background);
}
.admin-shell[hidden] { display: none; }

/* ---------------------------------------------------- Topbar */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  box-shadow: var(--shadow-flat);
  z-index: var(--z-sticky);
}
.topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.topbar-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-meta { font-size: var(--text-xs); color: var(--wwa-ink-mid); font-weight: 700; letter-spacing: .06em; }

.topbar-phase {
  margin-inline: auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
}
.topbar-phase-label { font-size: var(--text-xs); color: var(--wwa-ink-mid); font-weight: 700; }
.phase-now {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--wwa-red-deep);
}
.topbar-item {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--wwa-ink-mid);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--color-border-strong);
}

.topbar-right { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
  white-space: nowrap;
}
.conn-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-muted-fg);
  flex: none;
}
.conn-pill.is-on { background: var(--color-surface-3); color: var(--wwa-mint); }
.conn-pill.is-on .conn-dot { background: var(--color-success); }
.conn-pill.is-off { background: var(--color-primary); color: var(--color-on-primary); }
.conn-pill.is-off .conn-dot { background: var(--color-on-primary); }

/* ---------------------------------------------------- Rails */
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rail-left {
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
}
.rail-right {
  background: var(--color-surface);
  border-left: 2px solid var(--color-border);
}
/* flex: none — กันไม่ให้บล็อกถูกบีบจนเนื้อหาล้นไปทับบล็อกถัดไป */
.rail-block { display: flex; flex-direction: column; gap: var(--sp-3); flex: none; }
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.rail-title {
  font-size: var(--text-base);
  font-family: var(--font-display);
  color: var(--wwa-red-deep);
}
.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 2px dashed var(--color-border);
}

/* ---------------------------------------------------- Round list */
.round-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 30vh;
  overflow-y: auto;
  padding-right: 2px;
}

.round-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.round-item.is-current {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-soft);
}
.round-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  text-align: left;
  min-width: 0;
  width: 100%;
}
.round-pick:hover { background: var(--color-surface-2); }
.round-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--color-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.round-meta {
  font-size: var(--text-xs);
  color: var(--wwa-ink-mid);
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.round-tools {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.round-tools .btn-icon { width: 44px; min-height: 44px; }
.round-tools .btn-icon svg { width: 20px; height: 20px; }
.round-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ---------------------------------------------------- Question navigator */
.item-nav-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}
.item-nav-hint {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
  text-align: center;
  line-height: 1.3;
}
.item-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}

.q-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 52px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.q-row:hover { background: var(--color-surface-2); }
.q-row:active { transform: translateY(2px); }
.q-row.is-current {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-soft);
}
.q-row.is-revealed { border-style: dashed; }
.q-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--wwa-ink-mid);
  text-align: center;
}
.q-row.is-current .q-num { color: var(--wwa-red-deep); }
.q-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.q-label {
  font-weight: 700;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-sub {
  font-size: var(--text-xs);
  color: var(--wwa-ink-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-tail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: none;
}

/* ============================================================ Main panel */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panel:focus { outline: none; }

.block { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.block-title { font-size: var(--text-lg); color: var(--wwa-red-deep); }
.block-hint { font-size: var(--text-xs); font-weight: 700; color: var(--wwa-ink-mid); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

/* ---------------------------------------------------- Warning strip */
.warn-strip { display: flex; flex-direction: column; gap: var(--sp-2); }
.warn-strip:empty { display: none; }
.warn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-sm);
  border: 2px solid transparent;
}
.warn-info { background: var(--color-surface-3); color: var(--wwa-red-deep); border-color: var(--color-border-strong); }
.warn-alert { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------------------------------------------------- Phase stepper */
.block-hero { border-color: var(--color-border-strong); box-shadow: var(--shadow-clay); }

.stepper {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.15;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.step-num {
  font-size: var(--text-xs);
  font-family: var(--font-body);
}
.step:hover { background: var(--color-surface-3); }
.step:active { transform: translateY(2px); }
.step.is-done { color: var(--wwa-red-deep); background: var(--color-surface-3); border-color: var(--color-border-strong); }
.step[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--wwa-red-deep);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-clay);
}

/* ---------------------------------------------------- Current question banner */
.hero-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border-strong);
}
.hero-item-kicker {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--wwa-red-deep);
  letter-spacing: .04em;
}
.hero-item-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--color-foreground);
}
.hero-item-sub { font-size: var(--text-sm); color: var(--wwa-ink-mid); font-weight: 600; }

.hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
}
.next-btn {
  min-height: 92px;
  gap: var(--sp-3);
  font-size: var(--text-2xl);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.next-btn .ic-slot svg { width: 34px; height: 34px; }
.next-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  opacity: .82;
}
.next-label { font-family: var(--font-display); text-align: center; }
.next-back {
  min-height: 92px;
  min-width: 128px;
  border-radius: var(--radius-lg);
}

/* ---------------------------------------------------- Timer */
.timer-face { margin-bottom: var(--sp-4); }
.timer {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--wwa-red-deep);
  letter-spacing: .02em;
}
.timer.is-urgent { color: var(--color-primary); animation: timer-pulse 1s var(--ease-out) infinite; }
.timer.is-idle { color: var(--wwa-ink-mid); }
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .timer.is-urgent { animation: none; }
}
.timer-bar {
  margin-top: var(--sp-3);
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  overflow: hidden;
}
.timer-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transform-origin: left center;
  transform: scaleX(0);
}
.timer-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.timer-presets { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.mini-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
  flex: none;
}
.mini-empty { font-size: var(--text-xs); color: var(--color-muted-fg); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-row .btn { min-height: 44px; }

/* ---------------------------------------------------- Stage views */
.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
}
.viewbtn {
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 84px;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.2;
  box-shadow: var(--shadow-flat);
}
.viewbtn .viewbtn-key {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  opacity: .7;
}
.viewbtn[aria-pressed='true'] { box-shadow: var(--shadow-clay); }

.spot-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 2px dashed var(--color-border);
}
.spot-btn { gap: var(--sp-2); padding-left: var(--sp-2); border-radius: var(--radius-full); }
.spot-btn .spot-name {
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------- Reveal */
.reveal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.reveal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.reveal-list:empty { display: none; }
.reveal-btn {
  gap: var(--sp-2);
  min-height: 56px;
  padding: 0 var(--sp-4) 0 var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  max-width: 100%;
}
.reveal-btn .reveal-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12ch;
}
.reveal-btn.is-revealed {
  opacity: .8;
  box-shadow: var(--shadow-flat);
  background: var(--color-surface-2);
}
.aud-switch {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  margin: var(--sp-3) 0;
}
.switch-text { font-weight: 700; font-size: var(--text-sm); }
.fx-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------------------------------------------------- Score chips */
.score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
  white-space: nowrap;
}
.score-hot { background: var(--color-primary); color: var(--color-on-primary); }
.score-warm { background: var(--color-surface-3); color: var(--wwa-red-deep); }
.score-gap { background: var(--wwa-gold); color: var(--wwa-ink); }

/* ============================================================ Right rail */
.mon-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 2px dashed var(--color-border);
}
.mon-block:last-child { border-bottom: none; padding-bottom: 0; }
.mon-hint { font-size: var(--text-xs); font-weight: 700; color: var(--wwa-ink-mid); }
.mon-hint-private {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
}

.speaker-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.speaker-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}
.speaker-card.is-off { background: var(--color-surface-2); border-style: dashed; }
.speaker-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.speaker-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  min-width: 0;
}
.speaker-name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--color-success);
}
.live-dot.is-off { background: var(--color-muted-fg); }
.speaker-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
}

.aud-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.stat {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--wwa-red-deep);
  line-height: 1.1;
}
.stat-label { font-size: var(--text-xs); font-weight: 700; color: var(--wwa-ink-mid); }

.analysis-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.an-group-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--wwa-red-deep);
}
.an-card {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border-left: 5px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.an-card.an-gap { border-left-color: var(--wwa-gold); }
.an-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.an-name { font-weight: 800; font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tip { font-size: var(--text-xs); color: var(--wwa-ink-mid); font-weight: 600; line-height: 1.45; }
.an-jump {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--wwa-red-deep);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
}
.an-jump:hover { background: var(--color-surface-3); }

.link-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.link-row .btn { min-height: 46px; font-size: var(--text-sm); }

/* ============================================================ คำถามจากผู้ชม
   คิวคัดกรองก่อนขึ้นโปรเจกเตอร์ — ต้องอ่านง่ายและกดผิดยาก
   ============================================================ */

/* ตัวแจ้งเตือนบน topbar — เห็นได้ตลอดแม้เลื่อนแผงกลางไปอ่านอย่างอื่น */
.qa-alert {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-pink-border);
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}
/* --color-pink-hover ทำ contrast กับ --wwa-red-deep ได้ 4.48:1 (ต่ำกว่าเกณฑ์)
   → ใช้ --wwa-pink (5.05:1) เป็นสถานะ hover แทน */
.qa-alert:hover { background: var(--wwa-pink); }
.qa-alert .ic-slot svg { width: 20px; height: 20px; }
.qa-alert-num {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1;
}

.block-qa { border-color: var(--color-border-strong); }
.block-qa:focus { outline: none; }
.block-qa .mon-hint-private { margin-bottom: var(--sp-4); }

/* ---------------------------------------------------- แถบ "อยู่บนจอตอนนี้" */
.qa-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.qa-live.is-on {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-surface-3);
  box-shadow: var(--shadow-soft);
}
.qa-live-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.qa-live-kicker {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--wwa-ink-mid);
}
.qa-live.is-on .qa-live-kicker { color: var(--wwa-red-deep); }
.qa-live-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
}
.qa-live-off { flex: none; min-height: 52px; }

/* ---------------------------------------------------- แถวควบคุม */
.qa-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
  align-items: end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px dashed var(--color-border);
}
.qa-switch {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  min-height: 48px;
}
.qa-cool .field-label { font-size: var(--text-xs); }
.qa-clear { min-height: 48px; }

/* ---------------------------------------------------- แท็บกรอง */
.qa-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.qa-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--wwa-ink-mid);
  font-weight: 800;
  font-size: var(--text-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.qa-tab:hover { background: var(--color-surface-2); }
.qa-tab-count {
  min-width: 24px;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
  font-size: var(--text-xs);
  text-align: center;
}
.qa-tab[aria-pressed='true'] {
  background: var(--color-primary);
  border-color: var(--wwa-red-deep);
  color: var(--color-on-primary);
}
.qa-tab[aria-pressed='true'] .qa-tab-count {
  background: var(--wwa-red-deep);
  color: var(--color-on-primary);
}

/* ---------------------------------------------------- แถบ "มีคำถามใหม่"
   คำถามใหม่ไม่แทรกเข้ารายการเอง — ต้องกดแถบนี้ก่อน จะได้ไม่เลื่อนหนีสายตา */
.qa-newbar {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-pink-border);
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  font-weight: 800;
  font-size: var(--text-sm);
  animation: qa-drop-in var(--dur) var(--ease-out);
}
.qa-newbar:hover { background: var(--wwa-pink); }
@keyframes qa-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-newbar { animation: none; }
}

/* ---------------------------------------------------- รายการคำถาม */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.qa-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.qa-row.is-pinned {
  border-color: var(--color-primary);
  border-width: 3px;
  background: var(--color-surface-3);
  box-shadow: var(--shadow-soft);
}
.qa-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.qa-alias {
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
}
.qa-row.is-dup .qa-alias {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
}
.qa-time { color: var(--wwa-ink-mid); }
.qa-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-foreground);
  overflow-wrap: anywhere;
}
.qa-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* "ขึ้นจอ" = ออกอากาศ → ต้องเด่นกว่าปุ่มอื่นชัดเจน */
.qa-pin {
  flex: 1 1 200px;
  min-height: 52px;
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}
.qa-actions .btn-sm { flex: 0 1 auto; }

/* ============================================================ Modal bits */
.modal-wide { width: min(96vw, 900px); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.modal-title { font-size: var(--text-xl); color: var(--wwa-red-deep); }
.modal-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.confirm-text { font-size: var(--text-base); line-height: 1.6; color: var(--wwa-ink-mid); }
.modal-foot {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px dashed var(--color-border);
}
.modal-foot .btn-left { margin-right: auto; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.editor-section {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.editor-section-key {
  border-color: var(--color-border-strong);
  background: var(--wwa-pink-mist);
}
.editor-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.editor-section h3 { font-size: var(--text-base); color: var(--wwa-red-deep); }
.editor-section > header .select { width: auto; min-width: 190px; }

.bulk-field {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}
.bulk-area { min-height: 132px; font-size: var(--text-sm); }

/* สวิตช์ที่ใช้ไม่ได้ (เช่น หัวข้อนี้ไม่เปิดให้ผู้ชมร่วม) */
.switch input:disabled + .switch-track { opacity: .4; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: .65; }

.tier-editor, .item-editor { display: flex; flex-direction: column; gap: var(--sp-2); }

.tier-edit-row,
.item-edit-row {
  display: grid;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.tier-edit-row { grid-template-columns: auto 56px minmax(90px, 1fr) minmax(90px, 1.3fr) auto; }
.item-edit-row { grid-template-columns: 26px auto auto minmax(110px, 1.4fr) minmax(90px, 1fr) auto auto; }
/* เดิมมี 6 คอลัมน์ พอเพิ่มปุ่มแก้คำบรรยายเข้ามาเป็น 7 ปุ่มถังขยะเลยตกไปบรรทัดใหม่
   → แถวสูงสองเท่า คูณ 10 ข้อแล้วต้องเลื่อนหาไปเรื่อย ๆ */
.item-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--wwa-ink-mid);
  text-align: center;
}

/* ▲▼ วางแนวนอน เพื่อให้แต่ละปุ่มเต็ม 44×44 โดยแถวไม่สูงเกินไป */
.ord-tools { display: flex; gap: var(--sp-2); flex: none; }
.ord-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--wwa-ink-mid);
}
.ord-btn svg { width: 20px; height: 20px; }
.ord-btn:hover:not(:disabled) { background: var(--color-surface-3); }
.ord-btn:disabled { opacity: .35; cursor: not-allowed; }

.color-input {
  width: 56px;
  height: 48px;
  padding: 3px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}
.input-sm { min-height: 48px; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }

.thumb-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-border-strong);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  color: var(--wwa-ink-mid);
  overflow: hidden;
  flex: none;
}
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn:hover { background: var(--color-surface-3); }

.help-table { display: flex; flex-direction: column; gap: var(--sp-2); }
.help-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
kbd {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-bottom-width: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--wwa-red-deep);
}

/* ============================================================ Responsive */
/* แท็บเล็ตแนวนอน / จอแคบ: ย้าย monitor ลงล่าง แล้วให้ทั้งหน้าเลื่อนได้ */
@media (max-width: 1180px) {
  body { overflow: auto; }
  .admin-shell {
    grid-template-columns: 268px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 100dvh;
  }
  .rail, .panel { overflow: visible; }
  .rail-left { grid-column: 1; grid-row: 2; }
  .panel { grid-column: 2; grid-row: 2; }
  .rail-right {
    grid-column: 1 / -1;
    grid-row: 3;
    border-left: none;
    border-top: 2px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: var(--sp-5);
  }
  .rail-right .mon-block { border-bottom: none; }
  .topbar { position: sticky; top: 0; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .round-list { max-height: none; overflow: visible; }
  .item-nav { max-height: 420px; }
  .qa-list { max-height: 560px; }
  .qa-controls { grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr); }
  .qa-clear { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 860px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .rail-left { grid-column: 1; grid-row: 2; border-right: none; border-bottom: 2px solid var(--color-border); }
  .panel { grid-column: 1; grid-row: 3; }
  .rail-right { grid-row: 4; }
  .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
  .next-back { min-height: 56px; }
  .topbar { flex-wrap: wrap; }
  .topbar-phase { margin-inline: 0; order: 3; width: 100%; justify-content: center; }
  .tier-edit-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .item-edit-row { grid-template-columns: 26px auto minmax(0, 1fr) auto; }
  .qa-controls { grid-template-columns: minmax(0, 1fr); }
  .qa-live { grid-template-columns: minmax(0, 1fr); }
  .qa-live-off { width: 100%; }
  .qa-alert .qa-alert-text { display: none; }
}

/* offline overlay hint (shared.js เพิ่ม .is-offline ที่ body) */
body.is-offline .panel { opacity: .72; }

/* ---------------------------------------------------- คำบรรยายระดับเฉพาะข้อ */
/* กางออกใต้แถวคำถาม ให้ตั้งคำบรรยายสนุก ๆ ต่างกันได้ในแต่ละข้อ
   เว้นว่าง = ใช้คำบรรยายกลางของรอบ (placeholder โชว์ค่ากลางให้เห็นว่าจะได้อะไร) */
.cap-edit {
  margin: calc(var(--sp-1) * -1) 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
}
.cap-hint { margin-bottom: var(--sp-2); }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2);
}
.cap-row { display: flex; align-items: center; gap: var(--sp-2); }
.cap-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 38px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  flex: none;
}
.item-edit-row .btn-icon.is-on {
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
}