/*
 * 醇语文移动端适配层
 * 放在页面内联样式之后加载：统一处理触控尺寸、刘海/系统栏安全区和深色主题。
 */
:root {
  color-scheme: light dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-target: 48px;
  --app-surface-dark: #1c1c1e;
  --app-surface-dark-2: #2c2c2e;
  --app-text-dark: #f5f5f7;
  --app-muted-dark: #aeaeb2;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(72px + var(--safe-top));
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

button,
input,
textarea,
select,
.btn,
.nav-item,
.quick-card,
.student-card,
.hw-item,
[role="button"],
label[for] {
  touch-action: manipulation;
}

button,
.btn,
.nav-item,
[role="button"] {
  min-height: 44px;
}

input,
textarea,
select {
  font-size: 16px !important;
}

input[type="checkbox"],
input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  padding: 0 !important;
}

.header,
.nav-top {
  padding-top: calc(12px + var(--safe-top)) !important;
  padding-left: calc(16px + var(--safe-left)) !important;
  padding-right: calc(16px + var(--safe-right)) !important;
}

.nav-bar,
.bottom-bar {
  padding-left: var(--safe-left) !important;
  padding-right: var(--safe-right) !important;
  padding-bottom: calc(7px + var(--safe-bottom)) !important;
}

.modal,
.sheet {
  padding-bottom: calc(22px + var(--safe-bottom)) !important;
}

.modal-overlay,
.overlay,
.img-zoom-overlay,
.success-overlay {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.app-nav-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--app-icon) center / contain no-repeat;
  mask: var(--app-icon) center / contain no-repeat;
}

.icon-home { --app-icon: url("../icons/home.svg"); }
.icon-homework { --app-icon: url("../icons/homework.svg"); }
.icon-grading { --app-icon: url("../icons/grading.svg"); }
.icon-report { --app-icon: url("../icons/report.svg"); }
.icon-student { --app-icon: url("../icons/student.svg"); }
.icon-settings { --app-icon: url("../icons/settings.svg"); }

.nav-item .app-nav-icon,
.nav-item .ni.app-nav-icon,
.nav-item .nav-icon.app-nav-icon {
  width: 23px;
  height: 23px;
  font-size: 0;
}

.quick-card .app-nav-icon,
.quick-card .icon.app-nav-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  color: var(--accent, var(--c1, #49657e));
}

@media (max-width: 767px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main,
  .container,
  .page-container,
  .content {
    width: 100%;
    max-width: 100% !important;
  }

  main {
    padding-left: calc(14px + var(--safe-left)) !important;
    padding-right: calc(14px + var(--safe-right)) !important;
  }

  button,
  .btn,
  .sheet-item,
  .filter-tag,
  .tab,
  .back-btn,
  .icon-btn {
    min-height: var(--touch-target);
  }

  .btn-sm,
  .btn-icon,
  .header .back {
    min-height: 40px;
  }

  .nav-bar {
    min-height: calc(64px + var(--safe-bottom));
  }

  .nav-item {
    min-width: 64px;
    min-height: 54px;
    padding: 5px 8px;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
  }

  .quick-card {
    min-height: 126px;
    justify-content: center;
  }

  .filter-bar,
  .tab-bar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-tag,
  .tab {
    min-width: 76px;
  }

  .form-row {
    align-items: stretch;
  }

  .form-row > * {
    min-width: min(100%, 150px);
  }

  .modal-overlay,
  .overlay {
    align-items: flex-end !important;
  }

  .modal,
  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(92dvh - var(--safe-top)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .table-wrap,
  .q-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 620px;
  }

  .q-table .q-row {
    min-width: 520px;
  }

  .st-imgs img,
  .upload-preview img {
    width: 84px;
    height: 84px;
  }

  .st-imgs img:active,
  .upload-preview img:active {
    transform: none !important;
  }

  .img-zoom-overlay {
    touch-action: pinch-zoom;
  }

  .hero {
    padding-top: 24px !important;
  }

  @media (orientation: landscape) and (max-height: 520px) {
    .header,
    .nav-top {
      padding-top: calc(7px + var(--safe-top)) !important;
      padding-bottom: 7px !important;
    }

    .nav-bar {
      min-height: calc(54px + var(--safe-bottom));
    }

    .nav-item {
      min-height: 44px;
      flex-direction: row !important;
      gap: 6px;
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: #000 !important;
    color: var(--app-text-dark) !important;
  }

  .card,
  .student-card,
  .hw-item,
  .hw-card,
  .question-card,
  .result-card,
  .login-card,
  .upload-card,
  .answer-bar,
  .q-table,
  .modal,
  .sheet,
  .share-box,
  .glass {
    background: var(--app-surface-dark) !important;
    color: var(--app-text-dark) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  .nav-bar,
  .bottom-bar {
    background: rgba(28, 28, 30, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  input,
  textarea,
  select,
  .form-input {
    background-color: var(--app-surface-dark-2) !important;
    color: var(--app-text-dark) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #8e8e93 !important;
  }

  .text-gray-500,
  .text-gray-600,
  .text-gray-700,
  .subtitle,
  .meta,
  .form-label {
    color: var(--app-muted-dark) !important;
  }

  .bg-white,
  .bg-gray-50,
  .bg-slate-50 {
    background-color: var(--app-surface-dark) !important;
  }

  .filter-bar,
  .tab-bar,
  .upload-area,
  .slot-upload,
  .stats-grid > *,
  .stat-box {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }

  .filter-tag.active,
  .tab.active {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}