@import url("https://fonts.googleapis.com/css2?family=DM+Jacaranda&family=Inter:wght@400;500;600;700;800&family=Montserrat+Alternates:wght@700;800&display=swap");

:root {
  color-scheme: light;
  --space: #fff8ea;
  --space-2: #f7f5df;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-2: rgba(249, 252, 240, 0.92);
  --line: rgba(69, 133, 60, 0.2);
  --line-strong: rgba(244, 177, 53, 0.34);
  --text: #243126;
  --muted: #5d7658;
  --muted-2: #81907b;
  --indigo: #ff7a00;
  --indigo-2: #ea6400;
  --gold: #f4cf4a;
  --gold-2: #dfa723;
  --rose: #f09d2e;
  --mint: #9be539;
  --sky: #78d52d;
  --danger: #d65b41;
  --ok: #4d9f4b;
  --card: rgba(255, 255, 255, 0.82);
  --shadow: 0 24px 70px rgba(125, 113, 53, 0.16);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--space);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.48;
  background:
    radial-gradient(circle at top left, rgba(244, 207, 74, 0.38), transparent 28%),
    radial-gradient(circle at top right, rgba(94, 159, 69, 0.22), transparent 24%),
    linear-gradient(155deg, rgba(255, 251, 236, 0.98), rgba(246, 252, 235, 0.96) 48%, rgba(255, 247, 226, 0.98));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(circle at 16% 18%, rgba(244, 143, 40, 0.18), transparent 22%),
    radial-gradient(circle at 78% 14%, rgba(244, 207, 74, 0.22), transparent 24%),
    radial-gradient(circle at 68% 62%, rgba(94, 159, 69, 0.14), transparent 20%),
    radial-gradient(circle at 28% 78%, rgba(123, 89, 189, 0.1), transparent 26%),
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.42), transparent 18%);
  filter: blur(6px);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(240, 201, 106, 0.75);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  letter-spacing: 0.02em;
}

h1 {
  margin: 0;
  font-family: "Montserrat Alternates", "Inter", sans-serif;
  font-size: clamp(2.5rem, 8vw, 4.8rem);
  line-height: 0.94;
  text-align: center;
  letter-spacing: 0.015em;
  font-weight: 800;
}

h1 span,
.gold {
  color: var(--mint);
}

h2 {
  margin: 0;
  font-family: "Montserrat Alternates", "Inter", sans-serif;
  font-size: clamp(1.55rem, 3.3vw, 2.7rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0.012em;
}

h3 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.18rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.02em;
}

p {
  margin: 0;
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.login-panel {
  width: min(100%, 1080px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 5vw, 58px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(252, 249, 238, 0.98));
  box-shadow: var(--shadow);
}

.hero-header {
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  width: 168px;
  height: 168px;
  padding: 16px;
  border: 1px solid rgba(155, 229, 57, 0.24);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 239, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 36px rgba(146, 124, 35, 0.12);
}

.hero-badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.hero-badge--camp {
  border-radius: 28px;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(145deg, rgba(252, 255, 245, 0.98), rgba(255, 249, 233, 0.98));
}

.camp-mark {
  position: relative;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  border: 3px solid rgba(72, 82, 32, 0.35);
  background:
    linear-gradient(160deg, rgba(155, 229, 57, 0.94) 0 48%, rgba(255, 235, 127, 0.92) 48% 62%, rgba(255, 122, 0, 0.9) 62% 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.45),
    0 10px 22px rgba(120, 123, 36, 0.18);
  overflow: hidden;
}

.camp-mark::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08));
}

.camp-mark__pin {
  position: absolute;
  left: 16px;
  top: 46px;
  width: 70px;
  height: 8px;
  border: 2px solid rgba(168, 84, 0, 0.86);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6d7, #ffd965);
  transform: rotate(-28deg);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}

.camp-mark__pin::before {
  content: "";
  position: absolute;
  right: -2px;
  top: -8px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(168, 84, 0, 0.86);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4ca, #ffd257);
}

.camp-mark__pin::after {
  content: "";
  position: absolute;
  left: -7px;
  top: -4px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: rgba(168, 84, 0, 0.9);
}

.title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.title-row h1 {
  text-align: center;
  text-transform: lowercase;
}

.portal-mark {
  width: 114px;
  height: 78px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(117, 100, 221, 0.72);
}

.portal-mark span {
  width: 42px;
  height: 42px;
  border: 5px solid var(--sky);
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px var(--indigo-2), inset 0 0 0 14px var(--gold);
}

.login-logo {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.subtitle-block {
  display: grid;
  gap: 14px;
  margin: 14px auto 18px;
}

.screen-recommendation {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(94, 159, 69, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(245, 250, 224, 0.96), rgba(255, 248, 231, 0.98));
}

.screen-recommendation strong {
  color: #3f7f33;
  font-size: 1rem;
  font-weight: 800;
}

.screen-recommendation p {
  margin: 0;
  color: rgba(44, 60, 40, 0.85);
  font-size: 0.96rem;
  line-height: 1.55;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  text-align: center;
  max-width: 980px;
  margin-inline: auto;
  padding: 16px 22px;
  border: 1px solid rgba(171, 148, 235, 0.28);
  border-radius: 18px;
  color: rgba(242, 236, 255, 0.94);
  font-size: clamp(1.08rem, 2.2vw, 1.52rem);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
  background: linear-gradient(135deg, rgba(82, 63, 152, 0.38), rgba(35, 25, 84, 0.52));
  box-shadow: 0 14px 30px rgba(15, 10, 42, 0.2);
}

.subtitle--compact {
  display: grid;
  gap: 8px;
  max-width: 920px;
  padding: 14px 18px;
}

.subtitle--compact strong {
  display: block;
  color: rgba(248, 245, 255, 0.96);
  font-size: clamp(0.98rem, 1.42vw, 1.16rem);
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.subtitle-modules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.subtitle-module {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(240, 201, 106, 0.2);
  border-radius: 999px;
  color: rgba(248, 245, 255, 0.9);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.04);
}

.methodology-intro {
  display: grid;
  gap: 18px;
  margin: 0 auto 28px;
}

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.methodology-grid--landing {
  align-items: stretch;
}

.methodology-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(240, 201, 106, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(66, 50, 127, 0.24), rgba(29, 21, 65, 0.48)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(10, 7, 33, 0.24);
}

.methodology-card--violet {
  border-color: rgba(171, 148, 235, 0.34);
  background: linear-gradient(180deg, rgba(84, 63, 157, 0.94), rgba(42, 30, 91, 0.96));
}

.methodology-card--blue {
  border-color: rgba(127, 187, 255, 0.3);
  background: linear-gradient(180deg, rgba(44, 77, 139, 0.94), rgba(23, 40, 82, 0.96));
}

.methodology-card--gold {
  border-color: rgba(255, 211, 128, 0.3);
  background: linear-gradient(180deg, rgba(120, 82, 31, 0.94), rgba(74, 49, 17, 0.96));
}

.methodology-card--teal {
  border-color: rgba(117, 221, 228, 0.26);
  background: linear-gradient(180deg, rgba(34, 98, 101, 0.94), rgba(19, 58, 60, 0.96));
}

.methodology-card__eyebrow {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.methodology-card__title {
  color: #fffdf7;
  font-size: clamp(1.08rem, 1.55vw, 1.4rem);
  line-height: 1.26;
  font-weight: 700;
}

.methodology-card__text {
  margin: 0;
  color: rgba(248, 245, 255, 0.9);
  font-size: 0.98rem;
  line-height: 1.58;
}

.methodology-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.methodology-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(240, 201, 106, 0.24);
  border-radius: 999px;
  color: rgba(248, 245, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.04);
}

.methodology-card .methodology-card__eyebrow {
  color: #ffe07f;
}

.methodology-note {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid rgba(244, 177, 53, 0.22);
  border-radius: 20px;
  color: rgba(44, 60, 40, 0.82);
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.6;
  background: linear-gradient(180deg, rgba(255, 250, 237, 0.98), rgba(247, 252, 234, 0.96));
}

.methodology-note--compact {
  max-width: 760px;
}

.portal-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.portal-entry-actions--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  margin-inline: auto;
}

.portal-entry-button {
  min-height: 64px;
  padding: 14px 22px;
  font-size: 1rem;
  font-weight: 800;
}

.portal-entry-button--access {
  box-shadow: 0 18px 36px rgba(242, 140, 40, 0.22);
}

.portal-entry-button--join {
  border-color: rgba(240, 201, 106, 0.32);
  color: #fff3c5;
  background: linear-gradient(135deg, rgba(83, 61, 147, 0.76), rgba(38, 28, 86, 0.78));
}

.public-support-portal {
  display: none;
}

.enrollment-hub {
  display: grid;
  gap: 22px;
}

.enrollment-hub__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(240, 201, 106, 0.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(49, 37, 100, 0.52), rgba(23, 18, 56, 0.68));
}

.enrollment-hub__intro--compact {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px;
}

.enrollment-hub__inline {
  margin: 0;
  color: rgba(248, 245, 255, 0.92);
  font-size: 1rem;
  line-height: 1.3;
}

.enrollment-hub__top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.enrollment-hub__title {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}

.enrollment-hub__text {
  margin-top: 10px;
  color: rgba(248, 245, 255, 0.82);
  line-height: 1.68;
}

.enrollment-hub__actions {
  display: grid;
  gap: 10px;
  width: min(100%, 260px);
}

.enrollment-hub__action {
  text-align: center;
  text-decoration: none;
}

.enrollment-hub__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.enrollment-hub__main {
  display: grid;
  gap: 18px;
}

.enrollment-offer {
  display: grid;
  gap: 18px;
}

.enrollment-offer__visual {
  overflow: hidden;
  border: 1px solid rgba(240, 201, 106, 0.22);
  border-radius: 22px;
  background: rgba(10, 10, 30, 0.46);
}

.enrollment-offer__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.enrollment-hub__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.enrollment-hub,
.enrollment-hub *,
.public-support-chat,
.public-support-chat * {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.enrollment-mini-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 156px;
  padding: 18px;
}

.enrollment-mini-card strong {
  display: block;
  color: #fff8d6;
  font-size: 1.35rem;
  line-height: 1.15;
}

.enrollment-mini-card span {
  color: rgba(239, 234, 255, 0.82);
  line-height: 1.56;
}

.enrollment-mini-card--violet {
  border-color: rgba(173, 148, 255, 0.28);
  background: linear-gradient(145deg, rgba(68, 44, 129, 0.66), rgba(41, 29, 87, 0.8));
}

.enrollment-mini-card--blue {
  border-color: rgba(116, 184, 255, 0.28);
  background: linear-gradient(145deg, rgba(42, 68, 128, 0.64), rgba(28, 38, 82, 0.8));
}

.enrollment-mini-card--gold {
  border-color: rgba(240, 201, 106, 0.3);
  background: linear-gradient(145deg, rgba(102, 74, 21, 0.62), rgba(58, 42, 17, 0.8));
}

.enrollment-mini-card--teal {
  border-color: rgba(99, 209, 189, 0.28);
  background: linear-gradient(145deg, rgba(28, 92, 88, 0.6), rgba(19, 52, 56, 0.82));
}

.enrollment-offer__content {
  display: grid;
  gap: 16px;
}

.enrollment-price-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(240, 201, 106, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(49, 35, 101, 0.5), rgba(22, 18, 55, 0.72));
}

.enrollment-price-list {
  display: grid;
  gap: 10px;
}

.enrollment-price-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.enrollment-price-item strong {
  color: rgba(248, 245, 255, 0.94);
}

.enrollment-price-item span {
  color: var(--gold);
  font-weight: 800;
  text-align: right;
}

.enrollment-price-note {
  padding: 14px 16px;
  border: 1px solid rgba(240, 201, 106, 0.18);
  border-radius: 16px;
  color: rgba(248, 245, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
}

.login-form,
.leader-form,
.listener-form {
  display: grid;
  gap: 18px;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.auth-grid--modal {
  grid-template-columns: minmax(0, 1fr);
  max-width: 620px;
  margin-top: 0;
  margin-inline: auto;
}

.auth-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
}

.auth-card--master {
  border: 1px solid rgba(94, 159, 69, 0.42);
  background:
    linear-gradient(180deg, rgba(239, 249, 229, 0.96), rgba(255, 248, 233, 0.92)),
    rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 18px 36px rgba(135, 120, 38, 0.12);
}

.auth-card--listener {
  border: 1px solid rgba(240, 201, 106, 0.78);
  background:
    linear-gradient(180deg, rgba(110, 78, 18, 0.28), rgba(73, 50, 10, 0.24)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 237, 180, 0.08),
    0 18px 36px rgba(88, 61, 10, 0.2);
}

.auth-card--master .auth-card__title {
  color: #2e5327;
}

.auth-card__title {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.auth-submit-button {
  min-height: 58px;
  font-size: 1rem;
  line-height: 1.1;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field--full {
  grid-column: 1 / -1;
}

.field {
  display: grid;
  gap: 9px;
}

label,
.label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.auth-card--master input,
.auth-card--master select,
.auth-card--master textarea {
  border-color: rgba(94, 159, 69, 0.32);
  background: rgba(255, 255, 255, 0.82);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}

.hint {
  color: var(--muted);
  font-size: 0.95rem;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.chip,
.tab-button,
.icon-button {
  min-height: 42px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.primary-button {
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--indigo), #f6a23d);
  box-shadow: 0 16px 32px rgba(242, 140, 40, 0.24);
}

.secondary-button,
.ghost-button,
.tab-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.88);
}

.secondary-button {
  width: 100%;
  padding: 12px 16px;
  font-weight: 800;
}

.listener-button {
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid rgba(240, 201, 106, 0.58);
  border-radius: var(--radius);
  color: #251907;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #f0c96a, #ffe083);
  box-shadow: 0 16px 32px rgba(240, 201, 106, 0.24);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ghost-button,
.tab-button,
.chip {
  padding: 9px 13px;
}

.complete-button {
  border-color: rgba(255, 223, 123, 0.92);
  color: #1f1738;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255, 225, 123, 0.98), rgba(244, 190, 86, 0.96));
  box-shadow: 0 10px 24px rgba(240, 193, 72, 0.24);
}

.complete-button--done {
  border-color: rgba(211, 194, 255, 0.82);
  color: #fffaff;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(112, 86, 204, 0.96), rgba(160, 128, 244, 0.96));
  box-shadow: 0 10px 24px rgba(124, 96, 219, 0.28);
}

.danger-button {
  padding: 9px 13px;
  color: #fff;
  background: var(--danger);
}

.primary-button:hover,
.secondary-button:hover,
.listener-button:hover,
.ghost-button:hover,
.danger-button:hover,
.chip:hover,
.tab-button:hover {
  transform: translateY(-1px);
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 26px 0;
  color: var(--muted);
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.login-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.login-action-card {
  min-height: 108px;
  padding: 16px 18px;
  border-radius: 16px;
  text-align: left;
  display: grid;
  gap: 8px;
  align-content: start;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.login-action-card:hover,
.login-action-card:focus-visible {
  transform: translateY(-2px);
}

.login-action-card strong {
  font-size: 1rem;
  line-height: 1.1;
}

.login-action-card span {
  color: rgba(52, 74, 46, 0.78);
  font-size: 0.94rem;
  line-height: 1.4;
}

.guest-button {
  border: 1px solid rgba(94, 159, 69, 0.34);
  background: linear-gradient(180deg, rgba(240, 249, 229, 0.96), rgba(230, 244, 220, 0.92));
}

.guest-button:hover,
.guest-button:focus-visible {
  border-color: rgba(94, 159, 69, 0.5);
  background: linear-gradient(180deg, rgba(245, 252, 237, 0.98), rgba(234, 247, 225, 0.95));
  box-shadow: 0 16px 30px rgba(114, 150, 48, 0.16);
}

.guest-button:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 159, 69, 0.5);
  background: linear-gradient(180deg, rgba(245, 252, 237, 0.98), rgba(234, 247, 225, 0.95));
  box-shadow: 0 14px 28px rgba(114, 150, 48, 0.14);
}

.admin-link {
  justify-self: end;
  align-self: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(242, 140, 40, 0.24);
  border-radius: 12px;
  color: #6f4b11;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 249, 238, 0.92);
}

.admin-link:hover {
  color: #4d7f25;
  border-color: rgba(94, 159, 69, 0.34);
  background: rgba(245, 251, 234, 0.98);
}

.shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.shell--topic-open::before {
  opacity: 1;
  background: linear-gradient(145deg, rgba(255, 250, 236, 0.96), rgba(247, 252, 234, 0.94) 46%, rgba(255, 245, 223, 0.96));
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  background: rgba(255, 252, 244, 0.9);
  backdrop-filter: blur(18px);
}

.sidebar,
.content {
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.brand-badge {
  width: 84px;
  min-width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(226, 213, 248, 0.96), rgba(208, 189, 240, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.brand-logo {
  width: 100%;
  height: 100%;
}

.brand-logo--camp {
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 235, 0.94));
  border: 1px solid rgba(155, 229, 57, 0.22);
}

.camp-mark--small {
  width: 34px;
  height: 34px;
}

.camp-mark--small .camp-mark__pin {
  left: 5px;
  top: 15px;
  width: 24px;
  height: 4px;
  border-width: 1.5px;
}

.camp-mark--small .camp-mark__pin::before {
  right: -2px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.camp-mark--small .camp-mark__pin::after {
  left: -5px;
  top: -2px;
  width: 9px;
  height: 4px;
}

.brand-text strong {
  display: block;
  line-height: 1.05;
  font-size: 2rem;
  font-weight: 800;
  font-family: "Montserrat Alternates", "Inter", sans-serif;
}

.brand-text small {
  display: block;
  margin-top: 4px;
  color: #cbc3ef;
  font-size: 1.05rem;
  font-weight: 600;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-button {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  background: transparent;
}

.nav-button.active,
.nav-button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.profile-box {
  margin: 22px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.profile-box--protected {
  border-color: rgba(240, 201, 106, 0.34);
  background: linear-gradient(135deg, rgba(122, 91, 27, 0.2), rgba(36, 27, 63, 0.2));
}

.sidebar-search {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
}

.sidebar-search__label {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 700;
}

.sidebar-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.sidebar-search input {
  min-height: 44px;
}

.profile-box strong,
.profile-box span {
  display: block;
}

.profile-box--protected strong {
  color: var(--gold);
}

.profile-box span {
  color: var(--muted);
}

.legal-box {
  margin-top: 18px;
  padding: 22px 20px;
  border: 1px solid rgba(240, 201, 106, 0.24);
  border-radius: 26px;
  background: rgba(31, 26, 65, 0.9);
}

.legal-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 18px;
}

.legal-actions .ghost-button {
  width: 100%;
  justify-content: center;
}

.legal-box strong {
  display: block;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 1.55rem;
  font-weight: 800;
}

.legal-box p {
  color: #d7cef4;
  font-size: 1rem;
  line-height: 1.65;
}

.legal-box p + p {
  margin-top: 18px;
}

.legal-box--modal {
  margin-top: 0;
}

.admin-tabs {
  margin-top: 6px;
}

.admin-access-grid {
  display: grid;
  gap: 18px;
}

.admin-access-panel {
  padding: 18px;
}

.admin-section {
  display: grid;
  gap: 16px;
}

.admin-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.admin-section-heading h3 {
  margin: 0;
}

.admin-section-heading p {
  margin: 8px 0 0;
  color: var(--muted);
}

.legal-modal {
  max-width: 520px;
}

.cookie-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(calc(100vw - 28px), 1040px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid rgba(173, 148, 255, 0.24);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(42, 34, 87, 0.98), rgba(29, 33, 78, 0.96));
  box-shadow: 0 18px 40px rgba(10, 8, 28, 0.34);
  backdrop-filter: blur(18px);
}

.cookie-banner__copy strong {
  display: block;
  margin-bottom: 6px;
  color: #f8f5ff;
  font-size: 1rem;
  font-weight: 700;
}

.cookie-banner__copy p {
  margin: 0;
  color: rgba(238, 232, 255, 0.82);
  font-size: 0.94rem;
  line-height: 1.5;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.course-access-modal {
  display: grid;
  gap: 18px;
}

.course-access-modal__intro {
  display: grid;
  gap: 8px;
  max-width: 620px;
  margin-inline: auto;
}

.policy-summary {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.policy-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.policy-disclosure {
  max-height: min(48vh, 420px);
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid rgba(173, 148, 255, 0.2);
  border-radius: 18px;
  background: rgba(25, 22, 52, 0.88);
}

.policy-modal,
.policy-document,
.policy-stack {
  display: grid;
  gap: 14px;
}

.policy-stack {
  gap: 20px;
}

.policy-document h3,
.policy-document h4 {
  margin: 0;
}

.policy-document h3 {
  color: #f8f5ff;
  font-size: 1.08rem;
}

.policy-document h4 {
  color: var(--gold);
  font-size: 0.96rem;
}

.policy-document p,
.policy-document li,
.policy-modal p {
  margin: 0;
  color: rgba(235, 229, 252, 0.9);
  font-size: 0.95rem;
  line-height: 1.62;
}

.policy-document ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.consent-check {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(173, 148, 255, 0.18);
  border-radius: 18px;
  background: rgba(29, 25, 60, 0.8);
}

.consent-check label,
.consent-check {
  color: rgba(241, 236, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.55;
}

.consent-check label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.consent-check input[type="checkbox"] {
  margin-top: 4px;
  accent-color: #b38dff;
}

.consent-check--compact {
  margin-top: 16px;
}

@media (max-width: 780px) {
  .cookie-banner {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    left: auto;
    transform: none;
    width: 100%;
    margin-bottom: 14px;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .cookie-banner__actions,
  .policy-summary__actions {
    justify-content: stretch;
  }

  .cookie-banner__actions > *,
  .policy-summary__actions > * {
    width: 100%;
  }

  .consent-check label {
    gap: 10px;
  }
}

.content {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 28px max(clamp(16px, 3vw, 36px), 16px) 60px clamp(16px, 3vw, 36px);
  padding-bottom: 120px;
}

.topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.topline > :first-child {
  flex: 1 1 0;
  min-width: 0;
}

.topline__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  margin-left: auto;
  padding-right: 96px;
  flex: 0 1 auto;
}

.topline__actions .ghost-button,
.topline__actions .primary-button,
.topline__actions .danger-button {
  max-width: 100%;
}

.topline p {
  max-width: 780px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 1.06rem;
}

.topline--listener > :first-child {
  max-width: 700px;
}

.topline--listener {
  align-items: start;
}

.topline--listener h2 {
  max-width: 640px;
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  line-height: 1.1;
}

.topline--listener p {
  max-width: 620px;
  font-size: 0.96rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.stats-grid .stat-card:nth-child(1) {
  background: linear-gradient(180deg, rgba(72, 56, 130, 0.9), rgba(36, 27, 76, 0.92));
  border-color: rgba(179, 157, 255, 0.34);
}

.stats-grid .stat-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(39, 76, 128, 0.9), rgba(20, 42, 84, 0.92));
  border-color: rgba(115, 182, 255, 0.28);
}

.stats-grid .stat-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(91, 52, 113, 0.9), rgba(54, 28, 70, 0.92));
  border-color: rgba(224, 151, 255, 0.26);
}

.stats-grid .stat-card:nth-child(4) {
  background: linear-gradient(180deg, rgba(35, 94, 98, 0.9), rgba(18, 54, 58, 0.92));
  border-color: rgba(112, 220, 228, 0.24);
}

.stats-grid .stat-card:nth-child(5) {
  background: linear-gradient(180deg, rgba(116, 81, 34, 0.9), rgba(77, 51, 20, 0.92));
  border-color: rgba(255, 208, 118, 0.28);
}

.stats-grid .stat-card:nth-child(6) {
  background: linear-gradient(180deg, rgba(78, 48, 108, 0.9), rgba(48, 28, 72, 0.92));
  border-color: rgba(196, 152, 255, 0.26);
}

.stats-grid .stat-card:nth-child(7),
.stats-grid .stat-card:nth-child(8) {
  background: linear-gradient(180deg, rgba(49, 88, 64, 0.9), rgba(27, 53, 37, 0.92));
  border-color: rgba(130, 223, 164, 0.24);
}

.admin-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.admin-report-card {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-chart-card {
  padding: 16px;
}

.admin-chart-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.admin-chart-row {
  display: grid;
  gap: 6px;
}

.admin-chart-row__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.95rem;
}

.admin-chart-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.admin-chart-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(249, 215, 114, 0.95), rgba(173, 242, 189, 0.95));
}

.admin-group-list {
  display: grid;
  gap: 12px;
}

.admin-group,
.admin-subgroup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.admin-group__summary,
.admin-subgroup__summary {
  display: grid;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}

.admin-group__summary::-webkit-details-marker,
.admin-subgroup__summary::-webkit-details-marker {
  display: none;
}

.admin-group__summary-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.admin-group__summary-main,
.admin-subgroup__summary > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-group__summary-main strong,
.admin-subgroup__summary strong {
  font-size: 1rem;
  word-break: break-word;
}

.admin-group__summary-main span,
.admin-subgroup__summary span {
  color: var(--muted);
  font-size: 0.86rem;
  word-break: break-word;
}

.admin-group__content,
.admin-subgroup__content {
  padding: 0 14px 14px;
}

.admin-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.admin-group__summary-pills .admin-pills {
  width: 100%;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-person-grid,
.admin-access-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.admin-organization-grid,
.admin-group-list--structured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.admin-group--tile {
  height: fit-content;
}

.admin-group--tile .admin-group__summary {
  min-height: 118px;
  align-items: start;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-summary-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-summary-card span {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-summary-card strong {
  font-size: 1.05rem;
}

.admin-org-tabs {
  margin: 4px 0 10px;
}

.admin-org-panel {
  display: none;
}

.admin-org-panel.active {
  display: block;
}

.admin-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.admin-matrix-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.admin-matrix-section--admin {
  border-color: rgba(99, 209, 189, 0.34);
  background: linear-gradient(135deg, rgba(61, 132, 121, 0.16), rgba(21, 41, 54, 0.16));
}

.admin-matrix-section--listener {
  border-color: rgba(240, 201, 106, 0.32);
  background: linear-gradient(135deg, rgba(150, 112, 31, 0.14), rgba(33, 27, 53, 0.16));
}

.admin-matrix-section__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-matrix-section__head h4 {
  margin: 0;
  font-size: 0.96rem;
}

.admin-matrix-section__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-local-db {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(198, 255, 212, 0.28);
  background: linear-gradient(135deg, rgba(52, 100, 76, 0.32), rgba(39, 58, 88, 0.28));
}

.admin-local-db__status {
  display: grid;
  gap: 4px;
}

.admin-local-db__status strong {
  color: #f5f3ff;
}

.admin-local-db__status span {
  color: rgba(245, 243, 255, 0.76);
  font-size: 14px;
}

.admin-local-db__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-person-card,
.admin-access-card,
.admin-homework-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(10, 7, 29, 0.42);
}

.admin-person-card__summary {
  cursor: pointer;
  list-style: none;
}

.admin-person-card__summary::-webkit-details-marker {
  display: none;
}

.admin-person-card__head,
.admin-access-card__head,
.admin-homework-item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-person-card__head h4,
.admin-access-card__head h4,
.admin-homework-item__head h5 {
  margin: 0;
  font-size: 0.95rem;
}

.admin-person-card__head p,
.admin-access-card__head p,
.admin-homework-item__head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-progress-badge,
.admin-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--space);
  background: var(--gold);
}

.admin-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-index-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  color: #f2f0ff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-person-card--admin {
  border-color: rgba(99, 209, 189, 0.34);
  background: linear-gradient(135deg, rgba(61, 132, 121, 0.16), rgba(15, 18, 39, 0.28));
}

.admin-progress-line {
  height: 6px;
  margin: 10px 0 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.admin-progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(173, 242, 189, 1), rgba(249, 215, 114, 1));
}

.admin-progress-line--low span {
  background: linear-gradient(90deg, rgba(255, 149, 120, 1), rgba(255, 197, 129, 0.95));
}

.admin-progress-line--mid span {
  background: linear-gradient(90deg, rgba(255, 209, 112, 1), rgba(226, 240, 132, 0.96));
}

.admin-progress-line--good span {
  background: linear-gradient(90deg, rgba(108, 224, 162, 1), rgba(188, 246, 195, 0.96));
}

.admin-progress-matrix {
  display: grid;
  gap: 8px;
  margin: 10px 0 8px;
}

.admin-progress-matrix__item {
  display: grid;
  gap: 4px;
}

.admin-progress-matrix__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.admin-progress-matrix__meta strong {
  color: var(--text);
  font-weight: 800;
}

.admin-person-card__meta,
.admin-access-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: 0.84rem;
  color: var(--muted);
}

.admin-access-card__meta-wide {
  grid-column: 1 / -1;
}

.admin-access-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-access-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.admin-danger-button {
  min-height: 40px;
  padding-inline: 14px;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(91, 18, 37, 0.22);
}

.admin-action-button {
  border-width: 1px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.admin-action-button--master {
  border-color: rgba(139, 124, 244, 0.72);
  color: #f4eeff;
  background: linear-gradient(135deg, rgba(117, 100, 221, 0.28), rgba(98, 78, 205, 0.22));
}

.admin-action-button--listener {
  border-color: rgba(240, 201, 106, 0.82);
  color: #fff3c9;
  background: linear-gradient(135deg, rgba(240, 201, 106, 0.24), rgba(194, 148, 47, 0.18));
}

.admin-action-button--admin {
  border-color: rgba(99, 209, 189, 0.72);
  color: #dffdf6;
  background: linear-gradient(135deg, rgba(99, 209, 189, 0.22), rgba(48, 151, 135, 0.18));
}

.admin-action-button--export {
  border-color: rgba(240, 201, 106, 0.88);
  color: #2c1905;
  background: linear-gradient(135deg, rgba(246, 210, 109, 0.98), rgba(255, 233, 165, 0.96));
}

.admin-action-button--export-main {
  min-height: 48px;
  padding-inline: 18px;
  font-size: 0.95rem;
}

.admin-export-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.admin-export-actions--compact {
  margin-bottom: 8px;
}

.admin-access-card--slim {
  padding: 11px;
}

.admin-subtabs {
  margin: 0;
}

.admin-homework-item {
  display: grid;
  gap: 10px;
}

.admin-homework-item__meta {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-homework-item__actions .ghost-button,
[data-homework-review-save="true"] {
  min-width: 148px;
  border-color: rgba(240, 201, 106, 0.78);
  color: #fff0b8;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(240, 201, 106, 0.24), rgba(194, 148, 47, 0.18));
}

.admin-homework-item__summary {
  cursor: pointer;
  list-style: none;
}

.admin-homework-item__summary::-webkit-details-marker {
  display: none;
}

.admin-homework-item__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-homework-item__grid .field {
  margin: 0;
}

.admin-homework-material,
.admin-homework-answer {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-homework-material .label,
.admin-homework-answer .label {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-homework-answer p {
  margin: 0;
  font-size: 0.88rem;
}

.admin-homework-comment {
  grid-column: 1 / -1;
}

.admin-homework-item__actions {
  display: flex;
  justify-content: flex-end;
}

.admin-checkpoint-card {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.admin-checkpoint-card h5 {
  margin: 0;
  font-size: 0.92rem;
}

.admin-checkpoint-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.admin-checkpoint-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.admin-checkpoint-table th,
.admin-checkpoint-table td {
  padding: 8px 10px;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-checkpoint-table th {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.04);
}

.admin-final-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-final-card {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-final-card span {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-final-card strong {
  font-size: 0.88rem;
}

.stat-card,
.panel,
.topic-card,
.block-card,
.quiz-card,
.term-card,
.admin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-card {
  min-height: 100px;
  padding: 16px;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}

.muted {
  color: var(--muted);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 240px);
  gap: 12px;
  margin: 18px 0;
}

.toolbar__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.toolbar__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
  gap: 12px;
}

.toolbar__search-button,
.toolbar__guide-button {
  min-height: 64px;
  white-space: nowrap;
}

.toolbar__actions--single {
  grid-template-columns: minmax(180px, 240px);
  justify-content: end;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.tab-button.active,
.chip.active {
  color: var(--space);
  border-color: var(--gold);
  background: var(--gold);
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.search-summary {
  margin-bottom: 18px;
  padding: 16px;
}

.search-summary strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.route-list {
  display: grid;
  gap: 22px;
}

.route-section {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 2px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}

.route-section--tone-1 {
  background:
    linear-gradient(180deg, rgba(255, 220, 238, 0.18), rgba(255, 220, 238, 0.1)),
    linear-gradient(180deg, rgba(26, 19, 53, 0.92), rgba(17, 13, 37, 0.86));
  border-color: rgba(255, 164, 206, 0.78);
}

.route-section--tone-2 {
  background:
    linear-gradient(180deg, rgba(226, 217, 255, 0.2), rgba(226, 217, 255, 0.11)),
    linear-gradient(180deg, rgba(28, 21, 59, 0.92), rgba(18, 14, 41, 0.86));
  border-color: rgba(174, 149, 255, 0.8);
}

.route-section--tone-3 {
  background:
    linear-gradient(180deg, rgba(210, 238, 255, 0.18), rgba(210, 238, 255, 0.1)),
    linear-gradient(180deg, rgba(18, 33, 57, 0.92), rgba(14, 22, 39, 0.86));
  border-color: rgba(118, 191, 255, 0.78);
}

.route-section--tone-4 {
  background:
    linear-gradient(180deg, rgba(211, 255, 232, 0.18), rgba(211, 255, 232, 0.1)),
    linear-gradient(180deg, rgba(16, 39, 43, 0.92), rgba(12, 25, 30, 0.86));
  border-color: rgba(105, 224, 173, 0.78);
}

.route-section--tone-5 {
  background:
    linear-gradient(180deg, rgba(230, 255, 202, 0.16), rgba(230, 255, 202, 0.09)),
    linear-gradient(180deg, rgba(29, 43, 34, 0.92), rgba(17, 25, 21, 0.86));
  border-color: rgba(174, 228, 113, 0.78);
}

.route-section--tone-6 {
  background:
    linear-gradient(180deg, rgba(239, 216, 255, 0.19), rgba(239, 216, 255, 0.11)),
    linear-gradient(180deg, rgba(39, 25, 56, 0.92), rgba(22, 15, 35, 0.86));
  border-color: rgba(214, 144, 255, 0.8);
}

.route-section--tone-7 {
  background:
    linear-gradient(180deg, rgba(255, 216, 228, 0.19), rgba(255, 216, 228, 0.1)),
    linear-gradient(180deg, rgba(54, 27, 39, 0.92), rgba(31, 16, 24, 0.86));
  border-color: rgba(255, 146, 190, 0.82);
}

.route-section--tone-8 {
  background:
    linear-gradient(180deg, rgba(255, 228, 213, 0.19), rgba(255, 228, 213, 0.1)),
    linear-gradient(180deg, rgba(56, 31, 27, 0.92), rgba(31, 18, 18, 0.86));
  border-color: rgba(255, 168, 125, 0.82);
}

.route-section--tone-9 {
  background:
    linear-gradient(180deg, rgba(255, 246, 196, 0.18), rgba(255, 246, 196, 0.1)),
    linear-gradient(180deg, rgba(53, 40, 22, 0.92), rgba(30, 22, 13, 0.86));
  border-color: rgba(255, 213, 99, 0.82);
}

.route-section--final {
  border-color: rgba(255, 210, 96, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 245, 204, 0.18), rgba(244, 225, 255, 0.12)),
    linear-gradient(180deg, rgba(32, 22, 62, 0.93), rgba(17, 13, 42, 0.88));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.route-section__head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.route-section__head h3 {
  margin-bottom: 8px;
  font-size: 1.34rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.route-section__head .muted {
  max-width: 72ch;
  font-size: 0.98rem;
  line-height: 1.58;
  color: rgba(239, 236, 255, 0.78);
}

.route-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  grid-auto-rows: 1fr;
}

.route-topic-grid .topic-card {
  min-height: 278px;
}

.route-topic-grid--helpers .topic-card {
  min-height: 278px;
}

.route-final-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.route-final-intro__card {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 222, 126, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

.route-final-intro__card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.route-final-intro__card .muted {
  line-height: 1.6;
  color: rgba(239, 236, 255, 0.76);
}

.route-topic-grid--final-stair {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.route-topic-grid--final-stair .topic-card {
  min-height: 278px;
}

.topic-card--helper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
}

.topic-card--helper-review {
  border-color: rgba(115, 211, 184, 0.18);
}

.topic-card--helper-emergency {
  border-color: rgba(255, 126, 95, 0.22);
  background: linear-gradient(180deg, rgba(73, 33, 34, 0.3), rgba(255, 255, 255, 0.03));
}

.topic-card--helper-assessment {
  border-color: rgba(240, 201, 106, 0.24);
  background: linear-gradient(180deg, rgba(60, 47, 20, 0.26), rgba(255, 255, 255, 0.03));
}

.topic-card--helper-training {
  border-color: rgba(147, 176, 255, 0.24);
  background: linear-gradient(180deg, rgba(32, 42, 82, 0.28), rgba(255, 255, 255, 0.03));
}

.topic-card--homework {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 217, 112, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 233, 146, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(255, 226, 143, 0.16), rgba(244, 225, 255, 0.08)),
    linear-gradient(180deg, rgba(61, 42, 17, 0.28), rgba(32, 42, 82, 0.18));
  border-width: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 214, 0.2),
    0 18px 42px rgba(20, 12, 40, 0.22),
    0 0 0 1px rgba(255, 217, 112, 0.1);
}

.topic-card--homework::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, rgba(255, 218, 117, 0.94), rgba(255, 245, 196, 0.92), rgba(194, 233, 255, 0.82));
}

.topic-card--homework::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 223, 130, 0.15), transparent 68%);
  pointer-events: none;
}

.topic-card--homework h3 {
  color: #fff7d4;
}

.topic-card--homework > .muted {
  color: rgba(255, 245, 214, 0.84);
}

.topic-card--homework .block-tags {
  margin-top: auto;
}

.topic-card--homework .tag {
  border-color: rgba(255, 225, 142, 0.18);
  background: rgba(255, 244, 208, 0.08);
  color: rgba(255, 245, 214, 0.9);
}

.topic-card--homework .card-actions {
  margin-top: 0;
}

.topic-card--homework .action-button--training {
  border-color: rgba(255, 220, 126, 0.36);
  background: linear-gradient(135deg, rgba(255, 228, 134, 0.24), rgba(199, 225, 255, 0.14));
  color: #fff7de;
}

.topic-card--homework .action-button--training:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(255, 214, 102, 0.14);
}

.topic-card--homework-hub {
  min-height: 278px;
}

.badge--homework-stage {
  border-color: rgba(255, 238, 181, 0.26);
  background: linear-gradient(135deg, rgba(255, 239, 183, 0.18), rgba(255, 219, 111, 0.14));
  color: #fff5cd;
}

.homework-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.topic-card--route .topic-number,
.topic-card--helper .topic-number {
  min-width: 54px;
}

.badge--route-id {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.1);
}

.topic-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-content: start;
  padding: 18px;
}

.topic-card--route,
.topic-card--helper {
  min-height: 278px;
  height: 100%;
  border-width: 1.5px;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.topic-card--route h3,
.topic-card--helper h3 {
  margin: 0;
  min-height: 2.8em;
  font-size: 1.02rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.topic-card--route > .muted,
.topic-card--helper > .muted {
  min-height: 4.5em;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.46;
  color: rgba(239, 236, 255, 0.76);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.topic-card--route .block-tags,
.topic-card--helper .block-tags {
  margin-top: 0;
}

.topic-card__head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.topic-number {
  flex: 0 0 44px;
  width: 44px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--space);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  background: linear-gradient(135deg, #f7d971, #ffd65a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 18px rgba(240, 201, 106, 0.16);
}

.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
}

.card-actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 2px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  min-width: 104px;
  justify-content: center;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.11);
}

.action-button--open {
  border-color: rgba(104, 211, 145, 0.58);
  color: #082117;
  background: linear-gradient(135deg, rgba(104, 211, 145, 0.95), rgba(172, 241, 197, 0.92));
}

.action-button--repeat {
  border-color: rgba(177, 134, 255, 0.58);
  color: #1c1134;
  background: linear-gradient(135deg, rgba(196, 157, 255, 0.94), rgba(229, 200, 255, 0.92));
}

.action-button--emergency {
  border-color: rgba(255, 165, 119, 0.62);
  color: #33140a;
  background: linear-gradient(135deg, rgba(255, 171, 125, 0.96), rgba(255, 214, 169, 0.92));
}

.action-button--training {
  border-color: rgba(125, 179, 255, 0.62);
  color: #0f1d40;
  background: linear-gradient(135deg, rgba(144, 193, 255, 0.95), rgba(204, 225, 255, 0.92));
}

.action-button--saved {
  border-color: rgba(104, 211, 145, 0.58);
  color: #082117;
  background: linear-gradient(135deg, rgba(104, 211, 145, 0.95), rgba(172, 241, 197, 0.92));
}

.action-button--done {
  border-color: rgba(177, 134, 255, 0.58);
  color: #1c1134;
  background: linear-gradient(135deg, rgba(196, 157, 255, 0.94), rgba(229, 200, 255, 0.92));
}

.action-button--demo {
  border-color: rgba(105, 223, 153, 0.72);
  color: #082117;
  background: linear-gradient(135deg, rgba(106, 224, 154, 0.98), rgba(192, 250, 206, 0.92));
}

.action-button--preview {
  border-color: rgba(199, 176, 255, 0.55);
  color: #f0eaff;
  background: rgba(109, 83, 169, 0.28);
}

.action-button--locked {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(239, 236, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
}

.action-button--planned {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(239, 236, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.action-button--planned:disabled {
  cursor: default;
  opacity: 1;
}

.badge.required {
  color: var(--gold);
  border-color: var(--line-strong);
}

.badge.recommended {
  color: #d8c5ff;
  border-color: rgba(196, 157, 255, 0.35);
}

.badge.demo {
  color: #baf4c7;
  border-color: rgba(105, 223, 153, 0.42);
  background: rgba(62, 151, 97, 0.18);
}

.badge.locked {
  color: rgba(239, 236, 255, 0.66);
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.badge.done {
  color: var(--ok);
  border-color: rgba(104, 211, 145, 0.4);
}

.badge--status {
  font-weight: 800;
}

.badge--status-success {
  color: #baf4c7;
  border-color: rgba(105, 223, 153, 0.44);
  background: rgba(62, 151, 97, 0.16);
}

.badge--status-warn {
  color: #ffe39d;
  border-color: rgba(240, 201, 106, 0.32);
  background: rgba(240, 201, 106, 0.1);
}

.topic-card--demo {
  border-color: rgba(105, 223, 153, 0.3);
  box-shadow: 0 14px 30px rgba(44, 120, 71, 0.18);
}

.topic-card--completed {
  background: linear-gradient(135deg, rgba(35, 33, 59, 0.98), rgba(27, 25, 46, 0.98));
  border-color: rgba(170, 189, 209, 0.16);
  box-shadow: 0 10px 24px rgba(4, 5, 16, 0.22);
}

.topic-card--completed h3,
.topic-card--completed .muted {
  opacity: 0.88;
}

.topic-card--completed .progress {
  background: rgba(255, 255, 255, 0.07);
}

.topic-card--completed .progress span {
  background: linear-gradient(90deg, rgba(124, 212, 149, 0.68), rgba(171, 235, 191, 0.74));
}

.topic-card--completed .topic-number {
  background: linear-gradient(135deg, #c3c6d2, #a7adbf);
  color: #1b2130;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 8px 18px rgba(80, 90, 110, 0.18);
}

.topic-card--locked {
  opacity: 0.88;
  border-color: rgba(180, 162, 220, 0.14);
}

.guest-preview-panel {
  display: grid;
  gap: 14px;
}

.guest-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 0.92rem;
}

.support-intro-card {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(105, 223, 153, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(47, 86, 67, 0.22), rgba(30, 53, 52, 0.18));
  box-shadow: 0 16px 34px rgba(19, 45, 33, 0.12);
}

.support-intro-card--guest {
  border-color: rgba(105, 223, 153, 0.34);
  background: linear-gradient(135deg, rgba(54, 118, 83, 0.34), rgba(27, 66, 54, 0.24));
}

.support-intro-card h3,
.support-chat__head h3,
.support-threads h3 {
  margin: 0;
}

.support-intro-card p,
.support-message p {
  margin: 0;
}

.listener-guide {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}

.listener-guide__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 24px;
  border: 1px solid rgba(255, 206, 120, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(78, 50, 132, 0.94), rgba(40, 28, 86, 0.94) 52%, rgba(25, 73, 114, 0.88)),
    rgba(27, 21, 58, 0.9);
  box-shadow: 0 22px 40px rgba(10, 12, 34, 0.2);
}

.listener-guide__summary-copy {
  display: grid;
  gap: 8px;
  max-width: 780px;
}

.listener-guide__summary h3 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(0.98rem, 1.05vw, 1.18rem);
  line-height: 1.28;
}

.listener-guide__summary p {
  margin: 0;
  color: rgba(236, 232, 248, 0.9);
  line-height: 1.55;
}

.listener-guide__summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.listener-guide__details-button {
  min-height: 46px;
  padding-inline: 18px;
  border-color: rgba(255, 208, 128, 0.34);
  color: #fff5d1;
  background: linear-gradient(180deg, rgba(214, 157, 63, 0.34), rgba(126, 82, 30, 0.28));
  box-shadow: 0 14px 28px rgba(92, 60, 21, 0.18);
}

.listener-guide__details-button:hover {
  border-color: rgba(255, 219, 155, 0.5);
  background: linear-gradient(180deg, rgba(224, 170, 79, 0.44), rgba(139, 91, 35, 0.34));
}

.listener-access-modal {
  display: grid;
  gap: 18px;
}

.listener-access-modal__intro {
  display: grid;
  gap: 8px;
}

.listener-access-modal__intro h3,
.listener-access-modal__card h3 {
  margin: 0;
}

.listener-access-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.listener-access-modal__grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.listener-access-modal__card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(188, 167, 255, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(45, 34, 86, 0.82), rgba(27, 21, 58, 0.88)),
    rgba(27, 21, 58, 0.88);
}

.listener-access-modal__card--violet {
  background: linear-gradient(180deg, rgba(73, 55, 139, 0.92), rgba(39, 29, 86, 0.94));
  border-color: rgba(187, 164, 255, 0.34);
}

.listener-access-modal__card--blue {
  background: linear-gradient(180deg, rgba(45, 79, 140, 0.92), rgba(24, 42, 87, 0.94));
  border-color: rgba(127, 187, 255, 0.3);
}

.listener-access-modal__card--gold {
  background: linear-gradient(180deg, rgba(121, 83, 31, 0.92), rgba(79, 53, 18, 0.94));
  border-color: rgba(255, 211, 128, 0.3);
}

.listener-access-modal__card--plum {
  background: linear-gradient(180deg, rgba(102, 50, 118, 0.92), rgba(61, 29, 73, 0.94));
  border-color: rgba(231, 151, 255, 0.26);
}

.listener-access-modal__card--teal {
  background: linear-gradient(180deg, rgba(34, 98, 101, 0.92), rgba(19, 58, 60, 0.94));
  border-color: rgba(117, 221, 228, 0.26);
}

.listener-access-modal__card p {
  margin: 0;
  color: rgba(236, 232, 248, 0.9);
  line-height: 1.62;
}

.listener-access-modal__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.listener-access-modal__list li {
  position: relative;
  padding-left: 20px;
  color: rgba(236, 232, 248, 0.92);
  line-height: 1.5;
}

.listener-access-modal__list li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 201, 106, 0.98), rgba(208, 157, 60, 0.98));
  box-shadow: 0 0 0 4px rgba(240, 201, 106, 0.12);
}

.listener-access-modal__list--ordered {
  counter-reset: listener-modal-step;
}

.listener-access-modal__list--ordered li {
  padding-left: 42px;
}

.listener-access-modal__list--ordered li::before {
  counter-increment: listener-modal-step;
  content: counter(listener-modal-step);
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #22173f;
  background: linear-gradient(180deg, rgba(240, 201, 106, 0.98), rgba(222, 180, 84, 0.98));
  box-shadow: none;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.support-layout--modal {
  align-items: stretch;
}

.support-modal-shell {
  display: grid;
  gap: 16px;
}

.support-modal-shell--leader {
  min-height: min(78vh, 920px);
}

.support-modal-header {
  display: grid;
  gap: 8px;
}

.support-launch-panel {
  display: grid;
  gap: 16px;
}

.support-launch-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.support-threads,
.support-chat {
  display: grid;
  gap: 14px;
}

.support-threads--modal {
  max-height: min(68vh, 760px);
  overflow: auto;
}

.support-thread-list {
  display: grid;
  gap: 10px;
}

.support-thread-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  color: #f5f0ff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.support-thread-button span,
.support-thread-button em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.92rem;
}

.support-thread-button.active {
  border-color: rgba(105, 223, 153, 0.38);
  background: linear-gradient(135deg, rgba(60, 126, 91, 0.3), rgba(32, 65, 56, 0.24));
}

.support-chat__messages {
  display: grid;
  gap: 12px;
  max-height: min(52vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.support-message {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.support-message--own {
  border-color: rgba(105, 223, 153, 0.26);
  background: linear-gradient(135deg, rgba(52, 110, 82, 0.26), rgba(34, 63, 53, 0.18));
}

.support-message__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.support-chat__form {
  display: grid;
  gap: 12px;
}

.support-chat__identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal--chat .support-chat__identity-grid {
  grid-template-columns: 1fr;
}

.public-support-chat {
  border-color: rgba(105, 223, 153, 0.24);
  background: linear-gradient(135deg, rgba(37, 62, 56, 0.58), rgba(22, 33, 43, 0.82));
}

.floating-support {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

.floating-support__panel,
.floating-support__toggle {
  pointer-events: auto;
}

.floating-support__panel {
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(105, 223, 153, 0.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(35, 60, 53, 0.96), rgba(23, 35, 44, 0.95));
  box-shadow: 0 18px 44px rgba(10, 18, 24, 0.34);
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.floating-support__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.floating-support--open .floating-support__panel {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.floating-support__copy {
  display: grid;
  gap: 4px;
}

.floating-support__copy strong {
  color: #f5f0ff;
}

.floating-support__copy span {
  color: var(--muted);
  font-size: 0.92rem;
}

.floating-support__close {
  flex: 0 0 auto;
  width: 34px;
  min-height: 34px;
  border-radius: 999px;
  color: #f5f0ff;
  background: rgba(255, 255, 255, 0.08);
}

.floating-support__actions {
  display: grid;
  gap: 10px;
}

.floating-support__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(105, 223, 153, 0.35);
  border-radius: 999px;
  color: #082117;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(106, 224, 154, 0.98), rgba(192, 250, 206, 0.94));
  box-shadow: 0 16px 38px rgba(44, 120, 71, 0.26);
}

.floating-support__toggle:hover {
  transform: translateY(-1px);
}

.copy-locked .content,
.copy-locked .sidebar,
.copy-locked .panel,
.copy-locked .topic-card,
.copy-locked .block-card,
.copy-locked .quiz-card,
.copy-locked .term-card,
.copy-locked .support-chat,
.copy-locked .support-message {
  -webkit-user-select: none;
  user-select: none;
}

.copy-locked input,
.copy-locked textarea,
.copy-locked select,
.copy-locked [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

.progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mint), var(--gold));
}

.block-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.block-tag {
  padding: 3px 7px;
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.74rem;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.topic-view {
  display: grid;
  gap: 16px;
}

.floating-matrix-back {
  position: fixed;
  left: 18px;
  top: 50%;
  z-index: 6;
  min-height: 58px;
  max-width: 156px;
  padding: 14px 18px;
  border: 1px solid rgba(240, 201, 106, 0.54);
  border-radius: 16px;
  color: var(--gold);
  font-size: 1.04rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: rgba(20, 16, 45, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
}

.floating-matrix-back:hover {
  color: #211731;
  background: var(--gold);
}

.topic-bottom-actions {
  display: flex;
  justify-content: center;
  padding: 8px 0 20px;
}

.topic-hero,
.panel {
  padding: clamp(16px, 3vw, 24px);
}

.topic-hero {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(117, 100, 221, 0.24), rgba(99, 209, 189, 0.08)),
    rgba(255, 255, 255, 0.06);
}

.topic-hero p {
  max-width: 920px;
  margin-top: 10px;
  color: var(--muted);
}

.topic-infographics {
  display: grid;
  gap: 16px;
}

.topic-infographics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 14px;
  justify-content: start;
}

.topic-infographic-card {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  padding: 14px;
  border: 1px solid rgba(240, 201, 106, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 201, 106, 0.08), rgba(99, 209, 189, 0.06));
}

.topic-infographic-card__preview {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(11, 10, 28, 0.88);
}

.topic-infographic-card__preview img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: rgba(11, 10, 28, 0.88);
}

.topic-infographic-card__meta {
  display: grid;
  gap: 4px;
}

.topic-infographic-card__meta strong {
  color: var(--gold);
  font-size: 1rem;
}

.topic-infographic-card__meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.topic-infographic-card__status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #12291a;
  font-size: 0.78rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(173, 242, 189, 0.96), rgba(230, 255, 236, 0.96));
}

.topic-view .block-card h3,
.topic-view .block-card h4,
.topic-view .panel h3,
.topic-view .panel h4,
.topic-view .info-widget strong,
.topic-view .checklist-widget strong,
.topic-view .compare-column h4,
.topic-view .timeline-step h4,
.topic-view .decision-node h4,
.topic-view .law-card h4,
.topic-view .case-card h4 {
  color: var(--text);
}

.topic-view .block-card p,
.topic-view .block-card li,
.topic-view .block-card td,
.topic-view .block-card th,
.topic-view .panel p,
.topic-view .panel li,
.topic-view .rich-text p,
.topic-view .info-widget p,
.topic-view .checklist-widget span,
.topic-view .compare-column li,
.topic-view .timeline-step p,
.topic-view .decision-node p,
.topic-view .law-card p,
.topic-view .case-card p {
  color: var(--muted);
  opacity: 1;
}

.block-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.block-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  animation: riseIn 0.34s ease both;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(17, 13, 43, 0.76);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.block-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--mint), #74b8ff, #f06b9c);
  opacity: 0.72;
  pointer-events: none;
}

.block-card > * {
  position: relative;
  z-index: 1;
}

.block-card:nth-child(4n + 1) {
  border-color: rgba(240, 201, 106, 0.34);
}

.block-card:nth-child(4n + 2) {
  border-color: rgba(99, 209, 189, 0.32);
}

.block-card:nth-child(4n + 3) {
  border-color: rgba(116, 184, 255, 0.34);
}

.block-card:nth-child(4n) {
  border-color: rgba(240, 107, 156, 0.32);
}

.block-card > .badges {
  margin-bottom: 12px;
}

.block-card > .badges .badge:first-child {
  padding: 7px 12px;
  border-color: rgba(240, 201, 106, 0.45);
  color: var(--gold);
  font-size: 0.9rem;
  background: rgba(240, 201, 106, 0.1);
}

.block-card > h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
}

.block-card--wide {
  grid-column: 1 / -1;
}

.block-grid > .block-card:only-child,
.block-grid > .block-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.block-card > .card-actions {
  margin-top: 15px;
  padding-top: 15px;
}

.block-card p,
.block-card li {
  color: var(--muted);
}

.block-card ul,
.quiz-card ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.rich-text,
.widget-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.info-widget,
.checklist-widget,
.law-card,
.flow-step,
.accordion-widget details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.info-widget {
  padding: 14px;
  border-color: rgba(240, 201, 106, 0.38);
  background:
    linear-gradient(135deg, rgba(240, 201, 106, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.info-widget strong,
.checklist-widget strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
}

.homework-widget {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(240, 201, 106, 0.3);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(117, 100, 221, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(16, 13, 42, 0.72);
}

.homework-widget[open] {
  border-color: rgba(99, 209, 189, 0.34);
}

.panel--homework-guide {
  border-color: rgba(255, 222, 126, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.12), rgba(227, 219, 255, 0.06)),
    linear-gradient(180deg, rgba(36, 28, 68, 0.9), rgba(22, 17, 46, 0.86));
}

.homework-widget__head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.homework-widget__head::-webkit-details-marker {
  display: none;
}

.homework-widget__body {
  display: grid;
  gap: 14px;
}

.homework-widget__head h4 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: clamp(1.18rem, 1.8vw, 1.45rem);
}

.learning-guide {
  border-color: rgba(255, 222, 126, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.12), rgba(227, 219, 255, 0.06)),
    linear-gradient(180deg, rgba(36, 28, 68, 0.9), rgba(22, 17, 46, 0.86));
}

.learning-guide__summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.learning-guide__summary::-webkit-details-marker {
  display: none;
}

.learning-guide__summary strong {
  display: block;
  color: var(--gold);
  font-size: 1.04rem;
}

.learning-guide__summary p {
  margin-top: 6px;
  color: var(--muted);
}

.learning-guide__content {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.learning-guide__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.master-guide {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}

.master-guide__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 24px;
  border: 1px solid rgba(126, 210, 198, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(35, 98, 104, 0.94), rgba(34, 54, 104, 0.94) 48%, rgba(86, 48, 134, 0.9)),
    rgba(27, 21, 58, 0.9);
  box-shadow: 0 22px 40px rgba(10, 12, 34, 0.2);
}

.master-guide__summary-copy {
  display: grid;
  gap: 8px;
  max-width: 720px;
}

.master-guide__summary h3 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(1rem, 1.05vw, 1.18rem);
  line-height: 1.28;
}

.master-guide__summary p {
  margin: 0;
  color: rgba(236, 232, 248, 0.9);
  line-height: 1.55;
}

.master-guide__summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.master-guide__status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.master-guide__status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 106, 0.28);
  color: rgba(255, 239, 190, 0.96);
  background: rgba(240, 201, 106, 0.1);
  font-size: 0.94rem;
  font-weight: 700;
}

.master-guide__status--ready {
  border-color: rgba(116, 220, 160, 0.34);
  color: rgba(222, 255, 236, 0.96);
  background: rgba(64, 145, 102, 0.16);
}

.master-guide__details-button {
  min-height: 46px;
  padding-inline: 18px;
  border-color: rgba(143, 227, 213, 0.34);
  color: #ddfffa;
  background: linear-gradient(180deg, rgba(51, 160, 142, 0.34), rgba(32, 96, 106, 0.28));
  box-shadow: 0 14px 28px rgba(24, 78, 83, 0.18);
}

.master-guide__details-button:hover {
  border-color: rgba(176, 240, 231, 0.5);
  background: linear-gradient(180deg, rgba(59, 182, 162, 0.42), rgba(35, 108, 116, 0.34));
}

.master-access-modal {
  display: grid;
  gap: 18px;
}

.master-access-modal__intro {
  display: grid;
  gap: 8px;
}

.master-access-modal__card h3 {
  margin: 0;
}

.master-access-modal__lead {
  margin: 0;
  max-width: 760px;
  color: rgba(236, 232, 248, 0.92);
  line-height: 1.6;
}

.master-access-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.master-access-modal__grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.master-access-modal__card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(188, 167, 255, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(45, 34, 86, 0.82), rgba(27, 21, 58, 0.88)),
    rgba(27, 21, 58, 0.88);
}

.master-access-modal__card--violet {
  background: linear-gradient(180deg, rgba(73, 55, 139, 0.92), rgba(39, 29, 86, 0.94));
  border-color: rgba(187, 164, 255, 0.34);
}

.master-access-modal__card--blue {
  background: linear-gradient(180deg, rgba(45, 79, 140, 0.92), rgba(24, 42, 87, 0.94));
  border-color: rgba(127, 187, 255, 0.3);
}

.master-access-modal__card--gold {
  background: linear-gradient(180deg, rgba(121, 83, 31, 0.92), rgba(79, 53, 18, 0.94));
  border-color: rgba(255, 211, 128, 0.3);
}

.master-access-modal__card--plum {
  background: linear-gradient(180deg, rgba(102, 50, 118, 0.92), rgba(61, 29, 73, 0.94));
  border-color: rgba(231, 151, 255, 0.26);
}

.master-access-modal__card--teal {
  background: linear-gradient(180deg, rgba(34, 98, 101, 0.92), rgba(19, 58, 60, 0.94));
  border-color: rgba(117, 221, 228, 0.26);
}

.master-access-modal__card--indigo {
  background: linear-gradient(180deg, rgba(57, 61, 146, 0.92), rgba(31, 36, 95, 0.94));
  border-color: rgba(151, 168, 255, 0.28);
}

.master-access-modal__card--rose {
  background: linear-gradient(180deg, rgba(128, 58, 95, 0.92), rgba(77, 31, 59, 0.94));
  border-color: rgba(255, 169, 214, 0.24);
}

.master-access-modal__card p {
  margin: 0;
  color: rgba(236, 232, 248, 0.9);
  line-height: 1.62;
}

.master-access-modal__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.master-access-modal__metric {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(255, 230, 172, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.master-access-modal__metric strong {
  color: var(--gold);
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  line-height: 1;
}

.master-access-modal__metric span {
  color: rgba(236, 232, 248, 0.84);
  font-size: 0.95rem;
}

.master-access-modal__progressbar {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.master-access-modal__progressbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(240, 201, 106, 0.96), rgba(88, 214, 192, 0.92));
}

.master-access-modal__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.master-access-modal__summary-grid div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(188, 167, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.master-access-modal__summary-grid span {
  color: rgba(211, 205, 236, 0.82);
  font-size: 0.9rem;
}

.master-access-modal__summary-grid strong {
  color: var(--text);
  font-size: 1rem;
}

.master-access-modal__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.master-access-modal__list li {
  position: relative;
  padding-left: 20px;
  color: rgba(236, 232, 248, 0.92);
  line-height: 1.5;
}

.master-access-modal__list li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 201, 106, 0.98), rgba(208, 157, 60, 0.98));
  box-shadow: 0 0 0 4px rgba(240, 201, 106, 0.12);
}

.master-access-modal__list--ordered {
  counter-reset: master-modal-step;
}

.master-access-modal__list--ordered li {
  padding-left: 42px;
}

.master-access-modal__list--ordered li::before {
  counter-increment: master-modal-step;
  content: counter(master-modal-step);
  top: -1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #22173f;
  background: linear-gradient(180deg, rgba(240, 201, 106, 0.98), rgba(222, 180, 84, 0.98));
  box-shadow: none;
}

.homework-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.homework-meta__card,
.homework-role-note {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.homework-meta__card strong,
.homework-role-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
}

.homework-form {
  display: grid;
  gap: 12px;
}

.card-actions--homework-guide {
  justify-content: flex-start;
  margin-bottom: 6px;
}

.homework-guide-button {
  min-width: 0;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #231409;
  border-color: rgba(255, 219, 120, 0.72);
  background: linear-gradient(135deg, rgba(255, 214, 102, 0.98), rgba(255, 176, 109, 0.94));
  box-shadow: 0 12px 28px rgba(255, 181, 93, 0.24);
}

.homework-guide-button:hover,
.homework-guide-button:focus-visible {
  color: #231409;
  border-color: rgba(255, 229, 155, 0.9);
  background: linear-gradient(135deg, rgba(255, 226, 135, 1), rgba(255, 192, 120, 0.96));
}

.final-test-answers {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.final-test-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
}

.final-test-status--correct {
  color: #0a2c18;
  background: linear-gradient(135deg, rgba(132, 232, 161, 0.96), rgba(193, 247, 203, 0.92));
}

.final-test-status--wrong {
  color: #471515;
  background: linear-gradient(135deg, rgba(255, 157, 157, 0.96), rgba(255, 205, 205, 0.92));
}

.homework-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.homework-check input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--gold);
}

.info-widget--success {
  border-color: rgba(105, 223, 153, 0.34);
  background: rgba(53, 126, 79, 0.12);
}

.info-widget--success strong {
  color: #baf4c7;
}

.image-panel {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(240, 201, 106, 0.08);
}

.image-panel img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.image-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 1.2rem;
}

.video-panel {
  display: grid;
  grid-template-columns: minmax(240px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(99, 209, 189, 0.08);
}

.video-frame,
.game-video {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
}

.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #05030f;
}

.game-video {
  width: min(100%, 310px);
  justify-self: center;
}

.game-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #05030f;
}

.video-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--mint);
  font-size: 1.2rem;
}

.training-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.training-photo-card {
  overflow: hidden;
  border: 1px solid rgba(214, 184, 255, 0.24);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, rgba(59, 44, 112, 0.56), rgba(29, 22, 62, 0.78));
  box-shadow: 0 18px 40px rgba(14, 10, 30, 0.24);
}

.training-photo-card__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  background: transparent;
}

.training-video-card__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
}

.training-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.training-video-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.training-video-thumb {
  overflow: hidden;
  border: 1px solid rgba(214, 184, 255, 0.24);
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, rgba(59, 44, 112, 0.56), rgba(29, 22, 62, 0.78));
  box-shadow: 0 18px 40px rgba(14, 10, 30, 0.2);
}

.training-video-card__button img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #05030f;
}

.training-photo-card__body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.training-photo-card__body strong {
  color: var(--gold);
  font-size: 1rem;
}

.training-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.training-checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  line-height: 1.55;
}

.training-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mint);
  font-weight: 900;
}

.training-download-row {
  margin-top: 14px;
}

.training-download-button {
  color: #21173f;
  font-weight: 900;
  border-color: rgba(255, 223, 123, 0.92);
  background: linear-gradient(135deg, rgba(255, 226, 132, 0.98), rgba(240, 194, 87, 0.96));
  box-shadow: 0 14px 32px rgba(240, 194, 87, 0.22);
}

.training-download-button:hover {
  color: #1a1235;
}

.training-video-modal {
  display: grid;
  gap: 18px;
}

.training-video-modal__stage {
  display: grid;
  justify-items: center;
}

.training-video-modal__stage video {
  display: block;
  width: min(100%, 440px);
  max-height: calc(100vh - 220px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 20px;
  background: #05030f;
}

.training-video-modal__actions {
  justify-content: center;
  align-items: center;
}

.training-video-modal__counter {
  min-width: 70px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.flow-widget {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.flow-step {
  min-height: auto;
  padding: 12px;
  border-color: rgba(116, 184, 255, 0.28);
  background:
    linear-gradient(145deg, rgba(116, 184, 255, 0.105), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.045);
}

.flow-step span {
  display: grid;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: var(--radius);
  color: #120e2d;
  font-weight: 900;
  background: var(--gold);
}

.timeline-widget,
.decision-map,
.compare-grid {
  display: grid;
  gap: 10px;
}

.timeline-widget {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.timeline-step,
.decision-node,
.compare-column {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.timeline-step {
  position: relative;
  min-height: auto;
  padding: 13px;
  overflow: hidden;
  border-color: rgba(240, 201, 106, 0.3);
  background:
    linear-gradient(145deg, rgba(240, 201, 106, 0.105), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.timeline-step::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 42px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.timeline-step span,
.decision-node span {
  display: inline-grid;
  min-width: 38px;
  min-height: 30px;
  margin-bottom: 10px;
  padding: 5px 8px;
  place-items: center;
  border-radius: var(--radius);
  color: #120e2d;
  font-weight: 900;
  background: var(--gold);
}

.timeline-step h4,
.decision-node h4,
.compare-column h4 {
  margin: 0 0 8px;
  color: var(--text);
}

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

.decision-node {
  display: grid;
  min-height: auto;
  gap: 8px;
  padding: 14px;
  align-content: start;
}

.decision-node--danger {
  border-color: rgba(225, 91, 112, 0.5);
  background: rgba(225, 91, 112, 0.11);
}

.decision-node--ok {
  border-color: rgba(104, 211, 145, 0.45);
  background: rgba(104, 211, 145, 0.09);
}

.decision-node--gold {
  border-color: rgba(240, 201, 106, 0.48);
  background: rgba(240, 201, 106, 0.1);
}

.compare-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.compare-column {
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
}

.compare-column:nth-child(3n + 1) {
  border-color: rgba(104, 211, 145, 0.34);
}

.compare-column:nth-child(3n + 2) {
  border-color: rgba(240, 201, 106, 0.34);
}

.compare-column:nth-child(3n) {
  border-color: rgba(240, 107, 156, 0.34);
}

.compare-column ul {
  margin: 0;
  padding-left: 20px;
}

.compare-grid--homework-guide .compare-column {
  border-color: rgba(255, 224, 140, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.accordion-widget {
  display: grid;
  gap: 8px;
}

.accordion-widget details {
  padding: 12px 14px;
}

.accordion-widget summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.accordion-widget p {
  margin-top: 8px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.tile-card {
  display: grid;
  min-height: auto;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tile-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 201, 106, 0.42);
  background: rgba(255, 255, 255, 0.075);
}

.tile-card h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.18;
}

.tile-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.42;
}

.tile-card__label {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(240, 201, 106, 0.09);
}

.tile-card__button {
  width: max-content;
  max-width: 100%;
  margin-top: auto;
  padding: 8px 10px;
}

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

.tile-grid--formula .tile-card {
  border-color: rgba(240, 201, 106, 0.36);
  background: linear-gradient(145deg, rgba(240, 201, 106, 0.14), rgba(255, 255, 255, 0.045));
}

.tile-grid--forms .tile-card {
  border-color: rgba(99, 209, 189, 0.32);
  background: linear-gradient(145deg, rgba(99, 209, 189, 0.1), rgba(255, 255, 255, 0.045));
}

.tile-grid--forms {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile-grid--kites .tile-card,
.tile-grid--principles .tile-card {
  min-height: auto;
}

.tile-grid--kites .tile-card:nth-child(3n + 1),
.tile-grid--principles .tile-card:nth-child(3n + 1) {
  border-color: rgba(240, 201, 106, 0.32);
}

.tile-grid--kites .tile-card:nth-child(3n + 2),
.tile-grid--principles .tile-card:nth-child(3n + 2) {
  border-color: rgba(143, 124, 255, 0.42);
}

.tile-grid--kites .tile-card:nth-child(3n),
.tile-grid--principles .tile-card:nth-child(3n) {
  border-color: rgba(99, 209, 189, 0.32);
}

.tile-grid--tools .tile-card:nth-child(4n + 1) {
  border-color: rgba(240, 201, 106, 0.38);
  background: linear-gradient(145deg, rgba(240, 201, 106, 0.13), rgba(255, 255, 255, 0.045));
}

.tile-grid--tools .tile-card:nth-child(4n + 2) {
  border-color: rgba(99, 209, 189, 0.36);
  background: linear-gradient(145deg, rgba(99, 209, 189, 0.12), rgba(255, 255, 255, 0.045));
}

.tile-grid--tools .tile-card:nth-child(4n + 3) {
  border-color: rgba(116, 184, 255, 0.38);
  background: linear-gradient(145deg, rgba(116, 184, 255, 0.12), rgba(255, 255, 255, 0.045));
}

.tile-grid--tools .tile-card:nth-child(4n) {
  border-color: rgba(240, 107, 156, 0.36);
  background: linear-gradient(145deg, rgba(240, 107, 156, 0.105), rgba(255, 255, 255, 0.045));
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.flip-grid--principles {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.flip-grid--principles .flip-card {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  align-self: stretch;
}

.flip-grid--principles .flip-card__inner {
  display: block;
  height: 100%;
  min-height: 0;
  transform: none !important;
}

.flip-grid--principles .flip-card__face {
  gap: 7px;
  height: 100%;
  min-height: 0;
  padding: 13px 13px 12px;
  transition: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform: none !important;
  opacity: 1;
  visibility: visible;
}

.flip-grid--principles .flip-card h4 {
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  line-height: 1.08;
}

.flip-grid--principles .flip-card p {
  font-size: 0.93rem;
  line-height: 1.35;
}

.flip-grid--principles .flip-card__front {
  display: grid;
  position: relative;
  inset: auto;
  align-content: start;
  overflow: hidden;
}

.flip-grid--principles .flip-card__back {
  display: none;
  position: relative;
  inset: auto;
  overflow: visible;
}

.flip-grid--principles .flip-card.is-flipped {
  aspect-ratio: auto;
  grid-column: span 2;
  min-height: 0;
  z-index: 2;
}

.shell-logout {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  min-height: 42px;
  max-width: min(160px, calc(100vw - 36px));
  box-shadow: var(--shadow);
}

.flip-grid--principles .flip-card.is-flipped .flip-card__inner,
.flip-grid--principles .flip-card.is-flipped .flip-card__face {
  height: auto;
}

.flip-grid--principles .flip-card.is-flipped .flip-card__front {
  display: none;
}

.flip-grid--principles .flip-card.is-flipped .flip-card__back {
  display: grid;
  min-height: 220px;
}

@media (max-width: 720px) {
  .flip-grid--principles .flip-card.is-flipped {
    grid-column: span 1;
  }
}

.flip-card {
  height: 100%;
  min-height: 260px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  cursor: pointer;
}

.flip-card__inner {
  display: grid;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 260px;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  grid-area: 1 / 1;
  display: grid;
  gap: 9px;
  align-content: start;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease;
  background:
    linear-gradient(145deg, rgba(117, 100, 221, 0.16), rgba(99, 209, 189, 0.055)),
    rgba(255, 255, 255, 0.06);
}

.flip-card__front {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  border-color: rgba(240, 201, 106, 0.36);
}

.flip-card__back {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  overflow: auto;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  border-color: rgba(99, 209, 189, 0.36);
  background:
    linear-gradient(145deg, rgba(22, 69, 92, 0.94), rgba(57, 42, 101, 0.96)),
    rgba(22, 18, 52, 0.98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.flip-card.is-flipped .flip-card__front {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.flip-card.is-flipped .flip-card__back {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.flip-card h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  line-height: 1.14;
}

.flip-card p {
  color: var(--muted);
}

.flip-grid--principles .flip-card:nth-child(4n + 1) .flip-card__front {
  border-color: rgba(240, 201, 106, 0.42);
}

.flip-grid--principles .flip-card:nth-child(4n + 2) .flip-card__front {
  border-color: rgba(116, 184, 255, 0.38);
}

.flip-grid--principles .flip-card:nth-child(4n + 3) .flip-card__front {
  border-color: rgba(99, 209, 189, 0.38);
}

.flip-grid--principles .flip-card:nth-child(4n) .flip-card__front {
  border-color: rgba(240, 107, 156, 0.38);
}

.checklist-widget {
  display: grid;
  gap: 9px;
  padding: 14px;
  border-color: rgba(99, 209, 189, 0.3);
  background:
    linear-gradient(145deg, rgba(99, 209, 189, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.checklist-widget label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.checklist-widget input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--gold);
}

.game-library {
  display: grid;
  gap: 16px;
}

.game-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.game-body {
  display: grid;
  gap: 10px;
}

.game-body h4 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.game-facts,
.game-master,
.game-steps {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.game-facts strong,
.game-master strong {
  display: block;
  color: var(--gold);
}

.game-facts p,
.game-master p {
  margin: 4px 0 10px;
}

.game-facts p:last-child,
.game-master p:last-child {
  margin-bottom: 0;
}

.game-steps summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.game-steps ol {
  margin: 10px 0 0;
  padding-left: 22px;
}

.law-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.law-card,
.case-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.law-card h4,
.case-card h4 {
  margin: 0;
  color: var(--gold);
  font-size: 1rem;
}

.case-card {
  align-content: start;
}

.content-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.content-table {
  min-width: 0;
  table-layout: fixed;
}

.content-table th {
  color: var(--gold);
}

.popup-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.popup-buttons a.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.link-list {
  margin-top: 12px;
}

.guest-lock {
  border-color: rgba(240, 201, 106, 0.45);
  background: rgba(240, 201, 106, 0.08);
}

.quiz-card {
  padding: 18px;
}

.answers {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.answer-button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
}

.answer-button.selected {
  border-color: var(--gold);
  background: rgba(240, 201, 106, 0.14);
}

.answer-button.correct {
  border-color: rgba(104, 211, 145, 0.65);
}

.answer-button.wrong {
  border-color: rgba(225, 91, 112, 0.65);
}

.result-box {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.terms-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.terms-section h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.term-card {
  padding: 14px;
}

.term-card--camp {
  background: rgba(99, 209, 189, 0.07);
}

.term-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-table-wrap--wide table {
  min-width: 1800px;
  table-layout: auto;
}

.admin-analytics-table td {
  vertical-align: top;
  font-size: 0.88rem;
}

.admin-analytics-table td.empty {
  text-align: center;
  color: var(--muted);
}

.admin-table-wrap textarea,
.admin-table-wrap select {
  min-height: 42px;
}

table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
}

th {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
}

.modal {
  width: min(96vw, 760px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  color: var(--text);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal--wide {
  width: min(99vw, 1680px);
  max-width: 1680px;
}

.modal .support-chat {
  min-height: min(64vh, 720px);
}

.modal--chat {
  width: min(28vw, 460px);
  min-width: 360px;
  max-width: 460px;
  margin: auto 22px 22px auto;
  border-radius: 24px;
  background: rgba(30, 22, 62, 0.98);
  box-shadow: 0 30px 80px rgba(8, 5, 20, 0.58);
}

.modal--chat .modal__body {
  padding: 18px;
}

.modal--chat h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  padding-right: 34px;
}

.modal--chat .support-modal-shell,
.modal--chat .enrollment-hub {
  gap: 12px;
}

.modal--chat .support-modal-header h3 {
  font-size: 1.1rem;
}

.modal--chat .support-modal-header p,
.modal--chat .support-chat__head p,
.modal--chat .support-intro-card p {
  font-size: 0.88rem;
}

.modal--chat .support-chat {
  min-height: min(52vh, 560px);
  gap: 10px;
}

.modal--chat .support-chat__messages {
  max-height: min(30vh, 320px);
}

.modal--chat .support-message {
  padding: 12px 14px;
  border-radius: 16px;
}

.modal--chat .support-message__meta {
  gap: 6px 10px;
  font-size: 0.8rem;
}

.modal--chat .support-chat__form textarea {
  min-height: 96px;
}

.modal--chat .card-actions {
  gap: 10px;
}

.modal--chat .card-actions .primary-button,
.modal--chat .card-actions .ghost-button {
  width: 100%;
}

.modal--chat .support-layout {
  grid-template-columns: 1fr;
  gap: 12px;
}

.modal--chat .support-threads--modal {
  max-height: min(18vh, 160px);
}

.modal--chat .support-thread-button {
  padding: 11px 13px;
}

.modal--image {
  background: rgba(10, 7, 29, 0.98);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

.modal__body {
  position: relative;
  padding: 24px;
}

.infographic-modal {
  display: grid;
  gap: 12px;
}

.infographic-modal__viewport {
  overflow: auto;
  max-height: calc(100vh - 220px);
  border-radius: 18px;
  background: rgba(6, 6, 20, 0.92);
}

.infographic-modal img {
  display: block;
  width: max(100%, 1500px);
  height: auto;
  max-height: none;
  object-fit: initial;
  border-radius: 18px;
  background: rgba(6, 6, 20, 0.92);
}

.infographic-modal__actions {
  align-items: center;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
}

@media (max-width: 980px) {
  .infographic-modal__viewport {
    max-height: calc(100vh - 180px);
  }

  .infographic-modal img {
    width: 100%;
  }

  .modal--chat {
    width: min(92vw, 420px);
    min-width: 0;
    margin: auto 14px 14px auto;
  }
}

@media (max-width: 640px) {
  .modal--chat {
    width: calc(100vw - 16px);
    max-width: none;
    margin: auto 8px 8px auto;
    border-radius: 20px;
  }

  .modal--chat .modal__body {
    padding: 14px;
  }

  .modal--chat .support-chat {
    min-height: min(58vh, 520px);
  }
}

.icon-button {
  width: 38px;
  min-height: 38px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.content,
.content *,
.sidebar,
.sidebar *,
.topic-card,
.block-card,
.quiz-card,
.term-card,
.admin-card,
.panel,
.tile-card,
.flip-card,
.flip-card__face,
.law-card,
.case-card,
.info-widget,
.checklist-widget,
.flow-step,
.compare-column,
.timeline-step,
.decision-node,
.game-card,
.image-panel,
.video-panel,
.modal__body,
.modal__body * {
  min-width: 0;
  max-width: 100%;
}

.topic-card,
.block-card,
.quiz-card,
.term-card,
.admin-card,
.panel,
.tile-card,
.flip-card__face,
.law-card,
.case-card,
.info-widget,
.checklist-widget,
.flow-step,
.compare-column,
.timeline-step,
.decision-node,
.game-card,
.image-panel,
.video-panel,
.modal__body,
.topic-card *,
.block-card *,
.quiz-card *,
.term-card *,
.admin-card *,
.panel *,
.tile-card *,
.flip-card__face *,
.law-card *,
.case-card *,
.info-widget *,
.checklist-widget *,
.flow-step *,
.compare-column *,
.timeline-step *,
.decision-node *,
.game-card *,
.image-panel *,
.video-panel *,
.modal__body * {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

button,
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.complete-button,
.tab-button,
.nav-button,
.answer-button,
.popup-buttons button {
  white-space: normal;
}

@media (max-width: 1040px) {
  .support-layout {
    grid-template-columns: 1fr;
  }

  .master-access-modal__grid--compact,
  .master-access-modal__grid,
  .listener-access-modal__grid--compact,
  .listener-access-modal__grid {
    grid-template-columns: 1fr;
  }

  .master-guide__summary {
    padding: 18px;
  }

  .master-guide__summary-actions {
    justify-content: flex-start;
  }

  .master-access-modal__metrics,
  .master-access-modal__summary-grid {
    grid-template-columns: 1fr;
  }

  .master-access-modal__card {
    padding: 18px;
  }

  .listener-guide__summary {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .listener-guide__summary-actions {
    justify-content: flex-start;
  }

  .listener-access-modal__card {
    padding: 18px;
  }

  .enrollment-hub__intro,
  .enrollment-hub__layout,
  .support-chat__identity-grid {
    grid-template-columns: 1fr;
  }

  .enrollment-hub__intro--compact {
    gap: 10px;
  }

  .enrollment-hub__actions {
    width: 100%;
  }

  .enrollment-hub__top-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .enrollment-chat-teaser {
    max-width: none;
  }

  .enrollment-hub__cards {
    grid-template-columns: 1fr;
  }

  .floating-support {
    right: 16px;
    bottom: 16px;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .floating-matrix-back {
    left: 12px;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .shell-logout {
    top: 12px;
    right: 12px;
  }

  .admin-chart-grid,
  .admin-person-grid,
  .admin-access-grid-list,
  .admin-homework-item__grid,
  .admin-final-grid {
    grid-template-columns: 1fr;
  }

  .admin-group__summary,
  .admin-subgroup__summary,
  .admin-section-heading,
  .admin-person-card__head,
  .admin-access-card__head,
  .admin-homework-item__head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .topline__actions {
    padding-right: 0;
  }

  .admin-pills {
    justify-content: flex-start;
  }

  .admin-homework-item__meta {
    justify-items: start;
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .matrix-grid,
  .homework-hub-grid,
  .route-topic-grid,
  .route-final-intro,
  .search-grid,
  .term-grid,
  .law-grid,
  .case-grid,
  .game-card,
  .homework-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-widget {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tile-grid--forms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-card {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

  .route-section {
    padding: 20px;
  }

  .route-section__head {
    display: grid;
  }
}

@media (max-width: 720px) {
  .floating-support {
    right: 10px;
    bottom: 10px;
  }

  .floating-support__panel {
    width: min(280px, calc(100vw - 20px));
  }

  .floating-support__toggle {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.95rem;
  }

  .login-panel {
    padding: 20px 14px;
  }

  .hero-header {
    width: 96px;
    height: 96px;
    padding: 12px;
  }

  .title-row {
    gap: 8px;
    align-items: center;
    flex-direction: column;
  }

  .title-row h1 {
    text-align: center;
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 0.95;
  }

  .screen-recommendation {
    padding: 14px;
    border-radius: 16px;
  }

  .screen-recommendation strong {
    font-size: 0.94rem;
  }

  .screen-recommendation p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .subtitle {
    padding: 14px 16px;
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .subtitle-modules {
    gap: 8px;
  }

  .subtitle-module {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .methodology-intro {
    gap: 18px;
    margin-bottom: 26px;
  }

  .subtitle--compact {
    padding: 13px 14px;
  }

  .subtitle--compact strong {
    white-space: normal;
    font-size: 0.98rem;
  }

  .enrollment-hub__inline {
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .methodology-card {
    padding: 16px;
    border-radius: 18px;
  }

  .methodology-card__title {
    font-size: 1rem;
    line-height: 1.25;
  }

  .methodology-card__text,
  .methodology-note,
  .profile-box span,
  .legal-box p,
  .cookie-banner__copy p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .methodology-tag {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
  }

  .methodology-note {
    padding: 18px 16px;
    font-size: 0.96rem;
  }

  .portal-entry-actions,
  .portal-entry-button,
  .enrollment-hub__action {
    width: 100%;
  }

  .enrollment-hub__intro,
  .enrollment-price-card {
    padding: 18px 16px;
  }

  .enrollment-hub__title {
    font-size: 1.28rem;
  }

  .enrollment-price-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-grid,
  .field-grid,
  .portal-entry-actions,
  .login-actions,
  .methodology-grid,
  .methodology-grid--landing,
  .toolbar,
  .stats-grid,
  .homework-meta,
  .route-final-intro,
  .image-panel,
  .video-panel,
  .game-card,
  .matrix-grid,
  .homework-hub-grid,
  .route-topic-grid,
  .search-grid,
  .block-grid,
  .term-grid,
  .law-grid,
  .case-grid,
  .flow-widget {
    grid-template-columns: 1fr;
  }

  .tile-grid--forms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topline {
    display: grid;
  }

  .route-section__head {
    flex-direction: column;
  }

  .route-section {
    padding: 18px 16px;
    border-radius: 24px;
  }

  .topic-card--route,
  .topic-card--helper {
    min-height: 300px;
  }

  .topic-card--route h3,
  .topic-card--helper h3,
  .topic-card--route > .muted,
  .topic-card--helper > .muted {
    min-height: 0;
  }

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

  .sidebar-search__row {
    grid-template-columns: 1fr;
  }

  .toolbar__search,
  .toolbar__actions {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 18px 12px 108px;
  }

  .shell-logout {
    display: none;
  }

  .sidebar > .danger-button[data-action="logout"] {
    width: 100%;
    justify-content: center;
  }

  .legal-box {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .legal-box strong {
    margin-bottom: 12px;
    font-size: 1.28rem;
    line-height: 1.1;
  }

  .profile-box {
    padding: 14px;
  }

  .floating-matrix-back {
    top: auto;
    bottom: 18px;
    left: 12px;
    min-height: 52px;
    max-width: none;
    padding: 12px 16px;
    font-size: 0.96rem;
    transform: none;
  }

  .topic-hero,
  .panel,
  .block-card,
  .quiz-card {
    padding: 14px;
  }

  .compare-grid,
  .decision-map,
  .timeline-widget,
  .tile-grid,
  .popup-buttons {
    grid-template-columns: 1fr;
  }

  .popup-buttons {
    display: grid;
  }

  .popup-buttons .ghost-button,
  .popup-buttons button,
  .popup-buttons a.ghost-button,
  .tile-card__button {
    width: 100%;
  }

  .content-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content-table {
    min-width: 540px;
  }
}

/* Global prikolka.camp theme refresh */
:root {
  --space: #fff8ea;
  --space-2: #fffdf5;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-2: rgba(255, 251, 243, 0.94);
  --line: rgba(101, 166, 55, 0.22);
  --line-strong: rgba(255, 136, 31, 0.34);
  --text: #27352a;
  --muted: #61715a;
  --muted-2: #85917e;
  --indigo: #ff7f1f;
  --indigo-2: #ef6800;
  --gold: #ffc940;
  --gold-2: #f0b324;
  --rose: #ff9f45;
  --mint: #9be539;
  --sky: #8dd83f;
  --danger: #cf6a42;
  --ok: #4ea95e;
  --card: rgba(255, 255, 255, 0.92);
  --shadow: 0 18px 42px rgba(151, 126, 54, 0.14);
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 201, 64, 0.26), transparent 30%),
    radial-gradient(circle at top right, rgba(149, 226, 61, 0.16), transparent 24%),
    linear-gradient(155deg, #fffdf6, #f8fde9 50%, #fff7ea);
}

body::before {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 145, 41, 0.16), transparent 22%),
    radial-gradient(circle at 78% 14%, rgba(255, 207, 74, 0.16), transparent 22%),
    radial-gradient(circle at 68% 62%, rgba(133, 215, 75, 0.12), transparent 20%),
    radial-gradient(circle at 28% 78%, rgba(206, 178, 244, 0.12), transparent 24%),
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.4), transparent 18%);
}

.shell--topic-open::before {
  background: linear-gradient(145deg, rgba(255, 252, 242, 0.97), rgba(247, 253, 236, 0.95) 46%, rgba(255, 246, 229, 0.96));
}

.sidebar {
  border-right: 1px solid rgba(110, 176, 60, 0.2);
  background: rgba(255, 251, 241, 0.94);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.75);
}

.brand {
  gap: 14px;
  margin-bottom: 26px;
}

.brand-badge {
  width: 88px;
  min-width: 88px;
  height: 88px;
  padding: 10px;
  border: 1px solid rgba(255, 134, 27, 0.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 241, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 28px rgba(184, 151, 56, 0.12);
}

.brand-logo--camp {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(252, 255, 245, 0.96));
  border: 1px solid rgba(155, 229, 57, 0.24);
}

.brand-text strong {
  color: #284126;
  font-size: 2.2rem;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}

.brand-text small {
  display: none;
}

.profile-box {
  border-color: rgba(111, 176, 64, 0.18);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(177, 151, 64, 0.08);
}

.profile-box strong {
  color: var(--text);
}

.profile-box span {
  color: var(--muted);
}

.profile-box--protected {
  border-color: rgba(255, 139, 37, 0.26);
  background: linear-gradient(135deg, rgba(255, 243, 214, 0.88), rgba(240, 255, 226, 0.9));
}

.profile-box--protected strong,
.sidebar-search__label,
.legal-box strong {
  color: #d6770e;
}

.sidebar-search input {
  background: rgba(255, 255, 255, 0.94);
}

.nav-button {
  color: #526450;
  font-weight: 600;
}

.nav-button.active,
.nav-button:hover {
  color: var(--text);
  background: linear-gradient(135deg, rgba(227, 255, 205, 0.92), rgba(255, 247, 224, 0.94));
}

.legal-box {
  border-color: rgba(255, 157, 52, 0.2);
  background: linear-gradient(145deg, rgba(255, 248, 234, 0.95), rgba(243, 255, 233, 0.92));
  box-shadow: 0 16px 34px rgba(176, 148, 58, 0.1);
}

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

.methodology-card,
.methodology-card--violet,
.methodology-card--blue,
.methodology-card--gold,
.methodology-card--teal {
  color: var(--text);
  box-shadow: 0 16px 34px rgba(167, 144, 69, 0.12);
}

.methodology-card--violet {
  background: linear-gradient(145deg, #f6efff, #fff8f2);
}

.methodology-card--blue {
  background: linear-gradient(145deg, #eef8ff, #f3fff3);
}

.methodology-card--gold {
  background: linear-gradient(145deg, #fff4d9, #fff9ef);
}

.methodology-card--teal {
  background: linear-gradient(145deg, #eefce9, #f4fff8);
}

.methodology-card__eyebrow,
.methodology-card__title,
.methodology-card__text,
.methodology-note,
.route-section__head h3,
.route-section__head .muted,
.topic-card--route h3,
.topic-card--helper h3,
.topic-card--route > .muted,
.topic-card--helper > .muted,
.topic-hero p,
.topic-infographic-card__meta strong,
.topic-infographic-card__meta p,
.master-access-modal__lead,
.master-access-modal__card h3,
.master-access-modal__card p,
.master-access-modal__metric span,
.route-final-intro__card strong,
.route-final-intro__card .muted,
.master-guide__summary h3,
.master-guide__summary p {
  color: var(--text);
}

.methodology-card__text,
.methodology-note,
.route-section__head .muted,
.topic-card--route > .muted,
.topic-card--helper > .muted,
.topic-hero p,
.topic-infographic-card__meta p,
.master-access-modal__lead,
.master-access-modal__card p,
.master-access-modal__metric span,
.route-final-intro__card .muted,
.master-guide__summary p {
  color: var(--muted);
}

.route-section {
  border-width: 1px;
  box-shadow: 0 18px 36px rgba(183, 156, 70, 0.12);
  backdrop-filter: none;
}

.route-section--tone-1 {
  background: linear-gradient(145deg, #fff0f5, #fffaf2);
  border-color: rgba(243, 170, 190, 0.4);
}

.route-section--tone-2 {
  background: linear-gradient(145deg, #f4efff, #fffaf1);
  border-color: rgba(196, 177, 255, 0.42);
}

.route-section--tone-3 {
  background: linear-gradient(145deg, #fff7da, #fffdf1);
  border-color: rgba(241, 204, 109, 0.4);
}

.route-section--tone-4 {
  background: linear-gradient(145deg, #ecfce5, #f8fff0);
  border-color: rgba(159, 220, 113, 0.42);
}

.route-section--tone-5 {
  background: linear-gradient(145deg, #fff6e7, #fffaf0);
  border-color: rgba(232, 184, 122, 0.4);
}

.route-section--tone-6 {
  background: linear-gradient(145deg, #f7efff, #fff8f4);
  border-color: rgba(212, 171, 255, 0.4);
}

.route-section--tone-7 {
  background: linear-gradient(145deg, #fff0ed, #fff9f5);
  border-color: rgba(255, 183, 159, 0.42);
}

.route-section--tone-8 {
  background: linear-gradient(145deg, #fff2df, #fffaf2);
  border-color: rgba(255, 170, 110, 0.42);
}

.route-section--tone-9,
.route-section--final {
  background: linear-gradient(145deg, #f1fde6, #fff7e4);
  border-color: rgba(184, 216, 95, 0.42);
  box-shadow: 0 18px 36px rgba(183, 156, 70, 0.14);
}

.route-final-intro__card,
.topic-card--helper,
.topic-card--homework,
.topic-card--helper-emergency,
.topic-card--helper-assessment,
.topic-card--helper-training {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

.topic-card,
.topic-card--route,
.topic-card--helper {
  border-color: rgba(110, 176, 60, 0.18);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 28px rgba(177, 151, 64, 0.1);
}

.topic-card--homework {
  border-width: 1px;
  border-color: rgba(255, 174, 64, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 221, 147, 0.28), transparent 38%),
    linear-gradient(145deg, #fff8ea, #f2ffe9);
  box-shadow: 0 14px 28px rgba(177, 151, 64, 0.12);
}

.topic-card--homework::before {
  background: linear-gradient(90deg, rgba(255, 143, 33, 0.92), rgba(255, 209, 79, 0.86), rgba(146, 221, 66, 0.82));
}

.topic-card--homework h3,
.topic-card--homework > .muted,
.topic-card--homework .tag,
.topic-card--homework .action-button--training {
  color: var(--text);
}

.topic-card--homework .tag,
.topic-card--homework .action-button--training {
  border-color: rgba(255, 177, 68, 0.2);
  background: rgba(255, 255, 255, 0.74);
}

.topic-card--demo {
  background: linear-gradient(145deg, #fff7d9, #fffdf0);
}

.topic-card--completed {
  background: linear-gradient(145deg, #edffe3, #fbfff5);
}

.topic-card--completed h3,
.topic-card--completed .muted {
  color: var(--text);
}

.topic-card--locked {
  background: linear-gradient(145deg, #f6f1ea, #fffaf4);
}

.topic-number {
  color: #22331f;
  background: linear-gradient(135deg, #ffd54d, #ffb24b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 18px rgba(255, 173, 67, 0.16);
}

.badge,
.badge--route-id,
.tag {
  color: #536651;
  border-color: rgba(111, 176, 64, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.topic-hero {
  background: linear-gradient(145deg, rgba(255, 240, 209, 0.84), rgba(238, 255, 227, 0.9));
  box-shadow: 0 12px 30px rgba(187, 157, 62, 0.12);
}

.topic-infographic-card {
  border-color: rgba(255, 170, 67, 0.2);
  background: linear-gradient(145deg, rgba(255, 250, 239, 0.96), rgba(244, 255, 236, 0.96));
}

.topic-infographic-card__preview,
.topic-infographic-card__preview img {
  background: rgba(255, 255, 255, 0.98);
}

.block-card {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(177, 151, 64, 0.12);
}

.block-card::before {
  background: linear-gradient(90deg, #ff8d21, #ffd250, #97e23a, #d2b7ff);
  opacity: 0.92;
}

.block-card:nth-child(4n + 1) {
  border-color: rgba(255, 171, 74, 0.32);
  background: linear-gradient(145deg, #fff6e7, #fffdf6);
}

.block-card:nth-child(4n + 2) {
  border-color: rgba(155, 220, 94, 0.34);
  background: linear-gradient(145deg, #eefce7, #fbfff8);
}

.block-card:nth-child(4n + 3) {
  border-color: rgba(209, 184, 255, 0.34);
  background: linear-gradient(145deg, #f6efff, #fffaf5);
}

.block-card:nth-child(4n) {
  border-color: rgba(245, 210, 117, 0.34);
  background: linear-gradient(145deg, #fff7de, #fffdf3);
}

.block-card p,
.block-card li,
.block-card td,
.block-card th,
.panel p,
.panel li,
.info-widget p,
.checklist-widget span,
.law-card p,
.case-card p,
.flow-step p,
.compare-column li,
.timeline-step p,
.decision-node p {
  color: var(--muted);
}

.block-card > .badges .badge:first-child,
.info-widget strong,
.checklist-widget strong,
.learning-guide__summary strong,
.master-access-modal__metric strong {
  color: #d6770e;
  background: rgba(255, 244, 214, 0.72);
}

.info-widget,
.checklist-widget,
.law-card,
.flow-step,
.accordion-widget details,
.homework-widget,
.learning-guide,
.panel--homework-guide {
  background: rgba(255, 255, 255, 0.72);
}

.homework-widget,
.learning-guide,
.panel--homework-guide {
  border-color: rgba(255, 171, 74, 0.22);
}

.master-guide__summary,
.master-access-modal__card,
.master-access-modal__card--violet,
.master-access-modal__card--blue,
.master-access-modal__card--gold,
.master-access-modal__card--plum,
.master-access-modal__card--teal,
.master-access-modal__card--indigo,
.master-access-modal__card--rose {
  border-color: rgba(110, 176, 60, 0.18);
  background: linear-gradient(145deg, rgba(255, 251, 241, 0.98), rgba(243, 255, 234, 0.95));
  box-shadow: 0 16px 32px rgba(176, 148, 58, 0.12);
}

.master-guide__status {
  border-color: rgba(255, 169, 60, 0.24);
  color: #875000;
  background: rgba(255, 236, 182, 0.78);
}

.master-guide__status--ready {
  border-color: rgba(111, 176, 64, 0.26);
  color: #2d682c;
  background: rgba(219, 255, 208, 0.86);
}

.master-guide__details-button,
.floating-matrix-back,
.ghost-button,
.secondary-button,
.action-button,
.action-button--repeat,
.action-button--saved,
.action-button--done,
.action-button--demo,
.action-button--emergency,
.action-button--training,
.action-button--preview,
.action-button--locked,
.action-button--planned {
  color: var(--text);
  border-color: rgba(111, 176, 64, 0.18);
  background: linear-gradient(135deg, rgba(241, 255, 230, 0.94), rgba(255, 250, 236, 0.95));
  box-shadow: none;
}

.primary-button,
.portal-entry-button,
.action-button--open,
.complete-button,
.guest-button strong + span,
.floating-support__toggle {
  box-shadow: 0 14px 28px rgba(255, 139, 41, 0.18);
}

.primary-button,
.portal-entry-button,
.action-button--open,
.complete-button,
.danger-button[data-action="logout"],
.shell-logout {
  color: #fffdf7;
  background: linear-gradient(135deg, #ff8e24, #f36e17);
}

.secondary-button:hover,
.ghost-button:hover,
.master-guide__details-button:hover,
.floating-matrix-back:hover,
.action-button:hover,
.action-button--repeat:hover,
.action-button--training:hover,
.action-button--preview:hover,
.action-button--planned:hover {
  background: linear-gradient(135deg, rgba(233, 255, 216, 0.98), rgba(255, 245, 222, 0.98));
}

.primary-button:hover,
.portal-entry-button:hover,
.action-button--open:hover,
.complete-button:hover,
.danger-button[data-action="logout"]:hover,
.shell-logout:hover {
  background: linear-gradient(135deg, #ff9b36, #f47d25);
}

.guest-button,
.admin-link,
.modal__body,
.panel,
.admin-card,
.quiz-card,
.term-card,
.stat-card {
  background: rgba(255, 255, 255, 0.92);
}

.guest-button,
.admin-link {
  border-color: rgba(111, 176, 64, 0.18);
  color: var(--text);
}

.admin-link:hover,
.guest-button:hover,
.guest-button:focus-visible {
  background: linear-gradient(145deg, #eefce7, #fff9ee);
}

.floating-support__toggle {
  color: #224025;
  background: linear-gradient(135deg, #bff58d, #8fe45c);
}

.floating-support__panel {
  background: rgba(255, 255, 255, 0.97);
}

.badge.required,
.badge.recommended,
.badge.demo,
.badge.locked,
.badge.done,
.badge--status-success,
.badge--status-warn {
  color: #536651;
  border-color: rgba(111, 176, 64, 0.18);
  background: rgba(255, 255, 255, 0.72);
}

.topic-card--completed .progress,
.topic-card--locked .progress {
  background: rgba(111, 176, 64, 0.12);
}

.topic-card--completed .progress span,
.topic-card--locked .progress span {
  background: linear-gradient(90deg, rgba(255, 143, 33, 0.72), rgba(154, 226, 69, 0.74));
}

.modal__body {
  border: 1px solid rgba(111, 176, 64, 0.16);
  box-shadow: 0 24px 44px rgba(158, 133, 56, 0.16);
}

input,
select,
textarea {
  color: var(--text);
  border-color: rgba(111, 176, 64, 0.18);
  background: rgba(255, 255, 255, 0.96);
}

::placeholder {
  color: #97a08e;
}

@media (max-width: 720px) {
  .brand-badge {
    width: 76px;
    min-width: 76px;
    height: 76px;
  }

  .brand-text strong {
    font-size: 1.7rem;
  }
}

/* Final light-theme enforcement across the whole course */
.stats-grid .stat-card,
.stats-grid .stat-card:nth-child(1),
.stats-grid .stat-card:nth-child(2),
.stats-grid .stat-card:nth-child(3),
.stats-grid .stat-card:nth-child(4),
.stats-grid .stat-card:nth-child(5),
.stats-grid .stat-card:nth-child(6),
.stats-grid .stat-card:nth-child(7),
.stats-grid .stat-card:nth-child(8),
.admin-summary-card,
.admin-matrix-section,
.admin-group,
.admin-subgroup,
.admin-person-card,
.admin-access-card,
.admin-homework-item,
.admin-final-card,
.admin-chart-card,
.admin-report-card,
.search-summary,
.listener-guide__summary,
.listener-access-modal__card,
.listener-access-modal__card--violet,
.listener-access-modal__card--blue,
.listener-access-modal__card--gold,
.listener-access-modal__card--plum,
.listener-access-modal__card--teal,
.listener-access-modal__card--indigo,
.listener-access-modal__card--rose,
.tile-card,
.flip-card__face,
.law-card,
.case-card,
.game-card,
.image-panel,
.video-panel,
.guest-preview-panel,
.support-intro-card,
.support-message,
.cookie-banner,
.policy-summary {
  color: var(--text);
  border-color: rgba(111, 176, 64, 0.18);
  background: linear-gradient(145deg, rgba(255, 250, 240, 0.98), rgba(243, 255, 233, 0.95));
  box-shadow: 0 14px 30px rgba(177, 151, 64, 0.1);
}

.stats-grid .stat-card:nth-child(2n) {
  background: linear-gradient(145deg, #eefce7, #fffcf2);
}

.stats-grid .stat-card:nth-child(3n) {
  background: linear-gradient(145deg, #f8f0ff, #fffbf2);
}

.stats-grid .stat-card:nth-child(4n) {
  background: linear-gradient(145deg, #fff5df, #f4ffec);
}

.stat-card,
.stat-card strong,
.stat-card span,
.admin-summary-card strong,
.admin-summary-card span,
.admin-matrix-section strong,
.admin-matrix-section span,
.admin-group__summary strong,
.admin-group__summary span,
.admin-subgroup__summary strong,
.admin-subgroup__summary span,
.admin-person-card strong,
.admin-person-card span,
.admin-access-card strong,
.admin-access-card span,
.admin-homework-item strong,
.admin-homework-item span,
.admin-final-card strong,
.admin-final-card span,
.tile-card h4,
.tile-card p,
.tile-card__label,
.law-card h4,
.law-card p,
.case-card h4,
.case-card p,
.game-card h4,
.game-card p,
.image-panel p,
.video-panel p,
.listener-guide__summary h3,
.listener-guide__summary p,
.listener-access-modal__intro h3,
.listener-access-modal__card h3,
.listener-access-modal__card p,
.listener-access-modal__card li,
.support-intro-card p,
.support-message p,
.guest-preview-panel p,
.cookie-banner__copy p,
.policy-summary p {
  color: var(--text);
}

.stat-card .muted,
.admin-summary-card .muted,
.admin-matrix-section .muted,
.admin-group__summary span,
.admin-subgroup__summary span,
.admin-person-card span,
.admin-access-card span,
.admin-homework-item span,
.admin-final-card span,
.tile-card p,
.law-card p,
.case-card p,
.game-card p,
.image-panel p,
.video-panel p,
.listener-guide__summary p,
.listener-access-modal__card p,
.listener-access-modal__card li,
.support-intro-card p,
.support-message p,
.guest-preview-panel p,
.cookie-banner__copy p,
.policy-summary p {
  color: var(--muted);
}

.admin-pill,
.tile-card__button,
.listener-guide__details-button,
.admin-action-button,
.admin-action-button--master,
.admin-action-button--listener,
.admin-action-button--admin,
.admin-action-button--export,
.admin-action-button--export-main,
.admin-danger-button,
.topline__actions .ghost-button,
.topline__actions .primary-button,
.topline__actions .danger-button,
.popup-buttons button,
.popup-buttons .ghost-button,
.popup-buttons a.ghost-button,
.answer-button,
.tab-button,
.complete-button,
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.action-button,
.action-button--open,
.action-button--repeat,
.action-button--saved,
.action-button--done,
.action-button--demo,
.action-button--emergency,
.action-button--training,
.action-button--preview,
.action-button--locked,
.action-button--planned,
.portal-entry-button,
.admin-link,
.guest-button,
.floating-matrix-back,
.floating-support__toggle,
.support-chip,
.shell-logout {
  color: var(--text);
  border-color: rgba(111, 176, 64, 0.18);
  background: linear-gradient(135deg, rgba(243, 255, 232, 0.98), rgba(255, 248, 231, 0.98));
  box-shadow: 0 10px 22px rgba(177, 151, 64, 0.08);
}

.guest-button strong,
.guest-button span,
.admin-link,
.listener-guide__details-button,
.tile-card__button,
.topline__actions .ghost-button,
.topline__actions .primary-button,
.topline__actions .danger-button,
.floating-support__toggle,
.shell-logout {
  color: var(--text);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.action-button:hover,
.action-button--open:hover,
.action-button--repeat:hover,
.action-button--saved:hover,
.action-button--done:hover,
.action-button--demo:hover,
.action-button--emergency:hover,
.action-button--training:hover,
.action-button--preview:hover,
.action-button--locked:hover,
.action-button--planned:hover,
.portal-entry-button:hover,
.admin-link:hover,
.guest-button:hover,
.listener-guide__details-button:hover,
.tile-card__button:hover,
.floating-matrix-back:hover,
.floating-support__toggle:hover,
.shell-logout:hover {
  color: var(--text);
  background: linear-gradient(135deg, rgba(235, 255, 219, 0.98), rgba(255, 243, 214, 0.98));
}

.progress,
.admin-progress-line,
.admin-chart-track,
.master-access-modal__progressbar {
  background: rgba(111, 176, 64, 0.14);
}

.progress span,
.admin-progress-line span,
.admin-chart-track span,
.master-access-modal__progressbar span {
  background: linear-gradient(90deg, rgba(255, 144, 33, 0.86), rgba(155, 228, 67, 0.86));
}

.master-access-modal__summary-grid div,
.admin-progress-matrix__item,
.admin-chart-row,
.homework-widget,
.learning-guide,
.panel--homework-guide,
.info-widget,
.checklist-widget,
.flow-step,
.accordion-widget details,
.compare-column,
.timeline-step,
.decision-node {
  border-color: rgba(111, 176, 64, 0.18);
  background: rgba(255, 255, 255, 0.76);
}

.master-access-modal__summary-grid span,
.admin-progress-matrix__meta span,
.admin-chart-row__meta,
.homework-widget p,
.learning-guide__summary p,
.info-widget p,
.checklist-widget span,
.flow-step p,
.compare-column li,
.timeline-step p,
.decision-node p {
  color: var(--muted);
}

/* Button color system */
.action-button--open {
  color: #3e2a0f;
  border-color: rgba(255, 157, 47, 0.28);
  background: linear-gradient(135deg, rgba(255, 228, 177, 0.98), rgba(255, 244, 215, 0.98));
  box-shadow: 0 10px 22px rgba(255, 171, 66, 0.14);
}

.action-button--open:hover {
  color: #3e2a0f;
  background: linear-gradient(135deg, rgba(255, 220, 154, 0.98), rgba(255, 239, 198, 0.98));
}

.action-button--repeat,
.action-button--preview {
  color: #243451;
  border-color: rgba(131, 174, 241, 0.26);
  background: linear-gradient(135deg, rgba(222, 237, 255, 0.98), rgba(243, 248, 255, 0.98));
  box-shadow: 0 10px 22px rgba(114, 155, 223, 0.12);
}

.action-button--repeat:hover,
.action-button--preview:hover {
  color: #243451;
  background: linear-gradient(135deg, rgba(209, 228, 255, 0.98), rgba(236, 244, 255, 0.98));
}

.complete-button,
.action-button--training {
  color: #22391f;
  border-color: rgba(125, 204, 102, 0.28);
  background: linear-gradient(135deg, rgba(215, 249, 192, 0.98), rgba(240, 255, 225, 0.98));
  box-shadow: 0 12px 24px rgba(143, 210, 93, 0.14);
}

.complete-button:hover,
.action-button--training:hover {
  color: #22391f;
  background: linear-gradient(135deg, rgba(202, 243, 174, 0.98), rgba(232, 252, 213, 0.98));
}

.complete-button--done,
.action-button--done,
.action-button--saved {
  color: #ffffff;
  border-color: rgba(88, 141, 226, 0.26);
  background: linear-gradient(135deg, rgba(113, 164, 238, 0.98), rgba(76, 132, 220, 0.98));
  box-shadow: 0 12px 24px rgba(85, 138, 221, 0.18);
}

.complete-button--done:hover,
.action-button--done:hover,
.action-button--saved:hover {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(102, 155, 233, 0.98), rgba(66, 122, 212, 0.98));
}

.floating-support__toggle,
.action-button--demo,
a.action-button--demo {
  color: #1f4421;
  border-color: rgba(116, 201, 98, 0.28);
  background: linear-gradient(135deg, rgba(198, 247, 169, 0.98), rgba(226, 255, 204, 0.98));
  box-shadow: 0 12px 24px rgba(122, 202, 94, 0.15);
}

.floating-support__toggle:hover,
.action-button--demo:hover,
a.action-button--demo:hover {
  color: #1f4421;
  background: linear-gradient(135deg, rgba(185, 240, 154, 0.98), rgba(216, 252, 191, 0.98));
}

.floating-matrix-back,
button[data-action="return-menu"],
button[data-action="back"] {
  color: #4a2d10;
  border-color: rgba(255, 156, 50, 0.28);
  background: linear-gradient(135deg, rgba(255, 214, 150, 0.98), rgba(255, 238, 200, 0.98));
  box-shadow: 0 12px 24px rgba(255, 171, 66, 0.16);
}

.floating-matrix-back:hover,
button[data-action="return-menu"]:hover,
button[data-action="back"]:hover {
  color: #4a2d10;
  background: linear-gradient(135deg, rgba(255, 204, 129, 0.98), rgba(255, 231, 184, 0.98));
}

button[data-submit-quiz],
button[data-final-test-start],
button[data-final-case-next],
button[data-final-test-next],
button[data-final-test-next-section] {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 1rem;
  font-weight: 900;
  color: #17381d;
  border-color: rgba(93, 184, 89, 0.3);
  background: linear-gradient(135deg, rgba(168, 236, 126, 0.98), rgba(213, 251, 181, 0.98));
  box-shadow: 0 14px 28px rgba(108, 189, 84, 0.18);
}

button[data-submit-quiz]:hover,
button[data-final-test-start]:hover,
button[data-final-case-next]:hover,
button[data-final-test-next]:hover,
button[data-final-test-next-section]:hover {
  color: #17381d;
  background: linear-gradient(135deg, rgba(154, 229, 109, 0.98), rgba(201, 246, 166, 0.98));
}

.methodology-tag,
.subtitle-module,
.badge,
.tag,
.block-tag,
.pill,
.admin-pill,
.badge.required,
.badge.recommended,
.badge.demo,
.badge.locked,
.badge.done,
.badge--status-success,
.badge--status-warn {
  color: var(--text) !important;
  border-color: rgba(111, 176, 64, 0.18) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.methodology-tag,
.subtitle-module {
  box-shadow: none;
}

.methodology-note,
.methodology-card__text,
.subtitle strong,
.subtitle p {
  color: var(--muted) !important;
}

/* Ergonomic readability pass for Prikolka */
.login-panel {
  width: min(100%, 1120px);
  padding: clamp(22px, 4vw, 46px);
  background: rgba(255, 255, 255, 0.96);
}

.title-row h1 {
  max-width: 100%;
  color: #203422;
  font-size: clamp(3.3rem, 9vw, 5.9rem);
  line-height: 0.9;
}

.subtitle-block {
  gap: 12px;
  margin: 10px auto 22px;
}

.subtitle,
.subtitle--compact {
  max-width: 880px;
  border-color: rgba(123, 180, 78, 0.28);
  color: #26382a;
  background: linear-gradient(135deg, rgba(245, 255, 236, 0.98), rgba(255, 248, 232, 0.98));
  box-shadow: 0 16px 34px rgba(160, 132, 52, 0.12);
}

.subtitle .methodology-card__eyebrow {
  color: #be690f !important;
  font-size: 0.82rem;
}

.subtitle--compact strong,
.subtitle strong,
.subtitle p {
  color: #26382a !important;
  white-space: normal;
}

.subtitle--compact strong {
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.34;
}

.subtitle-module,
.methodology-tag {
  min-height: 38px;
  color: #26382a !important;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.9) !important;
}

.methodology-card {
  padding: clamp(18px, 2.4vw, 28px);
}

.methodology-card__eyebrow {
  color: #be690f !important;
  font-size: 0.86rem;
}

.methodology-card__title {
  color: #223225 !important;
  font-size: clamp(1.2rem, 1.9vw, 1.62rem);
  line-height: 1.24;
}

.methodology-card__text {
  color: #4f674b !important;
  font-size: 1.02rem;
  line-height: 1.62;
}

.screen-recommendation,
.methodology-note {
  color: #324532;
  background: linear-gradient(135deg, rgba(255, 251, 238, 0.98), rgba(242, 255, 230, 0.98));
}

.portal-entry-actions--single {
  max-width: 520px;
}

.portal-entry-button,
.portal-entry-button--access {
  min-height: 68px;
  border-radius: 18px;
  color: #fffdf8 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ff8b20, #ef6b13) !important;
  box-shadow: 0 18px 36px rgba(239, 107, 19, 0.24);
}

.login-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 18px;
  margin-top: 28px;
}

.guest-button.login-action-card {
  min-height: 116px;
  padding: 20px 22px;
  border: 1px solid rgba(103, 174, 69, 0.34);
  background: linear-gradient(135deg, rgba(239, 255, 226, 0.98), rgba(255, 250, 236, 0.98)) !important;
  box-shadow: 0 14px 30px rgba(138, 171, 74, 0.12);
}

.guest-button.login-action-card strong {
  color: #213824;
  font-size: 1.22rem;
  font-weight: 900;
}

.guest-button.login-action-card span {
  max-width: 620px;
  color: #4b6148;
  font-size: 1rem;
}

.admin-link {
  justify-self: end;
  align-self: end;
  min-width: 220px;
  min-height: 52px;
  color: #31452f;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.92);
}

.brand {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.brand-badge {
  width: 74px;
  min-width: 74px;
  height: 74px;
  border-radius: 18px;
}

.brand-text {
  min-width: 0;
}

.brand-text strong {
  max-width: 100%;
  color: #203422;
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  line-height: 1.03;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.profile-box {
  padding: 16px;
  color: #243126;
}

.profile-box strong {
  font-size: 1.02rem;
  line-height: 1.25;
}

.profile-box span {
  color: #53694f;
  line-height: 1.38;
}

.nav-button {
  color: #4c6149;
  font-weight: 800;
}

.nav-button.active,
.nav-button:hover {
  color: #213824;
  background: linear-gradient(135deg, rgba(226, 255, 202, 0.98), rgba(255, 244, 216, 0.98));
}

.tab-button,
.chip,
.support-thread-button {
  color: #26382a !important;
  font-weight: 850;
}

.tab-button.active,
.chip.active,
.support-thread-button.active,
.admin-org-panel .tab-button.active {
  color: #1f321f !important;
  border-color: rgba(88, 156, 61, 0.34) !important;
  background: linear-gradient(135deg, #d9f8bb, #fff0bf) !important;
  box-shadow: 0 12px 24px rgba(145, 169, 69, 0.16);
}

.badge.done,
.badge--status-success {
  color: #1f4a27 !important;
  border-color: rgba(61, 144, 66, 0.32) !important;
  background: linear-gradient(135deg, #d9f8c7, #f4ffec) !important;
}

.badge--infographic {
  color: #5a3509 !important;
  border-color: rgba(255, 155, 38, 0.34) !important;
  background: linear-gradient(135deg, #ffe1a6, #fff7dd) !important;
}

.badge--status-warn,
.badge.required,
.badge.recommended,
.badge.demo,
.badge.locked {
  color: #3c4c38 !important;
}

.complete-button,
.complete-button--done,
.action-button--done,
.action-button--saved {
  min-height: 46px;
  color: #17381d !important;
  border-color: rgba(93, 170, 76, 0.34) !important;
  background: linear-gradient(135deg, #c9f39f, #f2ffe2) !important;
  box-shadow: 0 12px 24px rgba(112, 180, 78, 0.16);
}

.complete-button--done,
.action-button--done,
.action-button--saved {
  background: linear-gradient(135deg, #8edb6a, #dfffc9) !important;
}

.progress span,
.admin-progress-line span,
.admin-chart-track span,
.master-access-modal__progressbar span {
  background: linear-gradient(90deg, #ff8c20, #71bf44) !important;
}

.admin-progress-badge,
.topic-infographic-card__status {
  color: #17381d;
  border-color: rgba(93, 170, 76, 0.34);
  background: linear-gradient(135deg, #d8f8bd, #f6ffe9);
}

.cookie-banner {
  border-color: rgba(111, 176, 64, 0.24);
  background: linear-gradient(135deg, rgba(247, 255, 235, 0.98), rgba(255, 249, 231, 0.98)) !important;
  box-shadow: 0 18px 36px rgba(143, 121, 50, 0.16);
}

.cookie-banner__copy strong {
  color: #2c6f2f !important;
  font-weight: 900;
}

.cookie-banner__copy p {
  color: #4b6148 !important;
}

.cookie-banner__actions .ghost-button,
.cookie-banner__actions .primary-button {
  color: #243126 !important;
  font-weight: 900;
}

.stat-card,
.admin-card,
.panel,
.topic-card,
.admin-matrix-section,
.admin-person-card,
.admin-access-card {
  color: #243126;
}

@media (max-width: 920px) {
  .login-actions {
    grid-template-columns: 1fr;
  }

  .admin-link {
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    text-align: center;
  }
}

/* Final landing cleanup: readable hero, real entry buttons, stable spacing */
.login-panel {
  width: min(100%, 1120px);
  padding: clamp(42px, 5vw, 70px) clamp(24px, 4vw, 52px) clamp(38px, 4vw, 56px);
}

.hero-header {
  margin: 0 auto 34px;
}

.title-row {
  margin: 0 auto 18px;
}

.title-row h1 {
  max-width: 100%;
  font-size: clamp(3rem, 7.5vw, 5.4rem);
  line-height: 0.98;
  overflow: visible;
}

.subtitle-block {
  width: min(100%, 780px);
  margin: 18px auto 28px;
  padding: 18px 24px;
}

.portal-entry-actions--single {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 30px auto 18px;
}

.portal-entry-actions--single .portal-entry-button {
  width: 100%;
  min-height: 64px;
  justify-content: center;
}

.login-actions,
.login-actions--top {
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 620px);
  gap: 14px;
  align-items: stretch;
  margin: 22px auto 46px;
}

.guest-button.login-action-card {
  display: grid;
  width: 100%;
  min-height: 78px;
  padding: 18px 24px;
  border-radius: 18px;
  text-align: center;
  place-items: center;
  align-content: center;
}

.guest-button.login-action-card strong {
  font-size: 1.18rem;
  line-height: 1.2;
}

.guest-button.login-action-card span {
  max-width: 520px;
  font-size: 0.96rem;
  line-height: 1.38;
  text-align: center;
}

.admin-link {
  justify-self: center;
  align-self: center;
  width: min(100%, 260px);
  min-width: 0;
  min-height: 48px;
  padding: 12px 18px;
  text-align: center;
}

.recommendation-card {
  margin-top: 0;
}

.methodology-intro {
  gap: 24px;
  margin: 42px auto 28px;
}

.methodology-card {
  min-height: 0;
}

@media (max-width: 720px) {
  .login-panel {
    padding: 34px 18px 40px;
  }

  .title-row h1 {
    font-size: clamp(2.45rem, 14vw, 4.2rem);
  }

  .subtitle-block {
    padding: 16px 18px;
  }

  .login-actions,
  .login-actions--top {
    margin-bottom: 36px;
  }
}