/*
 * Proveralka product UI
 *
 * Final shared cascade for base.html pages. Page templates keep structural
 * CSS; colors, typography, surfaces and responsive safety are normalized here.
 */

:root {
  color-scheme: light;
  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-dim: #f3f7fb;
  --surface-2: #f9fbfd;
  --surface-raised: #ffffff;
  --ink: #142033;
  --ink-heading: #0b1728;
  --muted: #68778a;
  --line: rgba(18, 40, 66, .11);
  --line-strong: rgba(18, 40, 66, .19);
  --brand: #159bd7;
  --brand-2: #0876aa;
  --brand-3d: #075c83;
  --brand-soft: #e3f6fd;
  --accent: #58b92a;
  --accent-soft: #edf9e8;
  --warn: #a45a10;
  --danger: #d9435f;
  --shadow-sm: 0 5px 16px rgba(13, 31, 52, .055);
  --shadow-md: 0 16px 38px rgba(13, 31, 52, .09);
  --shadow-lg: 0 30px 74px rgba(13, 31, 52, .14);
  --focus: 0 0 0 4px rgba(21, 155, 215, .18);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --container: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.08, .3, 1);
  --btn-depth: 3px;
  --btn-radius: 16px;
  --btn-side: #c8d5e2;
  --btn-side-primary: #0876aa;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #091321;
  --surface: #111d2d;
  --surface-dim: #162438;
  --surface-2: #132134;
  --surface-raised: #1a2a40;
  --ink: #eaf2fb;
  --ink-heading: #f7fbff;
  --muted: #a4b2c4;
  --line: rgba(205, 226, 248, .13);
  --line-strong: rgba(205, 226, 248, .22);
  --brand: #50bce8;
  --brand-2: #86d6f5;
  --brand-3d: #2293c3;
  --brand-soft: rgba(45, 170, 221, .15);
  --accent: #80d457;
  --accent-soft: rgba(111, 202, 69, .14);
  --warn: #f0b36f;
  --danger: #ff8499;
  --shadow-sm: 0 7px 20px rgba(0, 0, 0, .20);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, .29);
  --shadow-lg: 0 34px 84px rgba(0, 0, 0, .40);
  --focus: 0 0 0 4px rgba(80, 188, 232, .22);
  --btn-side: #263a52;
  --btn-side-primary: #176f98;
}

html {
  min-width: 320px;
  overflow-x: clip !important;
  overflow-y: visible;
  background: var(--bg);
  scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent;
}

body {
  min-width: 320px;
  overflow-x: clip !important;
  overflow-y: visible;
  background:
    radial-gradient(720px 430px at 90% -8%, rgba(21, 155, 215, .12), transparent 68%),
    radial-gradient(620px 380px at -8% 18%, rgba(88, 185, 42, .07), transparent 70%),
    var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 500 !important;
}

[data-theme="dark"] body {
  background:
    radial-gradient(760px 450px at 90% -8%, rgba(45, 170, 221, .11), transparent 70%),
    radial-gradient(640px 400px at -10% 20%, rgba(111, 202, 69, .055), transparent 72%),
    var(--bg) !important;
}

body::before {
  background-image:
    linear-gradient(rgba(22, 49, 78, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 49, 78, .026) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: .42 !important;
  mix-blend-mode: normal !important;
  mask-image: linear-gradient(to bottom, #000, transparent 66%);
}

[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(210, 231, 252, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 231, 252, .025) 1px, transparent 1px) !important;
}

body::after {
  display: none !important;
}

main,
main > *,
.container,
.trainer-main,
.toolbar-title,
.action-content,
.class-head > *,
.panel,
.card {
  min-width: 0;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  max-width: var(--container);
  padding-inline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink-heading) !important;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

h3 {
  line-height: 1.18;
  letter-spacing: -.02em;
}

p,
.muted,
small {
  color: var(--muted);
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
textarea,
select,
[role="button"] {
  outline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--brand);
}

/* Calm, cohesive shell */
.site-header {
  min-height: 68px;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .36) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}

.site-header .nav {
  min-height: 68px;
  height: auto;
  gap: 12px;
}

.site-header .brand-logo {
  height: 44px;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.nav-links {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.nav-links a,
.nav-auth a {
  min-height: 38px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.nav-links a:hover,
.nav-links a[aria-current="page"],
.nav-auth a:hover,
.nav-auth a[aria-current="page"] {
  color: var(--ink-heading);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.header-controls {
  min-width: 0;
}

.hud-pill {
  min-height: 38px;
  padding: 6px 10px;
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

.theme-toggle {
  flex: 0 0 auto;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Shared surfaces and controls */
.card,
.panel,
.teacher-card,
.stat-card,
.action-card,
.class-card,
.filter-card,
.work-card,
.toolbar,
.task-card,
.profile-card,
.account-card,
.security-card,
.data-card,
.price-card,
.olymp-card,
.helper-card,
.daily-card,
.challenge,
.reward-card,
.shop-item,
.mode-card,
.notif-card,
.friend-card,
.room-card,
.review-card,
.assignment-card,
.activity-card {
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn,
.shop-btn,
.load-more,
.apply-filters,
.reset-filters,
.auth-login-btn {
  min-height: 44px !important;
  padding: 10px 17px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.btn-primary,
.shop-btn.btn-buy,
.shop-btn.btn-activate,
.qd-claim,
.auth-login-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #159bd7, #138bc2) !important;
  box-shadow: 0 var(--btn-depth) 0 var(--btn-side-primary), 0 10px 24px rgba(21, 155, 215, .18) !important;
}

.btn-secondary,
.shop-btn.btn-equip,
.reset-filters {
  color: var(--ink) !important;
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
}

input,
textarea,
select,
.form-control,
.search-input {
  max-width: 100%;
  border-radius: 14px !important;
  border-color: var(--line-strong) !important;
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.search-input:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--focus) !important;
}

/* Dark mode maps hard-coded page surfaces back to the system tokens. */
[data-theme="dark"] :is(
  .teacher-page,
  .trainer-page,
  .profile-page,
  .activity-page,
  .challenges-page,
  .daily-page,
  .friends-page,
  .rewards-page,
  .shop-wrap,
  .assignment-page,
  .class-page,
  .journal-page,
  .review-page,
  .builder,
  .page-hero,
  .ege-page,
  .essay-page,
  .checker-page
) {
  background: transparent !important;
  color: var(--ink) !important;
}

[data-theme="dark"] :is(
  .stat-card,
  .action-card,
  .class-card,
  .class-stats,
  .filter-card,
  .work-card,
  .toolbar,
  .task-card,
  .task-head,
  .task-body,
  .answer-area,
  .profile-card,
  .account-card,
  .security-card,
  .data-card,
  .panel,
  .card,
  .helper-card,
  .side-card,
  .queue,
  .activity-card,
  .submit-card,
  .preview-box,
  .progress-box
) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] :is(
  .action-content h3,
  .class-name,
  .class-stat .v,
  .panel h2,
  .panel h3,
  .task-title,
  .toolbar b,
  .stat-card .num
) {
  color: var(--ink-heading) !important;
}

[data-theme="dark"] :is(
  .action-content p,
  .class-meta,
  .class-stat .l,
  .filter-caption,
  .task-source
) {
  color: var(--muted) !important;
}

/* Teacher workspace */
.teacher-page {
  padding: clamp(32px, 5vw, 56px) 0 76px !important;
  background:
    radial-gradient(700px 340px at 92% 0, rgba(21, 155, 215, .08), transparent 68%),
    transparent !important;
}

.teacher-hero {
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}

.teacher-hero h1 {
  max-width: 760px;
  margin: 10px 0 16px;
  font-size: clamp(2.35rem, 5vw, 3.6rem) !important;
  line-height: 1.04 !important;
}

.teacher-page .section-head {
  max-width: none;
  margin: 0 0 18px;
  text-align: left;
}

.teacher-page .section-head h2,
.teacher-page .journal-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem) !important;
  line-height: 1.15 !important;
}

.teacher-page .stat-card,
.teacher-page .action-card,
.teacher-page .class-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.teacher-page .action-card {
  border-radius: 20px;
  padding: 18px;
}

.teacher-page .action-card::before {
  background: linear-gradient(135deg, rgba(21, 155, 215, .055), transparent);
}

.teacher-page .action-icon {
  background: var(--brand-soft);
}

.teacher-page .class-stats {
  background: var(--surface-dim) !important;
}

.teacher-page .journal-card {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(205, 226, 248, .13);
  background: linear-gradient(145deg, #13243a, #0d1a2c) !important;
  overflow: hidden !important;
}

.teacher-page .journal-card::before {
  display: none;
}

.teacher-page .journal-head {
  gap: 14px;
  flex-wrap: wrap;
}

.teacher-page .journal-head h2 {
  color: #f7fbff !important;
}

.teacher-page .journal-table,
.teacher-page .journal-row {
  min-width: 0;
}

/* Trainer: one page scroll, compact controls, no nested filter scrollbars. */
.trainer-page {
  background: transparent !important;
}

.trainer-hero {
  padding: clamp(32px, 5vw, 52px) 0 34px !important;
  background:
    radial-gradient(560px 320px at 88% 0, rgba(80, 188, 232, .18), transparent 70%),
    linear-gradient(145deg, #10233a, #0c192b) !important;
  contain: paint;
}

.trainer-hero::before,
.trainer-hero::after {
  display: none;
}

.trainer-hero h1 {
  max-width: 800px;
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  line-height: 1.03 !important;
  color: #fff !important;
}

.trainer-hero p {
  color: #c4d5e9 !important;
}

.trainer-shell {
  grid-template-columns: minmax(270px, 300px) minmax(0, 1fr) !important;
  gap: 20px !important;
}

.trainer-sidebar {
  position: static;
  max-height: none !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}

.trainer-sidebar .filter-card,
.trainer-sidebar .work-card {
  padding: 14px;
  overflow: visible !important;
  background: var(--surface) !important;
}

.trainer-sidebar h2 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
}

.subject-list,
.chip-cloud {
  max-height: none !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}

.chip {
  min-height: 34px !important;
  padding: 7px 10px !important;
  background: var(--surface-dim) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.chip.active {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

.filter-actions {
  position: static !important;
  background: none !important;
  padding-top: 4px !important;
}

.trainer-main .toolbar {
  background: var(--surface) !important;
}

.task-card {
  border-left-width: 4px !important;
  border-radius: 22px !important;
}

.task-head {
  background: var(--surface-dim) !important;
}

.task-body,
.fipi-rich-content {
  overflow-wrap: anywhere;
}

.fipi-rich-content table,
.fipi-task-table {
  display: block !important;
  max-width: 100%;
  overflow-x: auto !important;
  border-radius: 12px;
}

/* Tabs and protected workspaces */
.profile-page h1,
.admin-page h1,
.admin-shell h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
}

.profile-tabs,
.tabs,
.notif-tabs {
  max-width: 100%;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.notif-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tabs > *,
.tabs > *,
.notif-tabs > * {
  flex: 0 0 auto;
}

.platform-home {
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Footer texture is intentionally quiet. */
.site-footer {
  margin-top: 44px !important;
  padding: 96px 0 28px !important;
  background: linear-gradient(180deg, #0d2035, #081522) !important;
  isolation: isolate;
}

.site-footer::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -1px !important;
  height: 94px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f4f8fc' d='M0,64L48,58.7C96,53,192,43,288,42.7C384,43,480,53,576,58.7C672,64,768,64,864,56C960,48,1056,32,1152,26.7C1248,21,1344,27,1392,29.3L1440,32L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-footer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(620px 300px at 88% 10%, rgba(45, 170, 221, .15), transparent 68%),
    radial-gradient(480px 240px at 12% 0%, rgba(125, 211, 252, .10), transparent 62%) !important;
  opacity: 1 !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 1080px) {
  .trainer-shell {
    grid-template-columns: 1fr !important;
  }

  .trainer-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .trainer-sidebar > :nth-child(3),
  .trainer-sidebar > :nth-child(5) {
    grid-column: 1 / -1;
  }

  .subject-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .teacher-page .journal-table {
    overflow: visible;
    padding-bottom: 0;
  }

  .teacher-page .journal-row {
    min-width: 0;
    grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .8fr) auto auto;
  }

  .teacher-page .journal-row.header,
  .teacher-page .journal-row > :nth-child(4) {
    display: none;
  }

  .teacher-page .journal-row > :nth-child(5) {
    justify-self: end;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(var(--container), calc(100% - 24px));
  }

  .site-header,
  .site-header .nav {
    min-height: 62px;
  }

  .site-header .nav {
    padding-block: 8px;
  }

  .site-header .brand-logo {
    height: 38px;
  }

  .game-hud .hud-level,
  .game-hud .hud-boost {
    display: none !important;
  }

  .hud-pill {
    min-height: 36px;
  }

  .teacher-page {
    padding-top: 30px !important;
  }

  .teacher-hero {
    margin-bottom: 28px;
  }

  .teacher-hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3rem) !important;
  }

  .teacher-page .hero-stats {
    gap: 8px;
  }

  .teacher-page .stat-card {
    padding: 12px 8px;
    border-radius: 16px;
  }

  .teacher-page .stat-card .num {
    font-size: 1.35rem;
  }

  .teacher-page .stat-card .label {
    font-size: .62rem;
  }

  .teacher-page .section-head {
    align-items: center;
  }

  .teacher-page .journal-table {
    overflow: visible;
  }

  .teacher-page .journal-row {
    min-width: 0;
  }

  .teacher-page .journal-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .teacher-page .journal-row > :nth-child(3),
  .teacher-page .journal-row > :nth-child(4) {
    display: none;
  }

  .teacher-page .journal-row > :nth-child(5) {
    display: block;
    justify-self: end;
  }

  .trainer-sidebar {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .trainer-sidebar > * {
    grid-column: 1 !important;
  }

  .subject-list {
    grid-template-columns: 1fr;
  }

  .toolbar-title {
    align-items: flex-start;
  }

  .toolbar-stats {
    width: 100%;
  }

  .task-actions > *,
  .inline-actions > * {
    width: 100%;
  }

  .site-footer {
    padding-top: 76px !important;
  }
}

@media (max-width: 430px) {
  .header-controls {
    gap: 5px !important;
  }

  .game-hud .crystal-sheen {
    padding-inline: 8px;
  }

  .teacher-page .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teacher-page .class-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .teacher-page .class-actions .primary {
    grid-column: 1 / -1;
  }
}

@media (hover: none) {
  .card:hover,
  .panel:hover,
  .action-card:hover,
  .class-card:hover,
  .task-card:hover {
    transform: none !important;
  }
}

/* Dark-mode surface completion.
   Decorative artwork keeps its white presentation pad; interface chrome follows tokens. */
.noise-overlay {
  display: none !important;
}

[data-theme="dark"] :is(
  .quest-duo,
  .friend-lab,
  .activity-lab,
  .friend-row,
  .friend-empty,
  .activity-row,
  .note-card,
  .week-panel,
  .setup-card,
  .path-card,
  .lesson,
  .finish-banner,
  .reward-side,
  .collection-card,
  .showcase-card,
  .power-card,
  .badge-card,
  .level-card
) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] :is(
  .duo-progress,
  .week-progress,
  .duo-meta span,
  .week-stats span,
  .friend-tab,
  .nudge,
  .side-pill,
  .class-pill,
  .tag-row span
) {
  background: var(--surface-dim) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] :is(.friend-tab.active, .class-pill.active) {
  background: var(--brand-soft) !important;
  border-color: rgba(96, 165, 250, .48) !important;
  color: var(--brand-2) !important;
}

[data-theme="dark"] .friend-row:hover,
[data-theme="dark"] .nudge:hover {
  background: var(--surface-raised) !important;
  border-color: rgba(96, 165, 250, .48) !important;
}

[data-theme="dark"] :is(.friend-avatar, .activity-row .mark) {
  background: linear-gradient(135deg, var(--brand-soft), rgba(99, 102, 241, .16)) !important;
  color: var(--brand-2) !important;
}

[data-theme="dark"] .friend-actions button:not(.primary),
[data-theme="dark"] .lgdemo button.act:not(.green, .red, .dark) {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .boost-card {
  background:
    radial-gradient(circle at 90% 100%, rgba(124, 58, 237, .16), transparent 42%),
    linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(37, 99, 235, .10)),
    var(--surface) !important;
  border-color: rgba(167, 139, 250, .30) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .streak-pill {
  background: rgba(249, 115, 22, .12) !important;
  border-color: rgba(251, 146, 60, .30) !important;
  color: #fdba74 !important;
}

[data-theme="dark"] .reaction {
  background: linear-gradient(135deg, rgba(37, 99, 235, .15), rgba(79, 70, 229, .10)) !important;
  border-color: rgba(96, 165, 250, .34) !important;
  color: #bfdbfe !important;
}

[data-theme="dark"] .lesson-node {
  background: linear-gradient(180deg, var(--surface-raised), var(--brand-soft)) !important;
  border: 1px solid var(--line);
}

[data-theme="dark"] .lesson.done .lesson-node {
  background: linear-gradient(180deg, var(--surface-raised), rgba(16, 185, 129, .14)) !important;
}

[data-theme="dark"] .challenge.done {
  background: linear-gradient(180deg, var(--surface), rgba(16, 185, 129, .10)) !important;
  border-color: rgba(52, 211, 153, .30) !important;
}

[data-theme="dark"] :is(.rarity.common, .tag-row span) {
  background: rgba(148, 163, 184, .12) !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .rarity.rare {
  background: rgba(59, 130, 246, .14) !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .rarity.epic {
  background: rgba(139, 92, 246, .16) !important;
  color: #c4b5fd !important;
}

[data-theme="dark"] .rarity.legendary {
  background: rgba(245, 158, 11, .14) !important;
  color: #fcd34d !important;
}

[data-theme="dark"] .lgdemo button.act.green {
  background: rgba(22, 163, 74, .14) !important;
  border-color: rgba(74, 222, 128, .34) !important;
  color: #86efac !important;
}

[data-theme="dark"] .lgdemo button.act.red {
  background: rgba(220, 38, 38, .14) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .mobile-drawer {
  background: rgba(10, 20, 34, .98) !important;
  border-left: 1px solid var(--line) !important;
  box-shadow: -28px 0 70px rgba(0, 0, 0, .44) !important;
}

[data-theme="dark"] .drawer-head {
  background: var(--surface-dim) !important;
  border-bottom-color: var(--line) !important;
}

[data-theme="dark"] .drawer-close {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .drawer-link {
  color: var(--ink) !important;
}

[data-theme="dark"] .drawer-link small,
[data-theme="dark"] .drawer-link::after {
  color: var(--muted) !important;
}

[data-theme="dark"] .drawer-link:hover,
[data-theme="dark"] .drawer-link.active {
  background: var(--brand-soft) !important;
  border-color: rgba(96, 165, 250, .38) !important;
  color: var(--brand-2) !important;
}

[data-theme="dark"] :is(.tabs .tab, .tab) {
  background: var(--surface-raised) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] :is(.tabs .tab, .tab).active {
  background: var(--brand-soft) !important;
  border-color: rgba(96, 165, 250, .38) !important;
  color: var(--brand-2) !important;
}

[data-theme="dark"] .kr-card {
  background: var(--surface-dim) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .kr-card .desc {
  color: var(--muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Beta MVP stability contract.
   This final layer intentionally owns only document scrolling, footer joining,
   and the compact help entry point. Older component styles stay intact. */
html {
  min-height: 100%;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip !important;
  overflow-y: visible !important;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif !important;
}

body > main {
  width: 100%;
  min-width: 0;
  flex: 1 0 auto;
  overflow: visible;
}

.site-header,
.site-footer {
  flex: 0 0 auto;
}

/* A transparent stroke joins the footer without painting over the page above. */
.site-footer {
  margin-top: 44px !important;
  padding: 66px 0 28px !important;
  overflow: clip !important;
  border: 0 !important;
}

.site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  height: 34px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 23C180 5 360 35 540 19S900 6 1080 21s270 8 360-1' fill='none' stroke='%2350bce8' stroke-opacity='.58' stroke-width='2'/%3E%3Cpath d='M0 30C220 15 420 38 650 25s420-13 790 3' fill='none' stroke='%2380d457' stroke-opacity='.28' stroke-width='1.5'/%3E%3C/svg%3E")
    center top / 100% 100% no-repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.site-footer::after {
  inset: 0 !important;
  animation: none !important;
}

.footer-grid,
.footer-bottom {
  min-width: 0;
}

.footer-list a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* One predictable help widget on every base-layout page. */
.quant-fab,
.quant-fab:not(.is-minimized),
.quant-fab.is-minimized {
  position: fixed !important;
  left: auto !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  width: 64px !important;
  height: 64px !important;
  transform: none !important;
  z-index: 9300 !important;
  contain: layout paint;
}

.quant-btn,
.quant-fab:not(.is-minimized) .quant-btn,
.quant-fab.is-minimized .quant-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.quant-stage-fab {
  width: 64px !important;
  height: 64px !important;
}

.quant-question-mark {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.quant-minimize,
.quant-bubble {
  display: none !important;
}

.quest-panel,
.qchat-panel {
  position: fixed !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(72dvh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.quest-panel:not(.open),
.qchat-panel:not(.open) {
  visibility: hidden;
  pointer-events: none !important;
}

.quest-panel.open,
.qchat-panel.open {
  visibility: visible;
}

.quest-panel {
  right: 18px !important;
  bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  width: min(360px, calc(100vw - 36px)) !important;
}

.qchat-panel {
  right: 94px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  width: min(420px, calc(100vw - 126px)) !important;
}

@media (max-width: 900px) {
  body {
    padding-bottom: 0 !important;
  }

  .site-footer {
    padding: 58px 0 calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .quant-fab,
  .quant-fab:not(.is-minimized),
  .quant-fab.is-minimized {
    left: auto !important;
    right: 12px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    width: 60px !important;
    height: 60px !important;
  }

  .quant-btn,
  .quant-fab:not(.is-minimized) .quant-btn,
  .quant-fab.is-minimized .quant-btn,
  .quant-stage-fab {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }

  .quest-panel,
  .qchat-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(158px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 24px);
  }

  .quest-panel,
  .qchat-panel {
    left: 8px !important;
    right: 8px !important;
  }
}