:root {
  --bg: #f5f7f9;
  --panel: #ffffff;
  --text: #17202a;
  --muted: #667085;
  --line: #d9e0e8;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --danger: #b42318;
  --blue: #2563eb;
  --shadow: 0 18px 48px rgba(20, 30, 40, 0.14);
}

/* SMS operations */
.sms-page-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 86% -10%, rgba(60, 189, 174, .12), transparent 34rem),
    #f4f7f8;
  color: #162724;
}
.sms-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.sms-admin-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 0;
  border-top: 1px solid #dde5e7;
}
.sms-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: calc(100vh - 74px);
  padding: 26px 17px;
  border-right: 1px solid #dce5e6;
  background: rgba(249, 251, 251, .92);
  backdrop-filter: blur(12px);
}
.sms-sidebar-heading { display: grid; gap: 5px; padding: 2px 12px 18px; }
.sms-sidebar-heading > span, .sms-eyebrow {
  color: #568078;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}
.sms-sidebar-heading > strong { font-size: 21px; letter-spacing: -.035em; }
.sms-side-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #62716f;
  cursor: pointer;
  text-align: left;
}
.sms-side-link:hover { border-color: #d7e3e1; background: white; }
.sms-side-link.active {
  border-color: #c4ded9;
  background: linear-gradient(130deg, #e8f6f2, #f8fbfa);
  color: #075f58;
  box-shadow: 0 7px 22px rgba(18, 83, 75, .08);
}
.sms-side-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #e7eeed;
  font-size: 14px;
}
.sms-side-link.active .sms-side-icon { background: #087f77; color: white; }
.sms-side-link > span:last-child { display: grid; gap: 3px; min-width: 0; }
.sms-side-link strong { font-size: 13px; }
.sms-side-link small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sms-sidebar-status {
  display: grid;
  gap: 5px;
  margin: 22px 7px 0;
  padding: 14px;
  border: 1px solid #dce7e5;
  border-radius: 13px;
  background: white;
}
.sms-sidebar-status span { color: #71827e; font-size: 10px; }
.sms-sidebar-status strong { overflow-wrap: anywhere; color: #1f4741; font-size: 12px; }
.sms-content { min-width: 0; padding: 34px clamp(22px, 4vw, 58px) 64px; }
.sms-section { display: none; width: min(1440px, 100%); margin: 0 auto; }
.sms-section.active { display: block; }
.sms-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 23px;
}
.sms-page-heading > div:first-child { display: grid; gap: 7px; }
.sms-page-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.052em; }
.sms-page-heading p { max-width: 760px; margin: 0; color: #667774; font-size: 13px; line-height: 1.65; }
.sms-heading-actions { display: flex; gap: 8px; }
.sms-config-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid #edc8c3;
  border-radius: 999px;
  background: #fff6f5;
  color: #a44b42;
  font-size: 11px;
  font-weight: 800;
}
.sms-config-badge::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.sms-config-badge.ready { border-color: #b9ded4; background: #eef9f5; color: #08735f; }
.sms-notice {
  position: sticky;
  z-index: 20;
  top: 10px;
  margin: 0 0 15px;
  padding: 12px 15px;
  border: 1px solid #cbdcda;
  border-radius: 11px;
  background: #f5fbf9;
  color: #285c54;
  box-shadow: 0 8px 25px rgba(24, 57, 53, .09);
  font-size: 12px;
  font-weight: 720;
}
.sms-notice.error { border-color: #efc4c0; background: #fff5f4; color: #9f3f38; }
.sms-notice.warning { border-color: #ead49f; background: #fffaf0; color: #866215; }
.sms-notice.success { border-color: #b8ddce; background: #effaf5; color: #0d7358; }
.sms-compose-grid, .sms-settings-grid { display: grid; grid-template-columns: minmax(420px, 1.06fr) minmax(390px, .94fr); gap: 18px; align-items: start; }
.sms-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe4e5;
  border-radius: 17px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 38px rgba(27, 54, 53, .065);
}
.sms-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border-bottom: 1px solid #e8eded;
}
.sms-panel-heading > div:first-child { display: flex; align-items: center; gap: 11px; }
.sms-panel-heading > div:first-child > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #e9f5f2;
  color: #08766e;
  font-size: 11px;
  font-weight: 900;
}
.sms-panel-heading > div:first-child > div { display: grid; gap: 3px; }
.sms-panel-heading strong { font-size: 14px; }
.sms-panel-heading small { color: #75817f; font-size: 10px; }
.sms-filter-bar { display: grid; grid-template-columns: minmax(170px, 1fr) auto auto; gap: 7px; padding: 13px 15px; border-bottom: 1px solid #edf1f1; }
.sms-filter-bar input, .sms-filter-bar select,
.sms-settings-form input, .sms-settings-form select,
.sms-dialog-card input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d4dfdf;
  border-radius: 9px;
  background: white;
  color: #1d302d;
  outline: none;
  font-size: 12px;
}
.sms-filter-bar input:focus, .sms-filter-bar select:focus,
.sms-settings-form input:focus, .sms-settings-form select:focus,
.sms-dialog-card input:focus { border-color: #56a79b; box-shadow: 0 0 0 3px rgba(57, 152, 139, .11); }
.sms-select-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 17px; background: #f8faf9; color: #677774; font-size: 11px; }
.sms-select-toolbar label, .sms-link-options label, .sms-confirm-check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.sms-select-toolbar input, .sms-link-options input, .sms-confirm-check input { width: 16px; height: 16px; accent-color: #087f77; }
.sms-select-toolbar strong { color: #08766e; }
.sms-recipient-list { max-height: 492px; overflow-y: auto; }
.sms-recipient-row {
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 16px;
  border-bottom: 1px solid #edf1f1;
  cursor: pointer;
}
.sms-recipient-row:last-child { border-bottom: 0; }
.sms-recipient-row:hover { background: #f8fbfa; }
.sms-recipient-row.selected { background: #f0f9f6; }
.sms-recipient-row > input { width: 17px; height: 17px; accent-color: #087f77; }
.sms-recipient-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #e7f0ed; color: #32665d; font-size: 12px; font-weight: 850; }
.sms-recipient-copy, .sms-recipient-meta { display: grid; gap: 3px; min-width: 0; }
.sms-recipient-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sms-recipient-copy small, .sms-recipient-meta small { color: #7a8885; font-size: 9px; }
.sms-recipient-meta { justify-items: end; }
.sms-recipient-meta strong { font-family: Consolas, monospace; color: #435c57; font-size: 10px; }
.sms-recipient-row > button { width: 25px; height: 25px; border: 0; border-radius: 50%; background: #f3e8e6; color: #a54941; cursor: pointer; }
.sms-empty { padding: 42px 18px; color: #7b8986; text-align: center; font-size: 12px; }
.sms-empty.error { color: #a64740; }
.sms-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; border-top: 1px solid #edf1f1; }
.sms-pagination:empty { display: none; }
.sms-pagination button { padding: 5px 9px; border: 1px solid #d6e1df; border-radius: 7px; background: white; cursor: pointer; font-size: 10px; }
.sms-pagination span { color: #6e7d79; font-size: 10px; }
.sms-variable-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 17px 9px; }
.sms-variable-row button {
  padding: 6px 9px;
  border: 1px solid #c6ded8;
  border-radius: 999px;
  background: #f0f8f5;
  color: #236f63;
  cursor: pointer;
  font-size: 10px;
  font-weight: 760;
}
.sms-message-input {
  display: block;
  width: calc(100% - 34px);
  min-height: 190px;
  margin: 0 17px;
  padding: 14px;
  border: 1px solid #d4dfdd;
  border-radius: 12px;
  resize: vertical;
  outline: none;
  color: #1c302c;
  font-size: 13px;
  line-height: 1.65;
}
.sms-message-input:focus { border-color: #52a99b; box-shadow: 0 0 0 3px rgba(54, 149, 135, .1); }
.sms-byte-badge { padding: 6px 9px; border-radius: 999px; background: #edf7f4; color: #147264; font-size: 10px; font-weight: 850; }
.sms-byte-badge.lms { background: #fff5df; color: #89621d; }
.sms-link-options { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 18px; color: #4d635e; font-size: 11px; }
.sms-preview-placeholder { display: grid; gap: 7px; min-height: 105px; margin: 1px 17px 16px; padding: 14px; border: 1px dashed #bcd2ce; border-radius: 12px; background: #f8fbfa; }
.sms-preview-placeholder > span { color: #33766b; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.sms-preview-placeholder p { margin: 0; color: #586b67; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.sms-action-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 14px 17px; border-top: 1px solid #e8eded; background: #fbfcfc; }
.sms-action-row > div { display: grid; gap: 3px; }
.sms-action-row > div > span { color: #71817e; font-size: 9px; }
.sms-action-row > div > strong { font-size: 13px; }
.sms-action-row b { color: #08776d; }
.sms-settings-form { display: grid; }
.sms-settings-form > label, .sms-two-fields label, .sms-dialog-card > label { display: grid; gap: 7px; padding: 0 19px 15px; }
.sms-settings-form > label:first-of-type { padding-top: 18px; }
.sms-settings-form label > span, .sms-dialog-card label > span { color: #435a55; font-size: 11px; font-weight: 750; }
.sms-settings-form label small { color: #83908d; font-size: 9px; font-weight: 500; }
.sms-two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 19px; }
.sms-two-fields label { padding: 0 0 15px; }
.sms-settings-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 19px; border-top: 1px solid #e8eded; }
.sms-connection-result { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 0 19px 18px; padding: 11px; border: 1px solid #b9ddd1; border-radius: 10px; background: #f0faf6; color: #1b6554; font-size: 10px; }
.sms-connection-result.error { border-color: #efc4c0; background: #fff5f4; color: #9e4039; }
.sms-infra-panel { display: grid; gap: 0; }
.sms-ip-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; margin: 18px; padding: 17px; border: 1px solid #d7e4e1; border-radius: 13px; background: #f8fbfa; }
.sms-ip-card span { color: #6d7e7a; font-size: 10px; }
.sms-ip-card strong { grid-column: 1; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 16px; }
.sms-ip-card button { grid-row: 1 / 3; grid-column: 2; }
.sms-infra-note { margin: 0; padding: 0 19px 18px; color: #687975; font-size: 10px; line-height: 1.65; }
.sms-provider-guide { margin: 0 18px 18px; padding: 17px; border: 1px solid #eadbaa; border-radius: 13px; background: #fffbef; }
.sms-provider-guide strong { color: #705918; font-size: 12px; }
.sms-provider-guide p { margin: 8px 0 0; color: #71684d; font-size: 10px; line-height: 1.75; }
.sms-history-list { display: grid; }
.sms-history-row { display: grid; grid-template-columns: auto minmax(180px, 1.4fr) minmax(120px, .8fr) minmax(130px, .9fr); align-items: center; gap: 14px; padding: 15px 19px; border-bottom: 1px solid #e9eeee; }
.sms-history-row:last-child { border-bottom: 0; }
.sms-history-row > div { display: grid; gap: 4px; }
.sms-history-row strong { font-size: 12px; }
.sms-history-row small { color: #788783; font-size: 9px; }
.sms-history-status { width: 9px; height: 9px; border-radius: 50%; background: #9ba8a6; }
.sms-history-status.completed { background: #25a47d; }
.sms-history-status.partial { background: #d6a02e; }
.sms-history-status.failed { background: #d55b53; }
.sms-history-results { grid-column: 2 / -1; }
.sms-history-results summary { cursor: pointer; color: #315e55; font-size: 10px; font-weight: 800; text-decoration: underline; }
.sms-history-results > div { display: grid; gap: 6px; margin-top: 8px; }
.sms-history-results p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; padding: 9px 11px; border: 1px solid #dce5e1; border-radius: 9px; background: #f8faf9; }
.sms-history-results p.failed { border-color: #f0c7c0; background: #fff7f5; }
.sms-history-results p > span { display: grid; gap: 2px; }
.sms-history-results p > span:last-child { text-align: right; }
.sms-history-results small { color: #6d7b76; }
.sms-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 24px 90px rgba(10, 31, 28, .27);
}
.sms-dialog::backdrop { background: rgba(12, 28, 27, .52); backdrop-filter: blur(3px); }
.sms-dialog-card { display: grid; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: white; }
.sms-dialog-card.wide { width: min(860px, calc(100vw - 28px)); max-height: min(82vh, 820px); }
.sms-preview-dialog, .sms-confirm-dialog { width: min(860px, calc(100vw - 28px)); }
.sms-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid #e7eded; }
.sms-dialog-heading > div { display: grid; gap: 3px; }
.sms-dialog-heading span { color: #4f7b73; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.sms-dialog-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.sms-dialog-heading > button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #edf2f1; color: #546460; cursor: pointer; font-size: 20px; }
.sms-dialog-card > label:first-of-type { padding-top: 18px; }
.sms-dialog-card > p { margin: 0; padding: 0 20px 18px; color: #6b7a77; font-size: 10px; line-height: 1.6; }
.sms-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid #e8eded; background: #fafcfc; }
.sms-preview-summary, .sms-confirm-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #e7eded; background: #f5faf8; }
.sms-preview-summary strong, .sms-confirm-summary strong { font-size: 12px; }
.sms-preview-summary span, .sms-confirm-summary span { color: #657773; font-size: 10px; }
.sms-preview-summary p, .sms-confirm-summary p { flex-basis: 100%; margin: 0; color: #9a671b; font-size: 10px; }
.sms-final-preview-list { display: grid; max-height: 54vh; overflow-y: auto; }
.sms-final-preview-list article { padding: 14px 19px; border-bottom: 1px solid #e9eeee; }
.sms-final-preview-list article:last-child { border-bottom: 0; }
.sms-final-preview-list header { display: flex; justify-content: space-between; gap: 12px; }
.sms-final-preview-list header strong { font-size: 11px; }
.sms-final-preview-list header span { color: #788783; font-size: 9px; }
.sms-final-preview-list p { margin: 8px 0 0; color: #394d49; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-final-preview-list.compact { max-height: 43vh; }
.sms-more { padding: 13px 19px; background: #f7faf9; color: #60736e; text-align: center; font-size: 10px; }
.sms-confirm-check { margin: 13px 19px; padding: 12px; border: 1px solid #d8e3e1; border-radius: 10px; background: #f8fbfa; color: #405a55; font-size: 11px; font-weight: 700; }

@media (max-width: 1080px) {
  .sms-admin-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .sms-compose-grid, .sms-settings-grid { grid-template-columns: 1fr; }
  .sms-recipient-list { max-height: 420px; }
}

@media (max-width: 760px) {
  .sms-admin-layout { display: block; }
  .sms-sidebar { position: static; display: flex; min-height: 0; padding: 9px 12px; border-right: 0; border-bottom: 1px solid #dce5e6; overflow-x: auto; }
  .sms-sidebar-heading, .sms-sidebar-status { display: none; }
  .sms-side-link { display: flex; flex: 0 0 auto; width: auto; min-height: 43px; padding: 6px 10px; }
  .sms-side-link small, .sms-side-icon { display: none; }
  .sms-content { padding: 24px 14px 48px; }
  .sms-page-heading { align-items: stretch; flex-direction: column; }
  .sms-heading-actions { width: 100%; }
  .sms-heading-actions > * { flex: 1; }
  .sms-filter-bar { grid-template-columns: 1fr 1fr; }
  .sms-search-field { grid-column: 1 / -1; }
  .sms-action-row { grid-template-columns: 1fr 1fr; }
  .sms-action-row > div { grid-column: 1 / -1; }
  .sms-recipient-row { grid-template-columns: auto 34px minmax(0, 1fr) auto; padding-inline: 11px; }
  .sms-recipient-meta { display: none; }
  .sms-settings-actions, .sms-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sms-settings-actions > *, .sms-dialog-actions > * { width: 100%; }
  .sms-history-row { grid-template-columns: auto 1fr auto; }
  .sms-history-row > div:last-child { grid-column: 2 / -1; }
  .sms-dialog-card input, .sms-dialog-card select, .sms-dialog-card textarea { font-size: 16px; }
}

* { box-sizing: border-box; }
.visually-hidden {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body {
  margin: 0;
  font-family: Arial, "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
}
button, input, select {
  font: inherit;
}
button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #e8eef5;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
button.primary { background: var(--accent); color: white; }
button.stop { background: #ffe8e4; color: var(--danger); }
button.danger { background: var(--danger); color: white; }
button.ghost { background: transparent; border: 1px solid var(--line); }
button.reset-all { background: white; color: var(--danger); border: 1px solid #e7b0aa; }
button.reset-all:hover { background: #fff3f1; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: white;
  color: var(--text);
}
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }

.admin-shell { height: 100vh; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: 58px 76px minmax(0,1fr); }
.admin-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: white;
}
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.header-left, .header-right { display: flex; align-items: center; gap: 12px; }
.countdown-setting { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 800; }
.countdown-setting[hidden] { display: none; }
.countdown-setting select { min-height: 36px; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--text); font: inherit; cursor: pointer; }
.admin-workspace-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f4f7fa; }
.admin-workspace-tab { min-width: 74px; padding: 8px 12px; border-radius: 6px; color: var(--muted); text-align: center; text-decoration: none; font-weight: 800; }
.admin-workspace-tab.active { background: white; color: var(--text); box-shadow: 0 1px 4px rgba(16,24,40,.12); }
.admin-header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.admin-header-actions > button { white-space: nowrap; }
.admin-shell.qna-admin-mode .admin-toolbar .header-right { display: none; }
.admin-shell.qna-admin-mode .admin-main { grid-template-columns: 240px minmax(0, 1fr); }
.admin-shell.qna-admin-mode .device-sidebar { display: none; }
.admin-shell.feedback-admin-mode .admin-toolbar .header-right { display: none; }
.admin-shell.feedback-admin-mode .admin-main { grid-template-columns: minmax(0, 1fr); }
.admin-shell.feedback-admin-mode .question-list,
.admin-shell.feedback-admin-mode .device-sidebar { display: none; }
.header-qr {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.header-qr-stack { display:grid; justify-items:center; gap:3px; flex:0 0 auto; }
.header-qr-download { min-height:0; padding:2px 7px; border-radius:5px; font-size:10px; line-height:1.2; white-space:nowrap; }
.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e8eef5;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.header-button.primary-link { background: var(--accent); color: white; }
.header-button.excel-link { background: #107c41; color: white; }

.rooms-body { min-height: 100vh; background: #f2f5f7; }
.rooms-shell { min-height: 100vh; display: grid; grid-template-rows: 84px 1fr; }
.rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: white;
}
.rooms-header h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.product-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.system-mode {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.system-mode.connected { border-color: #99d5ca; background: #ecfdf8; color: #0f766e; }
.deleted-rooms-link { gap: 7px; border: 1px solid var(--line); background: white; }
.deleted-rooms-link span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #e8eef5; text-align: center; font-size: 12px; }
.rooms-header-actions { display: flex; align-items: center; gap: 10px; }
.admin-logout-button {
  min-height: 36px;
  border-color: #d7e0e4 !important;
  color: #566a72 !important;
  white-space: nowrap;
}
.rooms-page-heading { display: grid; gap: 4px; }
.rooms-page-heading h2 { margin: 0; font-size: 20px; }
.rooms-page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.create-room-form { display: grid; grid-template-columns: minmax(180px, 300px) repeat(6, auto); align-items: center; gap: 10px; }
.room-create-check { display: flex; align-items: center; gap: 7px; color: var(--text); white-space: nowrap; }
.room-create-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.registration-mode-control select,
.registration-mode-select {
  min-height: 34px;
  padding: 6px 28px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font: inherit;
  font-weight: 750;
}
.room-create-check.muted { color: var(--muted); opacity: .65; }
.rooms-main { width: min(1680px, 100%); margin: 0 auto; padding: 28px; }
.rooms-list-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.rooms-list-heading h2 { margin: 0; font-size: 20px; }
.rooms-list-heading span { color: var(--muted); font-weight: 800; }
.rooms-table-head, .room-row {
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(230px, .75fr) minmax(440px, 1.35fr);
  align-items: center;
  gap: 16px;
}
.rooms-table-head { padding: 0 16px 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
.rooms-list { border-top: 1px solid var(--line); }
.deleted-room-row { background: #f8fafc; }
.deleted-room-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deleted-room-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deleted-room-name span,.retention-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.deleted-room-row .danger:disabled { opacity: .35; cursor: default; }
.room-row { min-height: 78px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: white; }
.room-row:hover { background: #fbfcfd; }
.room-name-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.room-name-input { min-width: 0; font-weight: 800; }
.room-id { font-family: Consolas, monospace; letter-spacing: 0; }
.room-domain-cell { min-width: 0; display: grid; gap: 4px; }
.room-domain-cell > a { overflow: hidden; color: var(--accent-dark); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.room-status { color: var(--muted); font-size: 13px; font-weight: 800; }
.room-status.live { color: var(--accent-dark); }
.room-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 8px; }
.header-button.registration-link { background: #e2f4ef; color: #0b695d; box-shadow: inset 0 0 0 1px #b8ddd3; }
button.compact { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.rooms-empty { padding: 48px 20px; border-bottom: 1px solid var(--line); background: white; color: var(--muted); text-align: center; font-weight: 700; }
.feedback-admin-content { width: min(1180px,100%); margin: 0 auto; display: grid; gap: 16px; }
.feedback-summary { color: var(--muted); font-size: 14px; }
.feedback-summary strong { color: var(--text); }
.feedback-list { display: grid; gap: 10px; }
.feedback-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.feedback-card > :first-child { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); color: var(--muted); }
.feedback-card > :first-child strong { color: var(--accent-dark); font-size: 18px; }
.feedback-card time { font-size: 11px; line-height: 1.35; }
.feedback-card p { margin: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.participant-screen-dialog {
  width: min(920px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--text);
  box-shadow: var(--shadow);
}
.participant-screen-dialog::backdrop { background: rgba(17, 24, 39, .46); }
.participant-screen-form { display: grid; gap: 18px; padding: 20px; }
.participant-screen-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.participant-screen-heading h2 { margin: 0; font-size: 20px; }
.participant-screen-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.participant-logo-settings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.participant-logo-setting { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.participant-logo-setting > strong { font-size: 14px; }
.participant-logo-preview {
  height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.participant-logo-preview img {
  width: var(--participant-setting-scale,90%);
  height: auto;
  max-height: calc(100% - 18px);
  object-fit: contain;
  transform: translate(var(--participant-setting-position-x,0%),var(--participant-setting-position-y,0%));
}
.participant-logo-actions { display: flex; gap: 7px; }
.participant-logo-actions button { flex: 1; padding: 8px 10px; }
.participant-logo-setting label { grid-template-columns: auto 1fr; align-items: center; }
.participant-logo-setting label output { justify-self: end; color: var(--text); }
.participant-logo-setting label input { grid-column: 1 / -1; padding: 0; accent-color: var(--accent); }
.participant-screen-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.participant-screen-footer button { min-height: 44px; }
.participant-screen-footer #participantScreenClose { min-width: 110px; }
.participant-background-setting { display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.participant-background-preview { position:relative; min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; overflow:hidden; padding:58px 16px 22px; border:1px solid var(--line); border-radius:12px; background-color:#eef2f6; background-image:linear-gradient(45deg,rgba(148,163,184,.12) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.12) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.12) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.12) 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.participant-background-preview-image { position:absolute; inset:0; background-image:var(--participant-background-image,none); background-size:var(--participant-background-fit,cover); background-position:center top; background-repeat:no-repeat; filter:brightness(var(--participant-background-brightness,100%)); }
.participant-background-preview-branding { position:absolute; z-index:2; top:18px; right:16px; left:16px; height:34px; display:grid; grid-template-columns:1fr 1fr; align-items:center; pointer-events:none; }
.participant-background-preview-branding span { min-width:0; height:100%; display:flex; align-items:center; }
.participant-background-preview-branding span:last-child { justify-content:flex-end; }
.participant-background-preview-branding img { display:block; width:var(--participant-setting-scale,55%); max-width:none; max-height:100%; object-fit:contain; transform:translate(var(--participant-setting-position-x,0%),var(--participant-setting-position-y,0%)); filter:drop-shadow(0 1px 3px rgba(15,23,42,.22)); }
.participant-background-preview-branding img[hidden],
.participant-background-preview-main-logo img[hidden] { display:none !important; }
.participant-background-preview-branding span:first-child img { object-position:left center; }
.participant-background-preview-branding span:last-child img { object-position:right center; }
.participant-background-preview-main-logo { position:relative; z-index:2; width:100%; height:92px; display:grid; place-items:center; pointer-events:none; }
.participant-background-preview-main-logo img { display:block; width:var(--participant-setting-scale,90%); max-width:none; max-height:100%; object-fit:contain; transform:translate(var(--participant-setting-position-x,0%),var(--participant-setting-position-y,0%)); filter:drop-shadow(0 2px 5px rgba(15,23,42,.2)); }
.participant-background-preview-actions { position:absolute; z-index:2; top:var(--participant-button-position-y,76%); left:17px; width:calc(100% - 34px); display:grid; grid-template-columns:1fr 1fr; column-gap:6px; row-gap:var(--participant-waiting-button-gap,6px); transform:translateY(-50%); pointer-events:none; }
.participant-background-preview-actions img { display:block; width:100%; height:auto; object-fit:contain; }
.participant-background-preview-waiting { height:28px; display:grid; place-items:center; overflow:hidden; border-radius:4px; background:var(--participant-waiting-card-background,transparent); }
.participant-background-preview-actions.count-1 { grid-template-columns:1fr; }
.participant-background-preview-agenda{display:flex;align-items:center;justify-content:center;aspect-ratio:2.92;background:#fff;color:#0f766e;font-size:18px;font-weight:900;border:1px solid #99ddd4;border-radius:6px}
.participant-agenda-setting-preview{margin:12px 0;text-align:center;background:#f1f5f9;border-radius:10px;padding:10px}
.admin-shell.agenda-admin-mode .admin-main{display:block;overflow:auto;padding:24px}
.admin-shell.agenda-admin-mode .question-list,.admin-shell.agenda-admin-mode .editor,.admin-shell.agenda-admin-mode .device-sidebar,.admin-shell.agenda-admin-mode .admin-toolbar{display:none}
.admin-shell.agenda-admin-mode{grid-template-rows:72px minmax(0,1fr)}
.agenda-admin-panel{max-width:1080px;margin:0 auto}.agenda-admin-panel[hidden]{display:none}
.agenda-admin-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:24px 0}.agenda-admin-panel #agendaSaveStatus{margin-left:12px}
.participant-agenda-setting-preview img{display:block;max-width:100%;max-height:240px;width:auto;margin:auto;object-fit:contain}
.participant-agenda-setting-preview img[hidden],#participantAgendaRemove[hidden],#participantAgendaEmpty[hidden]{display:none}
.participant-button-order-row{display:flex;align-items:center;gap:8px;margin:8px 0}.participant-button-order-row span{flex:1}.participant-button-order-row button{padding:6px 10px}
.participant-background-preview-actions { left:calc(17px + var(--participant-button-side-margin,0%));width:calc(100% - 34px - var(--participant-button-side-margin,0%) - var(--participant-button-side-margin,0%)); }
.participant-background-preview-actions.count-1 > * { grid-column:1/-1; }
.participant-background-preview-actions[hidden],
.participant-background-preview-actions [hidden],
#participantWaitingFontControl[hidden],
#participantWaitingImageScaleControl[hidden],
#participantWaitingButtonGapControl[hidden] { display:none !important; }
.participant-background-preview-waiting.use-image { height:auto; min-height:0; }
.participant-background-preview-waiting img { width:var(--participant-waiting-image-width,88px); max-width:100%; height:auto; max-height:100%; object-fit:contain; object-position:center; }
.participant-background-preview-waiting span { color:#667085; font-size:8px; font-weight:800; }
.participant-background-preview-waiting.use-image span,
.participant-background-preview-waiting:not(.use-image) img { display:none; }
.participant-background-preview-card { position:relative; z-index:1; padding:22px 28px; border-radius:10px; background:rgba(255,255,255,.92); box-shadow:0 8px 28px rgba(0,0,0,.18); font-weight:800; }
.participant-background-preview:not(.has-background) .participant-background-preview-card { display:none; }
.participant-background-preview > #participantBackgroundEmpty { position:relative; z-index:2; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.82); }
.participant-background-preview > span { position:relative; color:var(--muted); font-weight:700; }
.participant-background-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.participant-background-options label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; }
.participant-background-options output { justify-self:end; }
.participant-background-options input,.participant-background-options select { grid-column:1/-1; }
.participant-background-options input[type="color"] { width:100%; min-height:38px; padding:3px; }
.participant-button-image-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.participant-button-image-heading { grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.participant-button-image-heading small { color:var(--muted); font-size:12px; }
.participant-button-image-setting { display:grid; gap:12px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#f8fafc; }
.participant-button-image-setting > strong { font-size:14px; }
.participant-button-image-preview { display:grid; place-items:center; min-height:120px; padding:10px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background-color:#eef2f6; background-image:linear-gradient(45deg,rgba(148,163,184,.15) 25%,transparent 25%),linear-gradient(-45deg,rgba(148,163,184,.15) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(148,163,184,.15) 75%),linear-gradient(-45deg,transparent 75%,rgba(148,163,184,.15) 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.participant-button-image-preview.dark { background-color:#dce7ec; }
.participant-button-image-preview img { display:block; width:100%; height:auto; max-height:180px; object-fit:contain; }
.switch-line { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); }
.switch {
  width: 48px;
  height: 28px;
  border-radius: 20px;
  padding: 3px;
  background: #cbd5e1;
}
.switch i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  transition: transform .18s;
}
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(20px); }

.admin-main { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; min-height: 0; }
.sidebar {
  padding: 14px;
  border-right: 1px solid var(--line);
  background: #eef3f7;
  overflow: auto;
}
.question-list { min-height: 0; }
.sidebar-create-actions{display:grid;gap:7px;margin-bottom:10px}.sidebar-create-actions .sidebar-add-question{margin:0;width:100%}
.guide-tab-content{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px}.guide-tab-content img{width:48px;height:32px;object-fit:cover;border-radius:5px;background:#111827}.guide-tab{border-color:#99d5cc}.guide-tab>span{color:#0f766e}
.presentation-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:12px;padding:10px 12px;border:1px solid #cfe5e1;border-radius:12px;background:#f2fbf9}.presentation-navigation span{text-align:center;color:#46636a;font-size:12px;font-weight:800}
.guide-editor{display:grid;gap:16px}.guide-editor-preview{display:grid;place-items:center;min-height:280px;max-height:58vh;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#111827}.guide-editor-preview img{display:block;width:100%;height:100%;max-height:58vh;object-fit:contain}
.batch-image-dialog{width:min(1060px,calc(100vw - 32px));max-height:92vh;padding:0;border:0;border-radius:20px;box-shadow:0 30px 90px #0f172a55}.batch-image-dialog::backdrop{background:#0f172a99}.batch-image-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;max-height:92vh}.batch-image-panel>header,.batch-image-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}.batch-image-panel>footer{justify-content:flex-end;border-top:1px solid var(--line);border-bottom:0}.batch-image-panel h2,.batch-image-panel p{margin:0}.batch-image-panel header p{margin-top:4px;color:var(--muted);font-size:13px}.batch-image-toolbar{display:flex;align-items:end;gap:8px;padding:12px 20px;background:#f8fafc}.batch-image-toolbar label{display:grid;gap:5px;font-size:12px;font-weight:800}.batch-image-list{min-height:0;overflow:auto;display:grid;gap:10px;padding:16px 20px}.batch-image-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}.batch-image-row>img{width:220px;height:140px;object-fit:contain;border-radius:9px;background:#111827}.batch-image-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.batch-image-fields label{display:grid;gap:4px;font-size:12px;font-weight:800}.batch-image-fields label:has(textarea){grid-column:1/-1}.batch-image-row-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px}.batch-image-row-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.batch-image-row-heading>div{display:flex;gap:4px}.batch-image-row .compact{padding:5px 8px}.batch-extract-state{align-self:end;color:#0f766e;font-size:12px;font-weight:800}.batch-image-panel>#batchImageStatus{padding:0 20px}.batch-image-fields textarea{resize:vertical}
@media(max-width:760px){.batch-image-row{grid-template-columns:1fr}.batch-image-row>img{width:100%;height:auto;max-height:220px}.batch-image-fields{grid-template-columns:1fr}.batch-image-row-heading{align-items:flex-start}.presentation-navigation{grid-template-columns:1fr 1fr}.presentation-navigation span{grid-column:1/-1;grid-row:1}}
.device-sidebar { min-width: 0; padding: 14px; border-left: 1px solid var(--line); background: #eef3f7; overflow: hidden; display: flex; flex-direction: column; }
.device-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; font-size: 13px; color: #344054; }
.device-power-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.device-power-actions button { min-width: 0; padding: 8px 5px; font-size: 12px; }
.device-status-list { min-height: 0; flex: 1; overflow: auto; display: grid; align-content: start; gap: 5px; }
.device-status-row { min-height: 34px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #d0d5dd; border-radius: 6px; background: white; }
.device-status-row i { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.device-status-row.online i { background: #12b76a; }
.device-status-row strong { min-width: 0; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.device-status-row b { font-size: 12px; color: #344054; }
.device-status-row.low { border-color: #f04438; background: #fff1f0; }
.device-status-row.low b { color: #b42318; }
.device-status-empty { padding: 12px 4px; color: #667085; font-size: 12px; text-align: center; }
.question-tab {
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  background: transparent;
  border: 1px solid transparent;
  display: grid;
  gap: 5px;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}
.question-tab.active {
  background: white;
  border-color: var(--line);
  box-shadow: 0 8px 20px rgba(30, 41, 59, .08);
}
.question-tab.running {
  background: #e8f5f2;
  border-color: #5eead4;
}
.question-tab.running span {
  color: var(--accent-dark);
}
.question-tab.running.active {
  background: #d9f2ed;
  border-color: var(--accent);
}
.question-tab span { font-size: 12px; color: var(--muted); font-weight: 700; }
.tab-title-display {
  min-height: 34px;
  display: flex;
  align-items: center;
  font-weight: 800;
  color: var(--text);
  overflow-wrap: anywhere;
}
.tab-title-input {
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 800;
}
.tab-title-input.editing {
  border: 1px solid var(--accent);
  background: white;
  padding: 8px 10px;
}
.question-tab.active .tab-title-input { background: white; }
.editor {
  padding: 22px;
  overflow: auto;
}
.editor-grid {
  display: grid;
  grid-template-columns: minmax(340px, 720px);
  gap: 20px;
  align-items: start;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.field-grid { display: grid; gap: 14px; }
.choice-grid { display: grid; grid-template-columns: 52px 1fr; align-items: end; gap: 10px; }
.choice-grid.dynamic-choice { grid-template-columns: 52px 1fr 70px; }
.remove-option { height: 40px; padding: 0 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.delete-confirm {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #f5b5ad;
  border-radius: 8px;
  background: #fff1f0;
  color: var(--danger);
}
.delete-confirm strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.delete-confirm div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.metric {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 900;
  font-size: 28px;
}
.metric span { color: var(--muted); font-size: 14px; }
.links {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.links a { color: var(--blue); overflow-wrap: anywhere; }
.qr { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 8px; }

.result-row { display: grid; gap: 7px; margin: 13px 0; }
.result-meta {
  display: grid;
  grid-template-columns: 30px 1fr 54px 36px;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.result-meta.percent-only { grid-template-columns: 30px 1fr 64px; }
.result-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta b, .result-meta em { text-align: right; font-style: normal; }
.bar { height: 12px; background: #edf2f7; border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #2563eb); border-radius: inherit; }

.empty {
  height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.vote-page {
  min-height: 100vh;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 18px;
  background: #eef4f7;
}
body.vote-page-body { position:relative; isolation:isolate; background:#eef4f7; }
body.vote-page-body.has-participant-background::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-image:var(--participant-background-image);
  background-size:var(--participant-background-fit,cover);
  background-position:center top;
  background-repeat:no-repeat;
  filter:brightness(var(--participant-background-brightness,100%));
}
body.vote-page-body.has-participant-background .vote-page { background:transparent; }
.phone-card {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  min-width: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.status-pill {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f5f2;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 13px;
}
.vote-page-logo {
  position: absolute;
  left: 0;
  right: auto;
  top: 18px;
  width: auto;
  height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.vote-page-logo[hidden] { display: none; }
.vote-page-logo.no-space .vote-logo-frame { display: none; }
.vote-logo-frame {
  width: var(--room-logo-scale, 90%);
  height: calc(100% - 12px);
  display: grid;
  place-items: center;
}
.vote-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.orientation-notice { display: none; font-size: 20px; font-weight: 800; text-align: center; }
.vote-title {
  max-width: 100%;
  margin: 16px 0;
  font-size: 24px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.vote-notice-title { text-align: center; }
.vote-page-body .participant-waiting{font-size:var(--voting-waiting-font,16px)}
.vote-page-body .participant-voting-title{font-size:var(--voting-question-font,24px)}
.vote-page-body .vote-option{font-size:var(--voting-option-font,16px);grid-template-columns:max(42px,2em) minmax(0,1fr)}
.vote-page-body .vote-option strong{width:max(34px,1.8em);height:max(34px,1.8em);font-size:inherit}
.vote-options { min-width: 0; display: grid; gap: 10px; }
.vote-option {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  white-space: normal;
  background: #f7fafc;
  border: 1px solid var(--line);
}
.vote-option.selected {
  border-color: var(--accent);
  background: #e8f5f2;
}
.vote-option strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
}
.vote-option span {
  min-width: 0;
  display: block;
  line-height: 1.45;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.message { margin-top: 14px; color: var(--muted); font-weight: 700; text-align: center; }

body.overlay-page {
  background: transparent;
  overflow: hidden;
}
body.overlay-page.addin-hosted {
  background: #0b1220;
}
.overlay-wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: transparent;
  overflow: hidden;
}
.overlay-loading {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  color: white;
  background: #0b1220;
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 800;
  text-align: center;
}
.overlay-loading.error {
  color: #fecaca;
}
.overlay-card {
  position: fixed;
  color: white;
  background: rgba(11, 18, 32, .82);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: clamp(44px, 4.4vw, 60px) clamp(14px, 2.2vw, 28px) clamp(18px, 2.5vw, 34px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  max-height: 88vh;
  overflow: hidden;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  transform: scale(var(--overlay-scale, 1));
  transform-origin: top left;
  user-select: none;
  touch-action: none;
  cursor: move;
  animation: overlayIn 300ms ease-out both;
  will-change: opacity, transform;
}
.overlay-toolbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(38px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
  cursor: move;
  z-index: 3;
}
.overlay-drag-handle {
  width: clamp(54px, 6vw, 78px);
  height: clamp(26px, 3vw, 34px);
  padding: 0;
  background: transparent;
  cursor: move;
  position: relative;
}
.overlay-drag-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 4px;
  border-top: 2px solid rgba(255,255,255,.68);
  border-bottom: 2px solid rgba(255,255,255,.68);
  transform: translate(-50%, -50%);
}
.overlay-card.closing {
  animation: overlayOut 300ms ease-in both;
}
.overlay-card.adjusting {
  outline: 2px solid rgba(255,255,255,.5);
}
.overlay-card.transparent {
  background: rgba(0,0,0,.18);
}
.addin-hosted .overlay-wrap {
  width: 100%;
  height: 100%;
}
.addin-hosted .overlay-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  transform: none;
}
.addin-hosted .overlay-card.transparent {
  background: rgba(11, 18, 32, .82);
}
.addin-hosted .overlay-card.closing {
  animation: overlayOutHosted 300ms ease-in both;
}
.overlay-close {
  position: absolute;
  top: clamp(5px, .6vw, 8px);
  right: clamp(6px, .7vw, 10px);
  width: clamp(30px, 3.2vw, 42px);
  height: clamp(30px, 3.2vw, 42px);
  padding: 0;
  background: rgba(255,255,255,.14);
  color: white;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.overlay-title {
  font-size: clamp(21px, calc(3.4vw - var(--option-count) * .1vw), 45px);
  line-height: 1.16;
  margin: 0;
  padding: 0 0 clamp(10px, 1.4vw, 16px);
  border-bottom: 1px solid rgba(255,255,255,.2);
  overflow-wrap: anywhere;
}
.overlay-info { display: none; }
.overlay-options {
  display: grid;
  gap: clamp(6px, 1vw, 12px);
  margin: 0;
}
.overlay-option {
  display: grid;
  gap: clamp(6px, .8vw, 10px);
  padding: clamp(7px, 1vw, 12px) clamp(9px, 1.2vw, 14px);
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  min-height: 0;
  font-size: clamp(14px, calc(2.25vw - var(--option-count) * .07vw), 30px);
  line-height: 1.2;
}
.overlay-option-line {
  display: grid;
  grid-template-columns: clamp(28px, 3.2vw, 44px) 1fr clamp(46px, 5vw, 72px);
  gap: clamp(6px, 1vw, 12px);
  align-items: center;
}
.overlay-option strong {
  display: block;
  width: clamp(24px, 3vw, 38px);
  color: white;
  text-align: center;
}
.overlay-option span {
  overflow-wrap: anywhere;
}
.overlay-option b {
  text-align: right;
  font-size: clamp(13px, calc(2.1vw - var(--option-count) * .06vw), 28px);
}
.overlay-option-bar {
  height: clamp(8px, 1.1vw, 15px);
  margin-top: clamp(2px, .35vw, 5px);
  margin-left: calc(clamp(28px, 3.2vw, 44px) + clamp(6px, 1vw, 12px));
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
}
.overlay-option-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #2563eb);
  border-radius: inherit;
}
.overlay-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(40px, 4.5vw, 58px);
  height: clamp(40px, 4.5vw, 58px);
  cursor: nwse-resize;
}
.overlay-resize-handle::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(255,255,255,.72);
  border-bottom: 2px solid rgba(255,255,255,.72);
}
.overlay-hint { display: none; }

@keyframes overlayIn {
  from {
    opacity: 0;
    transform: scale(calc(var(--overlay-scale, 1) * .96));
  }
  to {
    opacity: 1;
    transform: scale(var(--overlay-scale, 1));
  }
}

@keyframes overlayOut {
  from {
    opacity: 1;
    transform: scale(var(--overlay-scale, 1));
  }
  to {
    opacity: 0;
    transform: scale(calc(var(--overlay-scale, 1) * .96));
  }
}

@keyframes overlayOutHosted {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Dedicated 7-inch landscape voting screen */
.device-body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f4f5f7;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}
.device-page {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: clamp(42px, 8vh, 58px) minmax(0, 1fr);
  padding: clamp(8px, 1.6vh, 14px) clamp(10px, 1.8vw, 20px) clamp(10px, 1.8vh, 16px);
  gap: clamp(7px, 1.4vh, 12px);
}
.device-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-room-name {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.device-connection {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 6px;
  background: #fef3f2;
  color: #b42318;
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 800;
}
.device-connection.connected { background: #ecfdf3; color: #067647; }
.device-content { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.5vh, 14px); }
.device-question {
  max-height: 2.5em;
  overflow: hidden;
  margin: 0;
  color: #101828;
  font-size: clamp(22px, 4vw, 38px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.device-options { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 16px); }
.device-options.count-1, .device-options.count-2, .device-options.count-3, .device-options.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.device-options.count-1, .device-options.count-2 { grid-template-rows: 1fr; }
.device-option {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(10px, 2vh, 20px);
  border: 2px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #1d2939;
  box-shadow: 0 2px 6px rgba(16,24,40,.06);
  text-align: left;
}
.device-option strong { color: #0f766e; font-size: clamp(24px, 4.2vw, 42px); }
.device-option span {
  max-height: 3.6em;
  overflow: hidden;
  font-size: clamp(17px, 2.8vw, 29px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.device-option:active { transform: scale(.985); background: #f0fdfa; }
.device-option.selected { border-color: #0f766e; background: #eafaf6; box-shadow: inset 0 0 0 2px #0f766e; }
.device-message { color: #667085; font-size: clamp(12px, 1.8vw, 16px); font-weight: 800; text-align: center; }
.device-waiting {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: white;
  color: #344054;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 800;
  text-align: center;
}

@media (orientation: portrait) {
  .device-page::before {
    content: "기기를 가로로 돌려주세요";
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f4f5f7;
    color: #101828;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
  }
}

@media (min-width: 801px) and (max-width: 1300px) {
  .rooms-main { padding: 20px; }
  .rooms-table-head { display: grid; }
  .rooms-list { border-top: 1px solid var(--line); }
  .room-row {
    grid-template-columns: minmax(180px, .65fr) 86px minmax(420px, 1.35fr);
  }
  .room-actions { grid-column: auto; }
}

@media (max-width: 800px) {
  .admin-shell { height: auto; overflow: visible; grid-template-rows: auto auto 1fr; }
  .vote-page { padding: 12px; }
  .phone-card { padding: 16px; }
  .rooms-shell { grid-template-rows: auto 1fr; }
  .rooms-header { align-items: stretch; flex-direction: column; padding: 18px; }
  .create-room-form { grid-template-columns: 1fr; }
  .rooms-main { padding: 18px; }
  .rooms-table-head { display: none; }
  .rooms-list { border-top: 0; display: grid; gap: 12px; }
  .room-row { grid-template-columns: 1fr auto; gap: 10px; border: 1px solid var(--line); border-radius: 8px; }
  .room-name-cell, .room-actions { grid-column: 1 / -1; }
  .room-actions { justify-content: flex-start; flex-wrap: wrap; }
  .room-status { text-align: right; }
  .admin-header { align-items: stretch; height: auto; padding: 10px; flex-direction: column; }
  .admin-header-actions { width: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; }
  .admin-toolbar { align-items: stretch; flex-direction: column; padding: 10px; }
  .admin-workspace-tabs { width: 100%; }
  .admin-workspace-tab { flex: 1; min-width: 0; }
  .header-left, .header-right { justify-content: space-between; flex-wrap: wrap; }
  .header-qr { width: 48px; height: 48px; }
  .participant-logo-settings, .participant-button-image-settings { grid-template-columns: 1fr; }
  .participant-logo-preview { height: 120px; }
  .participant-background-options { grid-template-columns:1fr; }
  .admin-main { grid-template-columns: 1fr; }
  .sidebar { display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .device-sidebar { max-height: 260px; border-left: 0; border-top: 1px solid var(--line); }
  .question-tab { min-width: 160px; }
  .editor-grid { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 600px) {
  .vote-page-logo,
  .vote-page .phone-card,
  .vote-page .participant-shell { display: none; }
  .orientation-notice { display: block; }
}

/* SympoLink admin visual system */
.admin-page-body,
.rooms-body {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #6b768b;
  --line: #dfe5ee;
  --line-strong: #cbd5e1;
  --accent: #087f78;
  --accent-dark: #07635f;
  --accent-soft: #e8f7f4;
  --danger: #c2413a;
  --blue: #356ae6;
  --shadow: 0 18px 50px rgba(31, 45, 74, .1);
  --shadow-soft: 0 6px 22px rgba(31, 45, 74, .07);
  font-family: Inter, Pretendard, "Noto Sans KR", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(8,127,120,.07), transparent 28rem),
    var(--bg);
  color: var(--text);
}

.admin-page-body button,
.admin-page-body .header-button,
.rooms-body button,
.rooms-body .header-button {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 750;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.admin-page-body button:hover:not(:disabled),
.admin-page-body .header-button:hover,
.rooms-body button:hover:not(:disabled),
.rooms-body .header-button:hover { transform: translateY(-1px); }
.admin-page-body button:focus-visible,
.admin-page-body a:focus-visible,
.admin-page-body input:focus-visible,
.admin-page-body select:focus-visible,
.rooms-body button:focus-visible,
.rooms-body a:focus-visible,
.rooms-body input:focus-visible,
.rooms-body select:focus-visible {
  outline: 3px solid rgba(53,106,230,.18);
  outline-offset: 2px;
}
.admin-page-body button.primary,
.rooms-body button.primary {
  background: linear-gradient(135deg, #0b8f86, #08756f);
  box-shadow: 0 8px 18px rgba(8,127,120,.18);
}
.admin-page-body button.primary:hover:not(:disabled),
.rooms-body button.primary:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(8,127,120,.26); }
.admin-page-body button.ghost,
.rooms-body button.ghost {
  border-color: var(--line);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(31,45,74,.03);
}
.admin-page-body button.danger,
.rooms-body button.danger {
  background: #c64740;
  box-shadow: 0 8px 18px rgba(198,71,64,.16);
}
.admin-page-body input:not([type="range"]):not([type="checkbox"]),
.admin-page-body select,
.rooms-body input:not([type="range"]):not([type="checkbox"]),
.rooms-body select {
  min-height: 42px;
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31,45,74,.03);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.admin-page-body input:not([type="range"]):not([type="checkbox"]):focus,
.admin-page-body select:focus,
.rooms-body input:not([type="range"]):not([type="checkbox"]):focus,
.rooms-body select:focus {
  border-color: rgba(8,127,120,.62);
  box-shadow: 0 0 0 4px rgba(8,127,120,.1);
  outline: 0;
}

.admin-shell {
  grid-template-rows: 72px 88px minmax(0,1fr);
  background: transparent;
}
.admin-header {
  position: relative;
  z-index: 10;
  gap: 24px;
  padding: 0 22px;
  border-bottom-color: rgba(203,213,225,.8);
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(31,45,74,.02);
  backdrop-filter: blur(18px);
}
.admin-brand {
  width: 218px;
  min-width: 218px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}
.admin-brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, #0b8f86 0%, #155e75 100%);
  box-shadow: 0 8px 18px rgba(8,127,120,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.admin-brand-mark i {
  height: 3px;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
}
.admin-brand-mark i:nth-child(2) { width: 72%; justify-self: end; opacity: .82; }
.admin-brand-mark i:nth-child(3) { width: 44%; justify-self: end; opacity: .65; }
.admin-brand-copy { min-width: 0; display: grid; gap: 2px; }
.admin-brand-copy strong { font-size: 16px; font-weight: 850; letter-spacing: -.025em; }
.admin-brand-copy small {
  max-width: 155px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-workspace-tabs {
  gap: 3px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(203,213,225,.52);
}
.admin-workspace-tab {
  min-width: 76px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 780;
}
.admin-workspace-tab:hover { color: var(--text); }
.admin-workspace-tab.active {
  color: #075f5a;
  box-shadow: 0 3px 10px rgba(31,45,74,.1);
}
.admin-header-actions > button {
  padding-inline: 16px;
  border-color: #cbd5e1;
  background: #fff;
}

.admin-toolbar {
  gap: 18px;
  padding: 12px 22px;
  border-bottom-color: rgba(203,213,225,.72);
  background: rgba(248,250,252,.82);
  backdrop-filter: blur(14px);
}
.header-left,
.header-right { gap: 9px; }
.header-left {
  min-width: 0;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
.header-right { justify-content: flex-end; }
.header-qr {
  width: 54px;
  height: 54px;
  padding: 3px;
  border-color: var(--line);
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(31,45,74,.08);
}
.system-mode {
  min-height: 30px;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #eef2f7;
  color: #566176;
  box-shadow: inset 0 0 0 1px rgba(203,213,225,.7);
}
.system-mode::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,.14);
}
.system-mode.connected {
  border: 0;
  background: #e8f8f1;
  color: #08735f;
  box-shadow: inset 0 0 0 1px #b9ead8;
}
.system-mode.connected::before {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14);
}
.admin-toolbar .header-button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  background: #fff;
  color: #354158;
  box-shadow: 0 2px 7px rgba(31,45,74,.05);
  font-size: 13px;
}
.admin-toolbar .excel-link {
  border-color: #b8dfca;
  background: #eaf8f0;
  color: #137344;
}
.admin-toolbar #addQuestion { padding-inline: 18px; }
.admin-toolbar .reset-all {
  border-color: #efc6c2;
  background: #fffafa;
}
.switch {
  width: 46px;
  height: 26px;
  min-height: 26px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 3px rgba(31,45,74,.13);
}
.switch i { width: 20px; height: 20px; box-shadow: 0 2px 5px rgba(31,45,74,.2); }
.switch.on i { transform: translateX(20px); }
.admin-toolbar .switch-line { color: #465167; font-size: 12px; white-space: nowrap; }

.admin-main { grid-template-columns: 250px minmax(0,1fr) 240px; background: transparent; }
.admin-shell.qna-admin-mode .admin-main { grid-template-columns: 250px minmax(0,1fr); }
.sidebar,
.device-sidebar {
  padding: 18px 14px;
  background: rgba(248,250,252,.82);
  backdrop-filter: blur(12px);
}
.sidebar { border-right-color: rgba(203,213,225,.72); }
.device-sidebar {
  padding-inline: 16px;
  border-left-color: rgba(203,213,225,.72);
}
.question-tab {
  position: relative;
  gap: 6px;
  margin-bottom: 7px;
  padding: 12px 12px 12px 15px;
  border-radius: 11px;
}
.question-tab:hover { background: rgba(255,255,255,.68); }
.question-tab.active {
  border-color: #d7e2ea;
  background: #fff;
  box-shadow: 0 7px 22px rgba(31,45,74,.08);
}
.question-tab.active::before,
.question-tab.running::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}
.question-tab.running { border-color: #b8e5db; background: #edf9f6; }
.question-tab span { color: #7a8598; font-size: 11px; letter-spacing: .02em; }
.tab-title-display { min-height: 30px; font-size: 13px; line-height: 1.45; }
.sidebar-screen-button {
  width: 100%;
  min-height: 30px;
  margin-top: 2px;
  padding: 5px 9px;
  border-color: #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.sidebar-screen-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-dark); background: #f0fdfa; }
.sidebar-screen-button.is-visible { border-color: #5eead4; background: #dff7f2; color: #0f766e; }
.sidebar-screen-button:disabled { cursor: default; opacity: .72; }
.editor {
  padding: 28px clamp(22px,3vw,46px) 48px;
  background: radial-gradient(circle at 50% -10%, rgba(53,106,230,.045), transparent 34rem);
}
.editor-grid {
  width: min(920px,100%);
  grid-template-columns: minmax(0,1fr);
  gap: 22px;
}
.panel {
  padding: 22px;
  border-color: rgba(210,219,231,.9);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.field-grid { gap: 17px; }
.choice-grid.dynamic-choice { gap: 11px; }
.actions {
  display: grid;
  grid-template-columns: auto auto minmax(120px,1fr);
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf1f6;
}
.voting-console { border-top: 4px solid #0f766e; }
.voting-console-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.voting-console-heading small { color:#64748b; font-size:12px; }
.voting-console-heading h2 { margin:5px 0 0; font-size:21px; line-height:1.45; overflow-wrap:anywhere; }
.voting-status { flex-shrink:0; padding:8px 12px; border-radius:8px; background:#edf7f4; color:#115e59; font-size:13px; font-weight:700; }
.voting-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.voting-control-group { min-width:0; }
.voting-control-group > strong { display:block; margin-bottom:10px; font-size:13px; color:#475569; }
.voting-control-group > small { display:block; margin-top:10px; color:#64748b; line-height:1.5; }
.voting-control-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.voting-control-buttons button { min-height:46px; flex:1 1 120px; padding:12px 16px; line-height:1.4; }
.voting-control-buttons button:focus-visible { outline:3px solid #14b8a6; outline-offset:3px; }
.voting-operation-hint { margin:18px 0 0; padding:12px 14px; border-radius:8px; background:#f1f5f9; color:#475569; font-size:13px; line-height:1.7; }
.voting-other-warning { margin:12px 0 0; color:#9a3412; font-size:13px; }
.voting-edit-heading { margin:0; font-size:16px; }
.voting-edit-footer { display:flex; justify-content:flex-end; padding-top:14px; border-top:1px solid #e2e8f0; }
.voting-maintenance { border-top:1px solid #e2e8f0; padding-top:16px; }
.voting-maintenance summary { cursor:pointer; color:#64748b; font-size:13px; padding:6px 0; }
.voting-maintenance p { color:#64748b; font-size:13px; line-height:1.6; }
@media(max-width:1100px) {
  .voting-control-grid { grid-template-columns:1fr; }
  .voting-console-heading { flex-direction:column; }
}
.action-group { display: flex; flex-wrap: wrap; gap: 8px; }
.action-group-tools {
  padding-left: 12px;
  border-left: 1px solid #e3e8ef;
}
.action-group-danger { justify-content: flex-end; }
.action-group-danger .danger {
  border: 1px solid #efc6c2;
  background: #fff7f6;
  color: #b43b35;
  box-shadow: none;
}
.action-group-danger .danger:hover { background: #c64740; color: #fff; }
.links {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: 9px;
  background: #f6f8fb;
}
.empty {
  min-height: 340px;
  height: auto;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  font-weight: 650;
}
.device-sidebar-heading { padding: 2px 3px 14px; color: #354158; }
.device-sidebar-heading span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8edf4;
  color: #566176;
  font-size: 11px;
}
.device-power-actions { gap: 8px; margin-bottom: 15px; }
.device-status-list { gap: 7px; }
.device-status-row {
  min-height: 38px;
  border-color: var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 7px rgba(31,45,74,.035);
}
.device-status-empty {
  padding: 24px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 11px;
  background: rgba(255,255,255,.45);
}

.participant-screen-dialog {
  width: min(980px,calc(100% - 32px));
  border: 0;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15,23,42,.24);
}
.participant-screen-dialog::backdrop {
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}
.participant-screen-form { gap: 22px; padding: 26px; }
.participant-screen-heading h2 { font-size: 23px; letter-spacing: -.025em; }
.participant-logo-settings { gap: 14px; }
.participant-logo-setting,
.participant-background-setting {
  gap: 12px;
  padding: 16px;
  border-color: var(--line);
  border-radius: 14px;
  background: #f8fafc;
}
.participant-logo-preview { border-radius: 11px; }
.participant-background-setting {
  grid-template-columns: minmax(210px,260px) minmax(0,1fr);
  grid-template-areas:
    "title title"
    "preview actions"
    "preview options";
  align-items: start;
  column-gap: 20px;
}
.participant-background-setting > strong { grid-area: title; }
.participant-background-setting .participant-background-preview {
  grid-area: preview;
  width: min(100%,240px);
  min-height: 0;
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(31,45,74,.12), inset 0 0 0 5px rgba(255,255,255,.58);
}
.participant-background-setting .participant-logo-actions {
  grid-area: actions;
  align-self: end;
}
.participant-background-setting .participant-background-options {
  grid-area: options;
  grid-template-columns: 1fr;
  align-self: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.participant-background-preview-card {
  max-width: calc(100% - 34px);
  padding: 18px 14px;
  text-align: center;
}
.participant-screen-footer {
  position: sticky;
  bottom: 0;
  margin: 0 -26px -26px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}

.rooms-shell { grid-template-rows: auto minmax(0,1fr); }
.rooms-header {
  min-height: 104px;
  padding: 20px 28px;
  border-bottom-color: rgba(203,213,225,.76);
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(31,45,74,.02);
  backdrop-filter: blur(18px);
}
.product-heading { gap: 12px; }
.rooms-brand-copy { display: grid; gap: 2px; }
.rooms-brand-copy h1 { font-size: 19px; font-weight: 850; letter-spacing: -.03em; }
.rooms-brand-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.deleted-rooms-link {
  min-height: 36px !important;
  margin-left: 8px;
  border-radius: 999px !important;
  color: #566176;
}
.create-room-form {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: inset 0 1px 2px rgba(31,45,74,.03);
}
.create-room-form > input { min-width: 220px; }
.room-create-check {
  min-height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
}
.room-create-check:hover { background: #eef3f7; }
.rooms-main { padding: 34px 28px; }
.rooms-list-heading { margin-bottom: 14px; }
.rooms-list-heading h2 { font-size: 22px; letter-spacing: -.025em; }
.rooms-list-heading span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #e8edf4;
  font-size: 12px;
}
.rooms-table-head { padding-inline: 18px; }
.rooms-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.room-row {
  min-height: 82px;
  padding: 15px 18px;
  border-bottom-color: #edf1f6;
}
.room-row:last-child { border-bottom: 0; }
.room-row:hover { background: #f8fbfd; }
.room-name-input { font-size: 14px; }
.room-id {
  color: #64748b;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}
.room-domain-cell > a { color: #08756f; }
.feedback-card {
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(31,45,74,.045);
}

@media (max-width: 1180px) {
  .admin-brand { width: auto; min-width: auto; }
  .admin-brand-copy small { display: none; }
  .admin-toolbar { overflow-x: auto; }
  .header-left,
  .header-right { flex: 0 0 auto; }
  .admin-main { grid-template-columns: 220px minmax(0,1fr) 210px; }
}

@media (max-width: 1360px) and (min-width: 801px) {
  .admin-shell { grid-template-rows: 72px auto minmax(0,1fr); }
  .admin-toolbar {
    grid-template-columns: minmax(0,1fr);
    align-content: center;
    gap: 8px;
    min-height: 124px;
  }
  .header-left {
    padding-right: 0;
    border-right: 0;
  }
  .header-right { justify-content: flex-start; }
}

@media (max-width: 800px) {
  .admin-shell { grid-template-rows: auto auto minmax(0,1fr); }
  .admin-header { gap: 12px; padding: 12px; }
  .admin-brand { width: 100%; }
  .admin-brand-copy small { display: block; }
  .admin-toolbar { overflow: visible; padding: 12px; }
  .header-left { padding-right: 0; border-right: 0; }
  .editor { padding: 18px 14px 32px; }
  .panel { padding: 17px; border-radius: 14px; }
  .sidebar,
  .device-sidebar { padding: 12px; }
  .admin-main,
  .admin-shell.qna-admin-mode .admin-main { grid-template-columns: 1fr; }
  .participant-screen-form { padding: 18px; }
  .participant-screen-footer { margin: 0 -18px -18px; padding: 14px 18px; }
  .participant-background-setting {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "preview" "actions" "options";
  }
  .rooms-header { padding: 18px; }
  .product-heading { flex-wrap: wrap; }
  .create-room-form { padding: 12px; }
  .rooms-main { padding: 22px 16px; }
  .actions { grid-template-columns: 1fr; }
  .action-group-tools {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid #e3e8ef;
    border-left: 0;
  }
  .action-group-danger { justify-content: flex-start; }
}

/* Client-first administration flow */
.clients-shell { min-height: 100vh; }
.clients-header {
  align-items: flex-end;
  gap: 24px;
  padding-block: 22px;
  background:
    radial-gradient(circle at 10% 20%, rgba(20, 184, 166, .13), transparent 30%),
    linear-gradient(135deg, #fff 0%, #f8fbfc 100%);
}
.create-client-form {
  display: grid;
  grid-template-columns: minmax(260px, 390px) auto;
  align-items: end;
  gap: 10px;
}
.create-client-form label { display: grid; gap: 7px; color: #4b6470; font-size: 12px; font-weight: 850; }
.create-client-form input { min-height: 46px; border: 1px solid #cedbe1; border-radius: 12px; background: #fff; font-size: 14px; }
.create-client-form button { min-height: 46px; }
.clients-main { width: min(1480px, 100%); margin: 0 auto; padding: 40px 28px 64px; }
.clients-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.clients-intro h2 { margin: 4px 0 8px; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.045em; }
.clients-intro p:not(.eyebrow) { max-width: 720px; margin: 0; color: #647984; line-height: 1.65; }
.clients-intro > strong { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; background: #e4f5f2; color: #08746d; font-size: 13px; }
.eyebrow { margin: 0; color: #07857d; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.client-card {
  position: relative;
  display: grid;
  gap: 20px;
  min-height: 320px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #dce7eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(36, 69, 78, .07);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.client-card::after { content: ""; position: absolute; inset: auto -50px -70px auto; width: 170px; height: 170px; border-radius: 50%; background: rgba(16, 148, 137, .05); pointer-events: none; }
.client-card:hover { transform: translateY(-3px); border-color: #b9d9d5; box-shadow: 0 18px 42px rgba(36, 69, 78, .11); }
.client-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client-avatar { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #0b8b83, #1fb2a5); color: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 8px 20px rgba(11, 139, 131, .22); }
.client-sync { padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 850; }
.client-sync.connected { background: #e3f6ed; color: #147750; }
.client-sync.pending { background: #fff4d7; color: #8a6010; }
.client-sync.not-configured { background: #edf1f4; color: #60717a; }
.client-card-copy h3 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.035em; }
.client-card-copy code { color: #7b8d95; font-size: 11px; }
.client-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.client-metrics div { padding: 12px 10px; border-radius: 13px; background: #f4f8f9; }
.client-metrics dt { color: #74868e; font-size: 10px; font-weight: 800; }
.client-metrics dd { margin: 5px 0 0; color: #1b343d; font-size: 20px; font-weight: 900; }
.client-card-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.client-card-actions .primary-link { display: grid; place-items: center; }
.client-card-actions .compact { grid-column: 1 / -1; }
.client-link-note { position: relative; z-index: 1; margin: -10px 0 0; color: #829198; font-size: 10px; line-height: 1.5; }
.clients-empty { grid-column: 1 / -1; display: grid; gap: 7px; padding: 70px 24px; border: 1px dashed #c7d7dc; border-radius: 20px; background: rgba(255, 255, 255, .68); color: #536a74; text-align: center; }
.clients-empty small { color: #819198; }
.client-toast { position: fixed; z-index: 1000; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 12px; background: #163b3a; color: #fff; font-size: 13px; font-weight: 750; box-shadow: 0 14px 34px rgba(10, 30, 35, .25); }
.client-toast.danger { background: #8b2f33; }
.client-rooms-header { align-items: flex-end; }
.back-to-clients { margin-right: 4px; }
.client-room-create { grid-template-columns: minmax(220px, 340px) repeat(4, auto) auto; }
.client-room-guide { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; padding: 18px 20px; border: 1px solid #cfe5e1; border-radius: 16px; background: linear-gradient(120deg, #effaf7, #f8fcfb); }
.client-room-guide div { display: grid; gap: 4px; }
.client-room-guide span { color: #0c8178; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.client-room-guide strong { color: #24474b; font-size: 14px; }
.client-room-guide .client-room-guide-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.danger-outline { border-color: #efc5c5 !important; color: #a13b3b !important; }
.danger-outline:hover { border-color: #d99a9a !important; background: #fff4f4 !important; }
.client-room-table-head,
.client-room-row { grid-template-columns: minmax(250px, 1.3fr) minmax(260px, 1fr) minmax(230px, .9fr) minmax(230px, .9fr); }
.client-room-row { min-height: 122px; align-items: center; }
.room-primary { min-width: 0; display: grid; gap: 9px; }
.room-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #788a92; font-size: 11px; }
.room-meta code { padding: 3px 6px; border-radius: 5px; background: #eef3f5; color: #53676f; }
.room-feature-toggles { display: grid; gap: 7px; }
.room-feature-toggle {
  display: grid;
  grid-template-columns: 34px auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: #60737b;
  cursor: pointer;
}
.room-feature-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.room-feature-toggle > span {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #cbd5d9;
  transition: background .16s ease;
}
.room-feature-toggle > span i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24, 48, 55, .24);
  transition: transform .16s ease;
}
.room-feature-toggle > input:checked + span { background: #0d8b80; }
.room-feature-toggle > input:checked + span i { transform: translateX(15px); }
.room-feature-toggle > input:focus-visible + span { outline: 3px solid rgba(13, 139, 128, .2); outline-offset: 2px; }
.room-feature-toggle > input:disabled + span { opacity: .55; }
.room-feature-toggle b { color: #334f56; font-size: 11px; }
.room-feature-toggle small { justify-self: end; color: #91a0a5; font-size: 9px; font-weight: 800; }
.room-feature-toggle.enabled small { color: #0b786f; }
.room-registration-state { display: grid; gap: 8px; }
.room-registration-state > strong { color: #7c8d94; font-size: 12px; }
.room-registration-state > strong.used { color: #0b786f; }
.room-registration-state > strong.paused { color: #a76418; }
.room-registration-state small { color: #89979d; font-size: 10px; line-height: 1.45; }
.registration-system-toggle {
  display: grid;
  grid-template-columns: 34px auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  cursor: pointer;
}
.registration-system-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.registration-system-toggle > span {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #cbd5d9;
  transition: background .16s ease;
}
.registration-system-toggle > span i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24, 48, 55, .24);
  transition: transform .16s ease;
}
.registration-system-toggle > input:checked + span { background: #0d8b80; }
.registration-system-toggle > input:checked + span i { transform: translateX(15px); }
.registration-system-toggle > input:focus-visible + span {
  outline: 3px solid rgba(13, 139, 128, .2);
  outline-offset: 2px;
}
.registration-system-toggle > input:disabled + span { opacity: .55; }
.registration-system-toggle b { color: #334f56; font-size: 11px; }
.registration-system-toggle small {
  justify-self: end;
  color: #91a0a5;
  font-size: 9px;
  font-weight: 800;
}
.registration-system-toggle.enabled small { color: #0b786f; }
.registration-paused-note {
  padding: 8px 9px;
  border-radius: 8px;
  background: #fff5e6;
  color: #95601e !important;
}
.qr-policy-toggle { display: flex; align-items: center; gap: 8px; color: #334e55; font-size: 12px; font-weight: 800; }
.qr-policy-toggle input { width: 18px; height: 18px; margin: 0; accent-color: #0c8b82; }
.room-registration-state select { min-height: 34px; padding: 6px 30px 6px 9px; font-size: 11px; }
.client-room-actions { flex-wrap: wrap; }
.header-button.registration-link.prominent {
  background: linear-gradient(135deg, #0b8b80, #08756d);
  color: #fff;
  box-shadow: 0 7px 16px rgba(11, 139, 128, .22);
}
.registration-unused-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f1f3f4;
  color: #7c8b91;
  font-size: 10px;
  font-weight: 850;
}
.sms-session-note {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #cce5df;
  border-radius: 10px;
  background: #f1faf7;
}
.sms-session-note strong { color: #176f62; font-size: 12px; }
.sms-session-note small { color: #667d78; font-size: 10px; line-height: 1.5; }
.admin-shell.qr-admin-mode { grid-template-rows: 72px minmax(0, 1fr); }
.admin-shell.qr-admin-mode .admin-main { grid-template-columns: 250px minmax(0, 1fr); }
.admin-shell.qr-admin-mode .device-sidebar { display: none; }
.admin-shell.qr-admin-mode .admin-toolbar { display: none; }
.qr-admin-content { display: grid; gap: 20px; width: min(980px, 100%); margin: 0 auto; }
.qr-live-badge { padding: 7px 10px; border-radius: 999px; background: #dff6ec; color: #11744e; font-size: 11px; font-weight: 900; }
.qr-live-badge.off { background: #edf1f3; color: #65777f; }
.qr-admin-panel { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap: 28px; align-items: center; }
.qr-admin-preview { display: grid; min-height: 330px; place-items: center; gap: 12px; padding: 24px; border: 1px solid #dbe7e8; border-radius: 18px; background: linear-gradient(145deg, #f1f8f7, #fff); text-align: center; }
.qr-admin-preview img { width: min(240px, 80%); border-radius: 12px; box-shadow: 0 10px 30px rgba(31, 70, 71, .12); }
.qr-admin-preview small { color: #6d8188; font-weight: 800; }
.qr-individual-placeholder { display: grid; gap: 10px; max-width: 280px; }
.qr-individual-placeholder::before { content: "QR"; display: grid; width: 110px; height: 110px; margin: 0 auto 8px; place-items: center; border: 2px dashed #8fc4bd; border-radius: 22px; color: #13877d; font-size: 30px; font-weight: 950; }
.qr-individual-placeholder strong { font-size: 21px; }
.qr-individual-placeholder span { color: #6f8188; font-size: 12px; line-height: 1.65; }
.qr-individual-placeholder button { margin-top: 8px; }
.hall-entry-summary { display: grid; width: min(360px, 100%); gap: 16px; }
.hall-entry-summary > span { color: #577078; font-size: 12px; font-weight: 850; }
.hall-entry-summary > strong { color: #153d40; font-size: 52px; letter-spacing: -.05em; }
.hall-entry-summary > strong small { color: #74878e; font-size: 17px; }
.hall-entry-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hall-entry-summary > div span { display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: #fff; color: #71848a; font-size: 10px; font-weight: 800; }
.hall-entry-summary > div b { color: #244e51; font-size: 20px; }
.hall-entry-summary > small { color: #7b8d93; font-size: 10px; line-height: 1.55; }
.qr-admin-settings { display: grid; gap: 16px; }
.qr-setting-status { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 13px; background: #eff8f5; }
.qr-setting-status span { color: #60767c; font-size: 12px; font-weight: 800; }
.qr-setting-status strong { color: #11744e; }
.qr-admin-settings label { display: grid; gap: 7px; color: #4d626a; font-size: 12px; font-weight: 850; }
.qr-admin-settings select { min-height: 44px; }
.qr-admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qr-disabled-note { grid-column: 1 / -1; padding: 11px 13px; border-radius: 10px; background: #f1f4f5; color: #6e8188; font-size: 11px; font-weight: 750; text-align: center; }
.qr-admin-settings > a { display: grid; min-height: 42px; place-items: center; }
.qr-admin-settings > p { margin: 0; color: #7b8d94; font-size: 11px; line-height: 1.6; }
.qr-sidebar-meta { padding: 8px 10px; border-radius: 9px; background: #f0f5f6; color: #5b727a; font-size: 11px; font-weight: 800; }

@media (max-width: 1100px) {
  .clients-header { align-items: stretch; }
  .create-client-form { grid-template-columns: 1fr auto; width: 100%; }
  .client-room-create { grid-template-columns: minmax(220px, 1fr) repeat(4, auto) auto; width: 100%; }
  .client-room-table-head { display: none; }
  .client-room-list { display: grid; gap: 12px; border: 0; }
  .client-room-row { grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid #dbe5e9; border-radius: 16px; }
  .client-room-actions { justify-content: flex-start; }
  .admin-shell.qr-admin-mode .admin-main { grid-template-columns: 220px minmax(0, 1fr); }
  .qr-admin-panel { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .clients-header { padding: 18px; }
  .create-client-form { grid-template-columns: 1fr; }
  .clients-main { padding: 28px 16px 50px; }
  .clients-intro { align-items: flex-start; flex-direction: column; }
  .clients-grid { grid-template-columns: 1fr; }
  .client-card { min-height: 0; }
  .client-room-create { grid-template-columns: 1fr 1fr; }
  .client-room-create > input,
  .client-room-create > button { grid-column: 1 / -1; }
  .client-room-guide { align-items: stretch; flex-direction: column; }
  .client-room-guide .client-room-guide-actions { align-items: stretch; flex-direction: column; }
  .client-room-row { grid-template-columns: 1fr; }
  .room-primary,
  .room-feature-toggles,
  .room-registration-state,
  .client-room-actions { grid-column: 1 / -1; }
  .admin-shell.qr-admin-mode .admin-main { grid-template-columns: 1fr; }
  .qr-admin-panel { padding: 15px; }
  .qr-admin-actions { grid-template-columns: 1fr; }
}

/* voting overlay countdown: stable DOM, no card re-entry animation on result updates */
.overlay-countdown {
  position: absolute;
  inset: clamp(38px, 4vw, 52px) 0 0;
  z-index: 8;
  display: none;
  place-items: center;
  pointer-events: none;
}
.overlay-countdown.show { display: grid; }
.overlay-countdown strong {
  display: grid;
  place-items: center;
  min-width: 1.35em;
  min-height: 1.35em;
  padding: .15em .22em;
  border-radius: 999px;
  color: white;
  background: rgba(11,18,32,.7);
  box-shadow: 0 12px 42px rgba(0,0,0,.28);
  font: 900 clamp(90px, 28vh, 250px)/1 Arial, sans-serif;
  text-shadow: 0 7px 28px rgba(0,0,0,.42);
}


/* PowerPoint add-in health is visible only on authenticated live-operation pages. */
.addin-status {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 176px;
  max-width: 230px;
  padding: 7px 10px;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 45, 74, .05);
}
.addin-status[hidden] { display: none; }
.addin-status > i { width: 9px; height: 9px; border-radius: 50%; background: #98a2b3; box-shadow: 0 0 0 3px rgba(152, 162, 179, .13); }
.addin-status-copy { display: grid; min-width: 0; gap: 1px; }
.addin-status-copy strong,
.addin-status-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.addin-status-copy strong { color: #344054; font-size: 11px; line-height: 1.35; }
.addin-status-copy small { color: #667085; font-size: 9px; line-height: 1.35; }
.addin-status.is-connected { border-color: #a6dfc5; background: #f1fbf6; }
.addin-status.is-connected > i { background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .14); }
.addin-status.is-reconnecting { border-color: #f4cf8d; background: #fff9ed; }
.addin-status.is-reconnecting > i { background: #f79009; box-shadow: 0 0 0 3px rgba(247, 144, 9, .14); }
.addin-status.is-offline { border-color: #efc1bc; background: #fff6f5; }
.addin-status.is-offline > i { background: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.addin-status.is-stopped,
.addin-status.is-unknown,
.addin-status.is-unavailable,
.addin-status.is-loading { border-color: #d7dee8; background: #f8fafc; }
.addin-status.is-reconnecting > i,
.addin-status.is-loading > i { animation: addin-status-pulse 1.5s ease-in-out infinite; }
@keyframes addin-status-pulse { 50% { opacity: .42; } }
@media (max-width: 800px) {
  .addin-status { min-width: min(210px, 100%); max-width: 100%; }
}
.voting-edit-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.voting-edit-toolbar .voting-edit-heading { margin: 0; }
.voting-edit-toolbar > .voting-control-buttons { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; }
.voting-edit-toolbar > .voting-control-buttons > button { flex: 0 0 auto; width: auto; min-width: 0; min-height: 23px; padding: 4px 6px; font-size: 11px; line-height: 1.2; border-radius: 6px; white-space: nowrap; }
.sidebar-add-question { width: 100%; margin-bottom: 12px; flex-shrink: 0; }