html.practice-surface-fit-root {
  height: auto !important;
  min-height: calc(100dvh + 72px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.practice-surface-fit-mode {
  min-height: calc(100dvh + 72px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
}

body.practice-surface-fit-mode .workbench-header,
body.practice-surface-fit-mode .main-sidebar {
  display: none !important;
}

body.practice-surface-fit-mode .feedback-fab {
  display: none !important;
}

body.practice-surface-fit-mode .app-shell,
body.practice-surface-fit-mode .app-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

body.practice-surface-fit-mode[data-current-view] .practice-surface-fit-canvas {
  position: fixed !important;
  top: var(--practice-surface-top, 50%) !important;
  left: var(--practice-surface-left, 50%) !important;
  z-index: 20;
  box-sizing: border-box !important;
  width: 1180px !important;
  min-width: 1180px !important;
  max-width: 1180px !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) scale(var(--practice-surface-scale, 1)) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
}

body.practice-surface-fit-mode[data-current-view] .practice-surface-fit-canvas > .unified-test-card,
body.practice-surface-fit-mode[data-current-view] .practice-surface-fit-canvas > .special-training-card,
body.practice-surface-fit-mode[data-current-view] .practice-surface-fit-canvas > .assessment-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 8px !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.practice-surface-fit-canvas .test-toolbar {
  min-height: 58px !important;
  padding-block: 6px !important;
}

.practice-surface-fit-canvas#grammarTrainingCard,
.practice-surface-fit-canvas #grammarTrainingCard {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.practice-surface-fit-canvas #grammarTrainingCard > .test-toolbar,
.practice-surface-fit-canvas#grammarTrainingCard > .test-toolbar {
  grid-template-columns: auto minmax(180px, 1fr) max-content !important;
  row-gap: 0 !important;
  min-height: 58px !important;
  padding: 4px 6px 6px !important;
}

.practice-surface-fit-canvas #grammarTrainingCard .test-toolbar__status,
.practice-surface-fit-canvas#grammarTrainingCard .test-toolbar__status {
  grid-column: auto !important;
  grid-template-columns: repeat(4, max-content) !important;
  justify-content: end !important;
  width: auto !important;
}

.practice-surface-fit-canvas .unified-test-question,
.practice-surface-fit-canvas .grammar-question,
.practice-surface-fit-canvas .assessment-question {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  scrollbar-width: none;
}

.practice-surface-fit-canvas :is(.unified-test-question, .assessment-stage, .special-question, .grammar-question) {
  justify-items: center !important;
}

.practice-surface-fit-canvas :is(
  .unified-test-keyboard,
  .assessment-keyboard,
  .special-options,
  .assessment-options,
  .grammar-answer-slots,
  .grammar-study-toolbar,
  .assessment-actions,
  .special-dictation-actions
) {
  justify-self: center !important;
  margin-inline: auto !important;
}

.practice-surface-fit-canvas .assessment-stage > section:not([hidden]),
.practice-surface-fit-canvas #assessmentKeyboard {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-items: center !important;
}

.practice-surface-fit-canvas .grammar-explanation {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: 10px !important;
  padding: 34px 12px 8px !important;
}

.practice-surface-fit-canvas .grammar-explanation-groups {
  gap: 22px !important;
}

.practice-surface-fit-canvas .grammar-explanation-group > p {
  margin-top: 18px !important;
}

.practice-surface-fit-canvas .grammar-study-toolbar {
  position: static !important;
  flex: 0 0 auto;
  margin-top: 4px !important;
}

.practice-surface-fit-canvas .special-question:has(.special-dictation-input),
.practice-surface-fit-canvas .grammar-question:has(.grammar-keyboard) {
  align-content: center !important;
  gap: 6px !important;
}

.practice-surface-fit-canvas .unified-test-keyboard,
.practice-surface-fit-canvas .grammar-keyboard {
  box-sizing: border-box !important;
  width: min(930px, 96%) !important;
  max-height: 190px;
  gap: 7px !important;
  padding: 8px 14px !important;
}

.practice-surface-fit-canvas .unified-test-keyboard .soft-key-row,
.practice-surface-fit-canvas .grammar-keyboard .soft-key-row {
  gap: 8px !important;
}

.practice-surface-fit-canvas .unified-test-keyboard .soft-key-row button,
.practice-surface-fit-canvas .grammar-keyboard .soft-key-row button {
  width: 76px !important;
  height: 46px !important;
  font-size: 22px !important;
}

.practice-surface-fit-canvas .unified-test-keyboard .soft-key-row .soft-key-action,
.practice-surface-fit-canvas .grammar-keyboard .soft-key-row .soft-key-action {
  width: 98px !important;
  font-size: 17px !important;
}

.practice-surface-fit-canvas .special-dictation-input {
  width: min(720px, 82%) !important;
  height: 46px !important;
  font-size: 31px !important;
}

.practice-surface-fit-canvas .special-dictation-actions button {
  min-width: 170px !important;
  min-height: 50px !important;
  padding: 8px 22px !important;
  font-size: 20px !important;
}

.practice-surface-fit-canvas :is(.special-options, .assessment-options) {
  width: min(930px, 92%) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.practice-surface-fit-canvas :is(.special-options, .assessment-options) button {
  min-height: 76px !important;
  padding: 12px 20px !important;
  font-size: 24px !important;
}

.practice-surface-fit-canvas :is(.grammar-answer-slots, .grammar-study-toolbar, .grammar-explanation-groups) {
  width: min(1000px, 92%) !important;
}

.practice-surface-fit-canvas .grammar-answer-slots {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.practice-surface-fit-canvas .grammar-answer-slots .grammar-token {
  flex: 0 1 auto;
  min-width: 0 !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching {
  width: min(1000px, 94%) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item > span {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item > p {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item:first-child {
  position: absolute !important;
  top: 4px !important;
  left: 12px !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: calc(50% - 24px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item:first-child > span {
  flex: 0 0 auto;
  font-size: 13px !important;
}

.practice-surface-fit-canvas .grammar-kaoshen-teaching .grammar-teaching-item:first-child > p {
  min-width: 0;
  overflow: hidden;
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-surface-fit-canvas .grammar-study-toolbar button {
  min-height: 48px !important;
  font-size: 17px !important;
}

@media (orientation: portrait) {
  body.practice-surface-fit-mode::before {
    content: "请将设备横屏使用";
    position: fixed;
    inset: 12px auto auto 50%;
    z-index: 30;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 6px;
    background: #172535;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .app-shell {
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: clip !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) :is(.main-sidebar, .app-content) {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .feedback-fab {
    top: 10px !important;
    right: 12px !important;
    bottom: auto !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-view {
    width: min(1120px, 100%) !important;
    padding: 8px 16px 20px !important;
  }

  body[data-current-view="specialTraining"] .app-content > [data-app-view-section="specialTraining"] {
    padding: 8px 16px 12px !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-header {
    margin-bottom: 6px !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-selectors {
    gap: 5px !important;
    margin-top: 6px !important;
    padding: 8px 12px !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-selectors section {
    grid-template-columns: 70px 1fr !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-selectors nav {
    gap: 6px !important;
  }

  body:is([data-current-view="grammar"], [data-current-view="specialTraining"]) .special-training-selectors button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
  }

  body[data-current-view="grammar"] .grammar-learning-actions {
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 10px 14px !important;
  }

  body[data-current-view="grammar"] .grammar-learning-actions button {
    min-height: 42px !important;
  }

  body[data-current-view="specialTraining"] .special-mode-grid {
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body[data-current-view="specialTraining"] .special-mode-grid button {
    min-height: 56px !important;
    padding: 6px 14px !important;
  }

  body[data-current-view="specialTraining"] .special-mode-grid i {
    width: 38px !important;
    height: 38px !important;
  }

  body[data-current-view="specialTraining"] .special-training-header {
    padding-bottom: 8px !important;
  }

  body[data-current-view="specialTraining"] .special-training-header h1 {
    margin: 0 0 2px !important;
    font-size: 24px !important;
  }
}