/* Controls stay usable with touch, mouse, zoom and an open software keyboard. */
:root { --study-toolbar: 64px; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; }
input, textarea, select, .search-bar input { font-size: 16px !important; }
button, [role="button"], [onclick], .tab-item {
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
button { font-family: inherit; cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid #2563eb; outline-offset: 3px;
}
button:active { opacity: .8; }
.app { min-height: 100dvh; }
.study-toolbar {
  position: sticky; top: 0; z-index: 450; min-height: var(--study-toolbar);
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 14px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.study-toolbar strong { display: block; color: #18324b; font-size: 16px; }
.study-toolbar small { display: block; color: #64748b; margin-top: 3px; font-size: 12px; }
.study-toolbar-actions { display: flex; align-items: center; gap: 5px; }
.study-toolbar button, .study-secondary {
  min-height: 44px; padding: 8px 12px; border: 1px solid #d9e2ec; border-radius: 9px;
  color: #334155; background: #fff; font-size: 13px; white-space: nowrap;
}
.study-toolbar #study-sync { border: 0; padding: 6px; font-size: 12px; color: #22714b; }
.study-toolbar #study-sync[data-error="true"] { color: #a64512; }
.study-toolbar .resume-button { background: #eff6ff; border-color: #cddffb; color: #1e40af; }
.top-header { top: var(--study-toolbar); }
.progress-bar { top: var(--study-toolbar); }
.quiz-player { top: var(--study-toolbar); padding-bottom: calc(88px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.quiz-question-area, .quiz-player > .quiz-nav, .quiz-player > .quiz-player-header { max-width: 840px; margin-inline: auto; width: 100%; }
.quiz-question-card { overflow-wrap: anywhere; }
.quiz-option { min-height: 48px; }
.quiz-back-btn, .font-btn { min-width: 38px; min-height: 38px; }
.tab-item { min-height: 48px; }
.study-source { margin: 18px 16px; padding: 14px 0; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 12px; line-height: 1.8; }
.study-source a { text-decoration: underline; }
.study-dialog { border: 1px solid #d9e2ec; border-radius: 18px; width: min(620px,calc(100% - 24px)); max-height: 88dvh; padding: 0; color: #1e293b; background: white; margin: auto; }
.study-dialog::backdrop { background: #0f172a70; }
.study-dialog-header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 14px 18px; z-index: 1; }
.study-dialog h2 { margin: 0; font-size: 18px; }
.study-dialog-body { padding: 18px; }
.study-dialog p { margin: 0 0 12px; }
.study-dialog h3 { font-size: 15px; margin: 22px 0 12px; }
.study-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.study-dialog label { display: block; font-size: 14px; margin: 12px 0 5px; }
.study-dialog input:not([type="file"]) { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; }
.study-dialog .study-primary { margin-top: 12px; }
.study-dialog .form-message { color: #9a3412; font-size: 13px; white-space: pre-wrap; }
.study-history-item { border-bottom: 1px solid #edf1f5; padding: 12px 0; }
.study-history-item p { margin: 5px 0 0; line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; }
.study-history-item small { color: #64748b; font-size: 12px; }
.study-history-item[data-correct="true"] small { color: #22714b; }
.study-primary { min-height: 46px; border: none; border-radius: 9px; background: #245bc4; color: white; padding: 10px 18px; font-size: 15px; font-weight: 600; }
.study-primary:disabled { opacity: .6; cursor: wait; }
.study-saved-summary { color: #64748b; font-size: 13px; }
.login-body { background: #f5f7fa; color: #1e293b; min-height: 100dvh; display: grid; place-items: center; padding: max(24px,env(safe-area-inset-top)) 16px; box-sizing: border-box; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.login-card { width: min(100%,400px); box-sizing: border-box; padding: 32px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; }
.login-mark { width: 44px; height: 44px; display: grid; place-items: center; background: #eaf1ff; color: #245bc4; border-radius: 12px; font-weight: 700; margin-bottom: 24px; }
.eyebrow { color: #64748b; font-size: 13px; margin: 0 0 8px; }
.login-card h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 12px; }
.login-description { font-size: 15px; line-height: 1.8; color: #64748b; margin-bottom: 26px; }
.login-card label { display: block; font-size: 14px; margin: 16px 0 8px; }
.login-card input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; min-height: 48px; }
.login-card .study-primary { width: 100%; }
.login-card .form-message { min-height: 18px; font-size: 13px; color: #b42318; margin: 12px 0; }
.login-note { color: #64748b; font-size: 12px; line-height: 1.6; text-align: center; margin: 22px 0 0; }
@media (min-width: 1000px) {
  .app { max-width: 1060px; }
  .study-toolbar { padding-inline: max(24px,calc((100vw - 1060px)/2)); }
  .tab-bar { max-width: 1060px; margin: auto; border-inline: 1px solid #e2e8f0; }
  .quiz-home, .content { max-width: 1060px; margin-inline: auto; }
  .quiz-question-card { padding: 28px; }
  .chapter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 380px) {
  .study-toolbar { gap: 3px; padding-inline: 8px; }
  .study-toolbar button { padding-inline: 7px; }
  .study-toolbar strong { font-size: 14px; }
  .study-toolbar small { font-size: 10px; }
  .study-toolbar #study-sync { font-size: 10px; max-width: 80px; white-space: normal; }
  .login-card { padding: 24px; }
}
@media (hover:hover) and (pointer:fine) {
  .study-toolbar button:hover, .study-secondary:hover { background: #f0f5fb; }
  .study-primary:hover { background: #1d4eaf; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}