/* Admin visual refresh: presentation-only overrides for authenticated admin modules. */
body[data-shell="app"].admin-module-active {
  --ui-ink: #242a30;
  --ui-muted: #657078;
  --ui-line: #dce2e6;
  --ui-line-strong: #c9d2d8;
  --ui-canvas: #f7f8fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f1f4f5;
  --ui-accent: var(--brand-primary, #176b5a);
  --ui-accent-strong: var(--brand-primary-strong, #125548);
  --ui-accent-soft: color-mix(in srgb, var(--ui-accent) 9%, #ffffff);
  --ui-coral: #bf483e;
  --ui-coral-soft: #fff3f1;
  --ui-gold: #8b681f;
  --ui-gold-soft: #fff8e8;
  --ui-focus: #246b89;
  --ui-radius: 6px;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --surface: var(--ui-surface);
  --surface-2: var(--ui-surface-soft);
  background: var(--ui-canvas);
  color: var(--ui-ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
    "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0;
}

body[data-shell="app"].admin-module-active *,
body[data-shell="app"].admin-module-active *::before,
body[data-shell="app"].admin-module-active *::after {
  letter-spacing: 0;
}

body[data-shell="app"].admin-module-active main,
body[data-shell="app"].admin-module-active #app-view,
body[data-shell="app"].admin-module-active .module-page,
body[data-shell="app"].admin-module-active .admin-module-panel,
body[data-shell="app"].admin-module-active .billing-workspace,
body[data-shell="app"].admin-module-active .billing-page,
body[data-shell="app"].admin-module-active .member-admin,
body[data-shell="app"].admin-module-active .question-admin-host,
body[data-shell="app"].admin-module-active .practice-admin,
body[data-shell="app"].admin-module-active .course-admin {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body[data-shell="app"].admin-module-active #app-view {
  max-inline-size: 108rem;
  padding-inline: clamp(1rem, 2.4vw, 2.5rem);
}

/* Sidebar: restrained navigation with clear hierarchy and a single active accent. */
body[data-shell="app"].admin-module-active .site-header {
  background: #202b2a;
  border-inline-end: 1px solid #182120;
}

body[data-shell="app"].admin-module-active .brand {
  border-block-end-color: rgba(255, 255, 255, 0.11);
}

body[data-shell="app"].admin-module-active .nav {
  gap: 0.2rem;
}

body[data-shell="app"].admin-module-active .nav-section-label {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.75rem;
  font-weight: 600;
}

body[data-shell="app"].admin-module-active .nav .tab,
body[data-shell="app"].admin-module-active .admin-menu-group-toggle,
body[data-shell="app"].admin-module-active .admin-menu-item {
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 600;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
}

body[data-shell="app"].admin-module-active .nav .tab:is(:hover, :focus-visible),
body[data-shell="app"].admin-module-active
  .admin-menu-group-toggle:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-shell="app"].admin-module-active .nav .tab.is-active {
  border-inline-start-color: #f0a078;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 700;
}

/* Page title and section rhythm. */
body[data-shell="app"].admin-module-active .page-head {
  min-block-size: 5rem;
  margin-block-end: 1.25rem;
  border-block-end-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-canvas) 94%, transparent);
}

body[data-shell="app"].admin-module-active .page-head h1,
body[data-shell="app"].admin-module-active .admin-module-page > h1,
body[data-shell="app"].admin-module-active .admin-module-page > header h1 {
  color: var(--ui-ink);
  font-size: 1.5rem;
  font-weight: 750;
  line-height: 1.3;
}

body[data-shell="app"].admin-module-active
  :is(.page-head, .module-head, .panel-title-row, .question-admin-page-header)
  :is(p, .hint),
body[data-shell="app"].admin-module-active #member-line {
  color: var(--ui-muted);
}

body[data-shell="app"].admin-module-active
  :is(.page-head, .module-head, .panel-title-row)
  .eyebrow {
  color: var(--ui-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-shell="app"].admin-module-active .admin-module-page,
body[data-shell="app"].admin-module-active .admin-module-panel {
  gap: 1.25rem;
}

body[data-shell="app"].admin-module-active .module-head {
  padding-block-end: 0.9rem;
  border-block-end: 1px solid var(--ui-line);
}

body[data-shell="app"].admin-module-active
  :is(.module-head, .panel-title-row, .dialog-title-row)
  h2 {
  color: var(--ui-ink);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.35;
}

body[data-shell="app"].admin-module-active
  :is(.panel-title-row, .question-list-heading)
  h3 {
  color: var(--ui-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Flat work surfaces: page sections are separated by rhythm and rules, not floating cards. */
body[data-shell="app"].admin-module-active
  .admin-module-page
  > :is(.panel, .learning-section),
body[data-shell="app"].admin-module-active
  .admin-module-panel
  > :is(.panel, .learning-section),
body[data-shell="app"].admin-module-active .billing-host,
body[data-shell="app"].admin-module-active
  .member-admin
  > .member-section[open] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-shell="app"].admin-module-active
  .admin-module-panel
  > :is(.panel, .learning-section)
  + :is(.panel, .learning-section),
body[data-shell="app"].admin-module-active
  .admin-module-page
  > :is(.panel, .learning-section)
  + :is(.panel, .learning-section) {
  border-block-start: 1px solid var(--ui-line);
  padding-block-start: 1.25rem;
}

body[data-shell="app"].admin-module-active
  :is(
    .embedded-panel,
    .question-list-workspace,
    .question-secondary-workspace > .panel,
    .question-secondary-workspace > section
  ) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

/* Controls and action hierarchy. */
body[data-shell="app"].admin-module-active
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
    [type="hidden"]
  ),
body[data-shell="app"].admin-module-active select,
body[data-shell="app"].admin-module-active textarea {
  min-block-size: 2.75rem;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: none;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

body[data-shell="app"].admin-module-active textarea {
  min-block-size: 7rem;
  resize: vertical;
}

body[data-shell="app"].admin-module-active
  input:is([type="checkbox"], [type="radio"]) {
  flex: 0 0 18px;
  inline-size: 18px !important;
  min-inline-size: 18px !important;
  max-inline-size: 18px !important;
  block-size: 18px !important;
  min-block-size: 18px !important;
  max-block-size: 18px !important;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-accent);
}

body[data-shell="app"].admin-module-active input[type="checkbox"] {
  border-radius: 3px;
}

body[data-shell="app"].admin-module-active input[type="radio"] {
  border-radius: 50%;
}

body[data-shell="app"].admin-module-active
  label:has(input:is([type="checkbox"], [type="radio"])) {
  min-block-size: 2.75rem;
}

body[data-shell="app"].admin-module-active :is(input, select, textarea):focus {
  border-color: var(--ui-focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 18%, transparent);
}

body[data-shell="app"].admin-module-active
  :is(input, select, textarea):disabled {
  background: #eef1f3;
  color: #7c858b;
  cursor: not-allowed;
}

body[data-shell="app"].admin-module-active .field > span,
body[data-shell="app"].admin-module-active fieldset > legend {
  color: #485158;
  font-size: 0.875rem;
  font-weight: 650;
}

body[data-shell="app"].admin-module-active .field-help,
body[data-shell="app"].admin-module-active .hint,
body[data-shell="app"].admin-module-active small {
  color: var(--ui-muted);
  line-height: 1.5;
}

body[data-shell="app"].admin-module-active :is(.button, .text-button) {
  min-block-size: 2.75rem;
  border-radius: var(--ui-radius);
  font-weight: 650;
  box-shadow: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 100ms ease;
}

body[data-shell="app"].admin-module-active .button:not(.ghost):not(.danger) {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #ffffff;
}

body[data-shell="app"].admin-module-active
  .button:not(.ghost):not(.danger):is(:hover, :focus-visible) {
  border-color: var(--ui-accent-strong);
  background: var(--ui-accent-strong);
}

body[data-shell="app"].admin-module-active :is(.button.ghost, .text-button) {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface);
  color: var(--ui-accent-strong);
}

body[data-shell="app"].admin-module-active
  :is(.button.ghost, .text-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

body[data-shell="app"].admin-module-active :is(.button, .text-button):active {
  transform: translateY(1px);
}

body[data-shell="app"].admin-module-active
  :is(.button, .text-button, .tab, summary, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 40%, transparent);
  outline-offset: 2px;
}

body[data-shell="app"].admin-module-active :is(.danger, .is-danger) {
  border-color: #e2aaa5;
  color: var(--ui-coral);
}

body[data-shell="app"].admin-module-active
  :is(.button.danger, .danger.button):is(:hover, :focus-visible) {
  border-color: var(--ui-coral);
  background: var(--ui-coral);
  color: #ffffff;
}

/* Tabs use an underline; badges use compact squared status marks. */
body[data-shell="app"].admin-module-active
  :is(
    .table-tabs,
    .billing-tabs,
    .billing-subtabs,
    .compact-tabs,
    .question-admin-workspaces
  ) {
  gap: 0.25rem;
  overflow-x: auto;
  border-block-end: 1px solid var(--ui-line);
  border-radius: 0;
  padding: 0;
  background: transparent;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

body[data-shell="app"].admin-module-active
  :is(.table-tabs, .billing-tabs, .billing-subtabs, .compact-tabs)
  .tab,
body[data-shell="app"].admin-module-active .question-admin-workspaces button {
  min-block-size: 2.75rem;
  flex: 0 0 auto;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ui-muted);
  box-shadow: none;
  white-space: nowrap;
}

body[data-shell="app"].admin-module-active
  :is(.table-tabs, .billing-tabs, .billing-subtabs, .compact-tabs)
  .tab:is(.is-active, [aria-selected="true"], [aria-current="page"]),
body[data-shell="app"].admin-module-active
  .question-admin-workspaces
  button[aria-current="page"] {
  border-block-end-color: var(--ui-accent);
  color: var(--ui-ink);
  font-weight: 700;
}

body[data-shell="app"].admin-module-active
  :is(.tag, .question-status, .home-banner-admin-state) {
  min-block-size: 1.65rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

body[data-shell="app"].admin-module-active
  :is(.tag.warn, .billing-notice, .admin-capacity-warning) {
  border-color: #dfc57e;
  background: var(--ui-gold-soft);
  color: #694e18;
}

body[data-shell="app"].admin-module-active
  :is(
    .tag.bad,
    .import-summary.bad,
    .question-load-error,
    [data-tone="error"]
  ) {
  border-color: #e3b6b1;
  background: var(--ui-coral-soft);
  color: #8f352e;
}

/* Tables remain dense and scroll inside their own region. */
body[data-shell="app"].admin-module-active
  :is(
    .table-wrap,
    .member-list-table,
    .billing-table-wrap,
    .question-preview-table,
    .question-table-viewport,
    .course-table-region .table-wrap
  ) {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

body[data-shell="app"].admin-module-active table,
body[data-shell="app"].admin-module-active .question-management-table,
body[data-shell="app"].admin-module-active .billing-table {
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

body[data-shell="app"].admin-module-active :is(th, td),
body[data-shell="app"].admin-module-active
  .question-management-table
  :is(th, td),
body[data-shell="app"].admin-module-active .billing-table :is(th, td) {
  border-block-end-color: var(--ui-line);
  padding: 0.72rem 0.8rem;
  line-height: 1.45;
}

body[data-shell="app"].admin-module-active th,
body[data-shell="app"].admin-module-active .question-management-table th,
body[data-shell="app"].admin-module-active .billing-table th {
  background: #eef2f3;
  color: #505a61;
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-shell="app"].admin-module-active tbody tr:nth-child(even) td {
  background: #fbfcfc;
}

body[data-shell="app"].admin-module-active tbody tr:hover td,
body[data-shell="app"].admin-module-active
  .question-management-table
  tbody
  tr:hover
  td {
  background: var(--ui-accent-soft);
}

body[data-shell="app"].admin-module-active
  :is(.member-list-table, .question-management-table)
  th:last-child,
body[data-shell="app"].admin-module-active
  :is(.member-list-table, .question-management-table)
  td:last-child {
  box-shadow: -1px 0 0 var(--ui-line);
}

body[data-shell="app"].admin-module-active
  :is(.member-row-actions, .question-row-actions)
  .text-button,
body[data-shell="app"].admin-module-active .question-row-menu summary {
  min-block-size: 2.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Member administration: linear navigation and quieter workflows. */
body[data-shell="app"].admin-module-active .member-admin-navigation {
  gap: 0;
  overflow-x: auto;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  border: 0;
  border-block-end: 1px solid var(--ui-line);
  border-radius: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ui-canvas) 95%, transparent);
  box-shadow: none;
  scrollbar-width: thin;
}

body[data-shell="app"].admin-module-active .member-admin-navigation-item {
  min-block-size: 2.75rem;
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
  padding: 0.55rem 0.8rem;
  color: var(--ui-muted);
  font-weight: 650;
  white-space: nowrap;
}

body[data-shell="app"].admin-module-active
  .member-admin-navigation-item
  strong {
  border-radius: 4px;
  background: #e8edef;
  color: #536067;
}

body[data-shell="app"].admin-module-active
  .member-admin-navigation-item:is(:hover, :focus-visible),
body[data-shell="app"].admin-module-active
  .member-admin-navigation-item.is-active {
  border-block-end-color: var(--ui-accent);
  background: transparent;
  color: var(--ui-ink);
}

body[data-shell="app"].admin-module-active
  .member-admin-navigation-item.is-active
  strong {
  background: var(--ui-accent);
  color: #ffffff;
}

body[data-shell="app"].admin-module-active
  :is(.member-admin-action-workflow, .billing-editor) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}

body[data-shell="app"].admin-module-active
  :is(.member-admin-action-workflow, .billing-editor)
  > summary {
  min-block-size: 3rem;
  color: var(--ui-ink);
  font-weight: 650;
}

body[data-shell="app"].admin-module-active
  :is(.member-admin-action-workflow, .billing-editor)[open]
  > summary {
  border-block-end: 1px solid var(--ui-line);
  background: var(--ui-surface-soft);
}

body[data-shell="app"].admin-module-active
  :is(
    .member-group-choice,
    .plan-limit,
    .paper-scope-selector,
    .course-reminder-settings
  ) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-soft);
  box-shadow: none;
}

body[data-shell="app"].admin-module-active
  .member-group-choice:has(input:checked) {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

/* Structure, question and paper workbenches. */
body[data-shell="app"].admin-module-active .question-review-admin {
  --question-surface: var(--ui-surface);
  --question-canvas: var(--ui-canvas);
  --question-header: #eef2f3;
  --question-border: var(--ui-line);
  --question-muted: var(--ui-muted);
  color: var(--ui-ink);
}

body[data-shell="app"].admin-module-active .question-admin-page-header h2 {
  color: var(--ui-ink);
  font-size: 1.35rem;
}

body[data-shell="app"].admin-module-active .question-list-workspace {
  border-color: var(--ui-line);
}

body[data-shell="app"].admin-module-active .question-review-tree-panel {
  border-inline-end-color: var(--ui-line);
  background: #f2f5f6;
}

body[data-shell="app"].admin-module-active
  :is(.question-filter-grid, .question-category-shortcuts) {
  border-color: var(--ui-line);
  background: #f6f8f9;
}

body[data-shell="app"].admin-module-active
  .question-management-table
  .question-check-column,
body[data-shell="app"].admin-module-active
  .question-management-table
  .question-serial-column,
body[data-shell="app"].admin-module-active
  .question-management-table
  .question-action-column {
  background: var(--ui-surface);
}

body[data-shell="app"].admin-module-active
  .question-management-table
  th:is(
    .question-check-column,
    .question-serial-column,
    .question-action-column
  ) {
  background: #eef2f3;
}

body[data-shell="app"].admin-module-active
  :is(
    .practice-structure,
    .learning-node-layout,
    .paper-admin-layout,
    .assignment-admin-layout
  ) {
  min-inline-size: 0;
  gap: 1rem;
}

body[data-shell="app"].admin-module-active
  :is(
    .learning-node-tree,
    .learning-node-form,
    .paper-question-picker,
    .paper-selected-list
  ) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

/* Billing and schedules: data-first surfaces and consistent numeric hierarchy. */
body[data-shell="app"].admin-module-active .billing-course-charge-heading {
  border: 0;
  border-block-end: 1px solid var(--ui-line);
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}

body[data-shell="app"].admin-module-active
  .billing-course-charge-heading
  li::before {
  border-radius: 4px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

body[data-shell="app"].admin-module-active .billing-metrics {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-line);
}

body[data-shell="app"].admin-module-active .billing-metrics article {
  min-block-size: 6.5rem;
  border-block-start: 0;
  padding: 1rem;
  background: var(--ui-surface);
}

body[data-shell="app"].admin-module-active .billing-metrics strong {
  color: var(--ui-ink);
  font-size: 1.45rem;
  font-weight: 750;
}

body[data-shell="app"].admin-module-active
  :is(
    .billing-record,
    .billing-aging > div,
    .course-schedule-toolbar,
    .course-schedule-pagination
  ) {
  border-color: var(--ui-line);
}

body[data-shell="app"].admin-module-active .course-schedule-toolbar {
  padding: 0.9rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

/* Dialogs: restrained top-layer surface with sticky action footer. */
body[data-shell="app"].admin-module-active
  :is(
    .modal-dialog,
    .member-editor-dialog,
    .question-create-dialog,
    .question-report-dialog,
    .paper-builder-dialog,
    .paper-preview-dialog,
    #learning-node-move-dialog,
    .point-reward-type-dialog,
    .member-group-members-dialog,
    .point-earning-task-dialog,
    .member-point-award-dialog
  ) {
  border: 1px solid var(--ui-line-strong);
  border-radius: 8px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: 0 24px 64px rgba(28, 38, 43, 0.2);
}

body[data-shell="app"].admin-module-active
  :is(
    .modal-dialog,
    .member-editor-dialog,
    .question-create-dialog,
    .question-report-dialog,
    .paper-builder-dialog,
    .paper-preview-dialog,
    #learning-node-move-dialog,
    .point-reward-type-dialog,
    .member-group-members-dialog,
    .point-earning-task-dialog,
    .member-point-award-dialog
  )::backdrop {
  background: rgba(24, 31, 35, 0.54);
  backdrop-filter: blur(2px);
}

body[data-shell="app"].admin-module-active
  :is(.modal-head, .dialog-title-row, .question-report-dialog-head) {
  border-block-end: 1px solid var(--ui-line);
  padding-block-end: 0.85rem;
}

body[data-shell="app"].admin-module-active .modal-actions {
  border-block-start: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

body[data-shell="app"].admin-module-active .member-editor-dialog fieldset {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  background: #fafbfb;
}

/* Empty, loading and informational states. */
body[data-shell="app"].admin-module-active
  :is(
    .import-summary,
    .member-editor-status,
    .billing-course-notice,
    .feature-capacity-status
  ) {
  border-radius: var(--ui-radius);
  box-shadow: none;
}

body[data-shell="app"].admin-module-active .import-summary.ok,
body[data-shell="app"].admin-module-active [data-tone="success"] {
  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-line));
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

body[data-shell="app"].admin-module-active .member-list-loading span {
  background: linear-gradient(90deg, #e9edef 25%, #f7f8f9 45%, #e9edef 65%);
  background-size: 220% 100%;
}

@media (max-width: 1024px) {
  body[data-shell="app"].admin-module-active .member-card-list {
    gap: 0;
    border-block-start: 1px solid var(--ui-line);
  }

  body[data-shell="app"].admin-module-active .member-card {
    border: 0;
    border-block-end: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
  }

  body[data-shell="app"].admin-module-active .billing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body[data-shell="app"].admin-module-active #app-view {
    padding-inline: 0.9rem;
  }

  body[data-shell="app"].admin-module-active .site-header {
    border-inline-end: 0;
    border-block-end: 1px solid #182120;
  }

  body[data-shell="app"].admin-module-active .nav .tab.is-active {
    border-inline-start-color: transparent;
    border-block-end-color: #f0a078;
  }

  body[data-shell="app"].admin-module-active .page-head {
    position: static;
    min-block-size: auto;
    margin-block-end: 1rem;
    padding-block: 0.9rem;
    background: transparent;
    backdrop-filter: none;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .page-head,
      .module-head,
      .panel-title-row,
      .question-admin-page-header
    ) {
    align-items: stretch;
  }

  body[data-shell="app"].admin-module-active .admin-module-page,
  body[data-shell="app"].admin-module-active .admin-module-panel {
    gap: 1rem;
  }

  body[data-shell="app"].admin-module-active .member-admin-navigation {
    position: static;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .admin-module-toolbar,
      .admin-module-toolbar .table-search,
      .admin-module-toolbar .button
    ) {
    inline-size: 100%;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .row-actions,
      .admin-module-toolbar,
      .billing-actions,
      .question-admin-header-actions
    ) {
    flex-wrap: wrap;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .button,
      .text-button,
      input:not([type="checkbox"]):not([type="radio"]),
      select
    ) {
    min-block-size: 2.75rem;
  }

  body[data-shell="app"].admin-module-active
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="hidden"]
    ),
  body[data-shell="app"].admin-module-active select,
  body[data-shell="app"].admin-module-active textarea {
    font-size: 1rem;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .table-wrap,
      .member-list-table,
      .billing-table-wrap,
      .question-preview-table,
      .question-table-viewport
    ) {
    border-radius: 4px;
  }

  /* The learning workspace is not itself a table. Keep only its preview and
     history tables scrollable so their full column sets remain available. */
  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel) {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow: visible;
    border: 0;
    background: transparent;
    scrollbar-gutter: auto;
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    :is(
      .learning-node-manager,
      .learning-node-layout,
      .learning-node-detail-panel,
      .learning-tool-section,
      .lesson-word-import-panel,
      .lesson-word-preview,
      .lesson-word-history
    ) {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    :is(.lesson-word-import-panel, .lesson-word-preview, .lesson-word-history) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    .lesson-word-import-panel
    > .panel-title-row
    > .row-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: 0.5rem;
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    .lesson-word-import-panel
    > .panel-title-row
    > .row-actions
    > * {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    :is(.lesson-word-preview, .lesson-word-history)
    > .table-wrap {
    display: block;
    inline-size: 0;
    min-inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    contain: inline-size;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-shell="app"].admin-module-active
    #admin-table:has(.lesson-word-import-panel)
    :is(.lesson-word-preview, .lesson-word-history)
    > .table-wrap
    table {
    inline-size: max-content;
    min-inline-size: 44rem;
    max-inline-size: none;
  }

  body[data-shell="app"].admin-module-active
    :is(.question-select-cell, .compact-check) {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
  }

  body[data-shell="app"].admin-module-active .compact-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .modal-dialog,
      .member-editor-dialog,
      .question-create-dialog,
      .question-report-dialog
    ) {
    max-inline-size: calc(100dvw - 1rem);
    max-block-size: calc(100dvh - 1rem);
  }
}

@media (max-width: 520px) {
  body[data-shell="app"].admin-module-active #app-view {
    padding-inline: 0.75rem;
  }

  body[data-shell="app"].admin-module-active .page-head h1 {
    font-size: 1.35rem;
  }

  body[data-shell="app"].admin-module-active .billing-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-shell="app"].admin-module-active
    :is(.row-actions, .billing-actions, .modal-actions)
    > :is(.button, .text-button) {
    flex: 1 1 100%;
    inline-size: 100%;
  }

  body[data-shell="app"].admin-module-active
    :is(
      .modal-dialog,
      .member-editor-dialog,
      .question-create-dialog,
      .question-report-dialog
    ) {
    inline-size: calc(100dvw - 0.75rem);
    max-inline-size: calc(100dvw - 0.75rem);
    max-block-size: calc(100dvh - 0.75rem);
    border-radius: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-shell="app"].admin-module-active *,
  body[data-shell="app"].admin-module-active *::before,
  body[data-shell="app"].admin-module-active *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}