/* Language Learning Platform — design system */
:root {
  --brand: #6366f1;
  --brand-2: #8b5cf6;
  --brand-3: #a78bfa;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f4f6fb;
  --card: #ffffff;
  --line: #e6eaf2;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0ea5e9;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 18px 40px rgba(99, 102, 241, 0.16);
  --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(167,139,250,.12));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(99,102,241,.10), transparent 50%),
    radial-gradient(900px 420px at 100% 0%, rgba(167,139,250,.10), transparent 45%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Navbar */
.navbar {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(230,234,242,.9);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: .3px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.navbar .nav-link {
  color: #334155 !important;
  font-weight: 500;
  border-radius: 10px;
  padding: .45rem .85rem !important;
  transition: .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  background: var(--grad-soft);
  color: var(--brand) !important;
}
.navbar.admin-nav {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-bottom: none;
}
.navbar.admin-nav .navbar-brand {
  background: linear-gradient(90deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.navbar.admin-nav .nav-link { color: #e2e8f0 !important; }
.navbar.admin-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }

/* Buttons */
.btn {
  border-radius: 12px;
  padding: .62rem 1.25rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--grad);
  border: none;
  box-shadow: 0 8px 20px rgba(99,102,241,.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 12px 28px rgba(99,102,241,.35);
}
.btn-outline-primary {
  color: var(--brand);
  border-color: #c7d2fe;
  background: #fff;
}
.btn-outline-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-success { background: linear-gradient(135deg, #10b981, #34d399); border: none; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #f87171); border: none; }
.btn-outline-danger { color: var(--danger); border-color: #fecaca; background: #fff; }
.btn-outline-danger:hover, .btn-outline-danger.active { background: var(--danger); color: #fff; }
.btn-outline-secondary { border-color: var(--line); background: #fff; color: var(--muted); }
.btn-sm { padding: .38rem .85rem; border-radius: 10px; font-size: .875rem; }
.btn-link { color: var(--brand); font-weight: 500; }

/* Cards */
.card {
  border: 1px solid rgba(230,234,242,.95);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-hover); }
.card-body { padding: 1.35rem 1.5rem; }
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

/* Hero */
.hero-section {
  background: var(--grad);
  color: #fff;
  padding: 88px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -120px; top: -180px;
  background: rgba(255,255,255,.10);
  border-radius: 50%;
}
.hero-section::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  left: -80px; bottom: -160px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.hero-section .display-4 { font-weight: 800; letter-spacing: -.5px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,0.22);
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-weight: 600;
  font-size: .92rem;
}
.hero-path-card {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  padding: 1.5rem 1.65rem;
  color: #ffffff;
}
.hero-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.4);
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1;
}
.hero-section .btn-light {
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}
.hero-section .btn-outline-light {
  border-radius: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.12);
}

/* Section title */
.section-title {
  font-weight: 800;
  position: relative;
  padding-left: 16px;
  margin-bottom: 1.25rem;
  letter-spacing: .2px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 28px;
  background: var(--grad);
  border-radius: 99px;
}

/* Badges */
.badge {
  border-radius: 999px;
  padding: .45em .85em;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Forms */
.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: .72rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-3);
  box-shadow: 0 0 0 .22rem rgba(99,102,241,.15);
}
.form-label { font-weight: 600; color: #334155; margin-bottom: .45rem; }

/* Tables */
.table { margin-bottom: 0; }
.table thead th {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-hover tbody tr:hover { background: rgba(99,102,241,.04); }

/* Comment / discussion */
.comment-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.comment-box:hover {
  border-color: #c7d2fe;
  box-shadow: 0 8px 22px rgba(99,102,241,.08);
}
.comment-box .avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}
.reply-box {
  margin-left: 12px;
  border-left: 3px solid #c7d2fe;
  background: #f8faff;
}

/* Forum */
.forum-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fdf4ff 100%);
  border: 1px solid #e9e5ff;
  border-radius: 22px;
  padding: 28px 32px;
  margin-bottom: 22px;
}
.forum-chip {
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: #fff;
  color: var(--muted);
  transition: .18s ease;
}
.forum-chip:hover { border-color: #c7d2fe; color: var(--brand); }
.forum-chip.active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 18px rgba(99,102,241,.25);
}
.post-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: .2s ease;
  position: relative;
  overflow: hidden;
}
.post-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad);
  opacity: 0;
  transition: .2s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: #ddd6fe;
}
.post-card:hover::before { opacity: 1; }
.post-card .post-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.post-card .post-title:hover { color: var(--brand); }
.post-card .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  color: var(--muted);
  font-size: .875rem;
}
.post-card .post-excerpt {
  color: var(--muted);
  line-height: 1.75;
  margin: .75rem 0 0;
}
.post-stats {
  display: flex;
  gap: 1rem;
  color: var(--muted);
  font-size: .875rem;
  white-space: nowrap;
}
.post-stats i { color: var(--brand-2); margin-right: .25rem; }
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .28rem .75rem;
  font-size: .78rem;
  font-weight: 700;
}
.category-pill.cat-学习方法 { background: #ecfeff; color: #0e7490; }
.category-pill.cat-科普 { background: #f5f3ff; color: #6d28d9; }
.category-pill.cat-学习交流 { background: #ecfdf5; color: #047857; }
.category-pill.cat-default { background: #eef2ff; color: #4338ca; }

/* Course cards */
.course-card { height: 100%; display: flex; flex-direction: column; }
.course-icon {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: var(--grad-soft);
}
.course-card .card-body { display: flex; flex-direction: column; flex: 1; }
.course-card .card-title { font-weight: 700; }
.locked-card { opacity: .72; filter: saturate(.7); }
.locked-card:hover { transform: none; box-shadow: var(--shadow); }

/* Stats */
.stat-card {
  border-left: 4px solid var(--brand);
  border-radius: 14px;
}
.stat-card .fs-4 { font-weight: 800; }

/* Flash */
.flash-messages {
  position: fixed;
  top: 86px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
  max-width: 380px;
}
.flash-messages .alert {
  border-radius: 14px;
  border: none;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
}

/* Footer */
footer {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  margin-top: 4rem;
}
footer h5, footer h6 { font-weight: 700; }
footer a:hover { color: #fff !important; opacity: 1 !important; }

/* Auth pages */
.auth-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
}
.auth-card {
  border: none;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  padding: 2.25rem;
}
.auth-card h3 { font-weight: 800; }

/* Tabs */
.nav-tabs {
  border: none;
  gap: .5rem;
  background: #fff;
  padding: .5rem;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.nav-tabs .nav-link {
  border: none;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
  padding: .65rem 1.15rem;
}
.nav-tabs .nav-link.active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 18px rgba(99,102,241,.25);
}

/* Content page */
.content-page {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem;
  line-height: 1.95;
}

/* Level colors */
.level-beginner { color: #059669; }
.level-intermediate { color: #d97706; }
.level-advanced { color: #dc2626; }

/* Misc */
.text-muted-soft { color: var(--muted); }
.divider { height: 1px; background: var(--line); border: 0; opacity: 1; }
.page-shell { padding: 2rem 0 3rem; }
.pill-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  color: var(--brand);
}
.emoji-icon { font-size: 1.35rem; }

@media (max-width: 768px) {
  .hero-section { padding: 64px 0 72px; }
  .forum-hero { padding: 20px; }
  .post-card { padding: 16px; }
  .flash-messages { left: 12px; right: 12px; min-width: 0; }
}