/*
 * Sorizava interface foundation — 2026-07-04
 * Purpose: unify the student experience without changing learning, scoring,
 * authentication, or data flows. Loaded after legacy feature styles.
 */

:root {
  --sori-ink: #182235;
  --sori-text: #344054;
  --sori-muted: #667085;
  --sori-subtle: #98a2b3;
  --sori-line: #dfe5ef;
  --sori-line-strong: #cbd5e1;
  --sori-canvas: #f5f7fb;
  --sori-surface: #ffffff;
  --sori-surface-soft: #f8fafc;
  --sori-primary: #5b4be8;
  --sori-primary-strong: #4939d4;
  --sori-primary-soft: #f0edff;
  --sori-primary-line: #d5d0ff;
  --sori-success: #15803d;
  --sori-warning: #b45309;
  --sori-danger: #b42318;
  --sori-sidebar-width: 252px;
  --sori-page-gutter: clamp(20px, 2.4vw, 46px);
  --sori-radius-sm: 10px;
  --sori-radius-md: 14px;
  --sori-radius-lg: 18px;
  --sori-radius-xl: 24px;
  --sori-shadow-xs: 0 1px 2px rgba(16, 24, 40, .03);
  --sori-shadow-sm: 0 8px 24px rgba(16, 24, 40, .06);
}

html {
  min-width: 0;
  background: var(--sori-canvas);
}

html, body, button, input, select, textarea {
  font-family: "Pretendard", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body:has(nav.sidebar) {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--sori-canvas) !important;
  color: var(--sori-text);
  letter-spacing: -0.018em;
}

body:has(nav.sidebar) *,
body:has(nav.sidebar) *::before,
body:has(nav.sidebar) *::after { box-sizing: border-box; }

body:has(nav.sidebar) :focus-visible {
  outline: 3px solid rgba(91, 75, 232, .32);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Shared application shell
   ------------------------------------------------------------- */
body:has(nav.sidebar) nav.sidebar {
  position: fixed !important;
  z-index: 2000 !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--sori-sidebar-width) !important;
  min-width: var(--sori-sidebar-width) !important;
  max-width: var(--sori-sidebar-width) !important;
  height: 100vh !important;
  height: 100dvh !important;
  gap: 0 !important;
  padding: 16px 12px 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--sori-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 10px 0 30px rgba(15, 23, 42, .045) !important;
  color: var(--sori-text) !important;
}

body:has(nav.sidebar) nav.sidebar .sidebar-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 2px 9px 11px !important;
}

body:has(nav.sidebar) nav.sidebar .logo {
  display: flex !important;
  align-items: center !important;
  min-height: 28px !important;
  margin: 0 !important;
  color: var(--sori-ink) !important;
  font-size: .97rem !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
}

body:has(nav.sidebar) nav.sidebar .logo::first-letter { color: var(--sori-primary) !important; }

body:has(nav.sidebar) nav.sidebar .sidebar-close-btn {
  display: none !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid var(--sori-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--sori-text) !important;
  font-size: 1.375rem !important;
  line-height: 1 !important;
}

body:has(nav.sidebar) nav.sidebar .sidebar-study-time-card {
  display: grid !important;
  gap: 4px !important;
  margin: 0 4px 12px !important;
  padding: 12px 13px !important;
  border: 1px solid var(--sori-line) !important;
  border-radius: var(--sori-radius-md) !important;
  background: var(--sori-surface-soft) !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) nav.sidebar .study-time-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: var(--sori-muted) !important;
  font-size: .73rem !important;
  font-weight: 800 !important;
}

body:has(nav.sidebar) nav.sidebar .study-time-card-head em { color: var(--sori-primary) !important; font-style: normal !important; }
body:has(nav.sidebar) nav.sidebar .sidebar-study-time-card strong { color: var(--sori-ink) !important; font-size: 1.45rem !important; line-height: 1.1 !important; letter-spacing: -.06em !important; }
body:has(nav.sidebar) nav.sidebar .sidebar-study-time-card small { color: var(--sori-muted) !important; font-size: .7rem !important; }
body:has(nav.sidebar) nav.sidebar .sidebar-study-time-card small b { color: var(--sori-text) !important; }
body:has(nav.sidebar) nav.sidebar .sidebar-study-time-card.is-active { border-color: var(--sori-primary-line) !important; background: #faf9ff !important; }

body:has(nav.sidebar) nav.sidebar .nav-list.nav-groups {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px 10px !important;
  overflow: auto !important;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-width: thin;
}

body:has(nav.sidebar) nav.sidebar .nav-section {
  display: block !important;
  margin: 0 0 9px !important;
  padding: 0 0 9px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid #edf0f5 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) nav.sidebar .nav-section:last-child { border-bottom: 0 !important; }
body:has(nav.sidebar) nav.sidebar .nav-section summary { list-style: none !important; }
body:has(nav.sidebar) nav.sidebar .nav-section summary::-webkit-details-marker { display: none !important; }

body:has(nav.sidebar) nav.sidebar .nav-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px 9px 8px !important;
  color: var(--sori-subtle) !important;
  background: transparent !important;
  font-size: .7rem !important;
  font-weight: 900 !important;
  letter-spacing: .035em !important;
  line-height: 1.2 !important;
}

body:has(nav.sidebar) nav.sidebar .nav-section[open] .nav-section-title { color: var(--sori-muted) !important; }
body:has(nav.sidebar) nav.sidebar .nav-section-arrow { color: #b3bdca !important; font-size: 0.8125rem !important; transition: transform .16s ease !important; }
body:has(nav.sidebar) nav.sidebar .nav-section[open] .nav-section-arrow { transform: rotate(180deg) !important; }

body:has(nav.sidebar) nav.sidebar .nav-section-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(nav.sidebar) nav.sidebar .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--sori-text) !important;
  font-size: .87rem !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}

body:has(nav.sidebar) nav.sidebar .nav-item::before {
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 3px !important;
  content: "" !important;
  border-radius: 0 99px 99px 0 !important;
  background: transparent !important;
}

body:has(nav.sidebar) nav.sidebar .nav-item:hover,
body:has(nav.sidebar) nav.sidebar .nav-item:focus-visible {
  border-color: transparent !important;
  background: #f5f4ff !important;
  color: var(--sori-primary-strong) !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) nav.sidebar .nav-item:hover::before,
body:has(nav.sidebar) nav.sidebar .nav-item:focus-visible::before { background: var(--sori-primary) !important; }

body:has(nav.sidebar) nav.sidebar .nav-item.active {
  border-color: var(--sori-primary-line) !important;
  background: var(--sori-primary-soft) !important;
  color: var(--sori-primary-strong) !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) nav.sidebar .nav-item.active::before { background: var(--sori-primary) !important; }
body:has(nav.sidebar) nav.sidebar .nav-icon { width: 21px !important; min-width: 21px !important; height: 21px !important; color: currentColor !important; font-size: .94rem !important; }
body:has(nav.sidebar) nav.sidebar .nav-text { min-width: 0 !important; color: currentColor !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body:has(nav.sidebar) nav.sidebar .nav-item.active .nav-icon,
body:has(nav.sidebar) nav.sidebar .nav-item.active .nav-text { color: var(--sori-primary-strong) !important; }

body:has(nav.sidebar) nav.sidebar .sidebar-footer {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 11px 4px 1px !important;
  border-top: 1px solid #edf0f5 !important;
}

body:has(nav.sidebar) nav.sidebar .profile-card,
body:has(nav.sidebar) nav.sidebar .admin-trigger {
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--sori-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) nav.sidebar .profile-card { display: flex !important; align-items: center !important; gap: 9px !important; min-height: 52px !important; padding: 8px !important; }
body:has(nav.sidebar) nav.sidebar .profile-card:hover,
body:has(nav.sidebar) nav.sidebar .admin-trigger:hover { border-color: var(--sori-primary-line) !important; background: #faf9ff !important; }
body:has(nav.sidebar) nav.sidebar .avatar { display: grid !important; place-items: center !important; width: 32px !important; min-width: 32px !important; height: 32px !important; border-radius: 10px !important; background: #ddd9ff !important; color: var(--sori-primary-strong) !important; font-size: .78rem !important; font-weight: 900 !important; }
body:has(nav.sidebar) nav.sidebar .profile-name { color: var(--sori-ink) !important; font-size: .82rem !important; font-weight: 800 !important; }
body:has(nav.sidebar) nav.sidebar .profile-action { color: var(--sori-muted) !important; font-size: .7rem !important; }
body:has(nav.sidebar) nav.sidebar .admin-trigger { min-height: 36px !important; padding: 8px 10px !important; color: var(--sori-text) !important; font-size: .76rem !important; font-weight: 800 !important; }

@media (min-width: 901px) {
  body:has(nav.sidebar) nav.sidebar { transform: translateX(0) !important; }

  body:has(nav.sidebar) > .main-content,
  body:has(nav.sidebar) #app-wrapper > .main-content,
  body:has(nav.sidebar) #app-wrapper > .unlock-main,
  body:has(nav.sidebar) .main-content,
  body:has(nav.sidebar) .unlock-main {
    width: calc(100vw - var(--sori-sidebar-width)) !important;
    max-width: calc(100vw - var(--sori-sidebar-width)) !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin-left: var(--sori-sidebar-width) !important;
    padding: 28px var(--sori-page-gutter) 42px !important;
  }

  body:has(nav.sidebar) .main-content.portal-main { padding-top: 26px !important; }
  body:has(nav.sidebar) .mobile-menu-btn { display: none !important; }
}

/* -------------------------------------------------------------
   Shared content hierarchy and controls
   ------------------------------------------------------------- */
body:has(nav.sidebar) .main-content > :first-child { margin-top: 0 !important; }

body:has(nav.sidebar) .page-header,
body:has(nav.sidebar) .portal-topbar,
body:has(nav.sidebar) .ai-room-clean-header,
body:has(nav.sidebar) .my-clean-header,
body:has(nav.sidebar) .sparta-page-header,
body:has(nav.sidebar) .toksori-single-header,
body:has(nav.sidebar) .exam-v18-header,
body:has(nav.sidebar) .unlock-header,
body:has(nav.sidebar) .measure-card-header {
  border-color: var(--sori-line) !important;
  background: var(--sori-surface) !important;
  box-shadow: var(--sori-shadow-xs) !important;
}

body:has(nav.sidebar) .page-header,
body:has(nav.sidebar) .portal-topbar,
body:has(nav.sidebar) .ai-room-clean-header,
body:has(nav.sidebar) .my-clean-header,
body:has(nav.sidebar) .sparta-page-header,
body:has(nav.sidebar) .toksori-single-header,
body:has(nav.sidebar) .exam-v18-header,
body:has(nav.sidebar) .unlock-header {
  border-radius: var(--sori-radius-lg) !important;
}

body:has(nav.sidebar) h1,
body:has(nav.sidebar) h2,
body:has(nav.sidebar) h3,
body:has(nav.sidebar) h4 { color: var(--sori-ink) !important; letter-spacing: -.045em !important; }

/* 로그인 화면 좌측 타이틀은 흰색 유지 */
body:has(nav.sidebar) .login-art h2,
.login-art h2,
.login-art .login-art-title { color: #ffffff !important; }

body:has(nav.sidebar) .page-title h1,
body:has(nav.sidebar) .page-title h2,
body:has(nav.sidebar) .portal-topbar h1,
body:has(nav.sidebar) .portal-topbar h2,
body:has(nav.sidebar) .ai-room-clean-header h1,
body:has(nav.sidebar) .ai-room-clean-header h2,
body:has(nav.sidebar) .sparta-page-header h1,
body:has(nav.sidebar) .sparta-page-header h2,
body:has(nav.sidebar) .toksori-single-title h2,
body:has(nav.sidebar) .measure-title-area h2 {
  margin: 0 !important;
  color: var(--sori-ink) !important;
  font-size: clamp(1.45rem, 1.6vw, 2rem) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

body:has(nav.sidebar) .page-title p,
body:has(nav.sidebar) .portal-topbar p,
body:has(nav.sidebar) .ai-room-clean-header p,
body:has(nav.sidebar) .sparta-page-header p,
body:has(nav.sidebar) .toksori-single-title p,
body:has(nav.sidebar) .measure-title-area p { color: var(--sori-muted) !important; font-size: .92rem !important; line-height: 1.55 !important; }

body:has(nav.sidebar) button,
body:has(nav.sidebar) input,
body:has(nav.sidebar) select,
body:has(nav.sidebar) textarea { font: inherit !important; }

body:has(nav.sidebar) .btn-primary,
body:has(nav.sidebar) .portal-btn.primary,
body:has(nav.sidebar) .primary-btn,
body:has(nav.sidebar) .start-practice-btn.primary,
body:has(nav.sidebar) .grade-action-btn,
body:has(nav.sidebar) .exam-v18-primary,
body:has(nav.sidebar) .btn-start,
body:has(nav.sidebar) .btn-primary:not(.sorizava-ai-fab) {
  min-height: 42px !important;
  border: 1px solid var(--sori-primary) !important;
  border-radius: 10px !important;
  background: var(--sori-primary) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
}

body:has(nav.sidebar) .btn-primary:hover,
body:has(nav.sidebar) .portal-btn.primary:hover,
body:has(nav.sidebar) .primary-btn:hover,
body:has(nav.sidebar) .start-practice-btn.primary:hover,
body:has(nav.sidebar) .grade-action-btn:hover,
body:has(nav.sidebar) .exam-v18-primary:hover,
body:has(nav.sidebar) .btn-start:hover { background: var(--sori-primary-strong) !important; border-color: var(--sori-primary-strong) !important; transform: none !important; }

body:has(nav.sidebar) .btn-secondary,
body:has(nav.sidebar) .btn-ghost,
body:has(nav.sidebar) .portal-btn.secondary,
body:has(nav.sidebar) .secondary-btn,
body:has(nav.sidebar) .ghost-btn,
body:has(nav.sidebar) .btn-clean,
body:has(nav.sidebar) .exam-v18-secondary,
body:has(nav.sidebar) .btn-subtle,
body:has(nav.sidebar) .start-practice-btn.secondary {
  min-height: 40px !important;
  border: 1px solid var(--sori-line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--sori-text) !important;
  font-size: .86rem !important;
  font-weight: 760 !important;
}

body:has(nav.sidebar) .btn-secondary:hover,
body:has(nav.sidebar) .btn-ghost:hover,
body:has(nav.sidebar) .portal-btn.secondary:hover,
body:has(nav.sidebar) .secondary-btn:hover,
body:has(nav.sidebar) .ghost-btn:hover,
body:has(nav.sidebar) .btn-clean:hover,
body:has(nav.sidebar) .exam-v18-secondary:hover,
body:has(nav.sidebar) .btn-subtle:hover,
body:has(nav.sidebar) .start-practice-btn.secondary:hover { border-color: var(--sori-primary-line) !important; background: #faf9ff !important; color: var(--sori-primary-strong) !important; }

body:has(nav.sidebar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:has(nav.sidebar) select,
body:has(nav.sidebar) textarea {
  border-color: var(--sori-line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--sori-ink) !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
body:has(nav.sidebar) select:focus,
body:has(nav.sidebar) textarea:focus { border-color: var(--sori-primary) !important; box-shadow: 0 0 0 3px rgba(91, 75, 232, .12) !important; }

/* ── 로그인 화면(#login-wrapper)은 전역 리셋에서 제외: 원본 디자인 유지 ── */
body:has(nav.sidebar) #login-wrapper .inp-box {
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  background: #F8F9FA !important;
  box-shadow: none !important;
  color: #2D3436 !important;
  font-size: 1rem !important;
}
body:has(nav.sidebar) #login-wrapper .inp-box:focus {
  background: #fff !important;
  border-color: var(--primary, #6C5CE7) !important;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, .12) !important;
}
body:has(nav.sidebar) #login-wrapper .btn-login {
  min-height: 64px !important;
  border: none !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #6C5CE7 0%, #8E7CF8 100%) !important;
  box-shadow: 0 12px 24px rgba(108, 92, 231, .32) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  padding: 18px 20px !important;
}
body:has(nav.sidebar) #login-wrapper .btn-login:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 16px 32px rgba(108, 92, 231, .42) !important;
}

body:has(nav.sidebar) .count-badge,
body:has(nav.sidebar) .portal-chip,
body:has(nav.sidebar) .mode-chip,
body:has(nav.sidebar) .tier-badge,
body:has(nav.sidebar) .date-badge {
  border: 1px solid var(--sori-line) !important;
  border-radius: 999px !important;
  background: var(--sori-surface-soft) !important;
  box-shadow: none !important;
  color: var(--sori-muted) !important;
  font-weight: 750 !important;
}

body:has(nav.sidebar) .sorizava-ai-widget { z-index: 1900 !important; }
body:has(nav.sidebar) .sorizava-ai-fab { width: auto !important; min-width: 52px !important; height: 52px !important; padding: 0 14px !important; border: 1px solid rgba(255,255,255,.85) !important; border-radius: 14px !important; background: var(--sori-primary) !important; box-shadow: 0 12px 28px rgba(91,75,232,.24) !important; }
body:has(nav.sidebar) .sorizava-ai-fab:hover { background: var(--sori-primary-strong) !important; transform: translateY(-1px) !important; }

/* -------------------------------------------------------------
   Dashboard, feedback and my page
   ------------------------------------------------------------- */
body:has(nav.sidebar) .portal-page,
body:has(nav.sidebar) .ai-teacher-room-page,
body:has(nav.sidebar) .mypage-page { max-width: none !important; margin: 0 !important; }

body:has(nav.sidebar) .dashboard-home-main,
body:has(nav.sidebar) .dashboard-course-main,
body:has(nav.sidebar) .dashboard-main-grid,
body:has(nav.sidebar) .ai-room-workbench,
body:has(nav.sidebar) .mypage-layout,
body:has(nav.sidebar) .my-summary-layout { gap: 18px !important; }

body:has(nav.sidebar) .portal-card,
body:has(nav.sidebar) .stat-card,
body:has(nav.sidebar) .dashboard-ai-teacher-entry,
body:has(nav.sidebar) .ai-coaching-card,
body:has(nav.sidebar) .ai-learning-chart-card,
body:has(nav.sidebar) .ai-learning-error-card,
body:has(nav.sidebar) .ai-learning-prescription-card,
body:has(nav.sidebar) .ai-room-create-card,
body:has(nav.sidebar) .ai-room-results-card,
body:has(nav.sidebar) .my-summary-hero,
body:has(nav.sidebar) .mypage-sidebar-panel,
body:has(nav.sidebar) .my-info-card,
body:has(nav.sidebar) .my-course-card {
  border: 1px solid var(--sori-line) !important;
  border-radius: var(--sori-radius-lg) !important;
  background: var(--sori-surface) !important;
  box-shadow: var(--sori-shadow-xs) !important;
}

body:has(nav.sidebar) .dashboard-ai-teacher-entry,
body:has(nav.sidebar) .ai-room-create-card { background: linear-gradient(180deg, #fff 0%, #faf9ff 100%) !important; }

body:has(nav.sidebar) .stat-card { min-height: 118px !important; }
body:has(nav.sidebar) .stat-card:hover,
body:has(nav.sidebar) .portal-card:hover { transform: none !important; border-color: var(--sori-primary-line) !important; box-shadow: var(--sori-shadow-sm) !important; }

/* -------------------------------------------------------------
   Study room: browse -> select -> practice hierarchy
   ------------------------------------------------------------- */
body.ui-intermediate .main-content { display: block !important; }

body.ui-intermediate .page-header {
  display: grid !important;
  grid-template-columns: minmax(220px, .9fr) minmax(460px, 1.45fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 22px 24px !important;
}

body.ui-intermediate .material-page-title { display: flex !important; align-items: center !important; min-width: 0 !important; }
body.ui-intermediate .page-title-copy p { margin: 8px 0 0 !important; }

body.ui-intermediate .learning-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.ui-intermediate .summary-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 76px !important;
  padding: 13px !important;
  border: 1px solid var(--sori-line) !important;
  border-radius: var(--sori-radius-md) !important;
  background: var(--sori-surface-soft) !important;
  box-shadow: none !important;
}
body.ui-intermediate .summary-card strong { color: var(--sori-ink) !important; font-size: 1.16rem !important; }
body.ui-intermediate .summary-card span:not(.summary-icon) { color: var(--sori-muted) !important; font-size: .76rem !important; }
body.ui-intermediate .summary-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 9px !important; background: #eae8ff !important; color: var(--sori-primary) !important; }

body.ui-intermediate .material-library-screen { display: grid !important; gap: 14px !important; }
body.ui-intermediate .material-filter-panel,
body.ui-intermediate .material-list-card,
body.ui-intermediate .selected-material-bar,
body.ui-intermediate .practice-current-card,
body.ui-intermediate .practice-mode-card,
body.ui-intermediate .paragraph-card,
body.ui-intermediate .source-panel,
body.ui-intermediate .practice-card {
  border: 1px solid var(--sori-line) !important;
  border-radius: var(--sori-radius-lg) !important;
  background: var(--sori-surface) !important;
  box-shadow: var(--sori-shadow-xs) !important;
}

body.ui-intermediate .material-filter-panel {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.2fr) minmax(180px, .65fr) minmax(200px, .75fr) minmax(260px, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.ui-intermediate .filter-row { display: grid !important; align-content: center !important; gap: 8px !important; min-height: 92px !important; margin: 0 !important; padding: 15px 17px !important; border-right: 1px solid #edf0f5 !important; }
body.ui-intermediate .filter-row:last-child { border-right: 0 !important; }
body.ui-intermediate .filter-label { color: var(--sori-muted) !important; font-size: .73rem !important; font-weight: 800 !important; }
body.ui-intermediate .filter-label strong { color: var(--sori-muted) !important; font-size: inherit !important; }
body.ui-intermediate .level-list,
body.ui-intermediate .type-list,
body.ui-intermediate .difficulty-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
body.ui-intermediate .level-btn,
body.ui-intermediate .type-filter-btn,
body.ui-intermediate .difficulty-filter-btn {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--sori-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--sori-muted) !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}
body.ui-intermediate .level-btn.active,
body.ui-intermediate .type-filter-btn.active,
body.ui-intermediate .difficulty-filter-btn.active { border-color: var(--sori-primary-line) !important; background: var(--sori-primary-soft) !important; color: var(--sori-primary-strong) !important; }
body.ui-intermediate .search-filter-row { grid-template-columns: minmax(0, 1fr) auto !important; align-items: end !important; }
body.ui-intermediate .material-search-wrap { min-width: 0 !important; }
body.ui-intermediate .material-search-wrap input { min-height: 38px !important; padding-left: 34px !important; font-size: .82rem !important; }
body.ui-intermediate .search-clear-btn { min-height: 38px !important; padding: 7px 10px !important; }

body.ui-intermediate .material-list-card { overflow: hidden !important; }
body.ui-intermediate .material-list-head { padding: 18px 20px 13px !important; border-bottom: 1px solid #edf0f5 !important; }
body.ui-intermediate .material-list-title-wrap strong { color: var(--sori-ink) !important; font-size: .98rem !important; }
body.ui-intermediate .material-table-wrap { overflow-x: auto !important; }
body.ui-intermediate .material-table { min-width: 720px !important; border-collapse: collapse !important; }
body.ui-intermediate .material-table th { padding: 11px 18px !important; background: var(--sori-surface-soft) !important; color: var(--sori-muted) !important; font-size: .72rem !important; font-weight: 800 !important; }
body.ui-intermediate .material-table td { padding: 14px 18px !important; border-top: 1px solid #edf0f5 !important; color: var(--sori-text) !important; font-size: .84rem !important; }
body.ui-intermediate .material-table tbody tr:hover { background: #fbfbff !important; }
body.ui-intermediate .material-pager { padding: 12px 18px !important; border-top: 1px solid #edf0f5 !important; }

body.ui-intermediate .selected-material-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 18px !important;
  background: #fff !important;
}
body.ui-intermediate .selected-label { color: var(--sori-muted) !important; font-size: .72rem !important; font-weight: 800 !important; }
body.ui-intermediate .selected-material-copy strong { display: block !important; margin-top: 3px !important; color: var(--sori-ink) !important; font-size: .96rem !important; }
body.ui-intermediate .selected-accuracy-block { min-width: 86px !important; padding-left: 16px !important; border-left: 1px solid #edf0f5 !important; }
body.ui-intermediate .selected-accuracy-block span { display: block !important; color: var(--sori-muted) !important; font-size: .7rem !important; }
body.ui-intermediate .selected-accuracy-block b { display: block !important; margin-top: 3px !important; color: var(--sori-ink) !important; font-size: 1rem !important; }
body.ui-intermediate .selected-start-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px !important; }
body.ui-intermediate .start-practice-btn { min-height: 42px !important; padding: 8px 13px !important; }

body.ui-intermediate .practice-screen { display: grid !important; gap: 14px !important; }
body.ui-intermediate .practice-current-card { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 16px 18px !important; }
body.ui-intermediate .practice-current-main span { color: var(--sori-muted) !important; font-size: .74rem !important; }
body.ui-intermediate .practice-current-main strong { display: block !important; margin-top: 3px !important; color: var(--sori-ink) !important; font-size: 1rem !important; }
body.ui-intermediate .practice-mode-card { display: flex !important; align-items: center !important; gap: 16px !important; padding: 13px 18px !important; }
body.ui-intermediate .mode-title { min-width: 112px !important; color: var(--sori-muted) !important; font-size: .78rem !important; font-weight: 800 !important; }
body.ui-intermediate .mode-button-grid { display: flex !important; gap: 8px !important; }
body.ui-intermediate .mode-btn { min-height: 38px !important; padding: 8px 12px !important; border: 1px solid var(--sori-line) !important; border-radius: 9px !important; background: #fff !important; color: var(--sori-muted) !important; font-size: .84rem !important; font-weight: 760 !important; }
body.ui-intermediate .mode-btn.active { border-color: var(--sori-primary-line) !important; background: var(--sori-primary-soft) !important; color: var(--sori-primary-strong) !important; }
body.ui-intermediate .paragraph-card { padding: 16px 18px !important; }
body.ui-intermediate .paragraph-head { margin-bottom: 12px !important; }
body.ui-intermediate .paragraph-buttons { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
body.ui-intermediate .paragraph-btn { min-height: 34px !important; border-radius: 8px !important; }

body.ui-intermediate .study-layout { display: grid !important; grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.22fr) !important; gap: 14px !important; align-items: stretch !important; }
body.ui-intermediate .source-panel,
body.ui-intermediate .practice-card { min-width: 0 !important; padding: 18px !important; }
body.ui-intermediate .panel-top { min-height: 38px !important; margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid #edf0f5 !important; }
body.ui-intermediate .panel-title { color: var(--sori-ink) !important; font-size: .95rem !important; font-weight: 850 !important; }
body.ui-intermediate .pace-status-line { margin: 0 0 12px !important; padding: 10px 12px !important; border: 1px solid #e8e6ff !important; border-radius: 10px !important; background: #fbfaff !important; color: var(--sori-muted) !important; font-size: .78rem !important; }
body.ui-intermediate .source-readonly { min-height: 440px !important; max-height: 64vh !important; padding: 16px !important; border: 1px solid var(--sori-line) !important; border-radius: 12px !important; background: #fbfcfe !important; color: var(--sori-text) !important; font-size: 1rem !important; line-height: 1.85 !important; }
body.ui-intermediate .practice-card { display: flex !important; flex-direction: column !important; }
body.ui-intermediate .input-stat-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 12px !important; }
body.ui-intermediate .input-stat-grid .stat-card { min-height: 72px !important; padding: 11px !important; border: 1px solid var(--sori-line) !important; border-radius: 11px !important; background: var(--sori-surface-soft) !important; box-shadow: none !important; }
body.ui-intermediate .stat-label { color: var(--sori-muted) !important; font-size: .7rem !important; }
body.ui-intermediate .stat-value { color: var(--sori-ink) !important; font-size: 1.05rem !important; font-weight: 850 !important; }
body.ui-intermediate .typing-area,
body.ui-intermediate .practice-editor { flex: 1 1 auto !important; min-height: 410px !important; }
body.ui-intermediate textarea { line-height: 1.75 !important; }

body.ui-intermediate:has(.practice-screen:not([hidden])) .sorizava-ai-widget { display: none !important; }

/* -------------------------------------------------------------
   Focus tools: put input before decoration
   ------------------------------------------------------------- */
body.measure-page .measure-card,
body.sparta-page .sparta-workspace,
body:has(nav.sidebar) .toksori-single-card,
body:has(nav.sidebar) .editorial-hero,
body:has(nav.sidebar) .practice-flow-panel,
body:has(nav.sidebar) .dictionary-layout,
body:has(nav.sidebar) .exam-v18-card,
body:has(nav.sidebar) .unlock-page,
body:has(nav.sidebar) .card-box,
body:has(nav.sidebar) .podium-card {
  border: 1px solid var(--sori-line) !important;
  border-radius: var(--sori-radius-lg) !important;
  background: var(--sori-surface) !important;
  box-shadow: var(--sori-shadow-xs) !important;
}

body.measure-page .measure-card,
body.sparta-page .sparta-workspace,
body:has(nav.sidebar) .toksori-single-card { max-width: none !important; }

body.measure-page .measure-card { padding: 0 !important; overflow: hidden !important; }
body.measure-page .measure-card-header { padding: 20px 22px !important; border-bottom: 1px solid #edf0f5 !important; }
body.measure-page .measure-card-body,
body.measure-page .measure-main > .measure-card > :not(.measure-card-header) { padding-inline: 22px !important; }
body.measure-page .measure-main { display: block !important; }

body.sparta-page .sparta-page-shell { display: grid !important; gap: 14px !important; max-width: none !important; }
body.sparta-page .sparta-page-header { margin: 0 !important; padding: 20px 22px !important; }
body.sparta-page .sparta-workspace { padding: 20px 22px !important; }
body.sparta-page .sparta-stats-row { gap: 10px !important; }
body.sparta-page .stat-item { border: 1px solid var(--sori-line) !important; border-radius: 12px !important; background: var(--sori-surface-soft) !important; box-shadow: none !important; }

body:has(nav.sidebar) .toksori-single-page { display: grid !important; gap: 14px !important; }
body:has(nav.sidebar) .toksori-single-card { padding: 22px !important; }
body:has(nav.sidebar) .toksori-single-header { margin: -22px -22px 18px !important; padding: 20px 22px !important; }
body:has(nav.sidebar) .toksori-single-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 14px !important; }
body:has(nav.sidebar) .guide-step { min-height: 78px !important; padding: 12px !important; border: 1px solid var(--sori-line) !important; border-radius: 12px !important; background: var(--sori-surface-soft) !important; box-shadow: none !important; }
body:has(nav.sidebar) .guide-step.is-active { border-color: var(--sori-primary-line) !important; background: var(--sori-primary-soft) !important; }
body:has(nav.sidebar) .toksori-single-setup { display: grid !important; grid-template-columns: minmax(260px, .8fr) minmax(330px, 1.2fr) !important; gap: 12px !important; margin-bottom: 14px !important; }
body:has(nav.sidebar) .setup-panel,
body:has(nav.sidebar) .audio-player-card,
body:has(nav.sidebar) .toksori-editor-panel,
body:has(nav.sidebar) .advanced-options,
body:has(nav.sidebar) .history-panel { border: 1px solid var(--sori-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; }
body:has(nav.sidebar) .toksori-editors-grid { gap: 12px !important; }
body:has(nav.sidebar) .styled-textarea { min-height: 360px !important; resize: vertical !important; }
body:has(nav.sidebar) .grade-action-btn { width: 100% !important; min-height: 50px !important; margin: 14px 0 !important; font-size: .96rem !important; }

body:has(nav.sidebar) .editorial-hero,
body:has(nav.sidebar) .practice-flow-panel,
body:has(nav.sidebar) .dictionary-layout,
body:has(nav.sidebar) .exam-v18-card { overflow: hidden !important; }
body:has(nav.sidebar) .source-card,
body:has(nav.sidebar) .typing-card,
body:has(nav.sidebar) .editor-card,
body:has(nav.sidebar) .control-panel,
body:has(nav.sidebar) .panel,
body:has(nav.sidebar) .keyboard-panel,
body:has(nav.sidebar) .table-panel,
body:has(nav.sidebar) .exam-v18-section,
body:has(nav.sidebar) .unlock-test-card,
body:has(nav.sidebar) .unlock-status-card {
  border: 1px solid var(--sori-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body:has(nav.sidebar) .typing-card textarea,
body:has(nav.sidebar) .editor-card textarea,
body:has(nav.sidebar) .textarea-frame textarea { min-height: 360px !important; }

body:has(nav.sidebar) .exam-v18-card { padding: 22px !important; }
body:has(nav.sidebar) .exam-v18-header { margin: -22px -22px 18px !important; padding: 20px 22px !important; }
body:has(nav.sidebar) .exam-v18-stats { gap: 9px !important; }
body:has(nav.sidebar) .exam-v18-stat-card { border: 1px solid var(--sori-line) !important; border-radius: 12px !important; background: var(--sori-surface-soft) !important; box-shadow: none !important; }

body:has(nav.sidebar) .unlock-header { padding: 20px 22px !important; }
body:has(nav.sidebar) .unlock-test-card { padding: 20px !important; }

/* Remove floating coach from the concentrated timer / test workspaces. */
body.sparta-page .sorizava-ai-widget,
body.measure-page .sorizava-ai-widget,
body:has(nav.sidebar) .exam-v18-card ~ .sorizava-ai-widget { display: none !important; }

/* -------------------------------------------------------------
   Responsive: no fixed desktop canvas; support touch first
   ------------------------------------------------------------- */
@media (max-width: 1180px) {
  body.ui-intermediate .page-header { grid-template-columns: 1fr !important; }
  body.ui-intermediate .material-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ui-intermediate .filter-row:nth-child(2) { border-right: 0 !important; }
  body.ui-intermediate .filter-row:nth-child(-n+2) { border-bottom: 1px solid #edf0f5 !important; }
  body.ui-intermediate .study-layout { grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr) !important; }
  body:has(nav.sidebar) .toksori-single-setup { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  body:has(nav.sidebar) nav.sidebar {
    width: min(86vw, 330px) !important;
    min-width: min(86vw, 330px) !important;
    max-width: min(86vw, 330px) !important;
    padding: 15px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-106%) !important;
    transition: transform .22s ease !important;
  }
  body:has(nav.sidebar) nav.sidebar.active { transform: translateX(0) !important; }
  body:has(nav.sidebar) nav.sidebar .sidebar-close-btn { display: inline-grid !important; place-items: center !important; }
  body:has(nav.sidebar) .sidebar-overlay { z-index: 1950 !important; }
  body:has(nav.sidebar) .sidebar-overlay.active { background: rgba(15, 23, 42, .38) !important; }
  body:has(nav.sidebar) .mobile-menu-btn {
    position: fixed !important;
    z-index: 1850 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--sori-line) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.95) !important;
    color: var(--sori-ink) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .11) !important;
    font-size: 1.1rem !important;
  }
  body:has(nav.sidebar) > .main-content,
  body:has(nav.sidebar) #app-wrapper > .main-content,
  body:has(nav.sidebar) #app-wrapper > .unlock-main,
  body:has(nav.sidebar) .main-content,
  body:has(nav.sidebar) .unlock-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin-left: 0 !important;
    padding: 72px 16px calc(26px + env(safe-area-inset-bottom)) !important;
  }
  body:has(nav.sidebar) .page-header,
  body:has(nav.sidebar) .portal-topbar,
  body:has(nav.sidebar) .ai-room-clean-header,
  body:has(nav.sidebar) .my-clean-header,
  body:has(nav.sidebar) .sparta-page-header,
  body:has(nav.sidebar) .toksori-single-header,
  body:has(nav.sidebar) .exam-v18-header,
  body:has(nav.sidebar) .unlock-header { padding: 18px !important; }
  body.ui-intermediate .study-layout { grid-template-columns: 1fr !important; }
  body.ui-intermediate .source-readonly { min-height: 240px !important; max-height: 40vh !important; }
  body:has(nav.sidebar) .sorizava-ai-fab-label { display: none !important; }
  body:has(nav.sidebar) .sorizava-ai-fab { min-width: 52px !important; width: 52px !important; padding: 0 !important; }
}

@media (max-width: 680px) {
  body:has(nav.sidebar) .page-title h1,
  body:has(nav.sidebar) .page-title h2,
  body:has(nav.sidebar) .portal-topbar h1,
  body:has(nav.sidebar) .portal-topbar h2,
  body:has(nav.sidebar) .ai-room-clean-header h1,
  body:has(nav.sidebar) .ai-room-clean-header h2,
  body:has(nav.sidebar) .sparta-page-header h1,
  body:has(nav.sidebar) .sparta-page-header h2,
  body:has(nav.sidebar) .toksori-single-title h2,
  body:has(nav.sidebar) .measure-title-area h2 { font-size: 1.35rem !important; }

  body.ui-intermediate .page-header { gap: 14px !important; padding: 18px !important; }
  body.ui-intermediate .learning-summary { grid-template-columns: 1fr !important; }
  body.ui-intermediate .summary-card { min-height: 62px !important; }
  body.ui-intermediate .material-filter-panel { grid-template-columns: 1fr !important; }
  body.ui-intermediate .filter-row,
  body.ui-intermediate .filter-row:nth-child(2) { min-height: auto !important; border-right: 0 !important; border-bottom: 1px solid #edf0f5 !important; }
  body.ui-intermediate .filter-row:last-child { border-bottom: 0 !important; }
  body.ui-intermediate .search-filter-row { grid-template-columns: minmax(0, 1fr) !important; }
  body.ui-intermediate .search-clear-btn { width: 100% !important; }
  body.ui-intermediate .selected-material-bar { grid-template-columns: 1fr !important; gap: 12px !important; }
  body.ui-intermediate .selected-accuracy-block { min-width: 0 !important; padding: 10px 0 0 !important; border-left: 0 !important; border-top: 1px solid #edf0f5 !important; }
  body.ui-intermediate .selected-start-actions { justify-content: stretch !important; }
  body.ui-intermediate .selected-start-actions > * { flex: 1 1 100% !important; width: 100% !important; }
  body.ui-intermediate .practice-current-card,
  body.ui-intermediate .practice-mode-card { align-items: stretch !important; flex-direction: column !important; }
  body.ui-intermediate .mode-button-grid { width: 100% !important; }
  body.ui-intermediate .mode-btn { flex: 1 1 0 !important; }
  body.ui-intermediate .source-panel,
  body.ui-intermediate .practice-card { padding: 14px !important; }
  body.ui-intermediate .input-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ui-intermediate .typing-area,
  body.ui-intermediate .practice-editor { min-height: 300px !important; }

  body:has(nav.sidebar) .toksori-single-card { padding: 16px !important; }
  body:has(nav.sidebar) .toksori-single-header { margin: -16px -16px 14px !important; padding: 17px !important; }
  body:has(nav.sidebar) .toksori-single-steps { grid-template-columns: 1fr !important; }
  body:has(nav.sidebar) .guide-step { min-height: auto !important; }
  body:has(nav.sidebar) .toksori-editors-grid { grid-template-columns: 1fr !important; }
  body:has(nav.sidebar) .styled-textarea,
  body:has(nav.sidebar) .typing-card textarea,
  body:has(nav.sidebar) .editor-card textarea,
  body:has(nav.sidebar) .textarea-frame textarea { min-height: 250px !important; }
  body:has(nav.sidebar) .exam-v18-card { padding: 16px !important; }
  body:has(nav.sidebar) .exam-v18-header { margin: -16px -16px 14px !important; padding: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(nav.sidebar) *, body:has(nav.sidebar) *::before, body:has(nav.sidebar) *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Preserve semantic visibility states even when a component has a layout rule. */
body:has(nav.sidebar) [hidden] { display: none !important; }