/* WeChat-style lightweight UI primitives for study_ai */
:root {
  --brand-primary: #07C160;
  /* WeChat green - vibrant */
  --brand-secondary: #3B82F6;
  /* Clear blue */
  --brand-accent: #F97316;
  /* Vibrant orange */
  --brand-purple: #8B5CF6;
  /* Soft purple */
  --brand-primary-dark: #05964E;
  --brand-primary-soft: rgba(7, 193, 96, 0.08);

  --text-main: #1F2937;
  /* Darker grey for better contrast */
  --text-secondary: #6B7280;
  --text-light: #9CA3AF;

  --border-soft: rgba(0, 0, 0, 0.05);
  /* Softer border */
  --surface-subtle: #F7F8FA;
  /* Cool grey background */
  --surface-glass: rgba(255, 255, 255, 0.85);

  --card-radius: 16px;
  /* Modern rounded corners */
  --chip-radius: 999px;

  /* Modern double-layer shadow */
  --card-shadow:
    0 4px 20px rgba(0, 0, 0, 0.03),
    0 1px 4px rgba(0, 0, 0, 0.02);

  --card-shadow-hover:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.01);

  --card-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.02);

  --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Gamification rank colors */
  --rank-bronze: #b87333;
  --rank-silver: #94a3b8;
  --rank-gold: #d4af37;
  --rank-platinum: #3b82f6;
  --rank-diamond: #8b5cf6;
  --rank-star: #f97316;
  --rank-king: #ef4444;
}

/* Rank badge (e.g. 青铜/白银/黄金...) */
.rank-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--chip-radius);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-secondary);
}

.rank-badge[data-rank="青铜"] {
  color: var(--rank-bronze);
  background: rgba(184, 115, 51, 0.12);
  border-color: rgba(184, 115, 51, 0.28);
}

.rank-badge[data-rank="白银"] {
  color: var(--rank-silver);
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.28);
}

.rank-badge[data-rank="黄金"] {
  color: var(--rank-gold);
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.28);
}

.rank-badge[data-rank="铂金"] {
  color: var(--rank-platinum);
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}

.rank-badge[data-rank="钻石"] {
  color: var(--rank-diamond);
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.28);
}

.rank-badge[data-rank="星耀"] {
  color: var(--rank-star);
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.28);
}

.rank-badge[data-rank="王者"] {
  color: var(--rank-king);
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

/* User menu: vertical layout with name on top, rank below */
.user-menu-wrapper .app-nav-item {
  overflow: visible !important;
}

.user-info-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.user-info-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #333;
}

.rank-badge--below {
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Legacy styles - kept for backward compatibility */
.user-menu-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-menu-avatar i {
  margin-inline-end: 0 !important;
}

.rank-badge--overlay {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(12%, -10%);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.user-menu-name {
  font-weight: 600;
  line-height: 1.1;
}

/* Map legacy primary to brand to unify color usage across pages */
:root {
  --primary-color: #07C160;
}

/* Bootstrap/utility primary remap for global consistency */
.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--brand-primary) !important;
}

.bg-primary {
  background-color: var(--brand-primary) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.link-primary {
  color: #576B95 !important;
}

.badge.bg-primary {
  background-color: var(--brand-primary) !important;
}

/* Pagination active to brand */
.pagination .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.pagination .page-link {
  color: var(--brand-primary);
}

/* Nav item active corrections */
.nav-link.active,
.app-nav-item.active {
  color: var(--brand-primary) !important;
}

.app-bottom-nav-item.active {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
}

/* Logo icon to previous blue */
.app-nav-brand i,
.navbar-brand i {
  color: #4A90E2 !important;
}

/* Force learning-stats-card to unify even if inline styles are present */
.learning-stats-card {
  box-shadow: var(--card-shadow) !important;
  border: 1px solid var(--border-soft) !important;
  background: #fff !important;
}

/* Safe area for iOS bottom */
.wx-bottom-safe {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Cell (list item) */
.wx-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
}

.wx-cell+.wx-cell {
  margin-top: 10px;
}

.wx-cell-title {
  font-weight: 600;
  color: var(--text-main);
}

.wx-cell-sub {
  color: var(--text-secondary);
  font-size: 13px;
}

.wx-cell-arrow {
  color: #C0C4CC;
  margin-inline-start: 8px;
}

/* Grid card (home shortcuts) */
.wx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .wx-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wx-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  text-align: center;
  color: var(--text-main);
  transition: background-color var(--transition-base), border-color var(--transition-base);
  box-shadow: var(--card-shadow);
}

.wx-grid-item:hover {
  background: var(--brand-primary-soft);
  border-color: rgba(7, 193, 96, .25);
  text-decoration: none;
}

.wx-grid-icon {
  font-size: 22px;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.wx-grid-title {
  font-weight: 600;
}

.wx-grid-desc {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

/* Functional module icon palette (cards + top-nav) */
/* Home grid cards */
a[href="/ai_companion/homework"] .wx-grid-icon {
  color: #07C160;
}

/* Homework */
a[href="/ai_companion/correction"] .wx-grid-icon {
  color: #FF9F43;
}

/* AI Correction */
a[href="/exercises"] .wx-grid-icon {
  color: #4A90E2;
}

/* Exercises */
a[href="/notes"] .wx-grid-icon {
  color: #8E67F0;
}

/* Notes */
a[href="/exam"] .wx-grid-icon {
  color: #00B2A9;
}

/* Exam */

/* Student Center: Quick Add (three colors) — use deep gradient circle + white icon */
.student-quick-card--homework {
  border-color: rgba(7, 193, 96, 0.2) !important;
}

.student-quick-card--homework .student-quick-card-icon {
  background: linear-gradient(135deg, #07C160 0%, #12d87c 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

.student-quick-card--correction {
  border-color: rgba(255, 159, 67, 0.25) !important;
}

.student-quick-card--correction .student-quick-card-icon {
  background: linear-gradient(135deg, #FF9F43 0%, #FFC37A 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

.student-quick-card--notes {
  border-color: rgba(142, 103, 240, 0.25) !important;
}

.student-quick-card--notes .student-quick-card-icon {
  background: linear-gradient(135deg, #8E67F0 0%, #B497FF 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

/* 新增：预习与复习卡片的独立配色 */
.student-quick-card--study {
  border-color: rgba(23, 162, 184, 0.22) !important;
}

.student-quick-card--study .student-quick-card-icon {
  background: linear-gradient(135deg, #17A2B8 0%, #4DD0E1 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

.student-quick-card--review {
  border-color: rgba(46, 213, 115, 0.22) !important;
}

.student-quick-card--review .student-quick-card-icon {
  background: linear-gradient(135deg, #2ED573 0%, #7BED9F 100%) !important;
  color: #fff !important;
  box-shadow: none;
}

/* Student Center: Today Stats (three colors) — use light tint circle + colored icon */
.stat-icon.homework-icon {
  background: rgba(7, 193, 96, 0.12) !important;
  color: #07C160 !important;
}

.stat-icon.correction-icon {
  background: rgba(255, 159, 67, 0.15) !important;
  color: #FF9F43 !important;
}

.stat-icon.error-icon {
  background: rgba(142, 103, 240, 0.16) !important;
  color: #8E67F0 !important;
}

/* Match the number color to the icon via sibling combinator */
.stats-grid-card .stat-icon.homework-icon~.stat-info h3 {
  color: #07C160 !important;
}

.stats-grid-card .stat-icon.correction-icon~.stat-info h3 {
  color: #FF9F43 !important;
}

.stats-grid-card .stat-icon.error-icon~.stat-info h3 {
  color: #8E67F0 !important;
}

/* Today Stats header bar color by type */
.stat-card.stat-card--homework::before {
  background: linear-gradient(90deg, #07C160 0%, #12d87c 100%) !important;
}

.stat-card.stat-card--correction::before {
  background: linear-gradient(90deg, #FF9F43 0%, #FFC37A 100%) !important;
}

.stat-card.stat-card--error::before {
  background: linear-gradient(90deg, #8E67F0 0%, #B497FF 100%) !important;
}

/* Center content inside Today Stats cards */
.stats-grid .stat-card.clickable.stats-grid-card {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.stats-grid .stat-card.clickable.stats-grid-card .stat-icon {
  margin-bottom: 8px;
}

.stats-grid .stat-card.clickable.stats-grid-card .stat-info {
  margin-inline-start: 0;
}

/* Note: Navigation bar icon colors remain unchanged per request */

/* Chips */
.wx-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wx-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--chip-radius);
  color: var(--text-secondary);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.wx-chip.active {
  color: var(--brand-primary);
  border-color: rgba(7, 193, 96, .35);
  background: var(--brand-primary-soft);
}

/* Buttons */
.wx-btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
}

.wx-btn-outline {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
}

.wx-btn-text {
  background: transparent;
  border: 0;
  color: #576B95;
  padding: 8px 6px;
}

/* Tags */
.wx-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--chip-radius);
  color: var(--text-secondary);
  background: #fff;
}

/* Subject badge base */
.subject-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--border-soft);
  border-radius: var(--chip-radius);
  color: var(--text-secondary);
  background: #fff;
}

/* Subject badges (global, used across pages) */
.subject-badge.subject-语文 {
  color: #E74C3C;
  border-color: rgba(231, 76, 60, 0.35);
  background: rgba(231, 76, 60, 0.08);
}

.subject-badge.subject-数学 {
  color: #4A90E2;
  border-color: rgba(74, 144, 226, 0.35);
  background: rgba(74, 144, 226, 0.10);
}

.subject-badge.subject-英语 {
  color: #07C160;
  border-color: rgba(7, 193, 96, 0.35);
  background: rgba(7, 193, 96, 0.10);
}

.subject-badge.subject-物理 {
  color: #546E7A;
  border-color: rgba(84, 110, 122, 0.35);
  background: rgba(84, 110, 122, 0.10);
}

.subject-badge.subject-化学 {
  color: #FF9F43;
  border-color: rgba(255, 159, 67, 0.45);
  background: rgba(255, 159, 67, 0.12);
}

.subject-badge.subject-生物 {
  color: #16A085;
  border-color: rgba(22, 160, 133, 0.35);
  background: rgba(22, 160, 133, 0.10);
}

.subject-badge.subject-历史 {
  color: #8D6E63;
  border-color: rgba(141, 110, 99, 0.35);
  background: rgba(141, 110, 99, 0.10);
}

.subject-badge.subject-地理 {
  color: #00B2A9;
  border-color: rgba(0, 178, 169, 0.35);
  background: rgba(0, 178, 169, 0.10);
}

.subject-badge.subject-政治,
.subject-badge.subject-道德与法治 {
  color: #F39C12;
  border-color: rgba(243, 156, 18, 0.45);
  background: rgba(243, 156, 18, 0.12);
}

.subject-badge.subject-科学 {
  color: #8E67F0;
  border-color: rgba(142, 103, 240, 0.45);
  background: rgba(142, 103, 240, 0.12);
}

.subject-badge.subject-综合,
.subject-badge.subject-default {
  color: #6c757d;
  border-color: rgba(108, 117, 125, 0.35);
  background: rgba(108, 117, 125, 0.08);
}

/* English slug aliases mapping to same palette */
.subject-badge.subject-chinese {
  color: #E74C3C;
  border-color: rgba(231, 76, 60, 0.35);
  background: rgba(231, 76, 60, 0.08);
}

.subject-badge.subject-math {
  color: #4A90E2;
  border-color: rgba(74, 144, 226, 0.35);
  background: rgba(74, 144, 226, 0.10);
}

.subject-badge.subject-english {
  color: #07C160;
  border-color: rgba(7, 193, 96, 0.35);
  background: rgba(7, 193, 96, 0.10);
}

.subject-badge.subject-physics {
  color: #546E7A;
  border-color: rgba(84, 110, 122, 0.35);
  background: rgba(84, 110, 122, 0.10);
}

.subject-badge.subject-chemistry {
  color: #FF9F43;
  border-color: rgba(255, 159, 67, 0.45);
  background: rgba(255, 159, 67, 0.12);
}

.subject-badge.subject-biology {
  color: #16A085;
  border-color: rgba(22, 160, 133, 0.35);
  background: rgba(22, 160, 133, 0.10);
}

.subject-badge.subject-history {
  color: #8D6E63;
  border-color: rgba(141, 110, 99, 0.35);
  background: rgba(141, 110, 99, 0.10);
}

.subject-badge.subject-geography {
  color: #00B2A9;
  border-color: rgba(0, 178, 169, 0.35);
  background: rgba(0, 178, 169, 0.10);
}

.subject-badge.subject-politics {
  color: #F39C12;
  border-color: rgba(243, 156, 18, 0.45);
  background: rgba(243, 156, 18, 0.12);
}

.subject-badge.subject-science {
  color: #8E67F0;
  border-color: rgba(142, 103, 240, 0.45);
  background: rgba(142, 103, 240, 0.12);
}

.subject-badge.subject-general,
.subject-badge.subject-default {
  color: #6c757d;
  border-color: rgba(108, 117, 125, 0.35);
  background: rgba(108, 117, 125, 0.08);
}

/* Headings */
.wx-section-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  font-size: 18px;
}

.wx-subtle {
  color: var(--text-secondary);
}

/* Minimal shadows reset for heavy components */
.wx-no-shadow,
.wx-no-shadow * {
  box-shadow: none !important;
}

/* Global card shadow + nesting rules */
.card,
.stats-card,
.exam-list-card,
.target-card,
.learning-stats-card,
.target-form-card,
.exam-form-card,
.analysis-card,
.target-item {
  box-shadow: var(--card-shadow);
}

/* Second level nesting uses softer shadow */
.card .card,
.wx-grid-item .wx-grid-item,
.stats-card .stats-card,
.exam-list-card .exam-list-card,
.target-card .target-card,
.learning-stats-card .learning-stats-card,
.target-form-card .target-form-card,
.exam-form-card .exam-form-card,
.analysis-card .analysis-card,
.target-item .target-item {
  box-shadow: var(--card-shadow-soft);
}

/* Depth > 2: flatten (no shadow) */
.card .card .card,
.wx-grid-item .wx-grid-item .wx-grid-item,
.stats-card .stats-card .stats-card,
.exam-list-card .exam-list-card .exam-list-card,
.target-card .target-card .target-card,
.learning-stats-card .learning-stats-card .learning-stats-card,
.target-form-card .target-form-card .target-form-card,
.exam-form-card .exam-form-card .exam-form-card,
.analysis-card .analysis-card .analysis-card,
.target-item .target-item .target-item {
  box-shadow: none !important;
  border: 1px solid var(--border-soft) !important;
  background: #fff !important;
}

/* Notes (错题本) specific overrides */
.notes-page .qa-content,
.notes-page .question-content,
.notes-page .error-content,
.notes-page .chat-content {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
}

.notes-page .note-actions .btn.text-white {
  color: #fff !important;
}

.notes-page .deep-ai-study-btn {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
  box-shadow: var(--card-shadow-soft) !important;
}

.notes-page .deep-ai-study-btn:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #fff !important;
}

/* Ensure action buttons keep their filled backgrounds on notes page */
.notes-page .note-actions .btn.btn-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.notes-page .note-actions .btn.btn-info {
  background-color: var(--bs-info, #0dcaf0) !important;
  border-color: var(--bs-info, #0dcaf0) !important;
  color: #fff !important;
}

.notes-page .note-actions .btn.btn-danger {
  background-color: var(--bs-danger, #dc3545) !important;
  border-color: var(--bs-danger, #dc3545) !important;
  color: #fff !important;
}

/* Align knowledge analysis block with text content */
.notes-page .knowledge-analysis-section {
  padding-inline-start: 16px;
  padding-inline-end: 16px;
}