@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
  }

  body[data-page] {
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .app,
  body[data-page="history"] .page {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    overflow: visible !important;
  }

  .main,
  .page-wrap,
  .history-page,
  .config-page,
  .report-shell,
  .resources-shell,
  .replay-shell,
  .redo-shell,
  .resume-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding: 16px 14px 88px !important;
  }

  .page-wrap {
    padding: 16px 14px 88px !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 80 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    display: block !important;
    border-right: 0 !important;
    border-top: 1px solid #e3e8f4 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 -10px 26px rgba(31, 43, 92, .10) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar > div:first-child {
    display: block !important;
  }

  .sidebar .logo,
  .sidebar .brand-row,
  .sidebar-bottom,
  .sidebar-secondary,
  .user-card {
    display: none !important;
  }

  .sidebar .nav {
    height: 50px !important;
    margin: 0 !important;
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    gap: 6px !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar .nav-item {
    min-width: 74px !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 5px 7px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .sidebar .nav-item svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
  }

  .sidebar .nav-item span {
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card,
  .config-hero,
  .resume-card,
  .config-section,
  .config-footer,
  .report-top,
  .overview-card,
  .ability-card,
  .analysis-card,
  .resource-card,
  .behavior-report-card,
  .replay-card,
  .redo-card,
  .profile-card,
  .summary-card,
  .suggest-card,
  .weekly-card,
  .upload-card,
  .result-card {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .dashboard,
  .home-bottom,
  .feature-grid,
  .weekly-grid,
  .summary-bottom,
  .config-top,
  .option-grid,
  .option-grid-2,
  .difficulty-grid,
  .voice-tts-grid,
  .special-training-option-grid,
  .role-scroll-columns,
  .company-grid,
  .search-role-row,
  .history-layout,
  .top-grid,
  .stats-grid,
  .record,
  .metric-cloud,
  .report-grid,
  .report-top-grid,
  .top-mini-grid,
  .ability-grid,
  .radar-area,
  .behavior-report-grid,
  .behavior-meta-grid,
  .behavior-event-list,
  .behavior-event-item,
  .resource-grid,
  .resource-main,
  .learn-grid,
  .sim-grid,
  .study-grid,
  .material-grid,
  .redo-layout,
  .redo-summary-grid,
  .redo-inline-grid,
  .redo-result-grid,
  .redo-compare-grid,
  .replay-score-grid,
  .replay-score-grid-content,
  .profile-hero,
  .profile-grid,
  .form-grid,
  .hero-result-top,
  .column-grid,
  .overview-stats,
  .loading-stage-points {
    grid-template-columns: 1fr !important;
  }

  body[data-page="home"] .dashboard {
    grid-template-areas:
      "welcome"
      "hero"
      "weekly"
      "summary"
      "suggest" !important;
    min-height: 0 !important;
    gap: 14px !important;
  }

  body[data-page="home"] .hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  body[data-page="home"] .hero h1 {
    font-size: 25px !important;
  }

  body[data-page="home"] .hero-visual,
  body[data-page="home"] .hero-pass-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="history"] .record,
  .history-record {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filter-bar,
  .left-filters,
  .right-filters,
  .filter-row,
  .tab-row,
  .resume-actions,
  .config-actions,
  .bottom-actions,
  .action-row,
  .report-actions,
  .redo-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .config-actions,
  .bottom-actions,
  .action-row {
    width: 100% !important;
    justify-content: stretch !important;
  }

  .config-actions > *,
  .bottom-actions > *,
  .action-row > *,
  .resume-actions > * {
    flex: 1 1 140px !important;
  }

  input,
  select,
  textarea,
  .search,
  .search-box,
  .date-input,
  .filter-select,
  .resume-input-box {
    max-width: 100% !important;
  }

  .category-tabs,
  .tab-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .category-tab,
  .tab-chip {
    flex: 0 0 auto !important;
  }

  .chart-box,
  .chart-wrap,
  .growth-wrap {
    height: 240px !important;
  }

  #radarSvg {
    max-width: 100% !important;
    height: 280px !important;
  }

  .radar-box {
    min-height: 360px !important;
  }

  .behavior-detail-modal-mask {
    padding: 10px !important;
  }

  .behavior-detail-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 18px !important;
  }

  .text-app,
  .voice-app,
  .coding-app {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .text-header,
  .voice-top,
  .coding-header {
    height: auto !important;
    min-height: 62px !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .text-shell,
  .voice-shell,
  .coding-shell {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 12px 88px !important;
    overflow: visible !important;
  }

  .text-layout,
  .voice-stage,
  .voice-main,
  .coding-layout {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .chat-card,
  .left-panel,
  .image-card,
  .answer-card,
  .control-card,
  .question-panel,
  .editor-panel,
  .side-panel {
    min-height: auto !important;
  }

  .chat-messages {
    max-height: none !important;
  }

  .bubble-wrap,
  .chat-bubble {
    max-width: min(100%, 620px) !important;
  }

  body[data-page="text"] .text-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body[data-page="text"] .chat-card {
    order: 1 !important;
    min-height: 520px !important;
    padding: 18px 16px 14px !important;
  }

  body[data-page="text"] .left-panel {
    order: 2 !important;
  }

  body[data-page="text"] .chat-scroll {
    flex: 1 1 auto !important;
    min-height: 300px !important;
    overflow-y: auto !important;
    padding: 4px 4px 14px !important;
    position: relative !important;
  }

  body[data-page="text"] .chat-scroll::before {
    content: "正在加载面试问题...";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #7f8ba6;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
  }

  body[data-page="text"] .chat-scroll:has(.chat-row:not(.hide))::before {
    content: none;
  }

  body[data-page="text"] .composer {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
  }

  .interviewer-visual {
    min-height: 260px !important;
  }

  .behavior-card {
    position: static !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  .behavior-grid {
    grid-template-columns: 1fr !important;
  }

  .control-card {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .control-left,
  .control-right,
  .voice-center {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body[data-page="voice"] .voice-center {
    width: min(100%, 320px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin: 0 auto !important;
  }

  body[data-page="voice"] .voice-center .wave-group {
    width: 92px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body[data-page="voice"] .voice-center .bar {
    width: 5px !important;
    flex: 0 0 5px !important;
  }

  body[data-page="voice"] .voice-center .record-btn {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
    flex: 0 0 86px !important;
    justify-self: center !important;
    grid-column: 2 !important;
  }

  body[data-page="voice"] .voice-center .wave-group.left {
    justify-self: end !important;
  }

  body[data-page="voice"] .voice-center .wave-group.right {
    justify-self: start !important;
  }

  .editor-panel {
    min-height: 520px !important;
  }

  .editor-body {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .editor-box textarea {
    padding: 14px !important;
    font-size: 13px !important;
  }

  .side-panel {
    overflow: visible !important;
  }

  .redo-media-stage {
    min-height: 190px !important;
    max-height: none !important;
  }

  .resume-optimize-loading-card {
    width: calc(100vw - 24px) !important;
  }

  .resume-flow-preview,
  .resume-flow-content {
    min-height: 420px !important;
  }

  .resume-flow-paper {
    inset: 22px 16px !important;
    padding: 22px !important;
  }
}

@media (max-width: 640px) {
  .main,
  .page-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .sidebar {
    height: 62px !important;
    min-height: 62px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .sidebar .nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-columns: unset !important;
    grid-auto-flow: column !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .sidebar .nav-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    gap: 2px !important;
    border-radius: 10px !important;
  }

  .sidebar .nav-item svg {
    width: 17px !important;
    height: 17px !important;
  }

  .sidebar .nav-item span {
    max-width: 100%;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .card,
  .config-hero,
  .resume-card,
  .config-section,
  .config-footer,
  .report-top,
  .overview-card,
  .ability-card,
  .analysis-card,
  .resource-card,
  .behavior-report-card,
  .replay-card,
  .redo-card,
  .profile-card,
  .summary-card,
  .suggest-card,
  .weekly-card,
  .upload-card,
  .result-card {
    border-radius: 16px !important;
    padding: 14px !important;
  }

  h1,
  .panel-title,
  .resources-head-title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  h2,
  .answer-head h2,
  .resume-card-head h3 {
    font-size: 20px !important;
  }

  .hello {
    font-size: 24px !important;
  }

  .big-num {
    font-size: 36px !important;
  }

  .verify-row,
  .input-actions,
  .answer-head,
  .resume-card-head,
  .panel-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .verify-row > *,
  .input-actions > *,
  .answer-head > *,
  .resume-card-head > *,
  .panel-head > * {
    width: 100% !important;
  }

  .login-shell,
  .register-shell,
  .panel,
  .form-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .visual-panel,
  .visual {
    max-height: 34vh !important;
    min-height: 220px !important;
  }

  .text-header .header-user,
  .voice-top .header-user,
  .coding-header .header-user {
    display: none !important;
  }

  .record,
  .history-item,
  .material-card,
  .sim-card,
  .resource-card,
  .redo-candidate-card {
    gap: 10px !important;
  }

  body[data-page="text"] .chat-card {
    min-height: 500px !important;
    padding: 16px 14px 12px !important;
  }

  body[data-page="text"] .chat-scroll {
    min-height: 292px !important;
  }

  body[data-page="text"] .left-panel {
    gap: 12px !important;
    padding: 14px !important;
  }

  body[data-page="text"] .left-panel .panel-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body[data-page="text"] .composer {
    padding: 12px 14px 10px !important;
    border-radius: 18px !important;
  }

  body[data-page="text"] .composer textarea {
    height: 88px !important;
  }

  body[data-page="text"] .icon-circle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  body[data-page="text"] .send-btn {
    min-height: 38px !important;
    padding: 0 18px !important;
  }

  body[data-page="config"] .summary-strip {
    gap: 14px !important;
  }

  body[data-page="config"] .config-actions {
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.45fr) !important;
    width: 100% !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body[data-page="config"] .config-actions > * {
    min-width: 0 !important;
    width: 100% !important;
    flex: initial !important;
  }

  body[data-page="config"] .config-actions .ghost-action,
  body[data-page="config"] .config-actions .primary-action {
    height: 48px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1 !important;
  }

  body[data-page="config"] .config-actions .ghost-action {
    font-size: 16px !important;
  }

  body[data-page="config"] .config-actions .primary-action {
    font-size: 15px !important;
  }

  body[data-page="config"] .voice-camera-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body[data-page="config"] .voice-camera-toggle {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 94px !important;
    white-space: nowrap !important;
  }

  body[data-page="config"] .voice-camera-toggle-track {
    width: 48px !important;
    height: 28px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
  }

  body[data-page="config"] .voice-camera-toggle-track::after {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  body[data-page="config"] .voice-camera-toggle.active .voice-camera-toggle-track::after {
    left: 24px !important;
  }

  body[data-page="config"] .voice-camera-toggle-text {
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .chart-box,
  .chart-wrap,
  .growth-wrap {
    height: 220px !important;
  }

  .radar-box {
    min-height: 330px !important;
  }

  .interviewer-visual {
    min-height: 220px !important;
  }

  .editor-panel {
    min-height: 460px !important;
  }

  .record-btn {
    width: 86px !important;
    height: 86px !important;
  }

  body[data-page="voice"] .voice-center {
    width: min(100%, 286px) !important;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body[data-page="voice"] .voice-center .wave-group {
    width: 80px !important;
    gap: 4px !important;
  }

  body[data-page="voice"] .voice-center .record-btn {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    flex-basis: 84px !important;
  }

  body[data-page="voice"] .voice-center .wave-group .bar:nth-child(n+9) {
    display: none !important;
  }
}