/* Leetcode learning lab theme
 * Purpose-built for the algorithm study app. Keep it separate from investment UI.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,750&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap");

:root {
  --learn-bg: #f4f8ff;
  --learn-paper: #ffffff;
  --learn-panel: #eef5ff;
  --learn-ink: #162033;
  --learn-muted: #65738a;
  --learn-soft: #94a3b8;
  --learn-line: #dbe6f4;
  --learn-blue: #2563eb;
  --learn-sky: #38bdf8;
  --learn-mint: #10b981;
  --learn-amber: #f7b801;
  --learn-coral: #ff6b5f;
  --learn-green: #16a34a;
  --learn-red: #ef4444;
  --learn-shadow: 0 18px 42px rgba(42, 66, 112, .12);
  --learn-radius: 14px;
}

html,
body {
  background:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(56, 189, 248, .22), transparent 28%),
    radial-gradient(circle at 78% 2%, rgba(247, 184, 1, .2), transparent 24%),
    var(--learn-bg) !important;
  background-size: 26px 26px, 26px 26px, auto, auto, auto !important;
  color: var(--learn-ink) !important;
  font-family: "IBM Plex Sans", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif !important;
  overflow-x: clip;
}

* {
  letter-spacing: 0 !important;
}

.app-shell {
  min-height: 100vh;
  background: transparent !important;
  color: var(--learn-ink) !important;
}

.topbar {
  background: rgba(255, 255, 255, .9) !important;
  border-bottom: 1px solid rgba(219, 230, 244, .95) !important;
  box-shadow: 0 10px 30px rgba(42, 66, 112, .08) !important;
  backdrop-filter: blur(18px);
}

.brand,
.section-head h1,
.section-head h2,
.lesson-title,
.module-title,
.content h1,
.content h2,
.content h3 {
  color: var(--learn-ink) !important;
  font-family: "Fraunces", "IBM Plex Sans", "Microsoft YaHei", serif !important;
  letter-spacing: 0 !important;
}

.brand {
  font-size: 20px !important;
}

.brand-mark,
.module-icon {
  background: linear-gradient(135deg, var(--learn-amber), #ffd766) !important;
  color: #172033 !important;
  border: 1px solid rgba(22, 32, 51, .08) !important;
  box-shadow: 0 10px 20px rgba(247, 184, 1, .24) !important;
}

.main-nav a {
  color: var(--learn-muted) !important;
  border-radius: 999px !important;
}

.main-nav a.active,
.main-nav a:hover {
  color: var(--learn-blue) !important;
  background: rgba(37, 99, 235, .09) !important;
}

.hub-link,
.search-box,
.search-box input,
.ghost-button,
.icon-button,
.avatar-button,
.outline-button,
.quiet-link,
.more-button {
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid var(--learn-line) !important;
  color: var(--learn-ink) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.search-box input::placeholder {
  color: var(--learn-soft) !important;
}

.sidebar,
.right-rail,
.right-panel,
.panel,
.card-panel,
.lesson-card,
.practice-card,
.roadmap-card,
.review-card,
.note-card,
.module-item,
.demo-card,
.stage-card,
.topic-card,
.visualizer-panel,
.visualizer-stage,
.bar-visual,
.code-panel,
.path-section,
.route-card,
.extra-section,
.content-panel {
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--learn-line) !important;
  color: var(--learn-ink) !important;
  border-radius: var(--learn-radius) !important;
  box-shadow: var(--learn-shadow) !important;
}

.sidebar,
.right-rail {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .05), transparent 42%),
    rgba(246, 249, 255, .86) !important;
}

.right-rail > * {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--learn-line) !important;
  color: var(--learn-ink) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(48, 42, 31, .09) !important;
}

.sidebar p,
.sidebar span,
.module-item p,
.module-title small,
.content p,
.right-rail p,
.muted,
.section-head,
.top-actions {
  color: var(--learn-muted) !important;
}

.module-item.active,
.module-button.active,
.lesson-card.active,
.route-card.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(255, 255, 255, .98)) !important;
  border-color: rgba(37, 99, 235, .28) !important;
}

.primary-button,
.cta-button,
button[class*="primary"] {
  background: var(--learn-amber) !important;
  color: #172033 !important;
  border: 1px solid rgba(22, 32, 51, .1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(247, 184, 1, .23) !important;
}

.primary-button:hover,
.cta-button:hover,
button[class*="primary"]:hover {
  background: #ffc928 !important;
}

.visualizer-panel {
  overflow: hidden;
}

.visualizer-stage,
.bar-visual {
  background:
    linear-gradient(rgba(37, 99, 235, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px),
    #f8fbff !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
}

.bar-visual [style*="background"],
.bar-visual > * {
  border-radius: 8px !important;
}

.meter,
.progress-track {
  background: #dfe8f5 !important;
  border-radius: 999px !important;
}

.meter span,
.progress-fill {
  background: linear-gradient(90deg, var(--learn-blue), var(--learn-mint)) !important;
}

.tab,
.lesson-tabs a,
.chip,
.q-tag {
  color: var(--learn-muted) !important;
  border-radius: 999px !important;
}

.tab.active,
.lesson-tabs a.active,
.chip.active {
  color: var(--learn-blue) !important;
  background: rgba(37, 99, 235, .1) !important;
}

code,
pre,
.code-panel {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace !important;
}

.code-panel {
  background: rgba(255, 253, 247, .94) !important;
  color: var(--learn-ink) !important;
  border-color: var(--learn-line) !important;
  box-shadow: var(--learn-shadow) !important;
}

.code-panel *,
.code-panel p,
.code-panel span {
  color: var(--learn-ink) !important;
}

.dot,
.status-dot {
  background: var(--learn-blue) !important;
}

.app-shell::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 66px 0 auto;
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    var(--learn-blue) 0 80px,
    var(--learn-mint) 80px 160px,
    var(--learn-amber) 160px 240px,
    var(--learn-coral) 240px 320px
  );
  opacity: .78;
  z-index: 19;
}

.lesson-area {
  background:
    radial-gradient(circle at 10% 2%, rgba(247, 184, 1, .11), transparent 26%),
    radial-gradient(circle at 94% 12%, rgba(16, 185, 129, .1), transparent 22%) !important;
}

.lesson-title h1 {
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.05 !important;
}

.lesson-title h1::after,
.section-head h2::after,
.path-heading h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--learn-blue), var(--learn-mint), var(--learn-amber));
}

.visualizer-panel {
  border-radius: 22px !important;
  border-color: rgba(37, 99, 235, .18) !important;
  transform: rotate(-.15deg);
}

.visualizer-panel > * {
  transform: rotate(.15deg);
}

.visualizer-copy span,
.route-card span,
.mini-status,
.lesson-tabs button.active,
.tab.active {
  color: var(--learn-blue) !important;
}

.visualizer-copy span,
.chapter-card span {
  background: rgba(37, 99, 235, .09) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  width: fit-content;
}

.bar,
.list-node,
.hash-row,
.tree-node,
.graph-node,
.table-column strong,
.pill-visual span,
.stack-box strong,
.stack-box em {
  background: #e7eef8 !important;
  color: #1e2d46 !important;
}

.bar.active,
.list-node.active,
.hash-row.active,
.tree-node.active,
.graph-node.active,
.table-column strong.active,
.pill-visual span.active,
.stack-box strong.active {
  background: var(--learn-blue) !important;
  color: #ffffff !important;
}

.bar.done,
.list-node.done,
.tree-node.done,
.graph-node.done,
.table-column strong.done {
  background: var(--learn-mint) !important;
  color: #ffffff !important;
}

.pointer-label,
.problem-list em,
.chapter-card strong {
  color: #b76b00 !important;
}

.code-panel,
.code-sample {
  border-radius: 16px !important;
  border-color: #c9d8ea !important;
}

.code-panel pre,
.code-sample {
  background: #111827 !important;
}

.code-panel pre code,
.code-sample code,
.explanation-panel code {
  color: #d8f3ff !important;
}

.code-toolbar {
  background: #f8fbff !important;
}

.problem-list {
  border-radius: 12px !important;
}

.path-section,
.extra-section {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .055), transparent),
    rgba(255, 255, 255, .76) !important;
}

.route-card,
.exercise-bank article,
.extra-grid article,
.note-board article,
.discussion-list article {
  border-radius: 16px !important;
}

.route-card:hover,
.route-card.active {
  border-color: rgba(37, 99, 235, .35) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(16, 185, 129, .07)) !important;
}

@media (max-width: 900px) {
  .topbar {
    position: sticky !important;
    top: 0;
  }

  .sidebar,
  .right-rail {
    background: rgba(255, 255, 255, .9) !important;
  }

  .app-shell::before {
    top: 0;
  }
}

@media (max-width: 560px) {
  .brand {
    font-size: 17px !important;
  }

  .section-head h1,
  .content h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}