@import url("../../assets/remixicon/remixicon.css");

:root {
  --app-viewport-height: 100dvh;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   语文学科 · 东方雅韵 五套主题系统（深度打磨专版）
   涵盖：材质底纹、装帧边框、文人印章、典籍字体、组件全量覆盖
   100% 纯 CSS 算法渲染，纯本地离线，零网络请求
   ============================================================ */

/* 1. 【墨韵书香 · 徽墨天青】（徽墨沉香 · 砚石温润） */
:root,
html[data-theme="ink_blue"] {
  --primary: #1e3a5f;
  --primary-light: #284b7a;
  --primary-dark: #122238;
  --primary-gradient: linear-gradient(135deg, #1e3a5f 0%, #122238 100%);
  --bg-page: #f4f6fa;
  --bg-pattern: 
    radial-gradient(circle at 12% 18%, rgba(30, 58, 95, 0.038) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(20, 40, 68, 0.042) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(184, 59, 50, 0.015) 0%, transparent 65%);
  --bg-pattern-size: auto;
  --card-bg: #ffffff;
  --card-border: 1px solid #d5dfec;
  --card-shadow: 0 4px 18px rgba(22, 42, 69, 0.05);
  --card-radius: 10px;
  
  --text-main: #1a2736;
  --text-regular: #334155;
  --text-muted: #627285;
  --text-light: #8e9eaf;
  --border-color: #d5dfec;
  --border-subtle: #edf2f7;
  
  --header-bg: linear-gradient(135deg, #142233 0%, #1e3a5f 55%, #102138 100%);
  --header-text: #ffffff;
  --tab-active: #1e3a5f;
  
  --btn-primary-bg: linear-gradient(135deg, #1e3a5f 0%, #162a45 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
  
  /* 语文学科文人印章 & 标签 */
  --seal-color: #b83b32;
  --seal-bg: #fdf3f2;
  --seal-border: 1px solid #e8b0ac;
  --tag-bg: #eef4fb;
  --tag-color: #1e3a5f;
  
  /* 诗词名句流觞笺 */
  --quote-bg: linear-gradient(135deg, #f8fafc 0%, #edf3f9 100%);
  --quote-border: 1px solid #d3e0ee;
  --quote-text: #2c425d;
  
  --success: #16a34a;
  --success-surface: #edf9f1;
  --success-border: #b9dfc6;
  --danger: #b83b32;
  --danger-surface: #fdf3f2;
  --danger-border: #e8b0ac;
  --amber: #cf8325;
  --amber-surface: #fff8e8;
  --amber-border: #efd19d;
  --focus-ring: 0 0 0 3px rgba(30, 58, 95, 0.14);
  
  --font-serif: "Source Han Serif CN", "Noto Serif SC", "Songti SC", "SimSun", "STSong", "STKaiti", "KaiTi", "楷体", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 2. 【松风竹韵 · 翠竹素卷】（自然清朗 · 竹简切角 · 翠绿侧标） */
html[data-theme="bamboo_green"] {
  --primary: #15803d;
  --primary-light: #16a34a;
  --primary-dark: #0f5127;
  --primary-gradient: linear-gradient(135deg, #15803d 0%, #0d291b 100%);
  --bg-page: #edf5f0;
  --bg-pattern: 
    repeating-linear-gradient(90deg, transparent, transparent 46px, rgba(21, 128, 61, 0.035) 47px, rgba(21, 128, 61, 0.035) 48px),
    radial-gradient(circle at 85% 15%, rgba(22, 163, 74, 0.05) 0%, transparent 50%);
  --bg-pattern-size: auto;
  --card-bg: #fdfffe;
  --card-border: 1px solid #cfe0d5;
  --card-shadow: 0 4px 16px rgba(21, 128, 61, 0.06);
  --card-radius: 6px;
  
  --text-main: #11261a;
  --text-regular: #274032;
  --text-muted: #516b5c;
  --text-light: #7d9685;
  --border-color: #cfe0d5;
  --border-subtle: #e2ede6;
  
  --header-bg: linear-gradient(135deg, #0d291b 0%, #15462c 55%, #0a2115 100%);
  --header-text: #ffffff;
  --tab-active: #15803d;
  
  --btn-primary-bg: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
  
  --seal-color: #15803d;
  --seal-bg: #eaf7ee;
  --seal-border: 1px solid #86efac;
  --tag-bg: #eaf7ee;
  --tag-color: #15803d;
  
  --quote-bg: linear-gradient(135deg, #f4faf6 0%, #eaf4ed 100%);
  --quote-border: 1px solid #cfe0d5;
  --quote-text: #164e2a;
  
  --success: #15803d;
  --success-surface: #eaf7ee;
  --success-border: #a7d7b7;
  --danger: #b83b32;
  --danger-surface: #fdf3f2;
  --danger-border: #e8b0ac;
  --amber: #b45309;
  --amber-surface: #fff7e8;
  --amber-border: #eed09b;
  --focus-ring: 0 0 0 3px rgba(21, 128, 61, 0.18);
}

/* 3. 【紫气东来 · 盛唐金石】（盛世重彩 · 雍容华贵 · 鎏金双边） */
html[data-theme="imperial_purple"] {
  --primary: #5a1e36;
  --primary-light: #7c2d4d;
  --primary-dark: #3b1122;
  --primary-gradient: linear-gradient(135deg, #5a1e36 0%, #3b1122 100%);
  --bg-page: #fcf4f6;
  --bg-pattern:
    radial-gradient(circle at 15% 15%, rgba(90, 30, 54, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(217, 119, 6, 0.035) 0%, transparent 50%),
    linear-gradient(135deg, rgba(90, 30, 54, 0.015) 25%, transparent 25%, transparent 50%, rgba(90, 30, 54, 0.015) 50%, rgba(90, 30, 54, 0.015) 75%, transparent 75%, transparent);
  --bg-pattern-size: 36px 36px;
  --card-bg: #ffffff;
  --card-border: 1px solid #ebd0db;
  --card-shadow: 0 5px 20px rgba(90, 30, 54, 0.06), 0 0 0 1px rgba(217, 119, 6, 0.16);
  --card-radius: 14px;
  
  --text-main: #2b0f1b;
  --text-regular: #44222f;
  --text-muted: #73505e;
  --text-light: #9c7687;
  --border-color: #ebd0db;
  --border-subtle: #f5e3ec;
  
  --header-bg: linear-gradient(135deg, #2c0f1b 0%, #4a192d 55%, #220814 100%);
  --header-text: #ffffff;
  --tab-active: #5a1e36;
  
  --btn-primary-bg: linear-gradient(135deg, #7c2d4d 0%, #5a1e36 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 4px 12px rgba(90, 30, 54, 0.25);
  
  --seal-color: #9d174d;
  --seal-bg: #fbf0f4;
  --seal-border: 1px solid #f472b6;
  --tag-bg: #fbf0f4;
  --tag-color: #9d174d;
  
  --quote-bg: linear-gradient(135deg, #fbf2f5 0%, #f6e4eb 100%);
  --quote-border: 1px solid #ebd0db;
  --quote-text: #481a2b;
  
  --success: #16a34a;
  --success-surface: #edf9f1;
  --success-border: #b9dfc6;
  --danger: #b91c1c;
  --danger-surface: #fef2f2;
  --danger-border: #fecaca;
  --amber: #d97706;
  --amber-surface: #fffbeb;
  --amber-border: #fde68a;
  --focus-ring: 0 0 0 3px rgba(90, 30, 54, 0.16);
}

/* 4. 【素笺古韵 · 宋版线装】（澄心暖纸 · 版心虚线 · 质朴刻本） */
html[data-theme="warm_paper"] {
  --primary: #4c3523;
  --primary-light: #6a4b33;
  --primary-dark: #312115;
  --primary-gradient: linear-gradient(135deg, #4c3523 0%, #312115 100%);
  --bg-page: #f6efe2;
  --bg-pattern: 
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(120, 80, 40, 0.038) 29px, rgba(120, 80, 40, 0.038) 30px),
    radial-gradient(circle at 50% 10%, rgba(180, 83, 9, 0.03) 0%, transparent 60%);
  --bg-pattern-size: auto;
  --card-bg: #fdfaf3;
  --card-border: 1px solid #dfcebb;
  --card-shadow: 0 3px 14px rgba(76, 53, 35, 0.06);
  --card-radius: 4px;
  
  --text-main: #291a11;
  --text-regular: #443224;
  --text-muted: #6e5949;
  --text-light: #9e8975;
  --border-color: #dfcebb;
  --border-subtle: #eee3d3;
  
  --header-bg: linear-gradient(135deg, #271c14 0%, #3d2b20 55%, #1f1610 100%);
  --header-text: #ffffff;
  --tab-active: #4c3523;
  
  --btn-primary-bg: linear-gradient(135deg, #6a4b33 0%, #4c3523 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 4px 12px rgba(76, 53, 35, 0.25);
  
  --seal-color: #854d0e;
  --seal-bg: #f7eee0;
  --seal-border: 1px solid #fde047;
  --tag-bg: #f7eee0;
  --tag-color: #854d0e;
  
  --quote-bg: linear-gradient(135deg, #f9f3e7 0%, #f1e6d3 100%);
  --quote-border: 1px solid #dfcebb;
  --quote-text: #413022;
  
  --success: #16a34a;
  --success-surface: #edf9f1;
  --success-border: #b9dfc6;
  --danger: #c2410c;
  --danger-surface: #fff4ed;
  --danger-border: #fed7aa;
  --amber: #c25e1a;
  --amber-surface: #fff8eb;
  --amber-border: #efcf9d;
  --focus-ring: 0 0 0 3px rgba(76, 53, 35, 0.18);
}

/* 5. 【霁月清风 · 瓷影天青】（现代大圆角 · 半透明毛玻璃 · 汝窑轻灵） */
html[data-theme="misty_cyan"] {
  --primary: #0f766e;
  --primary-light: #14b8a6;
  --primary-dark: #0a4f4a;
  --primary-gradient: linear-gradient(135deg, #0f766e 0%, #0a4f4a 100%);
  --bg-page: #eaf1f6;
  --bg-pattern: 
    radial-gradient(ellipse at 20% 40%, rgba(15, 118, 110, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 60%, rgba(45, 100, 140, 0.045) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, transparent 100%);
  --bg-pattern-size: auto;
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-border: 1px solid rgba(20, 184, 166, 0.25);
  --card-shadow: 0 10px 30px rgba(15, 118, 110, 0.08);
  --card-radius: 18px;
  
  --text-main: #13222e;
  --text-regular: #2a3d4d;
  --text-muted: #566f82;
  --text-light: #8298a8;
  --border-color: #cde0ea;
  --border-subtle: #e1edf3;
  
  --header-bg: linear-gradient(135deg, #132431 0%, #1c3a4f 55%, #0f1d27 100%);
  --header-text: #ffffff;
  --tab-active: #0f766e;
  
  --btn-primary-bg: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
  
  --seal-color: #0f766e;
  --seal-bg: #e6f7f6;
  --seal-border: 1px solid #5eead4;
  --tag-bg: #e6f7f6;
  --tag-color: #0f766e;
  
  --quote-bg: linear-gradient(135deg, #f0f8fb 0%, #e2eff5 100%);
  --quote-border: 1px solid #cde0ea;
  --quote-text: #134e4a;
  
  --success: #0f766e;
  --success-surface: #e6f7f6;
  --success-border: #99e3dc;
  --danger: #dc2626;
  --danger-surface: #fef2f2;
  --danger-border: #fecaca;
  --amber: #d97706;
  --amber-surface: #fffbeb;
  --amber-border: #fde68a;
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

/* ============================================================
   学生端五套主题专属组件造型差异化系统 (Differentiated Archetypes)
   ============================================================ */

/* 松风竹韵：卡片修竹翠绿侧边条 + 竹简切角 */
html[data-theme="bamboo_green"] .card,
html[data-theme="bamboo_green"] .panel,
html[data-theme="bamboo_green"] .section,
html[data-theme="bamboo_green"] .stat-card,
html[data-theme="bamboo_green"] .rules-card,
html[data-theme="bamboo_green"] .subject-banner-card,
html[data-theme="bamboo_green"] .student-essay-dialog,
html[data-theme="bamboo_green"] .essay-item-card {
  border-radius: 6px !important;
  border-left: 4px solid #16a34a !important;
  background: #fdfffe !important;
}

/* 紫气东来：大唐金石、双层鎏金包边 */
html[data-theme="imperial_purple"] .card,
html[data-theme="imperial_purple"] .panel,
html[data-theme="imperial_purple"] .section,
html[data-theme="imperial_purple"] .stat-card,
html[data-theme="imperial_purple"] .rules-card,
html[data-theme="imperial_purple"] .subject-banner-card,
html[data-theme="imperial_purple"] .student-essay-dialog,
html[data-theme="imperial_purple"] .essay-item-card {
  border-radius: 14px !important;
  box-shadow: 0 5px 20px rgba(90, 30, 54, 0.06), 0 0 0 1px rgba(217, 119, 6, 0.2) !important;
}

/* 素笺古韵：澄心暖纸、宋版线装内缩版心虚线 */
html[data-theme="warm_paper"] .card,
html[data-theme="warm_paper"] .panel,
html[data-theme="warm_paper"] .section,
html[data-theme="warm_paper"] .stat-card,
html[data-theme="warm_paper"] .rules-card,
html[data-theme="warm_paper"] .subject-banner-card,
html[data-theme="warm_paper"] .student-essay-dialog,
html[data-theme="warm_paper"] .essay-item-card {
  border-radius: 4px !important;
  background: #fdfaf3 !important;
  outline: 1px dashed rgba(160, 110, 60, 0.22) !important;
  outline-offset: -5px !important;
}

/* 霁月清风：现代大圆角、通透毛玻璃 */
html[data-theme="misty_cyan"] .card,
html[data-theme="misty_cyan"] .panel,
html[data-theme="misty_cyan"] .section,
html[data-theme="misty_cyan"] .stat-card,
html[data-theme="misty_cyan"] .rules-card,
html[data-theme="misty_cyan"] .subject-banner-card,
html[data-theme="misty_cyan"] .student-essay-dialog,
html[data-theme="misty_cyan"] .essay-item-card {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(20, 184, 166, 0.26) !important;
}

/* ============================================================
   全局基底规范：自然呼吸感排版与纸本微纹
   ============================================================ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-page) !important;
  background-image: var(--bg-pattern) !important;
  background-size: var(--bg-pattern-size, auto) !important;
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 顶部 Header：水墨雅韵典雅横幅 */
.header,
.top {
  background: var(--header-bg) !important;
  color: #ffffff !important;
  position: relative;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12) !important;
  transition: background 0.25s ease;
}

.header h1, .header h2, .header h3,
.top h1, .top h2, .top h3 {
  color: #ffffff !important;
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
}

.header .info-text h3,
.header .info-text p,
.top .info-text h3,
.top .info-text p {
  color: #ffffff !important;
}

.header .info-text p span,
.top .info-text p span {
  color: #fde047 !important;
}

/* 学生端 App 顶栏统一规范：标题、副标题与顶部操作保持同一视觉节奏 */
:root {
  --app-header-title-size: 20px;
  --app-header-subtitle-size: 12px;
  --app-header-action-height: 44px;
  --app-header-action-font-size: 13px;
  --app-header-gap: 10px;
  --app-tabbar-height: 58px;
  --app-identity-name-size: 18px;
  --app-list-name-size: 16px;
}

.header.app-header {
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.header.app-header .header-title,
.header.app-header > h1,
.header.app-header > h2 {
  font-size: var(--app-header-title-size) !important;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.header.app-header .header-subtitle,
.header.app-header .my-tip,
.header.app-header > p {
  margin-top: 3px;
  font-size: var(--app-header-subtitle-size) !important;
  line-height: 1.45;
  letter-spacing: 0;
}

.header.app-header .header-title-box {
  flex: 1 1 auto;
  min-width: 0;
}

.header.app-header .header-top {
  gap: var(--app-header-gap);
}

.header.app-header .header-title,
.header.app-header > h1,
.header.app-header > h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header.app-header .header-subtitle,
.header.app-header .my-tip,
.header.app-header > p {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.header.app-header .logout-chip,
.header.app-header .back-link,
.header.app-header .header-refresh,
.header.app-header .header-actions button,
.header.app-header > .back {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--app-header-action-height) !important;
  min-height: var(--app-header-action-height) !important;
  padding: 0 12px !important;
  border-radius: 999px;
  font-size: var(--app-header-action-font-size) !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}

.header.app-header .header-refresh {
  width: var(--app-header-action-height) !important;
  min-width: var(--app-header-action-height) !important;
  padding: 0 !important;
  font-size: 16px !important;
}

.header.app-header .header-refresh[aria-busy="true"] i {
  animation: app-header-refresh-spin 0.8s linear infinite;
}

@keyframes app-header-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.header.app-header > .back {
  margin-top: 8px;
}

.header.app-header .logout-chip,
.header.app-header .back-link,
.header.app-header .header-refresh,
.header.app-header .header-actions button,
.header.app-header > .back {
  transition: transform 0.16s ease, opacity 0.16s ease, color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}

.header.app-header .logout-chip:active,
.header.app-header .back-link:active,
.header.app-header .header-actions button:active,
.header.app-header > .back:active {
  transform: scale(0.97);
  filter: brightness(1.08);
}

.header.app-header .header-refresh:active {
  transform: rotate(180deg) scale(0.94);
}

.header.app-header .logout-chip::after,
.header.app-header .back-link::after,
.header.app-header .header-refresh::after,
.header.app-header .header-actions button::after,
.header.app-header > .back::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}

/* 印章头像与徽标 */
.avatar {
  background: var(--btn-primary-bg) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  font-family: var(--font-serif) !important;
}

/* 每日诗词名言笺条 */
.motto,
.quote-card,
.daily-quote {
  background: var(--quote-bg) !important;
  border: var(--quote-border) !important;
  color: var(--quote-text) !important;
  font-family: var(--font-serif) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  position: relative;
}

.motto::before,
.daily-quote::before {
  content: "「";
  color: var(--primary);
  font-family: var(--font-serif);
  font-weight: bold;
  margin-right: 2px;
}

.motto::after,
.daily-quote::after {
  content: "」";
  color: var(--primary);
  font-family: var(--font-serif);
  font-weight: bold;
  margin-left: 2px;
}

/* 卡片容器：装帧双线与微纹内衬 */
.card,
.panel,
.section,
.stat-card,
.rank-list,
.modal-box,
.rules-card {
  background: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* 按钮通用 */
.btn-primary {
  background: var(--btn-primary-bg) !important;
  border-color: var(--primary) !important;
  color: var(--btn-primary-text) !important;
  box-shadow: var(--btn-primary-shadow) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary:active {
  transform: scale(0.98);
  opacity: 0.92;
}

.btn-default {
  background: var(--card-bg) !important;
  color: var(--text-regular) !important;
  border: 1px solid var(--border-color) !important;
}

/* 禁用态统一：视觉降级且彻底阻止重复触发 */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

button:disabled,
[aria-disabled="true"] {
  pointer-events: none !important;
}

/* 切换标签页 (Tab Groups) */
.tab-group {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.tab-group .tab-item.active,
.tab-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* 标签与印章点缀 */
.seal-tag,
.rank-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--seal-bg) !important;
  color: var(--seal-color) !important;
  border: var(--seal-border) !important;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 600;
}

/* 正负分朱墨高亮 */
.score-up, .plus, .text-success {
  color: var(--success) !important;
  font-weight: 700;
}

.score-down, .minus, .text-danger {
  color: var(--danger) !important;
  font-weight: 700;
}

/* 弹窗 (Modal) 全局典雅质感 */
.modal-box {
  border: var(--card-border) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25) !important;
}

.modal-header {
  background: var(--header-bg) !important;
  color: #ffffff !important;
  font-family: var(--font-serif) !important;
  letter-spacing: 0;
}

.modal-header .modal-title {
  margin: 0;
  min-width: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* 表单输入与聚焦 */
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
}

/* 底部导航 Tabbar 全局主题 (防闪烁与防布局跳动) */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--app-tabbar-height) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
  background: var(--card-bg) !important;
  display: flex;
  border-top: 1px solid var(--border-color) !important;
  box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.05) !important;
  z-index: 99;
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, opacity 0.18s ease, visibility 0s linear 0s;
}

.tabbar .tab-item {
  flex: 1 1 0;
  min-width: 0;
  height: var(--app-tabbar-height);
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1.15;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-decoration: none;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.15s ease;
  overflow: hidden;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tabbar .tab-item:link,
.tabbar .tab-item:visited,
.tabbar .tab-item:hover,
.tabbar .tab-item:focus,
.tabbar .tab-item:active {
  background: transparent !important;
  box-shadow: none !important;
}

.tabbar .tab-item:focus:not(:focus-visible) {
  outline: none !important;
}

.tabbar .tab-item:focus-visible {
  outline-offset: -3px !important;
}

.tabbar .tab-item.active {
  color: var(--tab-active) !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.tabbar .tab-item:active {
  opacity: 0.76;
}

.tabbar .tab-item:active .tab-icon {
  transform: scale(0.94);
}

.tabbar .tab-item::before,
.tabbar .tab-item::after {
  content: none !important;
  display: none !important;
}

.tabbar .tab-icon {
  font-size: 21px;
  margin-bottom: 2px;
  transition: transform 0.12s ease;
  line-height: 1;
}

.tabbar .tab-item > :last-child:not(.tab-icon) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.has-tabbar {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

body.keyboard-open .tabbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}

body.keyboard-open.has-tabbar {
  padding-bottom: 16px !important;
}

@media (max-width: 360px) {
  .tabbar .tab-item {
    font-size: 12px;
  }

  .tabbar .tab-icon {
    font-size: 20px;
    margin-bottom: 1px;
  }
}

/* ============================================================
   东方雅韵五套主题专属榜单与领奖台系统 (Mobile / Student Rank)
   ============================================================ */
.pedestal {
  border-radius: 4px 4px 0 0;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.rank-card .avatar {
  transition: transform 0.2s ease;
}
.rank-card:active .avatar {
  transform: scale(0.95);
}

/* 1. 【墨韵书香 · 徽墨天青】生宣徽墨、朱砂御印 */
html[data-theme="ink_blue"] .rank-card.rank-1 .avatar {
  background: linear-gradient(135deg, #1e3a5f, #284b7a) !important;
  border: 2.5px solid #b83b32 !important;
  box-shadow: 0 0 0 2.5px rgba(184, 59, 50, 0.28), 0 6px 18px rgba(30, 58, 95, 0.25) !important;
}
html[data-theme="ink_blue"] .rank-card.rank-2 .avatar {
  background: linear-gradient(135deg, #475569, #64748b) !important;
  border: 1.5px solid #cbd5e1 !important;
}
html[data-theme="ink_blue"] .rank-card.rank-3 .avatar {
  background: linear-gradient(135deg, #334155, #475569) !important;
  border: 1.5px solid #94a3b8 !important;
}
html[data-theme="ink_blue"] .rank-card.rank-1 .pedestal {
  background: linear-gradient(to top, #162436, #1e3a5f, #284b7a) !important;
  border-top: 3px solid #b83b32 !important;
  height: 26px !important;
}
html[data-theme="ink_blue"] .rank-card.rank-2 .pedestal {
  background: linear-gradient(to top, #334155, #475569) !important;
  height: 18px !important;
}
html[data-theme="ink_blue"] .rank-card.rank-3 .pedestal {
  background: linear-gradient(to top, #1e293b, #334155) !important;
  height: 13px !important;
}
html[data-theme="ink_blue"] .rank-card.rank-1 .honor-tier { color: #b83b32 !important; font-weight: 700; }
html[data-theme="ink_blue"] .rank-card.rank-2 .honor-tier { color: #475569 !important; }
html[data-theme="ink_blue"] .rank-card.rank-3 .honor-tier { color: #334155 !important; }
html[data-theme="ink_blue"] .rank-item.top1 .rank-num { color: #b83b32 !important; }
html[data-theme="ink_blue"] .progress-section {
  background: linear-gradient(135deg, #f4f8fc, #edf4fa) !important;
  border: 1px solid #d5dfec !important;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.06) !important;
}
html[data-theme="ink_blue"] .progress-title { color: #1e3a5f !important; }
html[data-theme="ink_blue"] .progress-item .p-gain { color: #1e3a5f !important; font-weight: 600; }

/* 2. 【松风竹韵 · 翠竹素卷】修竹节节高、翠玉切角 */
html[data-theme="bamboo_green"] .rank-card.rank-1 .avatar {
  background: linear-gradient(135deg, #15803d, #22c55e) !important;
  border: 2.5px solid #86efac !important;
  box-shadow: 0 0 0 2.5px rgba(34, 197, 94, 0.3), 0 6px 18px rgba(21, 128, 61, 0.22) !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-2 .avatar {
  background: linear-gradient(135deg, #166534, #15803d) !important;
  border: 1.5px solid #bbf7d0 !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-3 .avatar {
  background: linear-gradient(135deg, #14532d, #166534) !important;
  border: 1.5px solid #86efac !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-1 .pedestal {
  background: linear-gradient(to top, #14532d, #16a34a, #22c55e) !important;
  border-top: 3px solid #86efac !important;
  border-radius: 6px 6px 0 0 !important;
  height: 26px !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-2 .pedestal {
  background: linear-gradient(to top, #0f3d21, #15803d) !important;
  border-radius: 4px 4px 0 0 !important;
  height: 18px !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-3 .pedestal {
  background: linear-gradient(to top, #0b2e19, #166534) !important;
  border-radius: 4px 4px 0 0 !important;
  height: 13px !important;
}
html[data-theme="bamboo_green"] .rank-card.rank-1 .honor-tier { color: #15803d !important; font-weight: 700; }
html[data-theme="bamboo_green"] .rank-card.rank-2 .honor-tier { color: #166534 !important; }
html[data-theme="bamboo_green"] .rank-card.rank-3 .honor-tier { color: #14532d !important; }
html[data-theme="bamboo_green"] .rank-item.top1 .rank-num { color: #15803d !important; }
html[data-theme="bamboo_green"] .progress-section {
  background: linear-gradient(135deg, #f0faf4, #e8f7ee) !important;
  border: 1px solid #cfe0d5 !important;
  border-left: 4px solid #16a34a !important;
  box-shadow: 0 4px 16px rgba(22, 101, 52, 0.06) !important;
}
html[data-theme="bamboo_green"] .progress-title { color: #15803d !important; }
html[data-theme="bamboo_green"] .progress-item .p-gain { color: #15803d !important; font-weight: 600; }

/* 3. 【紫气东来 · 盛唐金石】皇家金石阶梯、鎏金祥云 */
html[data-theme="imperial_purple"] .rank-card.rank-1 .avatar {
  background: linear-gradient(135deg, #5a1e36, #7c2d4d) !important;
  border: 2.5px solid #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4), 0 6px 20px rgba(90, 30, 54, 0.3) !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-2 .avatar {
  background: linear-gradient(135deg, #702d47, #5a1e36) !important;
  border: 1.5px solid #fcd34d !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-3 .avatar {
  background: linear-gradient(135deg, #381422, #5a1e36) !important;
  border: 1.5px solid #f59e0b !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-1 .pedestal {
  background: linear-gradient(to top, #b45309, #d97706 40%, #f59e0b 80%, #fef08a) !important;
  border-top: 3px solid #fef08a !important;
  height: 28px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-2 .pedestal {
  background: linear-gradient(to top, #3b1122, #5a1e36, #7c2d4d) !important;
  border-top: 2px solid #f59e0b !important;
  height: 20px !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-3 .pedestal {
  background: linear-gradient(to top, #2b0f1b, #3b1122, #5a1e36) !important;
  border-top: 2px solid #d97706 !important;
  height: 15px !important;
}
html[data-theme="imperial_purple"] .rank-card.rank-1 .honor-tier { color: #b45309 !important; font-weight: 800; }
html[data-theme="imperial_purple"] .rank-card.rank-2 .honor-tier { color: #9d174d !important; }
html[data-theme="imperial_purple"] .rank-card.rank-3 .honor-tier { color: #702d47 !important; }
html[data-theme="imperial_purple"] .rank-item.top1 .rank-num { color: #d97706 !important; }
html[data-theme="imperial_purple"] .progress-section {
  background: linear-gradient(135deg, #fdf4f7, #f7e4eb) !important;
  border: 1px solid #ebd0db !important;
  box-shadow: 0 4px 16px rgba(90, 30, 54, 0.06) !important;
}
html[data-theme="imperial_purple"] .progress-title { color: #5a1e36 !important; }
html[data-theme="imperial_purple"] .progress-item .p-gain { color: #b45309 !important; font-weight: 600; }

/* 4. 【素笺古韵 · 宋版线装】经折书函层叠、暖宣古印 */
html[data-theme="warm_paper"] .rank-card.rank-1 .avatar {
  background: linear-gradient(135deg, #4c3523, #6a4b33) !important;
  border: 2.5px solid #dfc39b !important;
  box-shadow: 0 0 0 2px rgba(160, 110, 60, 0.25), 0 6px 16px rgba(76, 53, 35, 0.2) !important;
}
html[data-theme="warm_paper"] .rank-card.rank-2 .avatar {
  background: linear-gradient(135deg, #5c4033, #7a5843) !important;
  border: 1.5px solid #dfcebb !important;
}
html[data-theme="warm_paper"] .rank-card.rank-3 .avatar {
  background: linear-gradient(135deg, #3d2b20, #5c4033) !important;
  border: 1.5px solid #dfcebb !important;
}
html[data-theme="warm_paper"] .rank-card.rank-1 .pedestal {
  background: linear-gradient(to top, #312115, #4c3523 50%, #6a4b33) !important;
  border-top: 3px solid #dfc39b !important;
  border-radius: 2px 2px 0 0 !important;
  height: 26px !important;
}
html[data-theme="warm_paper"] .rank-card.rank-2 .pedestal {
  background: linear-gradient(to top, #271c14, #3d2b20 60%, #5c4033) !important;
  border-top: 2px solid #dfcebb !important;
  border-radius: 2px 2px 0 0 !important;
  height: 18px !important;
}
html[data-theme="warm_paper"] .rank-card.rank-3 .pedestal {
  background: linear-gradient(to top, #1f1610, #312115) !important;
  border-top: 2px solid #cbb8a3 !important;
  border-radius: 2px 2px 0 0 !important;
  height: 13px !important;
}
html[data-theme="warm_paper"] .rank-card.rank-1 .honor-tier { color: #854d0e !important; font-weight: 700; }
html[data-theme="warm_paper"] .rank-card.rank-2 .honor-tier { color: #6a4b33 !important; }
html[data-theme="warm_paper"] .rank-card.rank-3 .honor-tier { color: #5c4033 !important; }
html[data-theme="warm_paper"] .rank-item.top1 .rank-num { color: #854d0e !important; }
html[data-theme="warm_paper"] .progress-section {
  background: linear-gradient(135deg, #faf5ec, #f5ecd9) !important;
  border: 1px dashed rgba(160, 110, 60, 0.3) !important;
  box-shadow: 0 4px 16px rgba(76, 53, 35, 0.05) !important;
}
html[data-theme="warm_paper"] .progress-title { color: #4c3523 !important; }
html[data-theme="warm_paper"] .progress-item .p-gain { color: #854d0e !important; font-weight: 600; }

/* 5. 【霁月清风 · 瓷影天青】汝窑天青毛玻璃晶柱、极光光晕 */
html[data-theme="misty_cyan"] .rank-card.rank-1 .avatar {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  border: 2.5px solid #5eead4 !important;
  box-shadow: 0 0 0 2.5px rgba(20, 184, 166, 0.35), 0 0 20px rgba(20, 184, 166, 0.45) !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-2 .avatar {
  background: linear-gradient(135deg, #115e59, #0f766e) !important;
  border: 1.5px solid #99f6e4 !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-3 .avatar {
  background: linear-gradient(135deg, #134e4a, #115e59) !important;
  border: 1.5px solid #99f6e4 !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-1 .pedestal {
  background: linear-gradient(to top, rgba(15, 118, 110, 0.92), rgba(20, 184, 166, 0.5)) !important;
  border-top: 3px solid #2dd4bf !important;
  border-radius: 8px 8px 0 0 !important;
  height: 28px !important;
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.3) !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-2 .pedestal {
  background: linear-gradient(to top, rgba(17, 94, 89, 0.88), rgba(15, 118, 110, 0.4)) !important;
  border-top: 2px solid #5eead4 !important;
  border-radius: 6px 6px 0 0 !important;
  height: 20px !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-3 .pedestal {
  background: linear-gradient(to top, rgba(19, 78, 74, 0.82), rgba(17, 94, 89, 0.35)) !important;
  border-top: 2px solid #99f6e4 !important;
  border-radius: 6px 6px 0 0 !important;
  height: 15px !important;
}
html[data-theme="misty_cyan"] .rank-card.rank-1 .honor-tier { color: #0f766e !important; font-weight: 700; }
html[data-theme="misty_cyan"] .rank-card.rank-2 .honor-tier { color: #115e59 !important; }
html[data-theme="misty_cyan"] .rank-card.rank-3 .honor-tier { color: #134e4a !important; }
html[data-theme="misty_cyan"] .rank-item.top1 .rank-num { color: #0f766e !important; }
html[data-theme="misty_cyan"] .progress-section {
  background: linear-gradient(135deg, #f0fdfa, #e6f7f6) !important;
  border: 1px solid rgba(20, 184, 166, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.08) !important;
  border-radius: 16px !important;
}
html[data-theme="misty_cyan"] .progress-title { color: #0f766e !important; }
html[data-theme="misty_cyan"] .progress-item .p-gain { color: #0f766e !important; font-weight: 600; }

/* ============================================================
   课文背诵通关看板与积分商城/盲盒 五套主题专属雅韵色彩系统
   (Recitation Board, Shop & Lucky Blind Box Theming)
   ============================================================ */

/* ---------------- 通用控制与动效 ---------------- */
.podium {
  background: var(--header-bg) !important;
}
.mode-btn.active, .shop-nav-btn.active, .cat-chip.active {
  background: var(--card-bg, #ffffff) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.group-pill.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}
.goods-btn-exchange.can-buy {
  background: var(--btn-primary-bg, linear-gradient(135deg, #10b981, #059669)) !important;
  box-shadow: var(--btn-primary-shadow, 0 3px 10px rgba(0,0,0,0.12)) !important;
  color: var(--btn-primary-text, #ffffff) !important;
}

/* ---------------- 课文背诵通关看板专区卡片（入口键通用骨架） ---------------- */
.recite-banner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.recite-banner-card:active {
  transform: scale(0.98);
}
.recite-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.recite-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.3s;
}
.recite-banner-title-row {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.recite-banner-tag {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.recite-banner-desc {
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.4;
  opacity: 0.88;
}
.recite-banner-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  z-index: 2;
  transition: transform 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .recite-banner-card:hover {
    transform: translateY(-2px);
  }

  .recite-banner-card:hover .recite-banner-icon {
    transform: scale(1.1) rotate(5deg);
  }

  .recite-banner-card:hover .recite-banner-btn {
    transform: translateX(3px);
  }
}
.recite-quick-link {
  font-size: 13px;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 10px;
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s, transform 0.2s;
}

/* 1. 【墨韵书香 · 徽墨天青】 */
html[data-theme="ink_blue"] .progress-bar-fill {
  background: linear-gradient(90deg, #1e3a5f 0%, #3b82f6 100%) !important;
}
html[data-theme="ink_blue"] .group-desk-card.passed {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4f9 100%) !important;
  border: 1.5px solid #3b82f6 !important;
  box-shadow: 0 3px 10px rgba(30, 58, 95, 0.12) !important;
}
html[data-theme="ink_blue"] .group-desk-card.passed .group-desk-name {
  color: #1e3a5f !important;
}
html[data-theme="ink_blue"] .group-desk-status-pill.passed {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
html[data-theme="ink_blue"] .panorama-desk-cell.passed {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1e3a5f !important;
}
/* 墨韵背诵看板入口卡片 */
html[data-theme="ink_blue"] .recite-banner-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.35) !important;
}
html[data-theme="ink_blue"] .recite-banner-icon {
  background: rgba(59, 130, 246, 0.22) !important;
  border: 1px solid rgba(147, 197, 253, 0.45) !important;
  color: #93c5fd !important;
}
html[data-theme="ink_blue"] .recite-banner-tag {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.4) !important;
}
html[data-theme="ink_blue"] .recite-banner-btn {
  color: #93c5fd !important;
}
html[data-theme="ink_blue"] .recite-quick-link {
  background: rgba(30, 58, 95, 0.08) !important;
  color: #1e3a5f !important;
  border: 1px solid rgba(30, 58, 95, 0.15) !important;
}
html[data-theme="ink_blue"] .recite-quick-link:hover {
  background: rgba(30, 58, 95, 0.16) !important;
}
/* 墨韵文房 · 幸运盲盒 */
html[data-theme="ink_blue"] .blind-box-hero {
  background: radial-gradient(circle at 50% 30%, #1e3a5f 0%, #0c1829 100%) !important;
  border: 2px solid rgba(184, 59, 50, 0.35) !important;
  box-shadow: 0 12px 30px rgba(30, 58, 95, 0.35) !important;
}
html[data-theme="ink_blue"] .box-title-big {
  color: #fde047 !important;
  text-shadow: 0 2px 10px rgba(253, 224, 71, 0.4) !important;
}
html[data-theme="ink_blue"] .box-sub-text {
  color: #cbd5e1 !important;
}
html[data-theme="ink_blue"] .btn-draw-box {
  background: linear-gradient(135deg, #b83b32 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(184, 59, 50, 0.45) !important;
}
html[data-theme="ink_blue"] .reveal-card {
  background: radial-gradient(circle at 50% 30%, #1e3a5f 0%, #0c1829 100%) !important;
  border-color: #b83b32 !important;
  box-shadow: 0 0 30px rgba(184, 59, 50, 0.4) !important;
}
html[data-theme="ink_blue"] .reveal-title { color: #fde047 !important; }
html[data-theme="ink_blue"] .reveal-btn { background: #b83b32 !important; color: #fff !important; }
html[data-theme="ink_blue"] .goods-points-text { color: #1e3a5f !important; }

/* 2. 【松风竹韵 · 翠竹素卷】 */
html[data-theme="bamboo_green"] .progress-bar-fill {
  background: linear-gradient(90deg, #15803d 0%, #22c55e 100%) !important;
}
html[data-theme="bamboo_green"] .group-desk-card.passed {
  background: linear-gradient(135deg, #ffffff 0%, #f0faf4 100%) !important;
  border: 1.5px solid #16a34a !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.12) !important;
}
html[data-theme="bamboo_green"] .group-desk-card.passed .group-desk-name {
  color: #15803d !important;
}
html[data-theme="bamboo_green"] .group-desk-status-pill.passed {
  background: #f0fdf4 !important;
  color: #15803d !important;
}
html[data-theme="bamboo_green"] .panorama-desk-cell.passed {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  color: #15803d !important;
}
/* 竹韵背诵看板入口卡片 */
html[data-theme="bamboo_green"] .recite-banner-card {
  background: linear-gradient(135deg, #14532d 0%, #052e16 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(74, 222, 128, 0.35) !important;
  box-shadow: 0 6px 20px rgba(20, 83, 45, 0.35) !important;
}
html[data-theme="bamboo_green"] .recite-banner-icon {
  background: rgba(34, 197, 94, 0.22) !important;
  border: 1px solid rgba(134, 239, 172, 0.45) !important;
  color: #86efac !important;
}
html[data-theme="bamboo_green"] .recite-banner-tag {
  background: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
  border: 1px solid rgba(134, 239, 172, 0.4) !important;
}
html[data-theme="bamboo_green"] .recite-banner-btn {
  color: #86efac !important;
}
html[data-theme="bamboo_green"] .recite-quick-link {
  background: rgba(22, 163, 74, 0.08) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.2) !important;
}
html[data-theme="bamboo_green"] .recite-quick-link:hover {
  background: rgba(22, 163, 74, 0.16) !important;
}
/* 青云修竹 · 幸运锦囊 */
html[data-theme="bamboo_green"] .blind-box-hero {
  background: radial-gradient(circle at 50% 30%, #14532d 0%, #052e16 100%) !important;
  border: 2px solid rgba(134, 239, 172, 0.3) !important;
  box-shadow: 0 12px 30px rgba(20, 83, 45, 0.35) !important;
}
html[data-theme="bamboo_green"] .box-title-big {
  color: #86efac !important;
  text-shadow: 0 2px 10px rgba(134, 239, 172, 0.4) !important;
}
html[data-theme="bamboo_green"] .box-sub-text {
  color: #bbf7d0 !important;
}
html[data-theme="bamboo_green"] .btn-draw-box {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45) !important;
}
html[data-theme="bamboo_green"] .reveal-card {
  background: radial-gradient(circle at 50% 30%, #14532d 0%, #052e16 100%) !important;
  border-color: #86efac !important;
  box-shadow: 0 0 30px rgba(22, 163, 74, 0.4) !important;
}
html[data-theme="bamboo_green"] .reveal-title { color: #86efac !important; }
html[data-theme="bamboo_green"] .reveal-btn { background: #16a34a !important; color: #fff !important; }
html[data-theme="bamboo_green"] .goods-points-text { color: #15803d !important; }

/* 3. 【紫气东来 · 盛唐金石】 */
html[data-theme="imperial_purple"] .progress-bar-fill {
  background: linear-gradient(90deg, #5a1e36 0%, #f59e0b 100%) !important;
}
html[data-theme="imperial_purple"] .group-desk-card.passed {
  background: linear-gradient(135deg, #ffffff 0%, #fdf4f7 100%) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.15) !important;
}
html[data-theme="imperial_purple"] .group-desk-card.passed .group-desk-name {
  color: #5a1e36 !important;
}
html[data-theme="imperial_purple"] .group-desk-status-pill.passed {
  background: #fef3c7 !important;
  color: #b45309 !important;
}
html[data-theme="imperial_purple"] .panorama-desk-cell.passed {
  background: #fdf2f8 !important;
  border-color: #f59e0b !important;
  color: #5a1e36 !important;
}
/* 盛唐背诵看板入口卡片 */
html[data-theme="imperial_purple"] .recite-banner-card {
  background: linear-gradient(135deg, #4a044e 0%, #1f0524 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 6px 22px rgba(74, 4, 78, 0.45), inset 0 0 14px rgba(245, 158, 11, 0.15) !important;
}
html[data-theme="imperial_purple"] .recite-banner-icon {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid rgba(254, 240, 138, 0.55) !important;
  color: #fde047 !important;
}
html[data-theme="imperial_purple"] .recite-banner-tag {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1px solid rgba(254, 240, 138, 0.4) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.4) !important;
}
html[data-theme="imperial_purple"] .recite-banner-btn {
  color: #fde047 !important;
}
html[data-theme="imperial_purple"] .recite-quick-link {
  background: rgba(90, 30, 54, 0.08) !important;
  color: #5a1e36 !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
}
html[data-theme="imperial_purple"] .recite-quick-link:hover {
  background: rgba(90, 30, 54, 0.16) !important;
}
/* 盛唐金殿 · 御赐盲盒 */
html[data-theme="imperial_purple"] .blind-box-hero {
  background: radial-gradient(circle at 50% 30%, #5a1e36 0%, #200713 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 12px 30px rgba(90, 30, 54, 0.4) !important;
}
html[data-theme="imperial_purple"] .box-title-big {
  color: #fef08a !important;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.5) !important;
}
html[data-theme="imperial_purple"] .box-sub-text {
  color: #fce7f3 !important;
}
html[data-theme="imperial_purple"] .btn-draw-box {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
}
html[data-theme="imperial_purple"] .reveal-card {
  background: radial-gradient(circle at 50% 30%, #5a1e36 0%, #200713 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.45) !important;
}
html[data-theme="imperial_purple"] .reveal-title { color: #fef08a !important; }
html[data-theme="imperial_purple"] .reveal-btn { background: #f59e0b !important; color: #451a03 !important; }
html[data-theme="imperial_purple"] .goods-points-text { color: #d97706 !important; }

/* 4. 【素笺古韵 · 宋版线装】 */
html[data-theme="warm_paper"] .progress-bar-fill {
  background: linear-gradient(90deg, #4c3523 0%, #d97706 100%) !important;
}
html[data-theme="warm_paper"] .group-desk-card.passed {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ec 100%) !important;
  border: 1.5px solid #b45309 !important;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.12) !important;
}
html[data-theme="warm_paper"] .group-desk-card.passed .group-desk-name {
  color: #4c3523 !important;
}
html[data-theme="warm_paper"] .group-desk-status-pill.passed {
  background: #fef3c7 !important;
  color: #92400e !important;
}
html[data-theme="warm_paper"] .panorama-desk-cell.passed {
  background: #fbf5ea !important;
  border-color: #b45309 !important;
  color: #4c3523 !important;
}
/* 宋卷背诵看板入口卡片 */
html[data-theme="warm_paper"] .recite-banner-card {
  background: linear-gradient(135deg, #451a03 0%, #1f0c02 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(217, 119, 6, 0.45) !important;
  box-shadow: 0 6px 20px rgba(69, 26, 3, 0.4) !important;
}
html[data-theme="warm_paper"] .recite-banner-icon {
  background: rgba(217, 119, 6, 0.22) !important;
  border: 1px solid rgba(253, 230, 138, 0.5) !important;
  color: #fed7aa !important;
}
html[data-theme="warm_paper"] .recite-banner-tag {
  background: rgba(180, 83, 9, 0.3) !important;
  color: #fde68a !important;
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
}
html[data-theme="warm_paper"] .recite-banner-btn {
  color: #fde68a !important;
}
html[data-theme="warm_paper"] .recite-quick-link {
  background: rgba(180, 83, 9, 0.08) !important;
  color: #9a3412 !important;
  border: 1px solid rgba(180, 83, 9, 0.2) !important;
}
html[data-theme="warm_paper"] .recite-quick-link:hover {
  background: rgba(180, 83, 9, 0.16) !important;
}
/* 澄心古卷 · 经折奇匣 */
html[data-theme="warm_paper"] .blind-box-hero {
  background: radial-gradient(circle at 50% 30%, #4c3523 0%, #1c130d 100%) !important;
  border: 2px solid rgba(223, 195, 155, 0.35) !important;
  box-shadow: 0 12px 30px rgba(76, 53, 35, 0.35) !important;
}
html[data-theme="warm_paper"] .box-title-big {
  color: #fde68a !important;
  text-shadow: 0 2px 10px rgba(223, 195, 155, 0.4) !important;
}
html[data-theme="warm_paper"] .box-sub-text {
  color: #e2d5c5 !important;
}
html[data-theme="warm_paper"] .btn-draw-box {
  background: linear-gradient(135deg, #9a3412 0%, #78350f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(154, 52, 18, 0.45) !important;
}
html[data-theme="warm_paper"] .reveal-card {
  background: radial-gradient(circle at 50% 30%, #4c3523 0%, #1c130d 100%) !important;
  border-color: #dfc39b !important;
  box-shadow: 0 0 30px rgba(154, 52, 18, 0.4) !important;
}
html[data-theme="warm_paper"] .reveal-title { color: #fde68a !important; }
html[data-theme="warm_paper"] .reveal-btn { background: #9a3412 !important; color: #fff !important; }
html[data-theme="warm_paper"] .goods-points-text { color: #b45309 !important; }

/* 5. 【霁月清风 · 瓷影天青】 */
html[data-theme="misty_cyan"] .progress-bar-fill {
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%) !important;
}
html[data-theme="misty_cyan"] .group-desk-card.passed {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
  border: 1.5px solid #0f766e !important;
  box-shadow: 0 3px 10px rgba(15, 118, 110, 0.15) !important;
}
html[data-theme="misty_cyan"] .group-desk-card.passed .group-desk-name {
  color: #0f766e !important;
}
html[data-theme="misty_cyan"] .group-desk-status-pill.passed {
  background: #ccfbf1 !important;
  color: #0f766e !important;
}
html[data-theme="misty_cyan"] .panorama-desk-cell.passed {
  background: #f0fdfa !important;
  border-color: #14b8a6 !important;
  color: #0f766e !important;
}
/* 霁月背诵看板入口卡片 */
html[data-theme="misty_cyan"] .recite-banner-card {
  background: linear-gradient(135deg, #042f2e 0%, #031c1c 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(45, 212, 191, 0.45) !important;
  box-shadow: 0 6px 20px rgba(4, 47, 46, 0.4) !important;
}
html[data-theme="misty_cyan"] .recite-banner-icon {
  background: rgba(20, 184, 166, 0.22) !important;
  border: 1px solid rgba(94, 234, 212, 0.5) !important;
  color: #5eead4 !important;
}
html[data-theme="misty_cyan"] .recite-banner-tag {
  background: rgba(20, 184, 166, 0.25) !important;
  color: #5eead4 !important;
  border: 1px solid rgba(45, 212, 191, 0.45) !important;
}
html[data-theme="misty_cyan"] .recite-banner-btn {
  color: #5eead4 !important;
}
html[data-theme="misty_cyan"] .recite-quick-link {
  background: rgba(15, 118, 110, 0.08) !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
}
html[data-theme="misty_cyan"] .recite-quick-link:hover {
  background: rgba(15, 118, 110, 0.16) !important;
}
/* 霁月天青 · 冰晶玉匣 */
html[data-theme="misty_cyan"] .blind-box-hero {
  background: radial-gradient(circle at 50% 30%, #0f766e 0%, #042f2e 100%) !important;
  border: 2px solid rgba(94, 234, 212, 0.35) !important;
  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.35) !important;
}
html[data-theme="misty_cyan"] .box-title-big {
  color: #5eead4 !important;
  text-shadow: 0 2px 10px rgba(94, 234, 212, 0.4) !important;
}
html[data-theme="misty_cyan"] .box-sub-text {
  color: #ccfbf1 !important;
}
html[data-theme="misty_cyan"] .btn-draw-box {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.45) !important;
}
html[data-theme="misty_cyan"] .reveal-card {
  background: radial-gradient(circle at 50% 30%, #0f766e 0%, #042f2e 100%) !important;
  border-color: #5eead4 !important;
  box-shadow: 0 0 30px rgba(20, 184, 166, 0.4) !important;
}
html[data-theme="misty_cyan"] .reveal-title { color: #5eead4 !important; }
html[data-theme="misty_cyan"] .reveal-btn { background: #14b8a6 !important; color: #fff !important; }
html[data-theme="misty_cyan"] .goods-points-text { color: #0f766e !important; }

/* ============================================================
   学科看板双入口（背诵看板 & 作文档案）与作文批改弹窗
   5 套专属古典雅致 UI 视觉风格深度适配体系
   ============================================================ */

/* 1. 【墨韵书香 · 徽墨天青】（正统文人书斋 · 砚石墨韵 · 朱砂御印） */
html[data-theme="ink_blue"] .recite-card .subject-card-icon {
  background: rgba(30, 58, 95, 0.08) !important;
  color: #1e3a5f !important;
  border: 1px solid rgba(30, 58, 95, 0.18) !important;
}
html[data-theme="ink_blue"] .recite-card:hover .subject-card-arrow {
  color: #1e3a5f !important;
}
html[data-theme="ink_blue"] .essay-card .subject-card-icon {
  background: rgba(184, 59, 50, 0.08) !important;
  color: #b83b32 !important;
  border: 1px solid rgba(184, 59, 50, 0.22) !important;
}
html[data-theme="ink_blue"] .essay-card:hover .subject-card-arrow {
  color: #b83b32 !important;
}
html[data-theme="ink_blue"] .student-essay-dialog {
  border: 1px solid #d5dfec !important;
  box-shadow: 0 20px 45px rgba(22, 42, 69, 0.25) !important;
}
html[data-theme="ink_blue"] .essay-dialog-header {
  background: linear-gradient(135deg, #142233 0%, #1e3a5f 55%, #102138 100%) !important;
}
html[data-theme="ink_blue"] .essay-dialog-title i {
  color: #cf483e !important;
}
html[data-theme="ink_blue"] .essay-item-card:hover {
  border-color: #b83b32 !important;
  box-shadow: 0 6px 18px rgba(184, 59, 50, 0.14) !important;
}

/* 2. 【松风竹韵 · 翠竹素卷】（修竹节节高 · 苍翠素纸） */
html[data-theme="bamboo_green"] .recite-card .subject-card-icon {
  background: rgba(21, 128, 61, 0.1) !important;
  color: #15803d !important;
  border: 1px solid rgba(21, 128, 61, 0.22) !important;
}
html[data-theme="bamboo_green"] .recite-card:hover .subject-card-arrow {
  color: #15803d !important;
}
html[data-theme="bamboo_green"] .essay-card .subject-card-icon {
  background: rgba(22, 101, 52, 0.12) !important;
  color: #166534 !important;
  border: 1px solid rgba(22, 101, 52, 0.25) !important;
}
html[data-theme="bamboo_green"] .essay-card:hover .subject-card-arrow {
  color: #15803d !important;
}
html[data-theme="bamboo_green"] .student-essay-dialog {
  border: 1.5px solid #cfe0d5 !important;
  border-left: 6px solid #15803d !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 45px rgba(21, 128, 61, 0.2) !important;
}
html[data-theme="bamboo_green"] .essay-dialog-header {
  background: linear-gradient(135deg, #0d291b 0%, #15803d 100%) !important;
}
html[data-theme="bamboo_green"] .essay-dialog-title i {
  color: #86efac !important;
}
html[data-theme="bamboo_green"] .essay-item-card:hover {
  border-color: #15803d !important;
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.14) !important;
}

/* 3. 【紫气东来 · 盛唐金石】（皇家金石双层鎏金包边 · 紫气赤金） */
html[data-theme="imperial_purple"] .recite-card .subject-card-icon {
  background: rgba(90, 30, 54, 0.09) !important;
  color: #5a1e36 !important;
  border: 1px solid rgba(90, 30, 54, 0.22) !important;
}
html[data-theme="imperial_purple"] .recite-card:hover .subject-card-arrow {
  color: #5a1e36 !important;
}
html[data-theme="imperial_purple"] .essay-card .subject-card-icon {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.28) !important;
}
html[data-theme="imperial_purple"] .essay-card:hover .subject-card-arrow {
  color: #d97706 !important;
}
html[data-theme="imperial_purple"] .student-essay-dialog {
  border: 2px solid #ebd0db !important;
  box-shadow: 0 25px 50px rgba(90, 30, 54, 0.28), 0 0 0 1.5px rgba(217, 119, 6, 0.3) !important;
  border-radius: 16px !important;
}
html[data-theme="imperial_purple"] .essay-dialog-header {
  background: linear-gradient(135deg, #381422 0%, #5a1e36 50%, #702d47 100%) !important;
}
html[data-theme="imperial_purple"] .essay-dialog-title i {
  color: #fbbf24 !important;
}
html[data-theme="imperial_purple"] .essay-item-card:hover {
  border-color: #7c2d4d !important;
  box-shadow: 0 6px 18px rgba(90, 30, 54, 0.15), 0 0 0 1px rgba(217, 119, 6, 0.25) !important;
}

/* 4. 【素笺古韵 · 宋版线装】（澄心暖纸 · 经折内缩虚线 · 暖纸木印） */
html[data-theme="warm_paper"] .recite-card .subject-card-icon {
  background: rgba(124, 74, 39, 0.09) !important;
  color: #7c4a27 !important;
  border: 1px solid rgba(124, 74, 39, 0.2) !important;
}
html[data-theme="warm_paper"] .recite-card:hover .subject-card-arrow {
  color: #7c4a27 !important;
}
html[data-theme="warm_paper"] .essay-card .subject-card-icon {
  background: rgba(180, 83, 9, 0.1) !important;
  color: #92400e !important;
  border: 1px solid rgba(180, 83, 9, 0.24) !important;
}
html[data-theme="warm_paper"] .essay-card:hover .subject-card-arrow {
  color: #92400e !important;
}
html[data-theme="warm_paper"] .student-essay-dialog {
  border: 2px solid #dfcebb !important;
  background: #fdfaf3 !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 45px rgba(76, 53, 35, 0.25) !important;
}
html[data-theme="warm_paper"] .essay-dialog-header {
  background: linear-gradient(135deg, #271c14 0%, #4c3523 50%, #5c4033 100%) !important;
}
html[data-theme="warm_paper"] .essay-dialog-title i {
  color: #eab308 !important;
}
html[data-theme="warm_paper"] .essay-dialog-body {
  background: #f7f1e5 !important;
}
html[data-theme="warm_paper"] .essay-item-card {
  background: #fdfaf3 !important;
  border: 1px solid #dfcebb !important;
  outline: 1px dashed rgba(160, 110, 60, 0.2) !important;
  outline-offset: -3px !important;
}
html[data-theme="warm_paper"] .essay-item-card:hover {
  border-color: #7c4a27 !important;
  box-shadow: 0 6px 16px rgba(76, 53, 35, 0.12) !important;
}

/* 5. 【霁月清风 · 瓷影天青】（汝窑青瓷 · 晶莹透润 · 天青毛玻璃） */
html[data-theme="misty_cyan"] .recite-card .subject-card-icon {
  background: rgba(15, 118, 110, 0.09) !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
}
html[data-theme="misty_cyan"] .recite-card:hover .subject-card-arrow {
  color: #0f766e !important;
}
html[data-theme="misty_cyan"] .essay-card .subject-card-icon {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #0d9488 !important;
  border: 1px solid rgba(20, 184, 166, 0.26) !important;
}
html[data-theme="misty_cyan"] .essay-card:hover .subject-card-arrow {
  color: #14b8a6 !important;
}
html[data-theme="misty_cyan"] .student-essay-dialog {
  border-radius: 20px !important;
  border: 1.5px solid rgba(20, 184, 166, 0.35) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 25px 50px rgba(15, 118, 110, 0.25) !important;
}
html[data-theme="misty_cyan"] .essay-dialog-header {
  background: linear-gradient(135deg, #09332f 0%, #0f766e 60%, #14b8a6 100%) !important;
}
html[data-theme="misty_cyan"] .essay-dialog-title i {
  color: #5eead4 !important;
}
html[data-theme="misty_cyan"] .essay-item-card {
  border-radius: 14px !important;
  border: 1px solid rgba(20, 184, 166, 0.22) !important;
}
html[data-theme="misty_cyan"] .essay-item-card:hover {
  border-color: #14b8a6 !important;
  box-shadow: 0 6px 18px rgba(20, 184, 166, 0.18) !important;
}

/* ============================================================
   学生端可用性增强：键盘焦点、触控目标、弹窗滚动与低动态偏好
   ============================================================ */
:is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 2px !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.load-error > * {
  max-width: 100%;
  min-width: 0;
}

.load-error .inline-retry {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}

.load-error .inline-retry:active {
  transform: scale(0.97);
  opacity: 0.82;
}

.student-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-main);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.student-search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

[data-a11y-clickable="true"] {
  cursor: pointer;
}

button,
a[href],
[role="button"],
.btn-primary,
.btn-default,
.tab-item,
.tabbar .tab-item,
.modal-close {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.modal,
.modal-mask,
.essay-modal-overlay,
.ink-dialog-mask,
.modal-box,
.modal-card,
.student-essay-dialog,
.ink-dialog-box {
  overscroll-behavior: contain;
}

.modal,
.modal-mask,
.essay-modal-overlay,
.ink-dialog-mask {
  height: var(--app-viewport-height, 100dvh);
  max-height: var(--app-viewport-height, 100dvh);
  touch-action: pan-y pinch-zoom;
}

.modal-box,
.modal-card,
.student-essay-dialog,
.ink-dialog-box,
.modal-body,
.essay-dialog-body,
.ink-dialog-body {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-box,
.modal-card,
.student-essay-dialog,
.ink-dialog-box {
  max-height: calc(var(--app-viewport-height, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.modal-body,
.essay-dialog-body,
.ink-dialog-body {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y pinch-zoom;
}

body.keyboard-open .modal,
body.keyboard-open .modal-mask,
body.keyboard-open .essay-modal-overlay,
body.keyboard-open .ink-dialog-mask {
  align-items: flex-start;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

body.keyboard-open .modal-box,
body.keyboard-open .modal-card,
body.keyboard-open .student-essay-dialog,
body.keyboard-open .ink-dialog-box {
  max-height: calc(var(--app-viewport-height, 100dvh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.category-filter-bar,
.group-pill-bar,
.progress-list,
.panorama-scroll-wrap,
.rule-table-wrap {
  scroll-padding-inline: 16px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.category-filter-bar :is(a, button, [tabindex], [role="button"]):focus-visible,
.group-pill-bar :is(a, button, [tabindex], [role="button"]):focus-visible,
.progress-list :is(a, button, [tabindex], [role="button"]):focus-visible,
.panorama-scroll-wrap :is(a, button, [tabindex], [role="button"]):focus-visible,
.rule-table-wrap :is(a, button, [tabindex], [role="button"]):focus-visible {
  outline-offset: -3px !important;
}

@media (max-height: 560px) {
  .modal,
  .modal-mask,
  .essay-modal-overlay,
  .ink-dialog-mask {
    align-items: flex-start;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .modal-box,
  .modal-card,
  .student-essay-dialog,
  .ink-dialog-box {
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  .btn-primary,
  .btn-default,
  button:not(.modal-close):not(.essay-dialog-close),
  select,
  .tab-item,
  .modal-close {
    min-height: 44px;
  }

  .modal-close,
  .essay-dialog-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .preset-chip,
  .hw-tab-item,
  .search-clear,
  [id$="SearchClearBtn"],
  #searchClear {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (hover: none), (pointer: coarse) {
  .subject-banner-card:hover,
  .essay-item-card:hover,
  .essay-dialog-close:hover,
  .chest-card:hover:not(.selected),
  .stage-close-btn:hover,
  .btn-draw-box:hover,
  .login-btn:hover {
    transform: none !important;
  }

  .subject-banner-card:hover .subject-card-icon,
  .subject-banner-card:hover .subject-card-arrow,
  .chest-card:hover:not(.selected) .chest-icon-wrap {
    transform: none !important;
  }

  html[data-theme="ink_blue"] .recite-quick-link:hover {
    background: rgba(30, 58, 95, 0.08) !important;
  }

  html[data-theme="bamboo_green"] .recite-quick-link:hover {
    background: rgba(22, 163, 74, 0.08) !important;
  }

  html[data-theme="imperial_purple"] .recite-quick-link:hover {
    background: rgba(90, 30, 54, 0.08) !important;
  }

  html[data-theme="warm_paper"] .recite-quick-link:hover {
    background: rgba(180, 83, 9, 0.08) !important;
  }

  html[data-theme="misty_cyan"] .recite-quick-link:hover {
    background: rgba(15, 118, 110, 0.08) !important;
  }

  html[data-theme="ink_blue"] .recite-card:hover .subject-card-arrow,
  html[data-theme="ink_blue"] .essay-card:hover .subject-card-arrow,
  html[data-theme="bamboo_green"] .recite-card:hover .subject-card-arrow,
  html[data-theme="bamboo_green"] .essay-card:hover .subject-card-arrow,
  html[data-theme="imperial_purple"] .recite-card:hover .subject-card-arrow,
  html[data-theme="imperial_purple"] .essay-card:hover .subject-card-arrow,
  html[data-theme="warm_paper"] .recite-card:hover .subject-card-arrow,
  html[data-theme="warm_paper"] .essay-card:hover .subject-card-arrow,
  html[data-theme="misty_cyan"] .recite-card:hover .subject-card-arrow,
  html[data-theme="misty_cyan"] .essay-card:hover .subject-card-arrow {
    color: var(--text-muted) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}