.admin-shell { width: min(100%, 1440px); margin: 0 auto; padding: 0 44px 50px; }
.admin-topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(23,42,58,.1); }
.admin-topbar-actions { display: flex; align-items: center; gap: 14px; }
.admin-logout-button { height: 34px; padding: 0 13px; border: 1px solid #f0c998; border-radius: 8px; background: #fff8ed; color: #bd681a; cursor: pointer; font-size: 12px; font-weight: 700; }
.admin-logout-button:hover { background: #fff0d8; border-color: #e7ae70; }
.admin-identity { color: #7e8f8b; font-size: 13px; }
.admin-login-card { width: min(100%, 470px); margin: 105px auto 0; padding: 42px; border: 1px solid rgba(23,42,58,.055); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(27,49,57,.035); text-align: center; }
.admin-login-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 18px; border-radius: 14px; background: #e8f6ed; color: #4e956d; font-size: 30px; }
.admin-login-card h1 { margin: 12px 0 10px; font-size: 30px; }
.admin-login-card > p:not(.section-label):not(.admin-error) { margin: 0 auto 25px; color: #82908c; font-size: 14px; line-height: 1.8; }
.admin-login-form { display: grid; gap: 14px; text-align: left; }
.admin-login-form .admin-primary-button { margin-top: 5px; }
.admin-primary-button, .admin-secondary-button { border-radius: 9px; cursor: pointer; font-weight: 600; }
.admin-primary-button { width: 100%; padding: 14px 18px; border: 0; background: var(--ink); color: #fff; font-size: 14px; }
.admin-primary-button:hover { background: #27465a; }
.admin-primary-button:disabled, .admin-secondary-button:disabled { cursor: wait; opacity: .6; }
.admin-error { color: #bd6f52; font-size: 13px; font-weight: 600; line-height: 1.6; }
.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 65px 0 38px; }
.admin-heading h1 { margin-bottom: 9px; }
.admin-heading p:not(.eyebrow) { margin: 0; color: #80908d; font-size: 15px; }
.back-link { padding-bottom: 5px; color: #4e956d; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.back-link:hover { text-decoration: underline; }
.admin-grid { display: grid; grid-template-columns: minmax(390px, .78fr) minmax(0, 1.42fr); gap: 20px; align-items: start; }
.admin-card { min-width: 0; padding: 30px; border: 1px solid rgba(23,42,58,.055); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(27,49,57,.035); }
.admin-card-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.admin-card-heading h2 { font-size: 22px; }
.setting-state, .record-total { color: #318b61; font-size: 14px; white-space: nowrap; }
.admin-form { margin-top: 27px; }
.admin-field-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.admin-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #7e8f8b; font-size: 13px; }
.admin-field input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #e0e8e3; border-radius: 8px; outline: none; background: #fbfcfa; color: var(--ink); font: 400 14px 'Noto Sans TC', sans-serif; }
.admin-field input:focus { border-color: #8cc4a0; background: #fff; box-shadow: 0 0 0 3px #eaf7ee; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #eef2ef; }
.date-editor-heading { margin-top: 0; padding-top: 0; border-top: 0; }
.inline-add-button { border: 0; background: transparent; color: #4e956d; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.inline-add-button:hover { text-decoration: underline; }
.editor-note { display: block; margin-top: 7px; color: #9aa8a4; font-size: 12px; }
#schedulesEditor { display: grid; gap: 10px; margin-top: 16px; }
.editor-heading > div { min-width: 0; }
.editor-subtitle { display: block; margin-top: 5px; color: #9aa8a4; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.schedule-row { display: grid; grid-template-columns: 28px minmax(150px, 1.35fr) minmax(100px, .8fr) minmax(100px, .8fr) auto; gap: 9px; align-items: end; padding: 14px 12px; border: 1px solid #edf2ee; border-radius: 11px; background: #fbfcfa; }
.schedule-number { align-self: center; color: var(--orange); font: 600 12px 'DM Mono', monospace; }
.schedule-row .admin-field { gap: 5px; font-size: 11px; }
.schedule-row .admin-field input { height: 38px; font-size: 13px; }
.allowed-date-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; margin-top: 15px; padding: 13px; border: 1px solid #edf2ee; border-radius: 10px; background: #fbfcfa; }
.time-window { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: end; padding: 13px; border: 1px solid #edf2ee; border-radius: 10px; background: #fbfcfa; }
.remove-item-button { height: 38px; padding: 0 10px; border: 1px solid #e7d8d1; border-radius: 7px; background: #fff; color: #bd6f52; cursor: pointer; font-size: 12px; white-space: nowrap; }
.remove-item-button:hover { background: #fff7f2; }
.question-editor-heading { margin-top: 28px; }
.question-editor { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid #edf2ee; border-radius: 11px; background: #fbfcfa; }
.question-editor-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.question-editor-title strong { color: #526965; font-size: 14px; }
.question-editor .admin-field { font-size: 12px; }
.question-editor .admin-field input { height: 38px; font-size: 13px; }
.options-editor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; color: #7e8f8b; font-size: 12px; }
.options-editor > span { grid-column: 1 / -1; }
.options-editor input { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #e0e8e3; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font: 400 13px 'Noto Sans TC', sans-serif; }
.options-editor input:focus { border-color: #8cc4a0; box-shadow: 0 0 0 3px #eaf7ee; }
.suggestion-field-editor { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid #edf2ee; border-radius: 11px; background: #fbfcfa; }
.suggestion-field-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.suggestion-field-title strong { color: #526965; font-size: 14px; }
.suggestion-field-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestion-field-editor .admin-field { font-size: 12px; }
.suggestion-field-editor .admin-field input { height: 38px; font-size: 13px; }
.suggestion-toggle { display: inline-flex; align-items: center; gap: 7px; color: #7e8f8b; cursor: pointer; font-size: 12px; white-space: nowrap; }
.suggestion-enabled-input { width: 15px; height: 15px; margin: 0; accent-color: #246e9f; }
.admin-form > .admin-primary-button { margin-top: 23px; }
.admin-form-status { min-height: 20px; margin: 11px 0 0; color: #4e956d; font-size: 12px; line-height: 1.6; }
.records-card { overflow: hidden; }
.record-filter { display: grid; grid-template-columns: 150px minmax(160px, 1fr) 74px 110px; gap: 9px; align-items: end; margin-top: 25px; }
.admin-secondary-button { height: 42px; border: 1px solid #a9d6b6; background: #eaf7ee; color: #3e835b; font-size: 13px; }
.admin-secondary-button:hover { background: #d9f2e3; }
.admin-export-button { height: 42px; border: 1px solid #d6b78e; border-radius: 9px; background: #fff8ed; color: #9a6b32; cursor: pointer; font-size: 13px; font-weight: 600; }
.admin-export-button:hover { background: #fff0d8; }
.admin-export-button:disabled { cursor: wait; opacity: .6; }
.admin-table-wrap { max-height: 520px; margin-top: 20px; overflow: auto; border: 1px solid #edf2ee; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 1; padding: 12px 11px; background: #f4f8f4; color: #6e837a; text-align: left; font-size: 11px; font-weight: 700; }
td { max-width: 220px; padding: 12px 11px; border-top: 1px solid #eef2ef; color: #526965; overflow: hidden; text-overflow: ellipsis; }
td:first-child { color: #7e9189; font-family: 'DM Mono', monospace; }
.table-empty { width: 100%; padding: 35px; color: #9aa8a4; text-align: center; }
@media (max-width: 980px) { .admin-shell { padding: 0 22px 40px; } .admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .admin-topbar { height: 76px; } .admin-identity { font-size: 11px; } .admin-login-card { margin-top: 65px; padding: 30px 24px; } .admin-heading { align-items: flex-start; flex-direction: column; padding: 48px 0 30px; } .admin-heading p:not(.eyebrow) { font-size: 14px; } .admin-card { padding: 24px 20px; } .admin-field-row, .record-filter { grid-template-columns: 1fr; } .record-filter .admin-secondary-button, .record-filter .admin-export-button { width: 100%; } .schedule-row { grid-template-columns: 24px 1fr 1fr; } .schedule-row .schedule-date { grid-column: 2 / -1; } .schedule-row .remove-item-button { grid-column: 2 / -1; width: 100%; } .allowed-date-row { grid-template-columns: 1fr; } .allowed-date-row .remove-item-button { width: 100%; } .time-window { grid-template-columns: 1fr 1fr; } .time-window .remove-item-button { grid-column: 1 / -1; } .options-editor { grid-template-columns: 1fr 1fr; } .suggestion-field-inputs { grid-template-columns: 1fr; } .suggestion-field-title { align-items: flex-start; flex-direction: column; } .suggestion-toggle { align-self: flex-start; } }

/* Refined admin layout */
.admin-shell { width: min(100%, 1440px); padding: 0 58px 60px; }
.admin-topbar { height: 84px; border-bottom-color: rgba(23, 59, 99, .12); }
.admin-login-card, .admin-card { border-color: rgba(23, 59, 99, .08); border-radius: 20px; box-shadow: 0 18px 55px rgba(35, 67, 96, .08); }
.admin-login-card { position: relative; overflow: hidden; margin-top: 90px; padding: 44px; }
.admin-login-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: var(--orange); content: ''; }
.admin-login-icon { background: #fff1df; color: var(--orange-dark); }
.admin-login-card h1, .admin-heading h1 { color: var(--blue-dark); }
.admin-heading { padding: 60px 0 34px; }
.admin-heading p:not(.eyebrow) { color: #71879b; }
.admin-grid { grid-template-columns: minmax(430px, .94fr) minmax(0, 1.3fr); gap: 24px; }
.admin-card { padding: 30px; }
.admin-card-heading { align-items: center; }
.admin-card-heading h2 { color: var(--blue-dark); }
.records-retention-note { display: block; margin-top: 6px; color: #71879b; font-size: 12px; font-weight: 400; }
.setting-state, .record-total { color: #246e9f; }
.editor-heading { border-top-color: #e6eef5; }
.inline-add-button { color: #246e9f; }
.inline-add-button:hover { color: var(--orange-dark); }
.schedule-row, .question-editor, .suggestion-field-editor { border-color: #dfeaf3; background: #fbfdff; }
.schedule-row { box-shadow: 0 5px 14px rgba(35, 67, 96, .04); }
.schedule-number { color: var(--orange); }
.remove-item-button { border-color: #f0c998; color: var(--orange-dark); }
.remove-item-button:hover { background: #fff5e9; }
.admin-primary-button { background: var(--orange); box-shadow: 0 8px 18px rgba(239, 135, 36, .18); }
.admin-primary-button:hover { background: var(--orange-dark); }
.admin-secondary-button { border-color: #afd0e7; background: #eaf3fa; color: #246e9f; }
.admin-export-button { border-color: #f0c998; background: #fff8ed; color: #bd681a; }
.admin-table-wrap { border-color: #dfeaf3; }
th { background: #edf5fb; color: #527692; }
td { border-top-color: #e6eef5; color: #3d6383; }
.admin-form-status { color: #246e9f; }

@media (max-width: 980px) {
  .admin-shell { padding: 0 28px 48px; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .admin-shell { padding: 0 16px 36px; }
  .admin-login-card { margin-top: 56px; padding: 32px 22px; }
  .admin-heading { padding: 46px 0 28px; }
  .admin-card { padding: 24px 18px; }
}

/* Full-width workspace and clearer records table */
.admin-shell { width: 100%; max-width: none; padding: 0 clamp(18px, 4vw, 64px) 64px; }
.admin-topbar, .admin-heading, .admin-grid { width: min(100%, 1540px); margin-left: auto; margin-right: auto; }
.admin-grid { display: block; }
.admin-grid > .admin-card { width: 100%; }
.admin-grid > .admin-card + .admin-card { margin-top: 24px; }
.admin-card { padding: clamp(24px, 3vw, 36px); }
.admin-card-heading { padding-bottom: 2px; }
.records-card { overflow: visible; }
.record-filter { grid-template-columns: 180px minmax(240px, 1fr) 90px 128px; gap: 12px; margin-top: 26px; }
.admin-table-wrap { max-height: 600px; margin-top: 24px; border-radius: 14px; background: #fff; box-shadow: inset 0 1px 0 rgba(23, 59, 99, .03); }
.record-version-group + .record-version-group { margin-top: 18px; }
.record-version-label {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #d8e6f0;
  background: #fff;
  color: #527692;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.has-version-groups .record-version-group table thead th { top: 38px; }
table { min-width: 1050px; font-size: 13px; }
thead th { height: 46px; padding: 13px 14px; border-bottom: 1px solid #d8e6f0; letter-spacing: .02em; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #fffaf3; }
td { max-width: 260px; padding: 14px; vertical-align: top; line-height: 1.55; }
td:first-child { width: 88px; font-size: 12px; }
td:nth-child(2) { min-width: 100px; color: #234f72; font-weight: 700; }
td.ip-cell { min-width: 120px; color: #6b849a; font: 12px/1.55 'DM Mono', monospace; letter-spacing: .01em; }
td:last-child { min-width: 220px; white-space: normal; }
.record-total { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; background: #eaf3fa; font-size: 13px; }
#recordsStatus { margin-top: 14px; }

@media (max-width: 720px) {
  .admin-shell { padding: 0 14px 40px; }
  .admin-topbar { width: 100%; }
  .admin-heading { width: 100%; }
  .record-filter { grid-template-columns: 1fr 1fr; }
  .record-filter .record-search-field { grid-column: 1 / -1; }
  .record-filter .admin-secondary-button, .record-filter .admin-export-button { width: 100%; }
  .admin-table-wrap { margin-left: -4px; margin-right: -4px; border-radius: 11px; }
}

/* Keep the two main tasks one click apart instead of stacking them. */
.admin-heading { align-items: center; padding: 28px 0 20px; }
.admin-heading h1 { margin: 0; font-size: clamp(25px, 3vw, 32px); }
.admin-tabs { display: flex; width: min(100%, 1540px); gap: 6px; margin: 0 auto 18px; border-bottom: 1px solid #dce8f2; }
.admin-tab { position: relative; padding: 12px 20px 14px; border: 0; background: transparent; color: #71879b; cursor: pointer; font-size: 14px; font-weight: 700; }
.admin-tab:hover { color: #246e9f; }
.admin-tab[aria-selected="true"] { color: var(--blue-dark); }
.admin-tab[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); content: ''; }
.admin-tab:focus-visible { outline: 2px solid #7fb4dc; outline-offset: -3px; }
.admin-grid > .admin-card + .admin-card { margin-top: 0; }
.admin-card[hidden] { display: none; }
.admin-table-wrap { max-height: clamp(280px, calc(100dvh - 390px), 600px); }
.admin-form > .admin-primary-button { width: auto; min-width: 160px; }

@media (min-width: 1200px) {
  #schedulesEditor, #questionsEditor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #suggestionFieldsEditor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
  .question-editor, .suggestion-field-editor { margin-top: 0; }
  .suggestion-field-inputs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .admin-heading { align-items: center; flex-direction: row; gap: 10px; padding: 22px 0 12px; }
  .admin-heading h1 { font-size: 23px; }
  .back-link { font-size: 11px; }
  .admin-tabs { margin-bottom: 14px; }
  .admin-tab { flex: 1; padding: 11px 8px 13px; font-size: 13px; }
  .admin-form > .admin-primary-button { width: 100%; }
}